Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-24 04:03:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Modal clean up

Browse source
This commit is contained in:
Roman Cervantes 2019-10-17 21:36:51 -07:00
parent 95a5d0c6d6
commit ac266f3730
1 changed files with 41 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
src/components/Modal.vue
View file

@ -4,9 +4,9 @@
<slot /> <slot />
</div> </div>
<div :class="['overlay', { show, confirm }]" @click="close"> <div :class="['overlay', { show }]" @click="close">
<div :class="['modal-content', { large, confirm }]" @click.stop> <div :class="['modal-content', { large, fixed: !title }]" @click.stop>
<header :class="{ fixed: !title }"> <header>
<h2 v-if="title">{{ title }}</h2> <h2 v-if="title">{{ title }}</h2>
<button class="secondary small" @click="close"> <button class="secondary small" @click="close">
@ -14,24 +14,20 @@
</button> </button>
</header> </header>
<main :class="{ padded }"> <main>
<span v-if="confirm && message">{{ message }}</span> <span v-if="message">{{ message }}</span>
<slot name="content" v-else-if="show" /> <slot name="content" v-else-if="show" />
</main>
<footer> <footer v-if="actionText">
<button <button
v-if="actionText && confirm"
:class="actionButtonClass" :class="actionButtonClass"
:disabled="actionDisabled" :disabled="actionDisabled"
@click="handleAction" @click="handleAction"
> >
{{ actionText }} {{ actionText }}
</button> </button>
<slot v-else name="footer" />
</footer> </footer>
</main>
</div> </div>
</div> </div>
</div> </div>
@ -47,13 +43,8 @@ export default {
type: String, type: String,
default: 'primary', default: 'primary',
}, },
actionDisabled: { actionDisabled: Boolean,
type: Boolean,
default: false,
},
large: Boolean, large: Boolean,
confirm: Boolean,
padded: Boolean,
}, },
data() { data() {
@ -115,59 +106,50 @@ export default {
transition: all 100ms linear; transition: all 100ms linear;
opacity: 1; opacity: 1;
} }
&.confirm {
display: flex;
align-items: flex-start;
justify-content: center;
@media($small) {
align-items: flex-end;
}
}
} }
.modal-content { .modal-content {
background: var(--modal-background); background: var(--modal-background);
color: var(--modal-text-color); color: var(--modal-text-color);
height: auto;
width: 500px; width: 500px;
max-height: calc(85vh); height: auto;
max-width: 100%; max-height: calc(100% - #{$gp * 4});
overflow: auto; overflow-y: auto;
margin: $gp * 2 auto $gp; margin: $gp * 2 auto $gp;
padding: 0; padding: 0;
border-radius: $border-radius; border-radius: $border-radius;
cursor: default; cursor: default;
display: flex;
flex-direction: column;
@media($small) { @media($small) {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
width: 100%;
height: 100%; height: 100%;
max-height: 100vh; max-height: 100%;
height: 100vh;
width: 100vw;
} }
&.large { &.large {
width: 780px; width: 780px;
max-width: 100% !important; max-width: 100%;
@media($small) {
max-width: 90vw;
max-height: 100vh;
}
} }
&.confirm { &.fixed {
height: auto; @media($small) {
max-width: calc(100vw - #{$gp * 4}); display: flex;
border-radius: $border-radius; height: 100vh;
}
header {
position: fixed;
right: $gp;
button {
display: none;
@media($small) { @media($small) {
margin-bottom: $gp * 2; display: block;
}
}
} }
} }
} }
@ -179,31 +161,17 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@media($small) {
right: 0;
}
&.fixed { &.fixed {
position: fixed; position: fixed;
padding: $gp;
background-color: transparent !important;
margin: 0;
z-index: 99999999;
} }
} }
main { main {
&.padded { padding: 0 $gp $gp;
padding: 0 $gp; overflow-y: auto;
}
flex-grow: 1;
max-height: calc(100% - 144px);
overflow: auto;
} }
footer { footer {
padding: $gp; margin-top: $gp;
margin-top: auto;
} }
</style> </style>