Change album page source select position

src/assets/styles/Shared.sass

@@ -21,7 +21,6 @@ $mainModalHeight: 80vh
 $imageModalHeight: 90vh
 $imageModalThumbHeight: 120px
 $trackContentMarginWidth: 0.5em
-$albumSourceSelectMenuWidth: 220px
 $mainCheckboxThumbHeight: 1.2em
 $mainCheckboxWidth: 3em
 $trackPagePlayerPanelHeight: 40px

src/components/containers/pages/album/BaseAlbumPageContainer.vue

@@ -3,7 +3,6 @@
     :isShowLoader="!albumData"
     :isLoading="isLoading"
     :error="error"
-    @init="handleInit"
     @refresh="handleRefresh"
   >
     <slot
@@ -51,9 +50,6 @@ export default {
     responsePageLimit: Number,
     pageNameKey: String
   },
-  emits: [
-    'init'
-  ],
   data () {
     return {
       albumData: null,
@@ -100,9 +96,6 @@ export default {
     ...mapActions('layout', [
       'setNavigationSections'
     ]),
-    handleInit (el) {
-      this.$emit('init', el)
-    },
     handleRefresh (page) {
       this.error = null
 

src/helpers/data/plugins/i18n.js

@@ -119,8 +119,7 @@ export const messages = {
             albumVarious: 'V/A album',
             group: 'Album group',
             track: 'Single'
-          },
-          reset: 'Reset'
+          }
         }
       },
       track: {

src/views/album/MainPage.vue

@@ -1,18 +1,26 @@
 <template>
-  <BaseAlbumPageContainer
-    @init="handleContainerInit"
-  >
+  <BaseAlbumPageContainer>
     <template #default="slotProps">
       <BaseAlbumPageSegmentContainer
         :isLoading="slotProps.isLoading"
         :error="slotProps.error"
         @refresh="slotProps.handleRefresh"
       >
         <template #default>
-          <div class="columns-container">
+          <AlbumSourceSelect
+            :albumData="slotProps.albumData"
+          />
+
+          <BaseDivider />
+
+          <div
+            class="columns-container"
+            ref="scrollable"
+          >
             <LeftColumn
+              v-if="$refs.scrollable"
               :albumData="slotProps.albumData"
-              :scrollable="scrollable"
+              :scrollable="$refs.scrollable"
             />
             <RightColumn
               :albumData="slotProps.albumData"
@@ -30,6 +38,8 @@ import BaseAlbumPageContainer
   from '@/containers/pages/album/BaseAlbumPageContainer.vue'
 import BaseAlbumPageSegmentContainer
   from '@/containers/pages/album/BaseAlbumPageSegmentContainer.vue'
+import AlbumSourceSelect from './MainPage/AlbumSourceSelect.vue'
+import BaseDivider from '@/BaseDivider.vue'
 import LeftColumn from './MainPage/LeftColumn.vue'
 import RightColumn from './MainPage/RightColumn.vue'
 
@@ -38,18 +48,10 @@ export default {
   components: {
     BaseAlbumPageContainer,
     BaseAlbumPageSegmentContainer,
+    AlbumSourceSelect,
+    BaseDivider,
     LeftColumn,
     RightColumn
-  },
-  data () {
-    return {
-      scrollable: null
-    }
-  },
-  methods: {
-    handleContainerInit (el) {
-      this.scrollable = el
-    }
   }
 }
 </script>

src/views/album/MainPage/LeftColumn/AlbumSourceSelect.vue → src/views/album/MainPage/AlbumSourceSelect.vue

@@ -1,34 +1,43 @@
 <template>
-  <SourceSelect
-    ref="source"
-    :artistName="artistName"
-    :albumTitle="albumTitle"
-  />
+  <div class="album-source-select-container">
+    <div class="album-source-select-content">
+      <SourceSelect
+        ref="source"
+        :artistName="artistName"
+        :albumTitle="albumTitle"
+      />
 
-  <template v-if="selectedSourceData">
-    <TypeSelect
-      v-if="isSelectedSourceWithMultipleTypes"
-      :key="typeSelectKey"
-      :albumsData="selectedSourceAlbumsData"
-      :types="selectedSourceTypes"
-    />
+      <template v-if="selectedSourceData">
+        <TypeSelect
+          v-if="isSelectedSourceWithMultipleTypes"
+          :key="typeSelectKey"
+          :albumsData="selectedSourceAlbumsData"
+          :types="selectedSourceTypes"
+        />
 
-    <AlbumSelect
-      v-if="selectedTypeId"
-      :key="albumSelectKey"
-      :albums="selectedTypeAlbums"
-      :typeId="selectedTypeId"
-    />
+        <AlbumSelect
+          v-if="selectedTypeId"
+          :key="albumSelectKey"
+          :albums="selectedTypeAlbums"
+          :typeId="selectedTypeId"
+        />
+      </template>
+    </div>
 
-    <ResetButton @click="handleReset"/>
-  </template>
+    <BaseButton
+      v-if="selectedSourceData"
+      class="circular red basic compact tiny reset-button"
+      icon="close"
+      @click="handleReset"
+    />
+  </div>
 </template>
 
 <script>
 import SourceSelect from './AlbumSourceSelect/SourceSelect.vue'
 import TypeSelect from './AlbumSourceSelect/TypeSelect.vue'
 import AlbumSelect from './AlbumSourceSelect/AlbumSelect.vue'
-import ResetButton from './AlbumSourceSelect/ResetButton.vue'
+import BaseButton from '@/BaseButton.vue'
 import { generateKey } from '#/utils'
 import formatAlbumRequestData from '#/actions/api/album/formatters/requestData'
 
@@ -38,7 +47,7 @@ export default {
     SourceSelect,
     TypeSelect,
     AlbumSelect,
-    ResetButton
+    BaseButton
   },
   provide () {
     return {
@@ -52,8 +61,10 @@ export default {
     'resetRequestAlbumData'
   ],
   props: {
-    albumTitle: String,
-    artistName: String
+    albumData: {
+      type: Object,
+      required: true
+    }
   },
   data () {
     return {
@@ -66,6 +77,12 @@ export default {
     }
   },
   computed: {
+    albumTitle () {
+      return this.albumData.title
+    },
+    artistName () {
+      return this.albumData.artist.name
+    },
     isSelectedSourceWithMultipleTypes () {
       return this.selectedSourceTypes.length > 1
     },
@@ -143,4 +160,13 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.album-source-select-container
+  @extend .d-flex, .align-items-center
+
+.album-source-select-content
+  @extend .d-flex, .align-items-center, .flex-full
+
+.reset-button
+  @extend .no-margin
+</style>

src/views/album/MainPage/LeftColumn/AlbumSourceSelect/AlbumSelect.vue → src/views/album/MainPage/AlbumSourceSelect/AlbumSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseDropdownContainer
-    class="basic fluid pointing left scrolling button album-select"
+    class="basic pointing scrolling button album-select"
     :header="headerFormatted"
   >
     <AlbumsList :albums="albums" />
@@ -42,5 +42,6 @@ export default {
 
 <style lang="sass" scoped>
 .album-select
-  margin-bottom: 10px
+  width: 210px
+  margin-right: 1em
 </style>

src/views/album/MainPage/LeftColumn/AlbumSourceSelect/AlbumSelect/AlbumsList.vue → src/views/album/MainPage/AlbumSourceSelect/AlbumSelect/AlbumsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu albums-list">
+  <div class="menu">
     <AlbumItem
       v-for="albumData in albumsFormatted"
       :key="albumData.uuid"
@@ -33,7 +33,4 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-.ui.dropdown .albums-list
-  width: $albumSourceSelectMenuWidth !important
-</style>
+<style lang="sass" scoped></style>

src/views/album/MainPage/LeftColumn/AlbumSourceSelect/SourceSelect.vue → src/views/album/MainPage/AlbumSourceSelect/SourceSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseDropdownContainer
-    class="basic fluid pointing left scrolling button source-select"
+    class="basic pointing scrolling button source-select"
     ref="dropdown"
     :header="headerFormatted"
   >
@@ -43,5 +43,6 @@ export default {
 
 <style lang="sass" scoped>
 .source-select
-  margin-bottom: 10px
+  width: 210px
+  margin-right: 1em
 </style>

src/views/album/MainPage/LeftColumn/AlbumSourceSelect/SourceSelect/SourcesList.vue → src/views/album/MainPage/AlbumSourceSelect/SourceSelect/SourcesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu sources-list">
+  <div class="menu">
     <div class="header">
       {{ streamableHeaderFormatted }}
     </div>
@@ -71,7 +71,4 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-.ui.dropdown .sources-list
-  width: $albumSourceSelectMenuWidth !important
-</style>
+<style lang="sass" scoped></style>

src/views/album/MainPage/LeftColumn/AlbumSourceSelect/TypeSelect.vue → src/views/album/MainPage/AlbumSourceSelect/TypeSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseDropdownContainer
-    class="basic fluid pointing left scrolling button"
+    class="basic pointing scrolling button"
     :header="headerFormatted"
   >
     <TypesList
@@ -45,5 +45,6 @@ export default {
 
 <style lang="sass" scoped>
 .main-dropdown
-  margin-bottom: 10px
+  width: 150px
+  margin-right: 1em
 </style>

src/views/album/MainPage/LeftColumn.vue

@@ -7,25 +7,18 @@
       :artistName="artistName"
       :scrollable="scrollable"
     />
-
-    <AlbumSourceSelect
-      :albumTitle="albumTitle"
-      :artistName="artistName"
-    />
   </div>
 </template>
 
 <script>
 import AlbumImage from './LeftColumn/AlbumImage.vue'
 import AlbumHeader from './LeftColumn/AlbumHeader.vue'
-import AlbumSourceSelect from './LeftColumn/AlbumSourceSelect.vue'
 
 export default {
   name: 'LeftColumn',
   components: {
     AlbumImage,
-    AlbumHeader,
-    AlbumSourceSelect
+    AlbumHeader
   },
   props: {
     albumData: {
@@ -51,8 +44,8 @@ export default {
 <style lang="sass" scoped>
 .left-column
   @extend .sticky
-  width: 200px
+  width: 210px
   margin-right: 1em
-  top: calc(#{$mainContainerTopPadding} + 1em)
+  top: calc(#{$mainContainerTopPadding})
   align-self: flex-start
 </style>