minor browse page visual changes

resources/cider-ui-tests/style.less

@@ -1793,6 +1793,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: flex;
   flex-flow: row;
   overflow-x: scroll;
+  overflow-y: hidden;
 
   &::-webkit-scrollbar-thumb {
     box-shadow: none;
@@ -2401,3 +2402,17 @@ div#captions {
 .item-navigate:hover {
     text-decoration: underline;
 }
+
+.title-browse-sp{
+    width: 100%;
+    text-align: left;
+    margin-bottom: 2px;
+}
+
+.bold{
+  font-weight: bold;
+}
+
+.semibold{
+  font-weight: 500;
+}

resources/cider-ui-tests/views/components/mediaitem-mvview-sp.ejs

@@ -0,0 +1,61 @@
+<script type="text/x-template" id="mediaitem-mvview-sp">
+    <template>
+        <div style="position: relative; display: inline-flex;">
+            <div @click.self='app.routeView(item)'
+                 class="cd-mediaitem-mvview">
+                <div class="title-browse-sp bold " @click='app.routeView(item)'>
+                    {{ badge ? badge.designBadge : ""}}
+                </div>
+                <div class="title-browse-sp " >
+                    {{ (badge != null && badge.designTag != null) ? badge.designTag :  (item.attributes.name ?? '') }}
+                </div>
+                <div class="title-browse-sp semibold" v-if="!(badge != null && badge.designTag != null)" >
+                    {{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
+                </div> 
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
+                            :size="imagesize ?? 300"
+                            ></mediaitem-artwork>
+                </div>
+                <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
+                    <div class="button" style="
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '200px',
+                        'margin-left': '250px',
+                        width: '40px',
+                        height: '40px',} :
+                        {margin: '35px', 'margin-left': '95px',
+                        width: '120px',
+                        height: '120px',}]" @click="app.playMediaItem(item)">
+                        <%- include("../svg/play.svg") %>
+                    </div>
+                </div>
+            </div>
+            <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
+                <div class="button" style="
+                border-radius: 50%;
+                background: rgba(50,50,50,0.7);"
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '200px',
+                    'margin-left': '250px', 
+                    width: '40px',
+                    height: '40px',} :
+                    {margin: '35px', 'margin-left': '95px',
+                    width: '120px',
+                    height: '120px',}]" @click="app.playMediaItem(item)">
+                    <%- include("../svg/play.svg") %>
+                </div>
+            </div>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-mvview-sp', {
+        template: '#mediaitem-mvview-sp',
+        props: ['item', "imagesize","badge"],
+        methods: {}
+    });
+</script>

resources/cider-ui-tests/views/components/mediaitem-mvview.ejs

@@ -18,7 +18,7 @@
                         'margin-left': '250px',
                         width: '40px',
                         height: '40px',} :
-                        {margin: '35px',
+                        {margin: '35px',  'margin-left': '95px',
                         width: '120px',
                         height: '120px',}]" @click="app.playMediaItem(item)">
                         <%- include("../svg/play.svg") %>
@@ -40,7 +40,7 @@
                     'margin-left': '250px', 
                     width: '40px',
                     height: '40px',} :
-                    {margin: '35px',
+                    {margin: '35px',  'margin-left': '95px',
                     width: '120px',
                     height: '120px',}]" @click="app.playMediaItem(item)">
                     <%- include("../svg/play.svg") %>

resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-mvview.ejs

@@ -1,8 +1,14 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
     <template>
         <div class="cd-hmedia-scroller">
+            <template v-if="browsesp">
+                <mediaitem-mvview-sp :item="item ? (item.attributes.kind ? item: item.relationships.contents.data[0]) : []" :imagesize="imagesize"
+                   :badge="item.attributes"                     v-for="item in items"></mediaitem-mvview-sp>
+            </template>
+            <template v-else>
                 <mediaitem-mvview :item="item ? (item.attributes.kind ? item: item.relationships.contents.data[0]) : []" :imagesize="imagesize"
                 v-for="item in items"></mediaitem-mvview>
+            </template>                            
         </div>
     </template>
 </script>
@@ -11,7 +17,7 @@
 <script>
     Vue.component('mediaitem-scroller-horizontal-mvview', {
         template: '#mediaitem-scroller-horizontal-mvview',
-        props: ['items',"imagesize"],
+        props: ['items',"imagesize","browsesp"],
         methods: {}
     });
 </script>

resources/cider-ui-tests/views/main.ejs

@@ -461,6 +461,8 @@
 <%- include('components/mediaitem-square-sp') %>
 <!-- MediaItem MusicVideo -->
 <%- include('components/mediaitem-mvview') %>
+<!-- MediaItem MusicVideo SP -->
+<%- include('components/mediaitem-mvview-sp') %>
 <!-- Animated Artwork View -->
 <%- include('components/animatedartwork-view') %>
 

resources/cider-ui-tests/views/pages/browse.ejs

@@ -7,13 +7,13 @@
                 <div class="col" v-if="recom.attributes.name != 'Chart Set'">
                     <h3>{{ recom.attributes.name ?? ""}}</h3>
                 </div>
-                <div class="col-auto flex-center" v-if="recom.relationships && ((recom.relationships.children &&  recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
+                <div class="col-auto flex-center" v-if="index != 0 && recom.relationships && ((recom.relationships.children &&  recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
                     <button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >See All</button>
                 </div>
             </div>
             <template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
                 <template v-if="(['385']).includes(recom.attributes.editorialElementKind) || index === 0">
-                    <mediaitem-scroller-horizontal-mvview :imagesize="800"
+                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
                             :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                 </template>
                 <template v-else-if="recom.attributes.name == 'Chart Set'">