From 96fe5f0505ad8516d2a97c533b681985570cf2d3 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Thu, 5 Oct 2023 15:50:11 +0200
Subject: [PATCH 1/2] use smaller artists cover

---
 public/static/app.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/public/static/app.css b/public/static/app.css
index abee011..ba323ef 100644
--- a/public/static/app.css
+++ b/public/static/app.css
@@ -625,9 +625,8 @@ td.fillCell>* {
   }
 
   #artists .artistCover {
-    min-width: 100%;
+    width: 160px;
     height: initial;
-    min-height: 128px;
   }
 
   #artists .artistName {
-- 
2.45.2


From 0f931e218a684b76242d3b4d633fa646998418e3 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Sun, 5 Nov 2023 18:12:41 +0100
Subject: [PATCH 2/2] use flat dialog for albums

---
 src/components/base-components/Dialog.vue |   1 +
 src/components/dialogs/AlbumViewer.vue    | 156 ++++++++++++----------
 src/components/dialogs/ArtistViewer.vue   |   8 +-
 3 files changed, 90 insertions(+), 75 deletions(-)

diff --git a/src/components/base-components/Dialog.vue b/src/components/base-components/Dialog.vue
index 9e8e817..d708a1f 100644
--- a/src/components/base-components/Dialog.vue
+++ b/src/components/base-components/Dialog.vue
@@ -420,6 +420,7 @@ export default {
   flex-grow: 1;
 }
 
