public/static/app.css

@@ -85,23 +85,10 @@ td.fillCell>* {
   text-align: center;
 }
 
-.favourite {
-  z-index: 1;
-  position: absolute;
-  cursor: pointer;
-}
-
 .favourite.active {
   color: var(--yellow);
 }
 
-.keepPlaying {
-  z-index: 1;
-  position: absolute;
-  cursor: pointer;
-  right: 0;
-}
-
 
 /*
   DIALOGS

public/static/style.css

@@ -1741,6 +1741,10 @@ td.strech {
   box-shadow: 0 1px 4px var(--glow);
 }
 
+.glow-text {
+  text-shadow: 0 1px 4px var(--glow);
+}
+
 .nowrap {
   white-space: nowrap;
 }

src/components/dialogs/ArtistViewer.vue

@@ -3,9 +3,8 @@
     <div id="artistViewer">
       <div id="header" class="flex-column">
         <div id="background" :style="coverBackground" />
-        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
+        <div id="title" class="flex-column ma">
-        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
+          <h1>
-        <h1 @dblclick="dblclick">
             {{ selectedArtist.name }}
           </h1>
           <span id="stats" class="ma-bottom">
@@ -13,23 +12,26 @@
             <b>{{ artist_albums.length }}</b> Albums with a duration of
             <b>{{ artist_duration }}</b>
           </span>
-        <div id="albumList" class="flex-row showOnMobilePortrait">
+          <div class="flex-row ma-top ma-bottom">
-          <AlbumItem class="ma" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
+            <button class="flat ma-right">
-        </div>
+              <awesome-icon icon="star" size="2x" class="favourite" :class="{ active: isFavourite }" @click="toggleFavourite" />
-        <div id="navigation" class="flex-row center ma-top">
-          <div class="flex-row grow"></div>
-          <div class="flex-row">
-            <button @click="gotoPrevArtist" class="primary ma4" :title="prevArtist.name" :disabled="!prevArtist._id">
-              <awesome-icon icon="angle-left" class="ma4" />
             </button>
-            <button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id">
+            <button class="flat ma-right" v-if="selectedArtist.progress">
-              <awesome-icon icon="angle-right" class="ma4" />
+              <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
             </button>
-          </div>
+            <button class="flat ma-right" v-else>
-          <div class="flex-row grow right center">
+              <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Keep playing" />
-            <DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile">
+            </button>
-              <button class="flat pa8-left pa8-right">
+            <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
-                <awesome-icon icon="ellipsis-v" />
+              <awesome-icon icon="angle-left" class="ma4 white-text" />
+            </button>
+            <button @click="gotoNextArtist" class="flat" :title="nextArtist.name" :disabled="!nextArtist._id">
+              <awesome-icon icon="angle-right" class="ma4 white-text" />
+            </button>
+
+            <DropDown v-if="$store.getters['user/isAdministrator']" class="ma-left hideOnMobile">
+              <button class="flat pa-left pa-right">
+                <awesome-icon icon="ellipsis-v" class="white-text"/>
               </button>
               <template v-slot:dropdown-content>
                 <div>
@@ -48,6 +50,9 @@
             </DropDown>
           </div>
         </div>
+        <div id="albumList" class="flex-row showOnMobilePortrait">
+          <AlbumItem class="ma" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
+        </div>
       </div>
       <div class="flex-row overflow-y">
         <div id="albumList" class="flex-column hideOnMobilePortrait">
@@ -77,7 +82,7 @@ export default {
     }
   },
   methods: {
-    dblclick() {
+    playArtist() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.dispatch("tracks/playContainer", this.selectedArtist);
@@ -262,7 +267,6 @@ export default {
 h1,
 #stats {
   z-index: 1;
-  text-align: center;
   width: 100%;
   color: var(--white);
   text-shadow: 0 1px 2px black;
@@ -280,6 +284,10 @@ h1,
   max-width: 100%;
 }
 
+#header #title {
+  z-index: 100;
+}
+
 #albumList {
   z-index: 1;
   overflow-y: auto;