Merge pull request #5442 from guardian/normalize-container-titles-mobile

Remove tonal treatment of container titles on mobile
guardian · Aug 7, 2014 · dff759b · dff759b
2 parents ac1b16a + 8907a5e
commit dff759b
Show file tree

Hide file tree

Showing 18 changed files with 19 additions and 52 deletions.
diff --git a/common/app/assets/images/global/arrow-grey-large.svg b/common/app/assets/images/global/arrow-grey-large.svg
diff --git a/common/app/assets/stylesheets/module/containers/_multimedia.scss b/common/app/assets/stylesheets/module/containers/_multimedia.scss
@@ -28,9 +28,6 @@
     .linkslist__item {
         border-top-color: mix(#ffffff, lighten($c-neutral1, 8%), 50%);
     }
-    .container__title {
-        background-color: transparent;
-    }
     .item {
         margin-bottom: 0;
     }

diff --git a/common/app/assets/stylesheets/module/content/_media.global.scss b/common/app/assets/stylesheets/module/content/_media.global.scss
@@ -235,17 +235,6 @@
     }
 }
 
-//This is temporary until facia headings are consistent.
-.onward {
-    .container--multimedia {
-        .container__title {
-            @include rem((
-                font-size: get-font-size($fs-headers, 3)
-            ));
-        }
-    }
-}
-
 
 /* Media item
    ========================================================================== */

diff --git a/common/app/assets/stylesheets/module/facia/_facia-container.scss b/common/app/assets/stylesheets/module/facia/_facia-container.scss
@@ -208,16 +208,5 @@
         .container__border.tone-accent-border {
             border-top: 1px solid $c-neutral4;
         }
-
-        .container__title,
-        .container__title.tone-background {
-            background: transparent;
-            color: $c-neutral1;
-
-            @include mq($to: tablet) {
-                @include fs-header(3, true);
-                padding-left: 0;
-            }
-        }
     }
 }
