mirror of
https://github.com/romancm/gamebrary
synced 2024-11-27 21:50:24 +00:00
Modal improvements
This commit is contained in:
Roman Cervantes
parent
c1e536faee
commit
af6fd408d1
1 changed files with 123 additions and 140 deletions
|
|
@ -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>
|
||||
<main :class="{ padded }">
|
||||
<span v-if="confirm && message">{{ message }}</span>
|
||||
<slot name="content" v-else-if="show" />
|
||||
</main>
|
||||
|
||||
<slot name="content" v-if="show" />
|
||||
<footer>
|
||||
<button
|
||||
v-if="actionText && confirm"
|
||||
:class="actionButtonClass"
|
||||
:disabled="actionDisabled"
|
||||
@click="handleAction"
|
||||
>
|
||||
{{ actionText }}
|
||||
</button>
|
||||
|
||||
<div :class="{ actions: actionText }">
|
||||
<button class="small info" @click="close" v-if="showClose">
|
||||
{{ closeText }}
|
||||
</button>
|
||||
<slot v-else name="footer" />
|
||||
</footer>
|
||||
|
||||
<button
|
||||
v-if="actionText"
|
||||
class="small primary"
|
||||
:disabled="actionDisabled"
|
||||
@click="handleAction"
|
||||
>
|
||||
{{ actionText }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</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,111 +94,116 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
@import "~styles/styles";
|
||||
@import "~styles/styles";
|
||||
|
||||
.overlay {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
opacity: .1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all 100ms linear;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
transition: all 100ms linear;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: var(--modal-background);
|
||||
color: var(--modal-text-color);
|
||||
height: auto;
|
||||
width: 500px;
|
||||
max-height: calc(85vh);
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
margin: $gp * 2 auto $gp;
|
||||
padding: 0;
|
||||
border-radius: $border-radius;
|
||||
cursor: default;
|
||||
|
||||
&.large {
|
||||
width: 780px;
|
||||
max-width: 100% !important;
|
||||
|
||||
@media($small) {
|
||||
max-width: 90vw;
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
&.padded {
|
||||
> section {
|
||||
padding: 0 $gp $gp;
|
||||
}
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
@media($small) {
|
||||
height: auto;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@media($small) {
|
||||
border-radius: 0;
|
||||
.overlay {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
max-height: 100vh;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
top: 0;
|
||||
padding: $gp / 2 $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 {
|
||||
opacity: .1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all 100ms linear;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
transition: all 100ms linear;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.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;
|
||||
width: 500px;
|
||||
max-height: calc(85vh);
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
margin: $gp * 2 auto $gp;
|
||||
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;
|
||||
max-width: 100% !important;
|
||||
|
||||
@media($small) {
|
||||
max-width: 90vw;
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
height: auto;
|
||||
max-width: calc(100vw - #{$gp * 4});
|
||||
border-radius: $border-radius;
|
||||
|
||||
@media($small) {
|
||||
margin-bottom: $gp * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
padding: $gp;
|
||||
background-color: transparent !important;
|
||||
margin: 0;
|
||||
z-index: 99999999;
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@media($small) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
padding: $gp;
|
||||
background-color: transparent !important;
|
||||
margin: 0;
|
||||
z-index: 99999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
display: none;
|
||||
main {
|
||||
&.padded {
|
||||
padding: 0 $gp;
|
||||
}
|
||||
|
||||
@media($small) {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
max-height: calc(100% - 144px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-gap: $gp;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
footer {
|
||||
padding: $gp;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue