diff --git a/src/media/css/app-list.styl b/src/media/css/app-list.styl index 787cbba..c216715 100644 --- a/src/media/css/app-list.styl +++ b/src/media/css/app-list.styl @@ -18,11 +18,11 @@ ul { display: flex; flex-wrap: wrap; - padding: rem(3.1) rem(11.6); + padding: rem(12 - (3 + 2)) rem(11.6) rem(3 + 2); } li { - margin: rem(2.9) rem(2.6); + margin: rem(3 + 2) rem(2.6) rem(12 - (3 + 2)); list-style: none; @@ -38,6 +38,8 @@ } .app-button { + position: relative; + width: auto; height: @width; @@ -50,12 +52,38 @@ &.focused { transform: scale(1.2); cursor: pointer; + + .name { + bottom: - rem(.8 + 2 + 2); + } } &.pressed { transform: scale(1); + + .name { + bottom: - rem(1 + 2 + 2); + } } } + + .name { + position: absolute; + bottom: - rem(3 + 2); + + width: 100%; + overflow: hidden; + + font-size: rem(1.8); + line-height: rem(2); + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + + color: $main-font-color; + + cubic-bezier-transition(); + } } .app-list-app { @@ -96,27 +124,6 @@ background-color: $greyscale-light-grey; background-size: cover; background-position: center center; - - &::after { - content: attr(data-name); - box-sizing: border-box; - - display: block; - width: 100%; - height: rem(6); - margin-top: rem(12.9); - padding: rem(1) rem(3) 0; - overflow: hidden; - - font-size: rem(1.6); - line-height: rem(2.2); - text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - - color: $greyscale-white; - background-color: rgba(0, 0, 0, .4); - } } .star { @@ -157,7 +164,7 @@ @supports (-webkit-appearance:none) { +rtl() { .star::before { - text-indent: rem(-46.75); + text-indent: - rem(46.75); } } } diff --git a/src/media/css/app-preview.styl b/src/media/css/app-preview.styl index 414d817..69ee978 100644 --- a/src/media/css/app-preview.styl +++ b/src/media/css/app-preview.styl @@ -74,7 +74,7 @@ $app-preview-background-color = #72C9B0; } .flag { - right: rem(-4); + right: - rem(4); } } @@ -93,7 +93,7 @@ $app-preview-background-color = #72C9B0; } .flag { - left: rem(-4); + left: - rem(4); transform: scaleX(-1); } @@ -103,7 +103,7 @@ $app-preview-background-color = #72C9B0; @supports (-webkit-appearance:none) { +rtl() { &::before { - text-indent: rem(-43.625); + text-indent: - rem(43.625); } } } @@ -145,7 +145,7 @@ $app-preview-background-color = #72C9B0; } .description { - height: rem(3.1) * 6; + height: rem(3.1 * 6); overflow: hidden; font-size: rem(2.6); diff --git a/src/media/css/lib/colors.styl b/src/media/css/lib/colors.styl index a6f309b..39f99f8 100644 --- a/src/media/css/lib/colors.styl +++ b/src/media/css/lib/colors.styl @@ -11,6 +11,7 @@ $greyscale-white = #FFF; // Main. $main-background-color = #CBCDCD; +$main-font-color = #4D4D4D; // Suggested. $suggested-star-color = #E22860; diff --git a/src/media/css/privacy.styl b/src/media/css/privacy.styl index 799cf72..24990ac 100644 --- a/src/media/css/privacy.styl +++ b/src/media/css/privacy.styl @@ -6,7 +6,6 @@ $privacy-content-height = rem(70); $privacy-background-color = #E0E2E4; -$privacy-font-color = #4D4D4D; $privacy-scrollbar-color = #CACCCE; .privacy-container { @@ -20,7 +19,7 @@ $privacy-scrollbar-color = #CACCCE; width: (161 / 192) * 100%; - color: $privacy-font-color; + color: $main-font-color; } .privacy-content { @@ -60,7 +59,7 @@ $privacy-scrollbar-color = #CACCCE; font-weight: bold; - color: $privacy-font-color; + color: $main-font-color; cubic-bezier-transition(); @@ -72,7 +71,7 @@ $privacy-scrollbar-color = #CACCCE; .scrollbar { position: absolute; top: 0; - right: rem(-3); + right: - rem(3); width: rem(2); height: $privacy-content-height; diff --git a/src/media/css/tutorial.styl b/src/media/css/tutorial.styl index 3179c05..30fe140 100644 --- a/src/media/css/tutorial.styl +++ b/src/media/css/tutorial.styl @@ -4,7 +4,7 @@ @import 'lib'; -$shadow = 0 0 5px rgba(0, 0, 0, .5); +$shadow = 0 0 5px rgba($greyscale-black, .5); .tutorial-container { full-screen(); @@ -80,7 +80,7 @@ $shadow = 0 0 5px rgba(0, 0, 0, .5); +ltr() { b { - text-indent: rem(-.8); + text-indent: - rem(.8); } } diff --git a/src/media/js/routes.js b/src/media/js/routes.js index 24ebab6..ea7ea12 100644 --- a/src/media/js/routes.js +++ b/src/media/js/routes.js @@ -11,9 +11,14 @@ define('routes', {pattern: '^/tv/?$', view_name: 'homepage'} ]); + if (location.origin.match(/github/)) { + router.addRoutes([ + {pattern: '^/marketplace-tv-front-end/?$', view_name: 'homepage'} + ]); + } + router.api.addRoutes({ - // TODO: Update API url after backend is ready. - 'apps': '/api/v2/tv/multi-search/', + 'apps': '/api/v2/tv/multi-search/' }); // Processors to set query arguments on API requests. diff --git a/src/media/js/views/homepage.js b/src/media/js/views/homepage.js index cec72a6..12388bc 100644 --- a/src/media/js/views/homepage.js +++ b/src/media/js/views/homepage.js @@ -16,19 +16,26 @@ define('views/homepage', var top = this.offsetTop; var height = this.offsetHeight; - var margin = 5.8 * 10; - var appTop = top - margin; - var appBottom = top + height + margin * 2/3 - appListHeight; - var appHeight = height + margin * 2; + var computedStyle = getComputedStyle(this); + + var marginTop = parseInt(computedStyle.marginTop, 10); + var marginBottom = parseInt(computedStyle.marginBottom, 10); + + var appTop = top - marginTop; + var appBottom = top + height + marginBottom * 1.5 - appListHeight; + var appHeight = height + marginTop + marginBottom; var newPosition; - if (appListHeight < appHeight) { + if (appListScrollTop === 0) { + newPosition = appTop; + } else if (appListHeight < appHeight) { // Current scope height is too narrow. // Scroll to the center of the app. - newPosition = appTop + (appHeight - appListHeight) / 2; - } else if (appListScrollTop >= appTop) { + newPosition = top - (marginTop + marginBottom) / 2 + + (appHeight - appListHeight) / 2; + } else if (appListScrollTop > appTop) { // App is above current scope. newPosition = appTop; } else if (appListScrollTop < appBottom) { diff --git a/src/templates/homepage.html b/src/templates/homepage.html index ce2e9a3..e000db7 100644 --- a/src/templates/homepage.html +++ b/src/templates/homepage.html @@ -7,17 +7,16 @@
  • {% if app.icons['336'] %} -
    +
    {% elif app.icons['128'] %} -
    +
    {% endif %} {% if app.tv_featured %} {% endif %}
    + {{ app.name }}
    • {% endfor %}