consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improves header, footer and debates mobile styles

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-08-29 00:34:49 +02:00
parent 13fe1dcb9f
commit c0eb46288c
4 changed files with 118 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/stylesheets/debates.scss
View File

@@ -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 {

112
app/assets/stylesheets/participacion.scss
View File

@@ -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
// - - - - - - - - - - - - - - - - - - - - - - - - -

2
app/views/layouts/_footer.html.erb
View File

@@ -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>

8
app/views/layouts/_header.html.erb
View File

@@ -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>