From 63b129390352b6dce4781b0d8b877b81f2516dba Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 9 Feb 2022 03:30:52 -0800 Subject: [PATCH] added vue-horizontal --- src/renderer/index.js | 1 + src/renderer/js/smoothscroll.js | 434 ++++++++++++++++++ src/renderer/js/vue-horizontal.js | 1 + src/renderer/style.less | 19 +- .../mediaitem-scroller-horizontal-large.ejs | 10 +- .../mediaitem-scroller-horizontal-mvview.ejs | 4 +- .../mediaitem-scroller-horizontal-sp.ejs | 10 +- .../mediaitem-scroller-horizontal.ejs | 4 +- src/renderer/views/main.ejs | 2 + src/renderer/views/pages/artist-feed.ejs | 22 +- src/renderer/views/pages/cider-playlist.ejs | 6 +- src/renderer/views/pages/home.ejs | 36 +- src/renderer/views/pages/zoo.ejs | 3 - 13 files changed, 486 insertions(+), 66 deletions(-) create mode 100644 src/renderer/js/smoothscroll.js create mode 100644 src/renderer/js/vue-horizontal.js diff --git a/src/renderer/index.js b/src/renderer/index.js index 1caa41fc..23be9306 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -1,3 +1,4 @@ +Vue.use(VueHorizontal); Vue.use(VueObserveVisibility); var notyf = new Notyf(); diff --git a/src/renderer/js/smoothscroll.js b/src/renderer/js/smoothscroll.js new file mode 100644 index 00000000..8c694ad6 --- /dev/null +++ b/src/renderer/js/smoothscroll.js @@ -0,0 +1,434 @@ +/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */ +(function () { + 'use strict'; + + // polyfill + function polyfill() { + // aliases + var w = window; + var d = document; + + // return if scroll behavior is supported and polyfill is not forced + if ( + 'scrollBehavior' in d.documentElement.style && + w.__forceSmoothScrollPolyfill__ !== true + ) { + return; + } + + // globals + var Element = w.HTMLElement || w.Element; + var SCROLL_TIME = 468; + + // object gathering original scroll methods + var original = { + scroll: w.scroll || w.scrollTo, + scrollBy: w.scrollBy, + elementScroll: Element.prototype.scroll || scrollElement, + scrollIntoView: Element.prototype.scrollIntoView + }; + + // define timing method + var now = + w.performance && w.performance.now + ? w.performance.now.bind(w.performance) + : Date.now; + + /** + * indicates if a the current browser is made by Microsoft + * @method isMicrosoftBrowser + * @param {String} userAgent + * @returns {Boolean} + */ + function isMicrosoftBrowser(userAgent) { + var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/']; + + return new RegExp(userAgentPatterns.join('|')).test(userAgent); + } + + /* + * IE has rounding bug rounding down clientHeight and clientWidth and + * rounding up scrollHeight and scrollWidth causing false positives + * on hasScrollableSpace + */ + var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0; + + /** + * changes scroll position inside an element + * @method scrollElement + * @param {Number} x + * @param {Number} y + * @returns {undefined} + */ + function scrollElement(x, y) { + this.scrollLeft = x; + this.scrollTop = y; + } + + /** + * returns result of applying ease math function to a number + * @method ease + * @param {Number} k + * @returns {Number} + */ + function ease(k) { + return 0.5 * (1 - Math.cos(Math.PI * k)); + } + + /** + * indicates if a smooth behavior should be applied + * @method shouldBailOut + * @param {Number|Object} firstArg + * @returns {Boolean} + */ + function shouldBailOut(firstArg) { + if ( + firstArg === null || + typeof firstArg !== 'object' || + firstArg.behavior === undefined || + firstArg.behavior === 'auto' || + firstArg.behavior === 'instant' + ) { + // first argument is not an object/null + // or behavior is auto, instant or undefined + return true; + } + + if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') { + // first argument is an object and behavior is smooth + return false; + } + + // throw error when behavior is not supported + throw new TypeError( + 'behavior member of ScrollOptions ' + + firstArg.behavior + + ' is not a valid value for enumeration ScrollBehavior.' + ); + } + + /** + * indicates if an element has scrollable space in the provided axis + * @method hasScrollableSpace + * @param {Node} el + * @param {String} axis + * @returns {Boolean} + */ + function hasScrollableSpace(el, axis) { + if (axis === 'Y') { + return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight; + } + + if (axis === 'X') { + return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth; + } + } + + /** + * indicates if an element has a scrollable overflow property in the axis + * @method canOverflow + * @param {Node} el + * @param {String} axis + * @returns {Boolean} + */ + function canOverflow(el, axis) { + var overflowValue = w.getComputedStyle(el, null)['overflow' + axis]; + + return overflowValue === 'auto' || overflowValue === 'scroll'; + } + + /** + * indicates if an element can be scrolled in either axis + * @method isScrollable + * @param {Node} el + * @param {String} axis + * @returns {Boolean} + */ + function isScrollable(el) { + var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y'); + var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X'); + + return isScrollableY || isScrollableX; + } + + /** + * finds scrollable parent of an element + * @method findScrollableParent + * @param {Node} el + * @returns {Node} el + */ + function findScrollableParent(el) { + while (el !== d.body && isScrollable(el) === false) { + el = el.parentNode || el.host; + } + + return el; + } + + /** + * self invoked function that, given a context, steps through scrolling + * @method step + * @param {Object} context + * @returns {undefined} + */ + function step(context) { + var time = now(); + var value; + var currentX; + var currentY; + var elapsed = (time - context.startTime) / SCROLL_TIME; + + // avoid elapsed times higher than one + elapsed = elapsed > 1 ? 1 : elapsed; + + // apply easing to elapsed time + value = ease(elapsed); + + currentX = context.startX + (context.x - context.startX) * value; + currentY = context.startY + (context.y - context.startY) * value; + + context.method.call(context.scrollable, currentX, currentY); + + // scroll more if we have not reached our destination + if (currentX !== context.x || currentY !== context.y) { + w.requestAnimationFrame(step.bind(w, context)); + } + } + + /** + * scrolls window or element with a smooth behavior + * @method smoothScroll + * @param {Object|Node} el + * @param {Number} x + * @param {Number} y + * @returns {undefined} + */ + function smoothScroll(el, x, y) { + var scrollable; + var startX; + var startY; + var method; + var startTime = now(); + + // define scroll context + if (el === d.body) { + scrollable = w; + startX = w.scrollX || w.pageXOffset; + startY = w.scrollY || w.pageYOffset; + method = original.scroll; + } else { + scrollable = el; + startX = el.scrollLeft; + startY = el.scrollTop; + method = scrollElement; + } + + // scroll looping over a frame + step({ + scrollable: scrollable, + method: method, + startTime: startTime, + startX: startX, + startY: startY, + x: x, + y: y + }); + } + + // ORIGINAL METHODS OVERRIDES + // w.scroll and w.scrollTo + w.scroll = w.scrollTo = function() { + // avoid action when no arguments are passed + if (arguments[0] === undefined) { + return; + } + + // avoid smooth behavior if not required + if (shouldBailOut(arguments[0]) === true) { + original.scroll.call( + w, + arguments[0].left !== undefined + ? arguments[0].left + : typeof arguments[0] !== 'object' + ? arguments[0] + : w.scrollX || w.pageXOffset, + // use top prop, second argument if present or fallback to scrollY + arguments[0].top !== undefined + ? arguments[0].top + : arguments[1] !== undefined + ? arguments[1] + : w.scrollY || w.pageYOffset + ); + + return; + } + + // LET THE SMOOTHNESS BEGIN! + smoothScroll.call( + w, + d.body, + arguments[0].left !== undefined + ? ~~arguments[0].left + : w.scrollX || w.pageXOffset, + arguments[0].top !== undefined + ? ~~arguments[0].top + : w.scrollY || w.pageYOffset + ); + }; + + // w.scrollBy + w.scrollBy = function() { + // avoid action when no arguments are passed + if (arguments[0] === undefined) { + return; + } + + // avoid smooth behavior if not required + if (shouldBailOut(arguments[0])) { + original.scrollBy.call( + w, + arguments[0].left !== undefined + ? arguments[0].left + : typeof arguments[0] !== 'object' ? arguments[0] : 0, + arguments[0].top !== undefined + ? arguments[0].top + : arguments[1] !== undefined ? arguments[1] : 0 + ); + + return; + } + + // LET THE SMOOTHNESS BEGIN! + smoothScroll.call( + w, + d.body, + ~~arguments[0].left + (w.scrollX || w.pageXOffset), + ~~arguments[0].top + (w.scrollY || w.pageYOffset) + ); + }; + + // Element.prototype.scroll and Element.prototype.scrollTo + Element.prototype.scroll = Element.prototype.scrollTo = function() { + // avoid action when no arguments are passed + if (arguments[0] === undefined) { + return; + } + + // avoid smooth behavior if not required + if (shouldBailOut(arguments[0]) === true) { + // if one number is passed, throw error to match Firefox implementation + if (typeof arguments[0] === 'number' && arguments[1] === undefined) { + throw new SyntaxError('Value could not be converted'); + } + + original.elementScroll.call( + this, + // use left prop, first number argument or fallback to scrollLeft + arguments[0].left !== undefined + ? ~~arguments[0].left + : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft, + // use top prop, second argument or fallback to scrollTop + arguments[0].top !== undefined + ? ~~arguments[0].top + : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop + ); + + return; + } + + var left = arguments[0].left; + var top = arguments[0].top; + + // LET THE SMOOTHNESS BEGIN! + smoothScroll.call( + this, + this, + typeof left === 'undefined' ? this.scrollLeft : ~~left, + typeof top === 'undefined' ? this.scrollTop : ~~top + ); + }; + + // Element.prototype.scrollBy + Element.prototype.scrollBy = function() { + // avoid action when no arguments are passed + if (arguments[0] === undefined) { + return; + } + + // avoid smooth behavior if not required + if (shouldBailOut(arguments[0]) === true) { + original.elementScroll.call( + this, + arguments[0].left !== undefined + ? ~~arguments[0].left + this.scrollLeft + : ~~arguments[0] + this.scrollLeft, + arguments[0].top !== undefined + ? ~~arguments[0].top + this.scrollTop + : ~~arguments[1] + this.scrollTop + ); + + return; + } + + this.scroll({ + left: ~~arguments[0].left + this.scrollLeft, + top: ~~arguments[0].top + this.scrollTop, + behavior: arguments[0].behavior + }); + }; + + // Element.prototype.scrollIntoView + Element.prototype.scrollIntoView = function() { + // avoid smooth behavior if not required + if (shouldBailOut(arguments[0]) === true) { + original.scrollIntoView.call( + this, + arguments[0] === undefined ? true : arguments[0] + ); + + return; + } + + // LET THE SMOOTHNESS BEGIN! + var scrollableParent = findScrollableParent(this); + var parentRects = scrollableParent.getBoundingClientRect(); + var clientRects = this.getBoundingClientRect(); + + if (scrollableParent !== d.body) { + // reveal element inside parent + smoothScroll.call( + this, + scrollableParent, + scrollableParent.scrollLeft + clientRects.left - parentRects.left, + scrollableParent.scrollTop + clientRects.top - parentRects.top + ); + + // reveal parent in viewport unless is fixed + if (w.getComputedStyle(scrollableParent).position !== 'fixed') { + w.scrollBy({ + left: parentRects.left, + top: parentRects.top, + behavior: 'smooth' + }); + } + } else { + // reveal element in viewport + w.scrollBy({ + left: clientRects.left, + top: clientRects.top, + behavior: 'smooth' + }); + } + }; + } + + if (typeof exports === 'object' && typeof module !== 'undefined') { + // commonjs + module.exports = { polyfill: polyfill }; + } else { + // global + polyfill(); + } + + }()); + \ No newline at end of file diff --git a/src/renderer/js/vue-horizontal.js b/src/renderer/js/vue-horizontal.js new file mode 100644 index 00000000..723b63e9 --- /dev/null +++ b/src/renderer/js/vue-horizontal.js @@ -0,0 +1 @@ +var VueHorizontal=function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=n(e).default.extend({name:"VueHorizontal",data:function(){return{left:0,width:0,scrollWidth:0,hasPrev:!1,hasNext:!1,debounceId:void 0}},props:{button:{type:Boolean,default:function(){return!0}},buttonBetween:{type:Boolean,default:function(){return!0}},scroll:{type:Boolean,default:function(){return!1}},responsive:{type:Boolean,default:function(){return!1}},displacement:{type:Number,default:function(){return 1}},snap:{type:String,default:function(){return"start"}}},mounted:function(){this.onScrollDebounce()},beforeDestroy:function(){clearTimeout(this.debounceId)},methods:{children:function(){return this.$refs.container.children},findPrevSlot:function(t){for(var e=this.children(),n=0;n2.5)return void this.scrollToLeft(t.scrollLeft+o)}var l=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft+l)},scrollToIndex:function(t){var e=this.children();if(e[t]){var n=this.$refs.container,i=e[t].getBoundingClientRect().left-n.getBoundingClientRect().left;this.scrollToLeft(n.scrollLeft+i)}},scrollToLeft:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"smooth",n=this.$refs.container;n.scrollTo({left:t,behavior:e})},onScroll:function(){var t=this.$refs.container;t&&(this.$emit("scroll",{left:t.scrollLeft}),clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollDebounce,100))},onScrollDebounce:function(){var t=this;this.refresh((function(e){t.$emit("scroll-debounce",e)}))},refresh:function(t){var e=this;this.$nextTick((function(){var n=e.calculate();e.left=n.left,e.width=n.width,e.scrollWidth=n.scrollWidth,e.hasNext=n.hasNext,e.hasPrev=n.hasPrev,null==t||t(n)}))},calculate:function(){var t=this.$refs.container,e=this.children()[0];return{left:t.scrollLeft,width:t.clientWidth,scrollWidth:t.scrollWidth,hasNext:t.scrollWidth>t.scrollLeft+t.clientWidth+2.5,hasPrev:function(){var n,i;if(0===t.scrollLeft)return!1;var o=t.getBoundingClientRect().left,l=null!==(n=null==e||null===(i=e.getBoundingClientRect())||void 0===i?void 0:i.left)&&void 0!==n?n:0;return Math.abs(o-l)>=2.5}()}}}});function o(t,e,n,i,o,l,r,a,s,c){"boolean"!=typeof r&&(s=a,a=r,r=!1);const d="function"==typeof n?n.options:n;let h;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),l?(h=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(l)},d._ssrRegister=h):e&&(h=r?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),h)if(d.functional){const t=d.render;d.render=function(e,n){return h.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,h):[h]}return n}const l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(t){return(t,e)=>function(t,e){const n=l?e.media||"default":t,i=s[n]||(s[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===a&&(a=document.head||document.getElementsByTagName("head")[0]),a.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const t=i.ids.size-1,e=document.createTextNode(n),o=i.element.childNodes;o[t]&&i.element.removeChild(o[t]),o.length?i.element.insertBefore(e,o[t]):i.element.appendChild(e)}}}(t,e)}let a;const s={};var c=o({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-horizontal",staticStyle:{position:"relative",display:"flex"}},[t.button&&t.hasPrev?n("div",{staticClass:"v-hl-btn v-hl-btn-prev",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.prev(e)}}},[t._t("btn-prev",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigate to previous button"}},[n("path",{attrs:{d:"m9.8 12 5 5a1 1 0 1 1-1.4 1.4l-5.7-5.7a1 1 0 0 1 0-1.4l5.7-5.7a1 1 0 0 1 1.4 1.4l-5 5z"}})])])],2):t._e(),t._v(" "),t.button&&t.hasNext?n("div",{staticClass:"v-hl-btn v-hl-btn-next",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.next(e)}}},[t._t("btn-next",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigate to next button"}},[n("path",{attrs:{d:"m14.3 12.1-5-5a1 1 0 0 1 1.4-1.4l5.7 5.7a1 1 0 0 1 0 1.4l-5.7 5.7a1 1 0 0 1-1.4-1.4l5-5z"}})])])],2):t._e(),t._v(" "),n("div",{ref:"container",staticClass:"v-hl-container",class:{"v-hl-responsive":t.responsive,"v-hl-scroll":t.scroll,"v-hl-snap-start":"start"===t.snap,"v-hl-snap-center":"center"===t.snap,"v-hl-snap-end":"end"===t.snap},on:{"&scroll":function(e){return t.onScroll(e)}}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-45080727_0",{source:".v-hl-btn[data-v-45080727]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center;cursor:pointer}.v-hl-btn-prev[data-v-45080727]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-45080727]{transform:translateX(-50%)}.v-hl-btn-next[data-v-45080727]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-45080727]{transform:translateX(50%)}.v-hl-svg[data-v-45080727]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-45080727]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-45080727]{flex-shrink:0;box-sizing:border-box;min-height:1px}.v-hl-snap-start>*[data-v-45080727]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-45080727]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-45080727]{scroll-snap-align:end}.v-hl-container[data-v-45080727]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-45080727]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-45080727]{width:100%;margin-right:24px}.v-hl-responsive[data-v-45080727]>:last-child{margin-right:0}@media (min-width:640px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 24px)/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 48px)/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 72px)/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 96px)/ 5)}}",map:void 0,media:void 0})}),i,"data-v-45080727",!1,void 0,!1,r,void 0,void 0),d=function(t){d.installed||(d.installed=!0,t.component("VueHorizontal",c))},h={install:d},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(h),c.install=d,t.default=c,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue); \ No newline at end of file diff --git a/src/renderer/style.less b/src/renderer/style.less index 4b88be9c..358d34c7 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -3751,14 +3751,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { /* horizontal media scroller */ .cd-hmedia-scroller { - margin: 0 auto; - display: flex; - flex-flow: row; - overflow-x: scroll; - overflow-y: hidden; - height: 284px; - align-items: center; - &::-webkit-scrollbar-thumb { box-shadow: none; } @@ -3767,16 +3759,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%); } - &.small { - overflow-x: overlay; - height: 210px; - } - &.hmedia-scroller-card { - height: 370px; - .mediaitem-card { - margin: 12px; + margin: 16px; } } } @@ -4047,7 +4032,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { .cd-mediaitem-square-sp { --spcolor: var(""); width: 190px; - height: 250px; + height: 245px; display: inline-flex; flex: 0 0 auto; flex-direction: column; diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs index a8c709f6..0c26d60d 100644 --- a/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs +++ b/src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs @@ -1,10 +1,8 @@ diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs index a9c3a036..0f3e7bd7 100644 --- a/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs +++ b/src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs @@ -1,5 +1,5 @@ diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs index f7a5e4b3..d83cd68e 100644 --- a/src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs +++ b/src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs @@ -1,9 +1,11 @@ diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs index e1413c7c..b01bfd63 100644 --- a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs +++ b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs @@ -1,10 +1,10 @@ diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index a4710132..55b4403d 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -19,6 +19,8 @@ + + diff --git a/src/renderer/views/pages/artist-feed.ejs b/src/renderer/views/pages/artist-feed.ejs index 2a354bd8..9c34d485 100644 --- a/src/renderer/views/pages/artist-feed.ejs +++ b/src/renderer/views/pages/artist-feed.ejs @@ -8,18 +8,16 @@

{{app.getLz('home.followedArtists')}}

-
- -
- - -
- -
+ +
+ + +
+ diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs index a34b3f94..74c81f7e 100644 --- a/src/renderer/views/pages/cider-playlist.ejs +++ b/src/renderer/views/pages/cider-playlist.ejs @@ -169,8 +169,10 @@

{{ data.views[view].attributes.title }}

-
- +
+
+ +
diff --git a/src/renderer/views/pages/home.ejs b/src/renderer/views/pages/home.ejs index f91ada8c..0a1abbb8 100644 --- a/src/renderer/views/pages/home.ejs +++ b/src/renderer/views/pages/home.ejs @@ -53,9 +53,9 @@

{{app.getLz('home.madeForYou')}}

- + + +
@@ -71,10 +71,10 @@
- + :item="item"> +
@@ -86,7 +86,7 @@ \ No newline at end of file diff --git a/src/renderer/views/pages/zoo.ejs b/src/renderer/views/pages/zoo.ejs index 298659f0..6b065883 100644 --- a/src/renderer/views/pages/zoo.ejs +++ b/src/renderer/views/pages/zoo.ejs @@ -5,8 +5,5 @@ {{ $store.state.test }} -
- -