Added <mediaitem-scroller-horizontal>

resources/cider-ui-tests/index.html

@@ -299,8 +299,7 @@
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
-                <mediaitem-square :item="item"
+                <mediaitem-scroller-horizontal :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
-                                  v-for="item in search.results.albums.data.limit(10)"></mediaitem-square>
             </template>
             <template v-if="search.results.artists">
                 <div class="row">
@@ -341,6 +340,15 @@
     </button>
 </script>
 
+<script type="text/x-template" id="mediaitem-scroller-horizontal">
+    <template>
+        <div class="cd-hmedia-scroller">
+            <mediaitem-square :item="item"
+                              v-for="item in items"></mediaitem-square>
+        </div>
+    </template>
+</script>
+
 <script type="text/x-template" id="mediaitem-list-item">
     <template>
         <div @click="app.playMediaItemById(item.id, item.type)"

resources/cider-ui-tests/index.js

@@ -4,6 +4,12 @@ Vue.component('sidebar-library-item', {
     methods: {}
 });
 
+Vue.component('mediaitem-scroller-horizontal', {
+    template: '#mediaitem-scroller-horizontal',
+    props: ['items'],
+    methods: {}
+});
+
 Vue.component('mediaitem-square', {
     template: '#mediaitem-square',
     props: ['item'],

resources/cider-ui-tests/style.css

@@ -2,7 +2,8 @@
 
 :root {
     --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
-    --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
+    --mediaItemShadow-Shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
+    --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
     --mediaItemRadius: 4px;
     --mediaItemRadiusRound: 100%;
     --keyColor: #fa586a;
@@ -1255,6 +1256,15 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     text-overflow: ellipsis;
 }
 
+/* horizontal media scroller */
+.cd-hmedia-scroller {
+    margin: 0 auto;
+    display: flex;
+    flex-flow: row;
+    overflow-x: scroll;
+}
+
+
 /* mediaitem-list-item */
 .cd-mediaitem-list-item {
     width: 100%;