vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

chore: use after instead of new element for overlay
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
kolaente 2021-12-11 20:50:27 +01:00
parent 97945f3f42
commit 334c5610d9
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/misc/no-auth-wrapper.vue
View File

@ -2,15 +2,13 @@
<div class="no-auth-wrapper">
<Logo class="logo" width="200" height="58"/>
<div class="noauth-container">
<section class="image">
<div class="overlay" :class="{'has-message': motd !== ''}">
<Message v-if="motd !== ''">
{{ motd }}
</Message>
<h2 class="title">
{{ $t('misc.welcomeBack') }}
</h2>
</div>
<section class="image" :class="{'has-message': motd !== ''}">
<Message v-if="motd !== ''">
{{ motd }}
</Message>
<h2 class="title">
{{ $t('misc.welcomeBack') }}
</h2>
</section>
<section class="content">
<slot/>
@ -60,25 +58,7 @@ const motd = computed(() => store.state.config.motd)
.image {
width: 50%;
@media screen and (max-width: $tablet) {
display: none;
}
@media screen and (min-width: $tablet) {
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
position: relative;
}
}
.overlay {
padding: 1rem;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .2);
display: flex;
flex-direction: column;
justify-content: end;
@ -86,6 +66,30 @@ const motd = computed(() => store.state.config.motd)
&.has-message {
justify-content: space-between;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .2);
z-index: 10;
}
> * {
z-index: 20;
}
@media screen and (max-width: $tablet) {
display: none;
}
@media screen and (min-width: $tablet) {
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
position: relative;
}
}
.content {