diff --git a/common/app/assets/stylesheets/module/facia/_items.scss b/common/app/assets/stylesheets/module/facia/_items.scss
@@ -25,14 +25,14 @@
     position: relative;
 }
 .container__title {
+    @include box-sizing(border-box);
     position: relative;
-    @include fs-header(5);
+    @include fs-header(3);
     @include rem((
-        padding: $gs-baseline/3 (gs-span(1) + $gs-gutter/5) $gs-baseline/3 $gs-gutter/5,
-        min-height: gs-height(1) - $gs-baseline*(2/3)
+        padding: $gs-baseline/4 (gs-span(1) + $gs-gutter/5) $gs-baseline/3 0,
+        min-height: gs-height(1)
     ));
-    background-color: $c-newsDefault;
-    color: #ffffff;
+    color: $c-neutral1;
 
     .today__sub {
         @include mq(faciaLeftCol) {
@@ -47,21 +47,12 @@
     }
 
     @include mq(tablet) {
-        @include fs-header(3, true);
         min-height: 0;
-        padding-left: 0;
-        padding-right: 0;
-        background-color: transparent !important;
         @include rem((
             padding-top: $gs-baseline/2,
             margin-bottom: $gs-baseline
         ));
         line-height: 1;
-        color: $c-neutral1;
-
-        a {
-            color: inherit;
-        }
     }
     @include mq(desktop) {
         @include rem((

diff --git a/common/app/views/fragments/containers/commentanddebate.scala.html b/common/app/views/fragments/containers/commentanddebate.scala.html
@@ -17,7 +17,7 @@
                     <div class="container__border tone-@style.tone tone-accent-border"></div>
                     <div class="container__header">
                         @title.map { title =>
-                            <h2 class="container__title tone-@style.tone tone-background">
+                            <h2 class="container__title">
                                 @href.map { href =>
                                     <a data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                                 }.getOrElse{

diff --git a/common/app/views/fragments/containers/features.scala.html b/common/app/views/fragments/containers/features.scala.html
@@ -17,7 +17,7 @@
                     <div class="container__border tone-@style.tone tone-accent-border"></div>
                     <div class="container__header">
                         @title.map { title =>
-                            <h2 class="container__title tone-@style.tone tone-background">
+                            <h2 class="container__title">
                                 @href.map { href =>
                                     <a class="container__title__label u-text-hyphenate" data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                                 }.getOrElse{

diff --git a/common/app/views/fragments/containers/featuresauto.scala.html b/common/app/views/fragments/containers/featuresauto.scala.html
@@ -18,7 +18,7 @@
                         <div class="container__border tone-@style.tone tone-accent-border"></div>
                         <div class="container__header">
                             @title.map { title =>
-                                <h2 class="container__title tone-@style.tone tone-background">
+                                <h2 class="container__title">
                                     @href.map { href =>
                                         <a class="container__title__label u-text-hyphenate" data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                                     }.getOrElse{

diff --git a/common/app/views/fragments/containers/featuresvolumes.scala.html b/common/app/views/fragments/containers/featuresvolumes.scala.html
@@ -27,7 +27,7 @@
                         <div class="container__border tone-@style.tone tone-accent-border"></div>
                         <div class="container__header">
                             @title.map { title =>
-                                <h2 class="container__title tone-@style.tone tone-background">
+                                <h2 class="container__title">
                                     @href.map { href =>
                                         <a class="container__title__label u-text-hyphenate" data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                                     }.getOrElse{

diff --git a/common/app/views/fragments/containers/headline.scala.html b/common/app/views/fragments/containers/headline.scala.html
@@ -18,7 +18,7 @@
                 <div class="container__border tone-@style.tone tone-accent-border"></div>
                 <div class="container__header">
                     @title.map { title =>
-                        <h2 class="container__title tone-@style.tone tone-background">
+                        <h2 class="container__title">
                         @href.map { href =>
                             <a data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                         }.getOrElse{

diff --git a/common/app/views/fragments/containers/multimedia.scala.html b/common/app/views/fragments/containers/multimedia.scala.html
@@ -18,7 +18,7 @@
                 <div class="container__banding">
                     <div class="facia-container__inner">
                         @title.map { title =>
-                            <h2 class="container__title tone-@style.tone tone-background">
+                            <h2 class="container__title">
                                 @href.map { href =>
                                     <a class="container__title__label u-text-hyphenate" data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                                 }.getOrElse{

diff --git a/common/app/views/fragments/containers/news.scala.html b/common/app/views/fragments/containers/news.scala.html
@@ -26,7 +26,7 @@
                     <div class="facia-container__inner">
                         <div class="container__border tone-@style.tone tone-accent-border"></div>
                         <div class="container__header">
-                            <h2 class="container__title tone-news tone-background">
+                            <h2 class="container__title">
                                 @fragments.containers.elements.dateOrTitle(collection, items)
                             </h2>
                         </div>

diff --git a/common/app/views/fragments/containers/people.scala.html b/common/app/views/fragments/containers/people.scala.html
@@ -17,7 +17,7 @@
                     <div class="container__border tone-@style.tone tone-accent-border"></div>
                     <div class="container__header">
                         @title.map { title =>
-                            <h2 class="container__title tone-@style.tone tone-background">
+                            <h2 class="container__title">
                                 @href.map { href =>
                                     <a class="container__title__label u-text-hyphenate" data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                                 }.getOrElse{

diff --git a/common/app/views/fragments/containers/popular.scala.html b/common/app/views/fragments/containers/popular.scala.html
@@ -19,7 +19,7 @@
                 <div class="container__border tone-@style.tone tone-accent-border"></div>
                 <div class="container__header">
                     @title.map { title =>
-                        <h2 class="container__title tone-@style.tone tone-background">
+                        <h2 class="container__title">
                             @href.map { href =>
                                 <a data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                             }.getOrElse{

diff --git a/common/app/views/fragments/containers/small_list.scala.html b/common/app/views/fragments/containers/small_list.scala.html
@@ -19,7 +19,7 @@
                 <div class="container__border tone-@style.tone tone-accent-border"></div>
                 <div class="container__header">
                 @title.map { title =>
-                    <h2 class="container__title tone-@style.tone tone-background">
+                    <h2 class="container__title">
                     @href.map { href =>
                         <a data-link-name="section heading" href="@LinkTo {/@href}">@Html(title)</a>
                     }.getOrElse {

diff --git a/common/app/views/fragments/containers/special.scala.html b/common/app/views/fragments/containers/special.scala.html
@@ -20,7 +20,7 @@
 
                     <div class="container__header">
                         @title.map { title =>
-                            <h2 class="container__title tone-@style.tone tone-background">
+                            <h2 class="container__title">
                                 @href.map { href =>
                                     <a class="container__title__label u-text-hyphenate" data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                                 }.getOrElse{

diff --git a/common/app/views/fragments/containers/tag.scala.html b/common/app/views/fragments/containers/tag.scala.html
@@ -22,7 +22,7 @@
                 <div class="container__border tone-@style.tone tone-accent-border"></div>
                 <div class="container__header">
                     @title.map { title =>
-                        <h2 class="container__title tone-@style.tone tone-background">
+                        <h2 class="container__title">
                             @collection.href.map { href =>
                                 <a class="container__title__label u-text-hyphenate" data-link-name="section heading" href="@LinkTo{/@href}">@Html(title)</a>
                             }.getOrElse{

diff --git a/facia/app/assets/javascripts/modules/ui/container-toggle.js b/facia/app/assets/javascripts/modules/ui/container-toggle.js
@@ -15,7 +15,7 @@ define([
         var _$container = bonzo(container),
             _$button = bonzo(bonzo.create(
                 '<button class="container__toggle" data-link-name="Show">'
-                    + '<i class="i i-arrow-white-large"></i>'
+                    + '<i class="i i-arrow-grey-large"></i>'
                     + '<span class="container__toggle__text">Hide</span>'
                 +'</button>'
             )),