Skip to content

Commit 353b6e4

Browse files
impelcryptoimpelcrypto
committed
fix: makes modal drawer bigger
1 parent dad14c6 commit 353b6e4

File tree

5 files changed

+120
-108
lines changed

5 files changed

+120
-108
lines changed

‎packages/Modals/index.ts

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
import { App, Plugin } from 'vue';
2-
import SimpleModal from './src/SimpleModal.vue';
3-
import ModalDrawer from './src/ModalDrawer.vue';
4-
import DefaultModal from './src/DefaultModal.vue';
5-
import { fadeDuration } from './src/index'
1+
import { App, Plugin } from "vue";
2+
import SimpleModal from "./src/SimpleModal.vue";
3+
import ModalDrawer from "./src/ModalDrawer.vue";
4+
import DefaultModal from "./src/DefaultModal.vue";
5+
import { fadeDuration } from "./src/index";
6+
import IconBackWithColor from "./src/IconBackWithColor.vue";
67

78
export const ModalsPlugin: Plugin = {
89
install(app: App) {
9-
app.component('astar-simple-modal', SimpleModal);
10-
app.component('astar-modal-drawer', ModalDrawer);
11-
app.component('astar-default-modal', DefaultModal);
10+
app.component("astar-simple-modal", SimpleModal);
11+
app.component("astar-modal-drawer", ModalDrawer);
12+
app.component("astar-default-modal", DefaultModal);
13+
app.component("astar-icon-back-with-color", IconBackWithColor);
1214
},
1315
};
1416

1517
export {
1618
SimpleModal,
1719
ModalDrawer,
1820
DefaultModal,
19-
fadeDuration
21+
fadeDuration,
22+
IconBackWithColor,
2023
};

‎packages/Modals/src/ModalDrawer.vue

