Better responsive layout for unauthenticated pages

This commit is contained in:
kolaente 2020-05-12 15:18:37 +02:00
parent b876a4d4dc
commit d0f6a4ce99
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 23 additions and 14 deletions

View file

@ -187,19 +187,17 @@
</div>
</div>
<div v-else>
<div class="container">
<div class="column is-4 is-offset-4">
<img src="/images/logo-full.svg" alt="Vikunja"/>
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>Info</p>
</div>
<div class="message-body">
{{ motd }}
</div>
<div class="noauth-container">
<img src="/images/logo-full.svg" alt="Vikunja"/>
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>Info</p>
</div>
<div class="message-body">
{{ motd }}
</div>
<router-view/>
</div>
<router-view/>
</div>
</div>
<notification/>

View file

@ -1,10 +1,10 @@
.app-container{
.app-container {
min-height: calc(100vh - 65px);
@media screen and (max-width: $tablet) {
padding-top: $navbar-height + 0.75rem;
}
.app-content{
.app-content {
padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
z-index: 2;
margin-left: 17vw;
@ -15,8 +15,19 @@
min-height: calc(100vh - 4rem);
}
.card{
.card {
background: #fff;
}
}
}
.noauth-container {
width: 450px;
margin: 0 auto;
padding: 1rem 0;
@media screen and (max-width: calc(450px + 2rem)) {
width: 100%;
padding: 1rem;
}
}