From 3441072c2c880bdbc0a2b8c18aec5dbf305ac131 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 31 May 2020 21:31:42 +0200
Subject: [PATCH] Show list background when viewing a link share

---
 src/App.vue                      | 16 +++++++++++++---
 src/styles/theme/background.scss | 11 ++++++++++-
 src/styles/theme/link-share.scss |  5 +++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 78c0dea4..5beb17d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -186,13 +186,23 @@
 					</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="column is-10 is-offset-1">
 						<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">
-								<a @click="logout()" class="button logout">
+								<a @click="logout()" class="button">
 									<span>Logout</span>
 									<span class="icon is-small">
 									<icon icon="sign-out-alt"/>
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index 174fd0dd..498bef9d 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -1,4 +1,4 @@
-.app-container.has-background {
+.app-container.has-background, .link-share-container.has-background {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -47,4 +47,13 @@
 
 .navbar.has-background {
   background: $transparent-background-light;
+}
+
+.link-share-container.has-background .view {
+  background: transparent;
+  border: none;
+
+  .logout .button {
+    box-shadow: none;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index 09dce6d7..8bf64896 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -7,11 +7,16 @@
 
   .logout {
     text-align: right;
+    margin-bottom: 1rem;
   }
 
   .column {
     max-width: 100%;
   }
+
+  .card {
+    background: $white;
+  }
 }
 
 .link-share-list {