Merge pull request #111 from nicfreeman1209/main

maximize button for modals
This commit is contained in:
Steffen 2021-03-09 15:26:17 +01:00 committed by GitHub
commit 2af643435e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 21 deletions

View File

@ -348,7 +348,7 @@ export default {
top: 3px; top: 3px;
text-align: right; text-align: right;
padding-right: 50px; padding-right: 50px;
z-index: 200; z-index: 75;
svg { svg {
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)); filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));

View File

@ -3,13 +3,27 @@
<div class="modal-backdrop" @click="close"> <div class="modal-backdrop" @click="close">
<div <div
class="modal" class="modal"
: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 @click="close" class="close" icon="times-circle" /> <div class="top-right-buttons">
<slot></slot> <font-awesome-icon
@click="isMaximized = !isMaximized"
class="top-right-button"
:icon="['fas', isMaximized ? 'window-minimize' : 'window-maximize']"
/>
<font-awesome-icon
@click="close"
class="top-right-button"
icon="times-circle"
/>
</div>
<div class="slot">
<slot></slot>
</div>
</div> </div>
</div> </div>
</transition> </transition>
@ -17,6 +31,11 @@
<script> <script>
export default { export default {
data: function() {
return {
isMaximized: false
};
},
methods: { methods: {
close() { close() {
this.$emit("close"); this.$emit("close");
@ -46,13 +65,12 @@ 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%;
.characters &,
.vote-history &, .vote-history &,
.night-reference & { .night-reference &,
max-height: 80%; .characters & {
max-width: 80%;
overflow-y: auto; overflow-y: auto;
} }
@ -67,16 +85,37 @@ export default {
justify-content: center; justify-content: center;
line-height: 100%; line-height: 100%;
} }
> .close {
> .top-right-buttons {
position: absolute; position: absolute;
z-index: 100;
top: 15px;
right: 20px; right: 20px;
top: 20px; > .top-right-button {
cursor: pointer; cursor: pointer;
z-index: 5; width: 28px;
&:hover { &:hover {
color: red; color: red;
}
} }
} }
> .slot {
max-height: 100%;
position: initial;
}
}
.maximized {
background: rgba(0, 0, 0, 0.95);
padding: 0;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
align-content: center;
justify-content: center;
} }
.modal-fade-enter, .modal-fade-enter,

View File

@ -180,7 +180,7 @@ export default {
.toggle { .toggle {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 15px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: red; color: red;

View File

@ -100,7 +100,7 @@ export default {
.toggle { .toggle {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 15px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: red; color: red;
@ -195,7 +195,7 @@ ul {
&:after { &:after {
content: " "; content: " ";
display: block; display: block;
padding-top: 66%; padding-top: 65%;
} }
} }
.name { .name {
@ -219,6 +219,7 @@ ul {
} }
} }
&.legend { &.legend {
width: 100%;
font-weight: bold; font-weight: bold;
height: 20px; height: 20px;
margin-top: 10px; margin-top: 10px;

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
@ -91,7 +91,7 @@ export default {
.clear { .clear {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 15px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: red; color: red;
@ -99,7 +99,7 @@ export default {
} }
h3 { h3 {
margin: 0 40px; margin: 0 40px 0 10px;
svg { svg {
vertical-align: middle; vertical-align: middle;
} }
@ -107,6 +107,8 @@ h3 {
table { table {
border-spacing: 10px 0; border-spacing: 10px 0;
margin-left: auto;
margin-right: auto;
} }
thead td { thead td {

View File

@ -46,7 +46,9 @@ const faIcons = [
"Users", "Users",
"VolumeUp", "VolumeUp",
"VolumeMute", "VolumeMute",
"VoteYea" "VoteYea",
"WindowMaximize",
"WindowMinimize"
]; ];
const fabIcons = ["Github", "Discord"]; const fabIcons = ["Github", "Discord"];
library.add( library.add(