Skip to content
This repository has been archived by the owner on Mar 15, 2018. It is now read-only.

refresh op shelf detail page (bug 1103300) #906

Merged
merged 1 commit into from Jan 13, 2015
Merged

refresh op shelf detail page (bug 1103300) #906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/dev.html
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@
<link rel="stylesheet" href="/media/css/feed/icon-grid.styl.css">
<link rel="stylesheet" href="/media/css/feed/landing.styl.css">
<link rel="stylesheet" href="/media/css/feed/layout.styl.css">
<link rel="stylesheet" href="/media/css/feed/mini-tiles.styl.css">
<link rel="stylesheet" href="/media/css/feed/shelves.styl.css">
<link rel="stylesheet" href="/media/css/feedback.styl.css">
<link rel="stylesheet" href="/media/css/forms.styl.css">
<link rel="stylesheet" href="/media/css/form-modal.styl.css">
Expand Down
2 changes: 1 addition & 1 deletion src/media/css/feed/collections.styl
View file
Open in desktop
@@ -1,5 +1,5 @@
/*
Stylesheet for collections.
Stylesheet for collections. Landing styles are also used by shelves.
*/
@import '../lib';

Expand Down
206 changes: 1 addition & 205 deletions src/media/css/feed/feed.styl
View file
Open in desktop
@@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
}
5 changes: 4 additions & 1 deletion src/media/css/feed/landing.styl
View file
Open in desktop
Expand Up @@ -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 {
Expand Down
110 changes: 110 additions & 0 deletions src/media/css/feed/shelves.styl
View file
Open in desktop
@@ -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);
}
}
}
}
4 changes: 2 additions & 2 deletions src/media/js/views/feed/feed_collection.js
View file
Open in desktop
@@ -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;

Expand Down