+10-7
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,19 @@ export default defineComponent({
103103
z-index: 10;
104104
top: 104px;
105105
right: 0px;
106-
width: 544px;
106+
width: 100%;
107107
height: calc(100% - 104px);
108108
text-align: center;
109109
background: rgba(255, 255, 255, 0.5);
110110
box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.1);
111+
@media (min-width: $xs) {
112+
width: 375px;
113+
}
114+
@media (min-width: $sm) {
115+
width: 544px;
116+
}
111117
@media (min-width: $lg) {
118+
width: 928px;
112119
top: 96px;
113120
height: calc(100% - 96px);
114121
}
@@ -120,19 +127,15 @@ export default defineComponent({
120127
.modal-content {
121128
background-color: $gray-1;
122129
border: 0px solid transparent;
123-
padding: 24px 30px;
130+
padding: 32px 8px;
124131
width: 100% !important;
125132
height: 100%;
126133
overflow-y: auto;
127134
box-shadow: -2px 10px 10px 0px #9999;
128135
background: white;
129136
130-
@media (min-width: $xs) {
131-
width: 375px;
132-
}
133137
@media (min-width: $sm) {
134-
width: 544px;
135-
padding: 46px 40px !important;
138+
padding: 24px 30px;
136139
}
137140
}
138141

‎packages/export_type.ts

+73-78
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,8 @@ import {
44
RadioBtn,
55
SmallButton,
66
TextButton,
7-
} from './Buttons';
8-
import {
9-
ConnectionIndicator,
10-
Header
11-
} from './Header';
7+
} from "./Buttons";
8+
import { ConnectionIndicator, Header } from "./Header";
129
import {
1310
Icon3dots,
1411
IconAccountSample,
@@ -62,82 +59,80 @@ import {
6259
IconVert,
6360
IconWallet,
6461
IconYoutube,
65-
} from './Icons';
62+
} from "./Icons";
6663
import {
6764
DefaultModal,
6865
ModalDrawer,
69-
SimpleModal
70-
} from './Modals';
71-
import {
72-
Spinner
73-
} from './Spinner';
74-
import {
75-
Text
76-
} from './Text';
66+
SimpleModal,
67+
IconBackWithColor,
68+
} from "./Modals";
69+
import { Spinner } from "./Spinner";
70+
import { Text } from "./Text";
7771

7872
export interface GlobalComponents {
79-
'astar-button': typeof Button;
80-
'astar-irregular-button': typeof IrregularButton;
81-
'astar-radio-btn': typeof RadioBtn;
82-
'astar-small-button': typeof SmallButton;
83-
'astar-text-button': typeof TextButton;
84-
'astar-connection-indicator': typeof ConnectionIndicator;
85-
'astar-header': typeof Header;
86-
'astar-icon-3dots': typeof Icon3dots;
87-
'astar-icon-account-sample': typeof IconAccountSample;
88-
'astar-icon-arrow-left': typeof IconArrowLeft;
89-
'astar-icon-arrow-left-long': typeof IconArrowLeftLong;
90-
'astar-icon-arrow-right': typeof IconArrowRight;
91-
'astar-icon-arrow-right-long': typeof IconArrowRightLong;
92-
'astar-icon-assets': typeof IconAssets;
93-
'astar-icon-base': typeof IconBase;
94-
'astar-icon-bridge': typeof IconBridge;
95-
'astar-icon-circle-check': typeof IconCircleCheck;
96-
'astar-icon-close': typeof IconClose;
97-
'astar-icon-community': typeof IconCommunity;
98-
'astar-icon-copy': typeof IconCopy;
99-
'astar-icon-dapp-staking': typeof IconDappStaking;
100-
'astar-icon-dashboard': typeof IconDashboard;
101-
'astar-icon-desktop': typeof IconDesktop;
102-
'astar-icon-discord': typeof IconDiscord;
103-
'astar-icon-docs': typeof IconDocs;
104-
'astar-icon-document': typeof IconDocument;
105-
'astar-icon-ecosystem': typeof IconEcosystem;
106-
'astar-icon-expand': typeof IconExpand;
107-
'astar-icon-external-link': typeof IconExternalLink;
108-
'astar-icon-facebook': typeof IconFacebook;
109-
'astar-icon-forum': typeof IconForum;
110-
'astar-icon-github': typeof IconGithub;
111-
'astar-icon-group': typeof IconGroup;
112-
'astar-icon-geko': typeof IconHelp;
113-
'astar-icon-hide': typeof IconHide;
114-
'astar-icon-history': typeof IconHistory;
115-
'astar-icon-home': typeof IconHome;
116-
'astar-icon-instagram': typeof IconInstagram;
117-
'astar-icon-linkedin': typeof IconLinkedIn;
118-
'astar-icon-network': typeof IconNetwork;
119-
'astar-icon-outline-moon': typeof IconOutlineMoon;
120-
'astar-icon-outline-sun': typeof IconOutlineSun;
121-
'astar-icon-person': typeof IconPerson;
122-
'astar-icon-play': typeof IconPlay;
123-
'astar-icon-plus': typeof IconPlus;
124-
'astar-icon-reddit': typeof IconReddit;
125-
'astar-icon-search': typeof IconSearch;
126-
'astar-icon-side-nft': typeof IconSideNFT;
127-
'astar-icon-solid-selector': typeof IconSolidSelector;
128-
'astar-icon-star': typeof IconStar;
129-
'astar-icon-sync': typeof IconSync;
130-
'astar-icon-telegram': typeof IconTelegram;
131-
'astar-icon-transfer': typeof IconTransfer;
132-
'astar-icon-twitter': typeof IconTwitter;
133-
'astar-icon-unhide': typeof IconUnhide;
134-
'astar-icon-verified': typeof IconVerified;
135-
'astar-icon-vert': typeof IconVert;
136-
'astar-icon-wallet': typeof IconWallet;
137-
'astar-icon-youtube': typeof IconYoutube;
138-
'astar-default-modal': typeof DefaultModal;
139-
'astar-modal-drawer': typeof ModalDrawer;
140-
'astar-simple-modal': typeof SimpleModal;
141-
'astar-spinner': typeof Spinner;
142-
'astar-text': typeof Text;
73+
"astar-button": typeof Button;
74+
"astar-irregular-button": typeof IrregularButton;
75+
"astar-radio-btn": typeof RadioBtn;
76+
"astar-small-button": typeof SmallButton;
77+
"astar-text-button": typeof TextButton;
78+
"astar-connection-indicator": typeof ConnectionIndicator;
79+
"astar-header": typeof Header;
80+
"astar-icon-3dots": typeof Icon3dots;
81+
"astar-icon-account-sample": typeof IconAccountSample;
82+
"astar-icon-arrow-left": typeof IconArrowLeft;
83+
"astar-icon-arrow-left-long": typeof IconArrowLeftLong;
84+
"astar-icon-arrow-right": typeof IconArrowRight;
85+
"astar-icon-arrow-right-long": typeof IconArrowRightLong;
86+
"astar-icon-assets": typeof IconAssets;
87+
"astar-icon-base": typeof IconBase;
88+
"astar-icon-bridge": typeof IconBridge;
89+
"astar-icon-circle-check": typeof IconCircleCheck;
90+
"astar-icon-close": typeof IconClose;
91+
"astar-icon-community": typeof IconCommunity;
92+
"astar-icon-copy": typeof IconCopy;
93+
"astar-icon-dapp-staking": typeof IconDappStaking;
94+
"astar-icon-dashboard": typeof IconDashboard;
95+
"astar-icon-desktop": typeof IconDesktop;
96+
"astar-icon-discord": typeof IconDiscord;
97+
"astar-icon-docs": typeof IconDocs;
98+
"astar-icon-document": typeof IconDocument;
99+
"astar-icon-ecosystem": typeof IconEcosystem;
100+
"astar-icon-expand": typeof IconExpand;
101+
"astar-icon-external-link": typeof IconExternalLink;
102+
"astar-icon-facebook": typeof IconFacebook;
103+
"astar-icon-forum": typeof IconForum;
104+
"astar-icon-github": typeof IconGithub;
105+
"astar-icon-group": typeof IconGroup;
106+
"astar-icon-geko": typeof IconHelp;
107+
"astar-icon-hide": typeof IconHide;
108+
"astar-icon-history": typeof IconHistory;
109+
"astar-icon-home": typeof IconHome;
110+
"astar-icon-instagram": typeof IconInstagram;
111+
"astar-icon-linkedin": typeof IconLinkedIn;
112+
"astar-icon-network": typeof IconNetwork;
113+
"astar-icon-outline-moon": typeof IconOutlineMoon;
114+
"astar-icon-outline-sun": typeof IconOutlineSun;
115+
"astar-icon-person": typeof IconPerson;
116+
"astar-icon-play": typeof IconPlay;
117+
"astar-icon-plus": typeof IconPlus;
118+
"astar-icon-reddit": typeof IconReddit;
119+
"astar-icon-search": typeof IconSearch;
120+
"astar-icon-side-nft": typeof IconSideNFT;
121+
"astar-icon-solid-selector": typeof IconSolidSelector;
122+
"astar-icon-star": typeof IconStar;
123+
"astar-icon-sync": typeof IconSync;
124+
"astar-icon-telegram": typeof IconTelegram;
125+
"astar-icon-transfer": typeof IconTransfer;
126+
"astar-icon-twitter": typeof IconTwitter;
127+
"astar-icon-unhide": typeof IconUnhide;
128+
"astar-icon-verified": typeof IconVerified;
129+
"astar-icon-vert": typeof IconVert;
130+
"astar-icon-wallet": typeof IconWallet;
131+
"astar-icon-youtube": typeof IconYoutube;
132+
"astar-default-modal": typeof DefaultModal;
133+
"astar-modal-drawer": typeof ModalDrawer;
134+
"astar-simple-modal": typeof SimpleModal;
135+
"astar-spinner": typeof Spinner;
136+
"astar-text": typeof Text;
137+
"astar-icon-back-with-color": typeof IconBackWithColor;
143138
}

‎packages/index.ts

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-disable */
22

3-
import { App, Plugin } from 'vue';
3+
import { App, Plugin } from "vue";
44

5-
import { TextPlugin } from './Text';
6-
import { SpinnerPlugin } from './Spinner';
7-
import { ModalsPlugin } from './Modals';
8-
import { HeaderPlugin } from './Header';
9-
import { ButtonsPlugin } from './Buttons';
10-
import { IconsPlugin } from './Icons';
5+
import { TextPlugin } from "./Text";
6+
import { SpinnerPlugin } from "./Spinner";
7+
import { ModalsPlugin } from "./Modals";
8+
import { HeaderPlugin } from "./Header";
9+
import { ButtonsPlugin } from "./Buttons";
10+
import { IconsPlugin } from "./Icons";
1111

1212
const AstarUIPlugin: Plugin = {
1313
install(app: App) {
@@ -22,11 +22,11 @@ const AstarUIPlugin: Plugin = {
2222

2323
export default AstarUIPlugin;
2424

25-
export * from './Text'
26-
export * from './Spinner'
27-
export * from './Modals'
28-
export * from './Header'
29-
export * from './Buttons'
30-
export * from './Icons'
25+
export * from "./Text";
26+
export * from "./Spinner";
27+
export * from "./Modals";
28+
export * from "./Header";
29+
export * from "./Buttons";
30+
export * from "./Icons";
3131

32-
export * from './export_type'
32+
export * from "./export_type";

‎src/stories/Icons/IconBackWithColor.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import IconBackWithColor from "packages/Modals/src/IconBackWithColor.vue";
2+
3+
export default {
4+
title: 'Icons/IconBackWithColor',
5+
component: IconBackWithColor
6+
};
7+
8+
export const DefaultIcon = () => ({
9+
components: { IconBackWithColor },
10+
template: '<IconBackWithColor />',
11+
});

0 commit comments

Comments
 (0)