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

Modal improvements

Browse source
This commit is contained in:
Roman Cervantes 2019-10-16 12:39:40 -07:00
parent c1e536faee
commit af6fd408d1
1 changed files with 123 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
src/components/Modal.vue
View file

@ -4,59 +4,48 @@
<slot />
</div>
<div :class="['overlay', { show }]" @click="close">
<div
:class="['modal-content', { large, confirm, padded }]"
@click.stop
>
<div :class="['overlay', { show, confirm }]" @click="close">
<div :class="['modal-content', { large, confirm }]" @click.stop>
<header :class="{ fixed: !title }">
<h2 v-if="title">{{ title }}</h2>
<button :class="closeButtonClass" @click="close">
<button class="secondary small" @click="close">
<i class="fas fa-times" />
</button>
</header>
<section>
<p v-if="message">{{ message }}</p>
<slot name="content" v-if="show" />
<div :class="{ actions: actionText }">
<button class="small info" @click="close" v-if="showClose">
{{ closeText }}
</button>
<main :class="{ padded }">
<span v-if="confirm && message">{{ message }}</span>
<slot name="content" v-else-if="show" />
</main>
<footer>
<button
v-if="actionText"
class="small primary"
v-if="actionText && confirm"
:class="actionButtonClass"
:disabled="actionDisabled"
@click="handleAction"
>
{{ actionText }}
</button>
</div>
</section>
<slot v-else name="footer" />
</footer>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
props: {
actionText: String,
title: String,
message: String,
showClose: {
type: Boolean,
default: false,
},
closeText: {
actionButtonClass: {
type: String,
default: 'Cancel',
default: 'primary',
},
actionDisabled: {
type: Boolean,
@ -74,20 +63,9 @@ export default {
},
computed: {
...mapState(['galleryOpen']),
routeName() {
return this.$route.name;
},
closeButtonClass() {
return [
{ fixed: !this.title },
'small',
'secondary',
'close-button',
];
},
},
watch: {
@ -116,10 +94,10 @@ export default {
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "~styles/styles";
@import "~styles/styles";
.overlay {
background: rgba(0, 0, 0, 0.6);
.overlay {
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
height: 100%;
left: 0;
@ -137,10 +115,19 @@ export default {
transition: all 100ms linear;
opacity: 1;
}
}
.modal-content {
position: relative;
&.confirm {
display: flex;
align-items: flex-start;
justify-content: center;
@media($small) {
align-items: flex-end;
}
}
}
.modal-content {
background: var(--modal-background);
color: var(--modal-text-color);
height: auto;
@ -152,6 +139,17 @@ export default {
padding: 0;
border-radius: $border-radius;
cursor: default;
display: flex;
flex-direction: column;
@media($small) {
border-radius: 0;
margin: 0;
height: 100%;
max-height: 100vh;
height: 100vh;
width: 100vw;
}
&.large {
width: 780px;
@ -163,42 +161,26 @@ export default {
}
}
&.padded {
> section {
padding: 0 $gp $gp;
}
}
&.confirm {
@media($small) {
height: auto;
max-width: calc(100vw - #{$gp * 4});
border-radius: $border-radius;
}
}
@media($small) {
border-radius: 0;
margin: 0;
height: auto;
max-height: 100vh;
height: 100vh;
width: 100vw;
margin-bottom: $gp * 2;
}
}
}
}
header {
header {
display: flex;
top: 0;
padding: $gp / 2 $gp;
padding: $gp;
z-index: 1;
align-items: center;
justify-content: space-between;
min-height: 30px;
@media($small) {
padding: $gp * 2 $gp $gp;
right: 0;
margin-top: $gp;
}
&.fixed {
@ -208,19 +190,20 @@ header {
margin: 0;
z-index: 99999999;
}
}
.close-button {
display: none;
@media($small) {
display: block;
}
}
.actions {
display: grid;
grid-gap: $gp;
grid-template-columns: auto auto;
}
main {
&.padded {
padding: 0 $gp;
}
flex-grow: 1;
max-height: calc(100% - 144px);
overflow: auto;
}
footer {
padding: $gp;
margin-top: auto;
}
</style>