martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

requested changes

This commit is contained in:
nicfreeman1209 2021-03-04 10:15:18 +00:00
parent 081bfbc695
commit 60dcd956e2
4 changed files with 26 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/modals/Modal.vue
View File

@ -3,25 +3,24 @@
<div class="modal-backdrop" @click="close"> <div class="modal-backdrop" @click="close">
<div <div
class="modal" class="modal"
v-bind:class="[isMaximized ? 'maximized' : 'not-maximized']" :class="{ maximized: isMaximized }"
role="dialog" role="dialog"
aria-labelledby="modalTitle" aria-labelledby="modalTitle"
aria-describedby="modalDescription" aria-describedby="modalDescription"
@click.stop="" @click.stop=""
> >
<font-awesome-icon <div class="top-right-buttons">
@click="isMaximized = !isMaximized" <font-awesome-icon
class="maximize-toggle" @click="isMaximized = !isMaximized"
v-if="isMaximized" class="top-right-button"
icon="window-minimize" :icon="['fas', isMaximized ? 'window-minimize' : 'window-maximize']"
/> />
<font-awesome-icon <font-awesome-icon
@click="isMaximized = !isMaximized" @click="close"
class="maximize-toggle" class="top-right-button"
v-if="!isMaximized" icon="times-circle"
icon="window-maximize" />
/> </div>
<font-awesome-icon @click="close" class="close" icon="times-circle" />
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -64,7 +63,8 @@ export default {
box-shadow: 2px 2px 20px 1px #000; box-shadow: 2px 2px 20px 1px #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 60%; max-height: 80%;
max-width: 80%;
.vote-history &, .vote-history &,
.night-reference &, .night-reference &,
@ -83,33 +83,21 @@ export default {
justify-content: center; justify-content: center;
line-height: 100%; line-height: 100%;
} }
> .close { > .top-right-buttons {
position: absolute; position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
z-index: 5;
&:hover {
color: red;
}
}
> .maximize-toggle {
z-index: 100; z-index: 100;
position: absolute;
right: 52px;
top: 20px; top: 20px;
cursor: pointer; right: 20px;
&:hover { > .top-right-button {
color: red; cursor: pointer;
width: 28px;
&:hover {
color: red;
}
} }
} }
} }
.not-maximized {
max-height: 80%;
max-width: 80%;
}
.maximized { .maximized {
background: rgba(0, 0, 0, 0.95); background: rgba(0, 0, 0, 0.95);
padding: 0; padding: 0;
@ -119,7 +107,6 @@ export default {
max-height: 100%; max-height: 100%;
display: flex; display: flex;
align-content: center; align-content: center;
align-items: center;
justify-content: safe center; justify-content: safe center;
} }

2
src/components/modals/NightOrderModal.vue
View File

@ -2,7 +2,7 @@
<Modal <Modal
class="night-reference" class="night-reference"
@close="toggleModal('nightOrder')" @close="toggleModal('nightOrder')"
v-show="modals.nightOrder && roles.size" v-if="modals.nightOrder && roles.size"
> >
<font-awesome-icon <font-awesome-icon
@click="toggleModal('reference')" @click="toggleModal('reference')"

2
src/components/modals/ReferenceModal.vue
View File

@ -2,7 +2,7 @@
<Modal <Modal
class="characters" class="characters"
@close="toggleModal('reference')" @close="toggleModal('reference')"
v-show="modals.reference && roles.size" v-if="modals.reference && roles.size"
> >
<font-awesome-icon <font-awesome-icon
@click="toggleModal('nightOrder')" @click="toggleModal('nightOrder')"

2
src/components/modals/VoteHistoryModal.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Modal <Modal
class="vote-history" class="vote-history"
v-show="modals.voteHistory && session.voteHistory" v-if="modals.voteHistory && session.voteHistory"
@close="toggleModal('voteHistory')" @close="toggleModal('voteHistory')"
> >
<font-awesome-icon <font-awesome-icon