Skip to content

Commit

Permalink
fix: makes modal drawer bigger
Browse files Browse the repository at this point in the history
  • Loading branch information
impelcrypto committed Jan 18, 2024
1 parent dad14c6 commit 353b6e4
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 108 deletions.
21 changes: 12 additions & 9 deletions packages/Modals/index.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
import { App, Plugin } from 'vue';
import SimpleModal from './src/SimpleModal.vue';
import ModalDrawer from './src/ModalDrawer.vue';
import DefaultModal from './src/DefaultModal.vue';
import { fadeDuration } from './src/index'
import { App, Plugin } from "vue";
import SimpleModal from "./src/SimpleModal.vue";
import ModalDrawer from "./src/ModalDrawer.vue";
import DefaultModal from "./src/DefaultModal.vue";
import { fadeDuration } from "./src/index";
import IconBackWithColor from "./src/IconBackWithColor.vue";

export const ModalsPlugin: Plugin = {
install(app: App) {
app.component('astar-simple-modal', SimpleModal);
app.component('astar-modal-drawer', ModalDrawer);
app.component('astar-default-modal', DefaultModal);
app.component("astar-simple-modal", SimpleModal);
app.component("astar-modal-drawer", ModalDrawer);
app.component("astar-default-modal", DefaultModal);
app.component("astar-icon-back-with-color", IconBackWithColor);
},
};

