share: added background image

public/config.json

@@ -1,5 +1,5 @@
 {
-  "backend_dev": "http://localhost:31204",
+  "backend_de": "http://localhost:31204",
-  "backend_de": "https://webplay.rocks",
+  "backend_dev": "https://webplay.rocks",
   "backend": "https://webplay.rocks"
 }

public/static/app.css

@@ -89,7 +89,9 @@ td.fillCell>* {
 
 #artistViewer #background,
 #albumViewer #background,
-#boxViewer #background {
+#boxViewer #background,
+#albumContent #background,
+#boxContent #background {
   background-size: cover;
   background-position: center;
   top: -16px;
@@ -591,6 +593,10 @@ td.fillCell>* {
   animation: glow 1s infinite alternate;
 }
 
+.z-1 {
+  z-index: -1;
+}
+
 .z1 {
   z-index: 1;
 }

public/static/style.css

@@ -136,6 +136,10 @@ h6.slim {
   font-weight: normal;
 }
 
+.relative {
+  position: relative;
+}
+
 input {
   border-width: 1px;
   border-style: solid;
@@ -511,6 +515,14 @@ label.yellow50 {
   border-color: var(--yellow);
 }
 
+button.faded {
+  opacity: 0.25;
+}
+
+button.faded:hover {
+  opacity: 1;
+}
+
 button.medium {
   padding: 8px;
 }

src/components/AlbumContent.vue

@@ -1,16 +1,18 @@
 <template>
-  <div id="content" class="flex-column">
+  <div id="albumContent" class="flex-column">
     <div class="flex-column pa-horizontal border-bottom hideOnMobile">
       <h1>{{ album.title }}</h1>
       <h2>{{ album.artist_name }}</h2>
     </div>
-    <div id="tracks" class="flex-row">
+    <div id="album" class="flex-row">
-      <div class="flex-column">
+      <div id="header" class="flex-column relative">
-        <img id="cover" class="shadow ma24" :src="cover" />
+        <div id="background" :style="coverBackground" />
+        <img id="cover" class="shadow ma24 z1" :src="cover" />
         <p class="center ma-off hideOnMobile">
           <b>{{ album.tracks.length }}</b> Tracks
         </p>
       </div>
+      <div id="tracks" class="flex-column grow">
         <ul id="trackList" class="tracks">
           <li v-for="track in album.tracks" :key="track._id">
             <TrackItem :track="track" :showCover="false" />
@@ -18,6 +20,7 @@
         </ul>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -43,6 +46,9 @@ export default {
       }
       return this.album.covers.cover256;
     },
+    coverBackground() {
+      return "background-image: url('" + this.cover + "'); z-index: -1";
+    },
   },
   components: {
     TrackItem,
@@ -56,16 +62,27 @@ export default {
   width: 256px;
 }
 
-#content,
+#albumContent {
-#tracks {
+  overflow: hidden;
+}
+#album {
   overflow: auto;
 }
+#header {
+  overflow: hidden;
+}
+
+#tracks {
+  background-color: var(--white);
+  overflow-y: auto;
+}
 
 @media (max-width: 480px) {
-  #tracks {
+  #album {
     flex-direction: column;
+    max-height: 100%;
   }
-  #trackList {
+  #tracks {
     border-top: 1px solid var(--light-border);
   }
 }

src/components/BoxContent.vue

@@ -1,15 +1,17 @@
 <template>
-  <div id="content" class="flex-column">
+  <div id="boxContent" class="flex-column">
     <div class="flex-column pa-horizontal border-bottom hideOnMobile">
       <h1>{{ box.title }}</h1>
     </div>
-    <div id="videos" class="flex-row">
+    <div id="box" class="flex-row">
-      <div class="flex-column">
+      <div id="header" class="flex-column relative">
+        <div id="background" :style="coverBackground" />
         <img id="cover" class="shadow ma24" :src="cover" />
         <p class="center ma-off hideOnMobile">
           <b>{{ box.videos.length }}</b> Videos
         </p>
       </div>
+      <div id="videos" class="flex-column grow">
         <ul id="videoList" class="videos">
           <li v-for="video in box.videos" :key="video._id">
             <VideoItem :video="video" />
@@ -17,6 +19,7 @@
         </ul>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -42,6 +45,9 @@ export default {
       }
       return this.box.covers.cover256;
     },
+    coverBackground() {
+      return "background-image: url('" + this.cover + "'); z-index: -1";
+    },
   },
   components: {
     VideoItem,
@@ -55,20 +61,32 @@ export default {
   width: 256px;
 }
 
-#content,
+#boxContent {
-#videos {
+  overflow: hidden;
+}
+#box {
   overflow: auto;
 }
 
+#header {
+  overflow: hidden;
+}
+
+#videos {
+  background-color: var(--white);
+  overflow-y: auto;
+}
+
 .video {
   max-width: 256px;
 }
 
 @media (max-width: 480px) {
-  #videos {
+  #box {
     flex-direction: column;
+    max-height: 100%;
   }
-  #videoList {
+  #videos {
     border-top: 1px solid var(--light-border);
   }
   .video {

src/components/dialogs/SharedItems.vue

@@ -21,8 +21,8 @@
             <p class="grow ma-off">
               {{ share.title }}
             </p>
-            <button class="flat danger" @click="shareDisable(share)">
+            <button class="flat danger faded" @click="shareDisable(share)" title="Disable Sharing">
-              <awesome-icon icon="trash" />
+              <awesome-icon icon="trash-alt" />
             </button>
           </div>
         </li>

src/components/dialogs/Users.vue

@@ -87,7 +87,7 @@
               <button
                 @click="deleteUser(user)"
                 title="Remove Useraccount"
-                class="flat danger"
+                class="flat danger faded"
                 v-if="user._id != me._id"
               >
                 <awesome-icon icon="trash-alt" />
@@ -198,12 +198,6 @@ export default {
 #usersBody .me {
   font-weight: bold;
 }
-#usersBody table button {
-  opacity: 0.25;
-}
-#usersBody table button:hover {
-  opacity: 1;
-}
 #usersBody .user-role {
   display: flex;
   align-items: center;