refactor(front): [WIP] implement new layout for Album base page

front/src/components/library/AlbumBase.vue

@@ -17,6 +17,7 @@ import AlbumDropdown from './AlbumDropdown.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
+import Section from '~/components/ui/Section.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
@@ -145,6 +146,69 @@ const remove = async () => {
       v-title="labels.title"
     />
     <template v-if="object">
+      <!-- Image -->
+      <Layout flex>
+        <img
+          v-if="object.cover && object.cover.urls.original"
+          v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+          alt=""
+          class="channel-image"
+        >
+        <img
+          v-else-if="object.artist_credit && object.artist_credit[0] && object.artist_credit[0].artist.cover"
+          alt=""
+          class="channel-image"
+          :src="object.artist_credit[0].artist.cover.urls.medium_square_crop"
+          />
+        <img
+          v-else
+          alt=""
+          class="channel-image"
+          src="../../assets/audio/default-cover.png"
+        >
+        <!-- ({target}) => target -->
+        <!-- Header (TODO: Put into Header component) -->
+        <Section no-items :h1="object.title" style="margin-top: 58px">
+          <Layout stack style="grid-column: 1 / -1">
+            <artist-credit-label
+              v-if="artistCredit"
+              :artist-credit="artistCredit"
+            />
+            <!-- Metadata: -->
+            <div>
+              <!-- EP -->
+                · 
+              <!-- 2022 -->
+                · 
+               <!-- 7 tracks -->
+            </div>
+            <Layout flex>
+              <!-- Pause -->
+               <!-- Shuffle -->
+                <Spacer h grow />
+                <!-- Herzchen -->
+                 <!-- Button mit Pfeilchen -->
+                  <!-- OptionsButton / -->
+            </Layout>
+          </Layout>
+        </Section>
+      </Layout>
+
+      <Layout flex>
+        <!-- Toolbar: -->
+         <!-- Organize in playlist -->
+          <!-- <Options... -->
+           <Spacer h grow />
+           <!-- 1 selected -->
+      </Layout>
+
+      <!-- hier die einzelnen Tracks -->
+
+
+
+
+
+      <!-- Reference: -->
       <section class="segment channel-serie">
         <Layout flex gap-64 style="align-content: stretch;">
           <div style="flex: 2;">

front/src/views/auth/ProfileBase.vue

@@ -208,7 +208,7 @@ watch(props, fetchData, { immediate: true })
       <Section no-items
         :h1="store.state.auth.username"
         :action="{ text:'Edit profile', to:'/settings' }"
-        style="flex-grow: 1; margin-top: 58px;"
+        style="margin-top: 58px;"
       >
         <span style="grid-column: 1 / -1">
           {{ object?.full_username }}