From cf721e4b3cda3589579f156f887c935e9ef68018 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Tue, 13 Jan 2015 13:17:26 -0800 Subject: [PATCH] refresh op shelf detail page (bug 1103300) --- src/dev.html | 2 +- src/media/css/feed/collections.styl | 2 +- src/media/css/feed/feed.styl | 206 +-------------------- src/media/css/feed/landing.styl | 5 +- src/media/css/feed/shelves.styl | 110 +++++++++++ src/media/js/views/feed/feed_collection.js | 4 +- src/media/js/views/feed/feed_shelf.js | 8 +- src/templates/_macros/feed_item.html | 68 +++---- src/templates/feed/feed_shelf.html | 4 +- 9 files changed, 149 insertions(+), 260 deletions(-) create mode 100644 src/media/css/feed/shelves.styl diff --git a/src/dev.html b/src/dev.html index db9d14f0f5..578ee12506 100644 --- a/src/dev.html +++ b/src/dev.html @@ -53,7 +53,7 @@ - + diff --git a/src/media/css/feed/collections.styl b/src/media/css/feed/collections.styl index 009bd8ed10..73c1b3f2fd 100644 --- a/src/media/css/feed/collections.styl +++ b/src/media/css/feed/collections.styl @@ -1,5 +1,5 @@ /* - Stylesheet for collections. + Stylesheet for collections. Landing styles are also used by shelves. */ @import '../lib'; diff --git a/src/media/css/feed/feed.styl b/src/media/css/feed/feed.styl index afec61b3cc..454e2cca45 100644 --- a/src/media/css/feed/feed.styl +++ b/src/media/css/feed/feed.styl @@ -1,25 +1,6 @@ /* This is a shared file between Fireplace and Transonic. */ @import '../lib'; -// Operator shelf colors and regions. -$default_shelf_color = #ce001c; -$movistar_regions = (mx co ar uy pe es cl ve ec gt sv ni pa cr); -$movistar_color = #7AB800; -$vivo_regions = (br); -$vivo_color = #FF9900; -$o2_regions = (de) -$o2_color = #000066; -$telenor_regions = (hu me rs bd) -$telenor_color = #00ACE7; -$grameenphone_regions = (bd); -$grameenphone_color = #00ACE7; -$tmobile_regions = (hu pl); -$tmobile_color = #E20074; -$kddi_regions = (jp) -$kddi_color = #E35205; -$mtn_regions = (za) -$mtn_color = #CD6723; - .feed-item-item { // Wrapper around feed-items on the Feed (homepage). margin: 0 auto $vertical-tile-padding auto; @@ -150,33 +131,6 @@ $mtn_color = #CD6723; bottom: 20px; } -@media $base-desktop { - // Op shelf landing. - .shelf-landing { - .detail-item.header-block, - .feed-item { - width: $feed-column-width; - - .curve { - left: -40px; - } - } - .detail-item.header-block { - margin: 0 auto; - - .desc { - font-size: 13px; - padding: 10px; - } - } - } -} - -// Feed app list should have a top margin when no desc present. -.shelf-landing .header-block + .feed { - margin-top: 10px; -} - .multi-app-tile { background-color: #fff; margin: 0 auto; @@ -296,173 +250,15 @@ $mtn_color = #CD6723; } } } - &.shelf { - height: 90px; - - .curve { - background-color: rgba($default_shelf_color, 0.6); - top: 50px; - - [data-carrier="telefonica"]& { - for region in $movistar_regions { - [data-region={region}]& { - background-color: rgba($movistar_color, 0.6); - } - } - for region in $vivo_regions { - [data-region={region}]& { - background-color: rgba($vivo_color, 0.6); - } - } - } - [data-carrier="o2"]& { - for region in $o2_regions { - [data-region={region}]& { - background-color: rgba($o2_color, 0.6); - } - } - } - [data-carrier="telenor"]& { - for region in $telenor_regions { - [data-region={region}]& { - background-color: rgba($telenor_color, 0.6); - } - } - } - [data-carrier="grameenphone"]& { - for region in $grameenphone_regions { - [data-region={region}]& { - background-color: rgba($grameenphone_color, 0.6); - } - } - } - [data-carrier="deutsche_telekom"]& { - for region in $tmobile_regions { - [data-region={region}]& { - background-color: rgba($tmobile_color, 0.6); - } - } - } - [data-carrier="kddi"]& { - for region in $kddi_regions { - [data-region={region}]& { - background-color: rgba($kddi_color, 0.6); - } - } - } - [data-carrier="mtn"]& { - for region in $mtn_regions { - [data-region={region}]& { - background-color: rgba($mtn_color, 0.6); - } - } - } - } - - .info { - position: relative; - margin-top: 60px; - z-index: 15; - } - .desc, .author { - display: none; - } - } - &.grouped-collection, - &.shelf.shelf-landing { - height: 150px; - - .curve { - height: 70px; - top: 80px; - } - .info { - bottom: -45px; - } - } } + section.full.feed-item { background-size: cover; } -.feed-landing { - &.shelf-landing .feed-item { - position: relative; - - &.mega.full .desc { - top: 155px; - } - &.mega.full.has-background { - min-height: 240px; - - .desc { - top: 100px; - } - } - &.mega.full { - height: 315px; - } - } - &.shelf-landing { - .feed-item { - margin-bottom: 0; - - &.full:not(.has-desc) { - margin-bottom: $vertical-tile-margin; - } - } - .desc { - color: $hungry-text; - font-size: 15px; - font-weight: light; - line-height: 22px; - padding: 20px; - } - } - &.collection-landing-promo { - h1.name { - white-space: normal; - } - } -} - -.collection-landing-promo, -.shelf-landing { - .feed { - padding-top: 0; - max-width: 100%; - } - .detail-item { - margin-left: 10px; - width: $mobile-tile-width; - - &.header-block { - margin-top: 0; - } - } -} - -.collection-landing-promo, -.shelf-landing { - .desc { - background: #fff; - margin-bottom: $vertical-tile-margin; - } -} - .app-link { &:hover, &:active { text-decoration: none; } } - -@media (max-width: 321px) { - .shelf-landing { - .header-block, - .feed-item { - margin-left: 0; - width: $feed-column-width; - } - } -} diff --git a/src/media/css/feed/landing.styl b/src/media/css/feed/landing.styl index d3c056eb20..a391126d07 100644 --- a/src/media/css/feed/landing.styl +++ b/src/media/css/feed/landing.styl @@ -16,8 +16,11 @@ .feed-landing-bg-image { margin: 0 auto; - // Change some stylings when a background image is present. + img { + max-width: $mobile-content-width; + } + .feed-landing-header-inner { + // Change some stylings when a background image is present. margin-top: 20px; h1 { diff --git a/src/media/css/feed/shelves.styl b/src/media/css/feed/shelves.styl new file mode 100644 index 0000000000..921ad0b70d --- /dev/null +++ b/src/media/css/feed/shelves.styl @@ -0,0 +1,110 @@ +/* + Stylesheet for operator shelves. +*/ +@import '../lib'; + +// Operator shelf colors and regions. +$default_shelf_color = #ce001c; +$movistar_regions = (mx co ar uy pe es cl ve ec gt sv ni pa cr); +$movistar_color = #7AB800; +$vivo_regions = (br); +$vivo_color = #FF9900; +$o2_regions = (de) +$o2_color = #000066; +$telenor_regions = (hu me rs bd) +$telenor_color = #00ACE7; +$grameenphone_regions = (bd); +$grameenphone_color = #00ACE7; +$tmobile_regions = (hu pl); +$tmobile_color = #E20074; +$kddi_regions = (jp) +$kddi_color = #E35205; +$mtn_regions = (za) +$mtn_color = #CD6723; + +.shelf.shelf-landing { + height: 150px; + + .curve { + height: 70px; + top: 80px; + } + .info { + bottom: -45px; + } +} + +.shelf { + height: 90px; + + .curve { + background-color: rgba($default_shelf_color, 0.6); + top: 50px; + } + .info { + position: relative; + margin-top: 60px; + z-index: 15; + } + .desc, + .author { + display: none; + } +} + +.curve { + [data-carrier="telefonica"]& { + for region in $movistar_regions { + [data-region={region}]& { + background-color: rgba($movistar_color, 0.6); + } + } + for region in $vivo_regions { + [data-region={region}]& { + background-color: rgba($vivo_color, 0.6); + } + } + } + [data-carrier="o2"]& { + for region in $o2_regions { + [data-region={region}]& { + background-color: rgba($o2_color, 0.6); + } + } + } + [data-carrier="telenor"]& { + for region in $telenor_regions { + [data-region={region}]& { + background-color: rgba($telenor_color, 0.6); + } + } + } + [data-carrier="grameenphone"]& { + for region in $grameenphone_regions { + [data-region={region}]& { + background-color: rgba($grameenphone_color, 0.6); + } + } + } + [data-carrier="deutsche_telekom"]& { + for region in $tmobile_regions { + [data-region={region}]& { + background-color: rgba($tmobile_color, 0.6); + } + } + } + [data-carrier="kddi"]& { + for region in $kddi_regions { + [data-region={region}]& { + background-color: rgba($kddi_color, 0.6); + } + } + } + [data-carrier="mtn"]& { + for region in $mtn_regions { + [data-region={region}]& { + background-color: rgba($mtn_color, 0.6); + } + } + } +} diff --git a/src/media/js/views/feed/feed_collection.js b/src/media/js/views/feed/feed_collection.js index b4df5327ae..93a98b642e 100644 --- a/src/media/js/views/feed/feed_collection.js +++ b/src/media/js/views/feed/feed_collection.js @@ -1,5 +1,5 @@ -define('views/feed/feed_collection', ['jquery', 'l10n', 'utils', 'utils_local', 'z'], - function($, l10n, utils, utils_local, z) { +define('views/feed/feed_collection', ['jquery', 'l10n', 'utils', 'z'], + function($, l10n, utils, z) { 'use strict'; var gettext = l10n.gettext; diff --git a/src/media/js/views/feed/feed_shelf.js b/src/media/js/views/feed/feed_shelf.js index 76524fd268..81702c1804 100644 --- a/src/media/js/views/feed/feed_shelf.js +++ b/src/media/js/views/feed/feed_shelf.js @@ -1,5 +1,6 @@ -define('views/feed/feed_shelf', ['jquery', 'l10n', 'utils', 'utils_local', 'z'], - function($, l10n, utils, utils_local, z) { +define('views/feed/feed_shelf', + ['jquery', 'l10n', 'utils', 'z'], + function($, l10n, utils, z) { 'use strict'; var gettext = l10n.gettext; @@ -10,14 +11,11 @@ define('views/feed/feed_shelf', ['jquery', 'l10n', 'utils', 'utils_local', 'z'], var slug = args[0]; builder.start('feed/feed_shelf.html', { - landing: true, slug: slug }); builder.onload('shelf', function(data) { builder.z('title', utils.translate(data.name)); - utils_local.initSalvattore( - document.querySelector('.shelf-landing [data-columns]')); }); }; }); diff --git a/src/templates/_macros/feed_item.html b/src/templates/_macros/feed_item.html index b2fc68ca1b..efee41130d 100644 --- a/src/templates/_macros/feed_item.html +++ b/src/templates/_macros/feed_item.html @@ -188,19 +188,25 @@

{{ coll.name|translate(coll)|safe }}

{% endmacro %} {% macro collection_landing(coll) %} + {# Used both for collections and shelves. Reduce, reuse, recycle. #}
- {{ collection_promo(coll) if coll.type == feed.COLL_PROMO else - collection_listing_header(coll) }} + {# Reuse the feed representation as the mobile header. #} + {% if coll.carrier %} + {{ shelf(coll, true) }} + {% else %} + {{ collection_promo(coll) if coll.type == feed.COLL_PROMO else + collection_listing_header(coll) }} + {% endif %}
{% if coll.background_image %}
- {{ coll.name }} + {{ coll.name }}
{% endif %}
@@ -239,43 +245,15 @@

{{ group.name }}

{% endif %} {% endmacro %} -{% macro feed_shelf(shelf, landing) %} - -
-
-
-

{{ shelf.name|translate(shelf)|safe }}

-
-
- -{% endmacro %} - -{% macro feed_shelf_landing(shelf) %} -
-
- {{ feed_shelf(shelf, true) }} - {% if shelf.description %} -

{{ shelf.description|translate(shelf) }}

- {% endif %} -
-
- {% if shelf.apps %} - {% for app in shelf.apps %} -
- {{ app_tile(app, src='operator-shelf-element') }} -
- {% endfor %} - {% else %} - {# L10n: Please do your best to capture the essence of Scooby Doo. #} - {{ _("Ruh roh! No apps here, Shaggy!") }} - {% endif %} +{% macro shelf(shelf, landing) %} +
+
+
+

{{ shelf.name|translate(shelf)|safe }}

{% endmacro %} @@ -291,6 +269,10 @@

{{ shelf.name|translate(shelf)|safe }}

{{ collection(obj.collection) }} {% elif obj.item_type == 'shelf' %} - {{ feed_shelf(obj.shelf) }} + + {{ shelf(obj.shelf) }} + {% endif %} {% endmacro %} diff --git a/src/templates/feed/feed_shelf.html b/src/templates/feed/feed_shelf.html index b16a396bbc..2557928a22 100644 --- a/src/templates/feed/feed_shelf.html +++ b/src/templates/feed/feed_shelf.html @@ -1,8 +1,8 @@ -{% include "_macros/feed_item.html" %} +{% from "_macros/feed_item.html" import collection_landing %} {% defer (url=anonApi('feed-shelf', [slug]), pluck='apps', as='app', id='shelf') %} - {{ feed_shelf_landing(response) }} + {{ collection_landing(response) }} {% placeholder %} {% except %}