Show list background when viewing a link share
This commit is contained in:
parent
4b3f92ae34
commit
3441072c2c
3 changed files with 28 additions and 4 deletions
16
src/App.vue
16
src/App.vue
|
@ -186,13 +186,23 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)">
|
<div
|
||||||
|
v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)"
|
||||||
|
class="link-share-container"
|
||||||
|
:class="{'has-background': background}"
|
||||||
|
:style="{'background-image': `url(${background})`}"
|
||||||
|
>
|
||||||
<div class="container has-text-centered link-share-view">
|
<div class="container has-text-centered link-share-view">
|
||||||
<div class="column is-10 is-offset-1">
|
<div class="column is-10 is-offset-1">
|
||||||
<img src="/images/logo-full.svg" alt="Vikunja" class="logo"/>
|
<img src="/images/logo-full.svg" alt="Vikunja" class="logo"/>
|
||||||
<div class="box has-text-left">
|
<h1
|
||||||
|
class="title"
|
||||||
|
:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
|
||||||
|
{{ currentList.title === '' ? 'Loading...': currentList.title}}
|
||||||
|
</h1>
|
||||||
|
<div class="box has-text-left view">
|
||||||
<div class="logout">
|
<div class="logout">
|
||||||
<a @click="logout()" class="button logout">
|
<a @click="logout()" class="button">
|
||||||
<span>Logout</span>
|
<span>Logout</span>
|
||||||
<span class="icon is-small">
|
<span class="icon is-small">
|
||||||
<icon icon="sign-out-alt"/>
|
<icon icon="sign-out-alt"/>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
.app-container.has-background {
|
.app-container.has-background, .link-share-container.has-background {
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -48,3 +48,12 @@
|
||||||
.navbar.has-background {
|
.navbar.has-background {
|
||||||
background: $transparent-background-light;
|
background: $transparent-background-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link-share-container.has-background .view {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
.logout .button {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -7,11 +7,16 @@
|
||||||
|
|
||||||
.logout {
|
.logout {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-share-list {
|
.link-share-list {
|
||||||
|
|
Loading…
Reference in a new issue