export {
SimpleModal,
ModalDrawer,
DefaultModal,
fadeDuration
fadeDuration,
IconBackWithColor,
};
17 changes: 10 additions & 7 deletions packages/Modals/src/ModalDrawer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,19 @@ export default defineComponent({
z-index: 10;
top: 104px;
right: 0px;
width: 544px;
width: 100%;
height: calc(100% - 104px);
text-align: center;
background: rgba(255, 255, 255, 0.5);
box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.1);
@media (min-width: $xs) {
width: 375px;
}
@media (min-width: $sm) {
width: 544px;
}
@media (min-width: $lg) {
width: 928px;
top: 96px;
height: calc(100% - 96px);
}
Expand All @@ -120,19 +127,15 @@ export default defineComponent({
.modal-content {
background-color: $gray-1;
border: 0px solid transparent;
padding: 24px 30px;
padding: 32px 8px;
width: 100% !important;
height: 100%;
overflow-y: auto;
box-shadow: -2px 10px 10px 0px #9999;
background: white;
@media (min-width: $xs) {
width: 375px;
}
@media (min-width: $sm) {
width: 544px;
padding: 46px 40px !important;
padding: 24px 30px;
}
}
Expand Down
151 changes: 73 additions & 78 deletions packages/export_type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,8 @@ import {
RadioBtn,
SmallButton,
TextButton,
} from './Buttons';
import {
ConnectionIndicator,
Header
} from './Header';
} from "./Buttons";
import { ConnectionIndicator, Header } from "./Header";
import {
Icon3dots,
IconAccountSample,
Expand Down Expand Up @@ -62,82 +59,80 @@ import {
IconVert,
IconWallet,
IconYoutube,
} from './Icons';
} from "./Icons";
import {
DefaultModal,
ModalDrawer,
SimpleModal
} from './Modals';
import {
Spinner
} from './Spinner';
import {
Text
} from './Text';
SimpleModal,
IconBackWithColor,
} from "./Modals";
import { Spinner } from "./Spinner";
import { Text } from "./Text";

export interface GlobalComponents {
'astar-button': typeof Button;
'astar-irregular-button': typeof IrregularButton;
'astar-radio-btn': typeof RadioBtn;
'astar-small-button': typeof SmallButton;
'astar-text-button': typeof TextButton;
'astar-connection-indicator': typeof ConnectionIndicator;
'astar-header': typeof Header;
'astar-icon-3dots': typeof Icon3dots;
'astar-icon-account-sample': typeof IconAccountSample;
'astar-icon-arrow-left': typeof IconArrowLeft;
'astar-icon-arrow-left-long': typeof IconArrowLeftLong;
'astar-icon-arrow-right': typeof IconArrowRight;
'astar-icon-arrow-right-long': typeof IconArrowRightLong;
'astar-icon-assets': typeof IconAssets;
'astar-icon-base': typeof IconBase;
'astar-icon-bridge': typeof IconBridge;
'astar-icon-circle-check': typeof IconCircleCheck;
'astar-icon-close': typeof IconClose;
'astar-icon-community': typeof IconCommunity;
'astar-icon-copy': typeof IconCopy;
'astar-icon-dapp-staking': typeof IconDappStaking;
'astar-icon-dashboard': typeof IconDashboard;
'astar-icon-desktop': typeof IconDesktop;
'astar-icon-discord': typeof IconDiscord;
'astar-icon-docs': typeof IconDocs;
'astar-icon-document': typeof IconDocument;
'astar-icon-ecosystem': typeof IconEcosystem;
'astar-icon-expand': typeof IconExpand;
'astar-icon-external-link': typeof IconExternalLink;
'astar-icon-facebook': typeof IconFacebook;
'astar-icon-forum': typeof IconForum;
'astar-icon-github': typeof IconGithub;
'astar-icon-group': typeof IconGroup;
'astar-icon-geko': typeof IconHelp;
'astar-icon-hide': typeof IconHide;
'astar-icon-history': typeof IconHistory;
'astar-icon-home': typeof IconHome;
'astar-icon-instagram': typeof IconInstagram;
'astar-icon-linkedin': typeof IconLinkedIn;
'astar-icon-network': typeof IconNetwork;
'astar-icon-outline-moon': typeof IconOutlineMoon;
'astar-icon-outline-sun': typeof IconOutlineSun;
'astar-icon-person': typeof IconPerson;
'astar-icon-play': typeof IconPlay;
'astar-icon-plus': typeof IconPlus;
'astar-icon-reddit': typeof IconReddit;
'astar-icon-search': typeof IconSearch;
'astar-icon-side-nft': typeof IconSideNFT;
'astar-icon-solid-selector': typeof IconSolidSelector;
'astar-icon-star': typeof IconStar;
'astar-icon-sync': typeof IconSync;
'astar-icon-telegram': typeof IconTelegram;
'astar-icon-transfer': typeof IconTransfer;
'astar-icon-twitter': typeof IconTwitter;
'astar-icon-unhide': typeof IconUnhide;
'astar-icon-verified': typeof IconVerified;
'astar-icon-vert': typeof IconVert;
'astar-icon-wallet': typeof IconWallet;
'astar-icon-youtube': typeof IconYoutube;
'astar-default-modal': typeof DefaultModal;
'astar-modal-drawer': typeof ModalDrawer;
'astar-simple-modal': typeof SimpleModal;
'astar-spinner': typeof Spinner;
'astar-text': typeof Text;
"astar-button": typeof Button;
"astar-irregular-button": typeof IrregularButton;
"astar-radio-btn": typeof RadioBtn;
"astar-small-button": typeof SmallButton;
"astar-text-button": typeof TextButton;
"astar-connection-indicator": typeof ConnectionIndicator;
"astar-header": typeof Header;
"astar-icon-3dots": typeof Icon3dots;
"astar-icon-account-sample": typeof IconAccountSample;
"astar-icon-arrow-left": typeof IconArrowLeft;
"astar-icon-arrow-left-long": typeof IconArrowLeftLong;
"astar-icon-arrow-right": typeof IconArrowRight;
"astar-icon-arrow-right-long": typeof IconArrowRightLong;
"astar-icon-assets": typeof IconAssets;
"astar-icon-base": typeof IconBase;
"astar-icon-bridge": typeof IconBridge;
"astar-icon-circle-check": typeof IconCircleCheck;
"astar-icon-close": typeof IconClose;
"astar-icon-community": typeof IconCommunity;
"astar-icon-copy": typeof IconCopy;
"astar-icon-dapp-staking": typeof IconDappStaking;
"astar-icon-dashboard": typeof IconDashboard;
"astar-icon-desktop": typeof IconDesktop;
"astar-icon-discord": typeof IconDiscord;
"astar-icon-docs": typeof IconDocs;
"astar-icon-document": typeof IconDocument;
"astar-icon-ecosystem": typeof IconEcosystem;
"astar-icon-expand": typeof IconExpand;
"astar-icon-external-link": typeof IconExternalLink;
"astar-icon-facebook": typeof IconFacebook;
"astar-icon-forum": typeof IconForum;
"astar-icon-github": typeof IconGithub;
"astar-icon-group": typeof IconGroup;
"astar-icon-geko": typeof IconHelp;
"astar-icon-hide": typeof IconHide;
"astar-icon-history": typeof IconHistory;
"astar-icon-home": typeof IconHome;
"astar-icon-instagram": typeof IconInstagram;
"astar-icon-linkedin": typeof IconLinkedIn;
"astar-icon-network": typeof IconNetwork;
"astar-icon-outline-moon": typeof IconOutlineMoon;
"astar-icon-outline-sun": typeof IconOutlineSun;
"astar-icon-person": typeof IconPerson;
"astar-icon-play": typeof IconPlay;
"astar-icon-plus": typeof IconPlus;
"astar-icon-reddit": typeof IconReddit;
"astar-icon-search": typeof IconSearch;
"astar-icon-side-nft": typeof IconSideNFT;
"astar-icon-solid-selector": typeof IconSolidSelector;
"astar-icon-star": typeof IconStar;
"astar-icon-sync": typeof IconSync;
"astar-icon-telegram": typeof IconTelegram;
"astar-icon-transfer": typeof IconTransfer;
"astar-icon-twitter": typeof IconTwitter;
"astar-icon-unhide": typeof IconUnhide;
"astar-icon-verified": typeof IconVerified;
"astar-icon-vert": typeof IconVert;
"astar-icon-wallet": typeof IconWallet;
"astar-icon-youtube": typeof IconYoutube;
"astar-default-modal": typeof DefaultModal;
"astar-modal-drawer": typeof ModalDrawer;
"astar-simple-modal": typeof SimpleModal;
"astar-spinner": typeof Spinner;
"astar-text": typeof Text;
"astar-icon-back-with-color": typeof IconBackWithColor;
}
28 changes: 14 additions & 14 deletions packages/index.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/* eslint-disable */

import { App, Plugin } from 'vue';
import { App, Plugin } from "vue";

import { TextPlugin } from './Text';
import { SpinnerPlugin } from './Spinner';
import { ModalsPlugin } from './Modals';
import { HeaderPlugin } from './Header';
import { ButtonsPlugin } from './Buttons';
import { IconsPlugin } from './Icons';
import { TextPlugin } from "./Text";
import { SpinnerPlugin } from "./Spinner";
import { ModalsPlugin } from "./Modals";
import { HeaderPlugin } from "./Header";
import { ButtonsPlugin } from "./Buttons";
import { IconsPlugin } from "./Icons";

const AstarUIPlugin: Plugin = {
install(app: App) {
Expand All @@ -22,11 +22,11 @@ const AstarUIPlugin: Plugin = {

export default AstarUIPlugin;

export * from './Text'
export * from './Spinner'
export * from './Modals'
export * from './Header'
export * from './Buttons'
export * from './Icons'
export * from "./Text";
export * from "./Spinner";
export * from "./Modals";
export * from "./Header";
export * from "./Buttons";
export * from "./Icons";

export * from './export_type'
export * from "./export_type";
11 changes: 11 additions & 0 deletions src/stories/Icons/IconBackWithColor.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import IconBackWithColor from "packages/Modals/src/IconBackWithColor.vue";

export default {
title: 'Icons/IconBackWithColor',
component: IconBackWithColor
};

export const DefaultIcon = () => ({
components: { IconBackWithColor },
template: '<IconBackWithColor />',
});

0 comments on commit 353b6e4

Please sign in to comment.