Better responsive layout for unauthenticated pages
This commit is contained in:
parent
b876a4d4dc
commit
d0f6a4ce99
2 changed files with 23 additions and 14 deletions
20
src/App.vue
20
src/App.vue
|
@ -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/>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue