From c0eb46288ccbef3b02429bd4a0115d8cd75b72db Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Sat, 29 Aug 2015 00:34:49 +0200
Subject: [PATCH] Improves header, footer and debates mobile styles

---
 app/assets/stylesheets/debates.scss       |  30 +++++-
 app/assets/stylesheets/participacion.scss | 112 ++++++++++++++++------
 app/views/layouts/_footer.html.erb        |   2 +-
 app/views/layouts/_header.html.erb        |   8 +-
 4 files changed, 118 insertions(+), 34 deletions(-)

diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss
index 641e7ccff..c2355d95b 100644
--- a/app/assets/stylesheets/debates.scss
+++ b/app/assets/stylesheets/debates.scss
@@ -256,7 +256,11 @@
     padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);
 
     &:first-child {
-      padding-top: rem-calc(24);
+      padding-top: rem-calc(12);
+
+      @media (min-width: $small-breakpoint) {
+        padding-top: rem-calc(24);
+      }
     }
 
     .label {
@@ -298,10 +302,14 @@
     border: 1px solid $votes-border;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
-    margin: 0 rem-calc(-24) 0 rem-calc(12);
+    margin: 0 rem-calc(-12);
+
+    @media (min-width: $small-breakpoint) {
+      margin: 0 rem-calc(-24) 0 rem-calc(12);
+    }
 
     &:after {
-      content: "";
+      content: none;
       position: absolute;
       display: block;
       border-style: solid;
@@ -311,12 +319,26 @@
       border-right-color: transparent;
       right: rem-calc(-1);
       border-width: 1em 1em 0 0;
+
+      @media (min-width: $small-breakpoint) {
+        content: "";
+      }
     }
 
     .total-votes {
-      display: block;
+      display: inline-block;
       float: none;
       line-height: $line-height;
+      margin-left: rem-calc(24);
+      padding-top: rem-calc(12);
+      vertical-align: top;
+
+      @media (min-width: $small-breakpoint) {
+        display: block;
+        line-height: $line-height*2;
+        margin-left: 0;
+        padding-top: 0;
+      }
     }
 
     .like {
diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/participacion.scss
index ff5a2b13a..1ec402781 100644
--- a/app/assets/stylesheets/participacion.scss
+++ b/app/assets/stylesheets/participacion.scss
@@ -47,7 +47,7 @@
       vertical-align: top;
     }
 
-    @media (min-width: 480px) {
+    @media (min-width: $small-breakpoint) {
       font-size: rem-calc(28);
       span {
         font-size: rem-calc(20);
@@ -75,6 +75,10 @@ body {
     background: $brand !important;
     color: white !important;
   }
+
+  &.bg-white {
+    background: white;
+  }
 }
 
 p {
@@ -187,9 +191,11 @@ h1, h2, h3, h4, h5, h6 {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 header {
-  background: url('home_header_bg.jpg');
+  background: url('header_bg.jpg');
   background-position: 50% 50%;
   background-size: cover;
+  box-shadow: 0 1px 3px #999;
+  color: $text;
   min-height: rem-calc(480);
 
   &.results {
@@ -201,39 +207,31 @@ header {
   }
 
   h1 {
-    color: white;
-    font-size: rem-calc(45);
+    font-size: rem-calc(36);
     font-weight: bolder;
-    line-height: $line-height*3;
-    margin: rem-calc(24) 0 0 0;
+    line-height: $line-height*2;
+    margin: rem-calc(24) 0;
     padding: 0;
   }
 
-  h2 {
-    @extend h1;
-    font-size: rem-calc(24);
-    font-weight: normal;
-    line-height: $line-height*2;
-    margin: 0;
-  }
-
   p {
-    color: white;
-    font-size: rem-calc(18);
+    font-size: rem-calc(14);
     line-height: $line-height;
   }
 
   .button {
     color: white;
     font-family: inherit;
-    margin-top: rem-calc(24);
+    margin-top: 0;
   }
 
   .home-page {
+    background-color: rgba(255,255,255,.85);
+
     .button {
       color: white;
       font-family: inherit;
-      margin-top: rem-calc(48);
+      margin-top: 0;
     }
   }
 
@@ -260,7 +258,7 @@ header {
     padding-top: rem-calc(3);
     text-align: center;
 
-    @media (min-width: 480px) {
+    @media (min-width: $small-breakpoint) {
       float: left;
     }
   }
@@ -270,7 +268,7 @@ header {
     padding: rem-calc(12) 0;
     text-align: center;
 
-    @media (min-width: 480px) {
+    @media (min-width: $small-breakpoint) {
       float: right;
     }
   }
@@ -331,12 +329,47 @@ header {
       }
     }
   }
+
+  &.expanded .title-area {
+    background: none;
+  }
+
+  .toggle-topbar a {
+    font-size: rem-calc(10);
+  }
+
+  &.expanded .toggle-topbar a {
+    color: white;
+  }
+
+  &.expanded .toggle-topbar a span::after {
+    box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
+  }
 }
 
 .top-bar-section {
   margin-right: rem-calc(24);
   width: 100%;
 
+  ul li > a {
+    font-size: rem-calc(14);
+
+    &.button {
+      border-radius: 0;
+      line-height: $line-height*1.5;
+      text-align: left;
+    }
+
+    @media (min-width: $small-breakpoint) {
+      &.button {
+        border-radius: rem-calc(3);
+        line-height: normal;
+        margin-top: rem-calc(24);
+        text-align: center;
+      }
+    }
+  }
+
   ul li > a {
     font-size: rem-calc(14);
   }
@@ -356,7 +389,15 @@ header {
   }
 
   ul {
-    margin-right: rem-calc(12);
+    margin-left: rem-calc(12);
+
+    @media (min-width: $small-breakpoint) {
+      margin-left: 0;
+
+      &.right:first-child {
+        margin-right: rem-calc(12);
+      }
+    }
 
     li:not(.has-form) a:not(.button) {
       background: none;
@@ -385,10 +426,15 @@ header {
   font-size: rem-calc(14);
   height: rem-calc(72);
 
-  @media (min-width: 480px) {
+  @media (min-width: $small-breakpoint) {
     height: rem-calc(48);
   }
 
+  .row {
+    background-color: rgba(0,0,0,.5);
+    padding: 0 rem-calc(10);
+  }
+
   a {
     color: white;
   }
@@ -399,7 +445,7 @@ header {
   clear: both;
   text-transform: lowercase;
 
-  @media (min-width: 480px) {
+  @media (min-width: $small-breakpoint) {
     text-align: center;
   }
 
@@ -467,6 +513,10 @@ footer {
       }
     }
   }
+
+  .footer-sections {
+    padding-left: 0;
+  }
 }
 
 .subfooter {
@@ -531,11 +581,13 @@ footer {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .auth-page {
-  background: url('auth_bg.jpg');
-  margin-top: rem-calc(24);
+  background: #065687 url("auth_bg.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-top: rem-calc(24);
 
-  @media (min-width: 480px) {
-    margin-top: rem-calc(48);
+  @media (min-width: $small-breakpoint) {
+    padding-top: rem-calc(48);
   }
 
   h1 {
@@ -685,6 +737,12 @@ form {
   }
 }
 
+.alert-layout {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
 // 10. User account
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index 5ad0e6c8b..f59c46904 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -15,7 +15,7 @@
         </p>
       </div>
 
-      <div class="small-12 medium-8 column">
+      <div class="footer-sections small-12 medium-8 column">
         <div class="small-12 medium-4 column">
           <h4><%= t("layouts.footer.participation_title") %></h4>
           <p><%= t("layouts.footer.participation_text") %></p>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 365b720a6..83177bda8 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -51,8 +51,12 @@
     <div class="row home-page">
       <div class="small-12 column text-center">
         <h1><%= t("layouts.header.open_city_title") %></h1>
-        <p><%= t("layouts.header.open_city_slogan") %></p>
-        <p><%= t("layouts.header.open_city_text") %></p>
+        <div class="small-12 medium-10 column small-centered">
+          <p><%= t("layouts.header.open_city_slogan") %></p>
+        </div>
+        <div class="small-12 medium-10 column small-centered">
+          <p><%= t("layouts.header.open_city_text") %></p>
+        </div>
         <p><%= t("layouts.header.open_city_soon") %></p>
         <%= link_to t("layouts.header.see_all_debates"), debates_path, class: "button radius" %>
       </div>