Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change to scrollable overlay inner

Browse Source
This commit is contained in:
kPherox 2019-04-24 16:58:25 +09:00
parent 34a38e8d4d
commit dbb9d8065d
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/globals/BaseOverlay.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<transition name="fade"> <transition name="fade">
<div class="overlay"> <div class="overlay">
<button type="button" class="close-button" @click="closeOverlay">x</button> <button type="button" class="close-button" @click="closeOverlay">X</button>
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<div class="overlay-inner"> <div class="overlay-inner">
<slot/> <slot/>
@ -40,11 +40,16 @@ export default class BaseOverlay extends Vue {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 100vw; width: 100vw;
max-width: 100vw;
height: 100vh; height: 100vh;
max-height: 100vh;
background-color: var(--bg-color); background-color: var(--bg-color);
} }
.overlay-inner { .overlay-inner {
margin: 1em; margin: 0.5em;
height: calc(100% - 50px - 1em);
overflow: scroll;
} }
.close-button { .close-button {
position: fixed; position: fixed;
@ -60,7 +65,7 @@ export default class BaseOverlay extends Vue {
width: 50px; width: 50px;
height: 50px; height: 50px;
font-size: 1.8rem; font-size: 1.5rem;
} }
h1 { h1 {
top: 0; top: 0;