+.dialog-window.fullscreen
 .dialog-body.flat-dialog-header {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
diff --git a/src/components/dialogs/AlbumViewer.vue b/src/components/dialogs/AlbumViewer.vue
index 6c2b88e..d27a642 100644
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -1,72 +1,89 @@
 <template>
-  <DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
+  <DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true">
     <div id="albumViewer" class="flex-row">
-      <div id="header" class="flex-column">
+      <div id="header" class="flex-column grow">
         <div id="background" :style="coverBackground" />
-        <div class="grow z1 center flex-column">
-          <img class="glow ma24" :src="cover" @dblclick="dblclick" />
-        </div>
-        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" title="Favourite" />
-        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedAlbum.progress" title="Keep playing" />
-        <div id="stats" class="flex-row z1">
-          <DropDown v-if="$store.getters['user/isAdministrator']">
-            <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
-            </button>
-            <template v-slot:dropdown-content>
-              <div>
-                <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
-                  <awesome-icon :icon="getVisibilityIcon(item)" />{{
-                    getVisibilityText(item)
-                  }}
-                </button>
-                <hr />
-                <button v-if="!selectedAlbum.share._id" @click="shareEnable">
-                  <awesome-icon icon="share" />Share this album
-                </button>
-                <button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
-                  <awesome-icon icon="clipboard" />Copy url into clipboard
-                </button>
-                <button v-if="selectedAlbum.share._id" @click="shareDisable">
-                  <awesome-icon icon="share" />Remove share
-                </button>
-              </div>
-            </template>
-          </DropDown>
-          <div class="grow flex-column">
-            <p class="ma4 center">
-              <span class="grow center">
-                by
-                <b @click="gotoArtist" class="pointer">{{
-                  selectedAlbum.artist_name
-                }}</b>
-                <br />
-                <span v-if="album_year">
-                  from year <b>{{ album_year }}</b> </span><br />
-                <b>{{ album_tracks.length }}</b> Tracks with a duration of
-                <b>{{ album_duration }}</b>
-              </span>
-            </p>
+        <div it="title" class="flex-column pa grow z1">
+          <img class="glow ma" :src="cover" />
+
+          <span id="stats" class="center">
+            {{ selectedAlbum.title }}
+            <br />
+            by
+            <b @click="gotoArtist" class="pointer">{{ selectedAlbum.artist_name }}</b>
+            <br />
+            <span v-if="album_year">
+              from year <b>{{ album_year }}</b> </span><br />
+            <b>{{ album_tracks.length }}</b> Tracks with a duration of
+            <b>{{ album_duration }}</b>
+
+          </span>
+          <div class=" grow">
+
           </div>
-          <DropDown v-if="$store.getters['user/isAdministrator']">
-            <button class="flat center">
-              <awesome-icon icon="ellipsis-v" />
+          <div class="flex-row grow ma-top">
+
+            <button class="flat ma-right" title="Favourite" @click="toggleFavourite">
+              <awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
+              <awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
             </button>
-            <template v-slot:dropdown-content>
-              <div>
-                <button @click="uploadNewCover">
-                  <awesome-icon icon="image" />Set new Cover...
-                </button>
-                <button @click="resetCover">
-                  <awesome-icon icon="eraser" />Reset Cover
-                </button>
-                <hr />
-                <button @click="mergeAlbum">
-                  <awesome-icon icon="compress-alt" />Merge Albums...
-                </button>
-              </div>
-            </template>
-          </DropDown>
+            <button class="flat ma-right" @click="playProgress" v-if="selectedAlbum.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" title="Keep playing" />
+            </button>
+            <button class="flat ma-right" @click="playAlbum" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" title="Play" />
+            </button>
+            <button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id">
+              <awesome-icon icon="angle-left" class="ma4 white-text" />
+            </button>
+            <button @click="gotoNextAlbum" class="flat" :title="nextAlbum.name" :disabled="!nextAlbum._id">
+              <awesome-icon icon="angle-right" class="ma4 white-text" />
+            </button>
+            <div class="grow"></div>
+            <DropDown v-if="$store.getters['user/isAdministrator']">
+              <button class="flat center" :title="visibility_text">
+                <awesome-icon :icon="visibility_icon" class="white-text" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
+                    <awesome-icon :icon="getVisibilityIcon(item)" />{{
+                      getVisibilityText(item)
+                    }}
+                  </button>
+                  <hr />
+                  <button v-if="!selectedAlbum.share._id" @click="shareEnable">
+                    <awesome-icon icon="share" />Share this album
+                  </button>
+                  <button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
+                    <awesome-icon icon="clipboard" />Copy url into clipboard
+                  </button>
+                  <button v-if="selectedAlbum.share._id" @click="shareDisable">
+                    <awesome-icon icon="share" />Remove share
+                  </button>
+                </div>
+              </template>
+            </DropDown>
+            <DropDown v-if="$store.getters['user/isAdministrator']">
+              <button class="flat center">
+                <awesome-icon icon="ellipsis-v" class="white-text" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button @click="uploadNewCover">
+                    <awesome-icon icon="image" />Set new Cover...
+                  </button>
+                  <button @click="resetCover">
+                    <awesome-icon icon="eraser" />Reset Cover
+                  </button>
+                  <hr />
+                  <button @click="mergeAlbum">
+                    <awesome-icon icon="compress-alt" />Merge Albums...
+                  </button>
+                </div>
+              </template>
+            </DropDown>
+          </div>
         </div>
       </div>
       <ul id="trackList" class="tracks">
@@ -100,7 +117,7 @@ export default {
         window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id;
       navigator.clipboard.writeText(url);
     },
-    dblclick() {
+    playAlbum() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.dispatch("tracks/playContainer", this.selectedAlbum);
@@ -332,11 +349,13 @@ export default {
 
 <style scoped>
 #albumViewer {
-  height: 366px;
+  height: 400px;
   width: 640px;
 }
 
 #header {
+  width: 304px;
+  height: 400px;
   position: relative;
   background-color: black;
 }
@@ -348,13 +367,8 @@ export default {
 
 #stats {
   z-index: 2;
-  align-items: center;
   color: var(--white);
   text-shadow: 0 1px 2px black;
-  line-height: 1.4;
-  background-color: #ffffff40;
-  border-top: 1px solid #ffffff20;
-  border-bottom: 1px solid #00000020;
 }
 
 .dropdown-activator button {
diff --git a/src/components/dialogs/ArtistViewer.vue b/src/components/dialogs/ArtistViewer.vue
index 2a35433..d1b829d 100644
--- a/src/components/dialogs/ArtistViewer.vue
+++ b/src/components/dialogs/ArtistViewer.vue
@@ -17,11 +17,11 @@
               <awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
               <awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
             </button>
-            <button class="flat ma-right" v-if="selectedArtist.progress">
-              <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
+            <button class="flat ma-right" @click="playProgress" title="Keep playing" v-if="selectedArtist.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
             </button>
-            <button class="flat ma-right" v-else>
-              <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Play" />
+            <button class="flat ma-right" @click="playArtist" title="Play" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" />
             </button>
             <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
               <awesome-icon icon="angle-left" class="ma4 white-text" />
-- 
2.45.2