Fixes styles for mobile version

This commit is contained in:
Alberto Garcia Cabeza
2015-09-12 18:05:15 +02:00
parent e454e5300e
commit 747c604127
8 changed files with 91 additions and 40 deletions

View File

@@ -301,14 +301,37 @@ header {
font-family: inherit;
font-size: rem-calc(16);
margin-top: 0;
&.see-more {
width: 100%;
@media (min-width: $small-breakpoint) {
width: auto;
}
}
}
.home-page {
text-align: center;
@media (min-width: $small-breakpoint) {
text-align: left;
}
}
.more-info {
color: white;
display: block;
font-size: rem-calc(14);
margin-left: rem-calc(24);
margin-bottom: rem-calc(24);
text-decoration: underline;
@media (min-width: $small-breakpoint) {
display: inline-block;
margin-bottom: 0;
margin-left: rem-calc(24);
}
&:hover {
opacity: .75;
}
@@ -330,10 +353,14 @@ header {
}
.icon-external {
display: inline-block;
font-size: rem-calc(12);
opacity: .5;
padding-top: rem-calc(3);
vertical-align: top;
@media (min-width: $small-breakpoint) {
padding-top: 0;
position: absolute;
right: -18px;
top: 3px;
@@ -419,11 +446,6 @@ header {
font-size: rem-calc(16);
font-weight: lighter;
line-height: $line-height*2;
padding-left: rem-calc(12);
@media (min-width: $small-breakpoint) {
padding-left: 0;
}
span {
*display: inline; /* IE */
@@ -503,6 +525,18 @@ header {
margin-right: rem-calc(24);
width: 100%;
ul {
margin-left: 0;
@media (min-width: $small-breakpoint) {
margin-left:rem-calc(24);
}
}
ul li {
background: none;
}
ul li > a {
font-size: rem-calc(14);
@@ -510,13 +544,17 @@ header {
border-radius: 0;
line-height: $line-height*1.5;
text-align: left;
background: none;
padding-left: rem-calc(6);
}
@media (min-width: $small-breakpoint) {
&.button {
background: $brand;
border-radius: rem-calc(3);
line-height: rem-calc(15);
margin-top: rem-calc(24);
padding-left: rem-calc(15);
text-align: center;
}
}
@@ -550,7 +588,7 @@ header {
li:not(.has-form) a:not(.button) {
background: none;
color: white;
padding: 0 rem-calc(6);
padding: rem-calc(12) 0;
@media (min-width: $small-breakpoint) {
line-height: $line-height*4;
@@ -608,7 +646,7 @@ header {
a {
color: $text;
display: block;
display: inline-block;
font-size: rem-calc(14);
font-weight: bold;
line-height: $line-height*2;
@@ -616,12 +654,26 @@ header {
text-align: left;
@media (min-width: $small-breakpoint) {
display: inline-block;
line-height: $line-height*3;
margin-left: rem-calc(12);
margin-right: rem-calc(72);
}
&:after {
color: $border;
content: "|";
padding: 0 rem-calc(12);
@media (min-width: $small-breakpoint) {
content: none;
padding: 0;
}
}
&:last-child:after {
content: none;
}
&:hover {
color: $link;
}
@@ -758,7 +810,6 @@ footer {
background: #065687 image-url("auth_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
padding-top: rem-calc(24);
@media (min-width: $small-breakpoint) {
padding-top: rem-calc(48);
@@ -772,9 +823,8 @@ footer {
@include logo;
a {
line-height: $line-height;
span {
span.logo-site {
vertical-align: middle;
}
}
@@ -1058,7 +1108,11 @@ img.initialjs-avatar {
h2 {
display: inline-block;
font-size: rem-calc(24);
margin-left: rem-calc(-17);
margin: rem-calc(12) 0;
@media (min-width: $small-breakpoint) {
margin: rem-calc(24) 0;
}
}
select {
@@ -1070,10 +1124,6 @@ img.initialjs-avatar {
padding: rem-calc(12);
width: auto;
@media (max-width: $small) {
margin-left: rem-calc(-17);
}
@media (min-width: $small-breakpoint) {
margin: 0 0 rem-calc(24) rem-calc(12);
}

View File

@@ -3,7 +3,7 @@
<div class="wrap row">
<div id="debates" class="debates-list small-12 medium-9 column js-order-<%= @order.dasherize %>">
<div class="filters">
<div class="small-12 medium-7 column">
<div class="small-12 medium-7 left">
<% if @search_terms %>
<h2 class="margin-top">
<%= page_entries_info @debates %>
@@ -22,7 +22,7 @@
<%= t("debates.index.select_order") %>
</h6>
<% else %>
<div class="small-12 column margin-top inline-block">
<div class="small-12 inline-block">
<h2 class="inline-block">
<%= t("debates.index.select_order_long") %>
</h2>

View File

@@ -33,7 +33,7 @@
<section class="subnavigation row">
<%#= link_to t("layouts.header.welcome"), root_path %>
<%#= link_to t("layouts.header.initiatives"), "#" %>
<div class="small-8 column">
<div class="small-12 medium-8 column">
<%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: "/debates")) %>
<%= link_to t("layouts.header.more_information"), "/more_information", class: ("active" if current_page?("/more_information")) %>
<%= link_to t("layouts.header.external_link_blog_url"), target: "_blank" do %>
@@ -48,11 +48,11 @@
</div>
<% if home_page? %>
<div class="row">
<div class="row home-page">
<div class="small-12 medium-7 column">
<h1><%= t("layouts.header.open_city_title") %></h1>
<p><%= t("layouts.header.open_city_slogan") %></p>
<%= link_to t("layouts.header.see_all_debates"), debates_path, class: "button radius" %>
<%= link_to t("layouts.header.see_all_debates"), debates_path, class: "button radius see-more" %>
<%= link_to t("layouts.header.more_information"), "/more_information", class: "more-info" %>
</div>

View File

@@ -18,7 +18,8 @@
<div class="small-12 medium-8 large-5 column small-centered">
<h1>
<%= link_to root_path do %>
<%= image_tag("auth_logo.png", class: "left", size: "450x96", alt: t('layouts.header.logo')) %>
<%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '96x96') %>
<%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %>
<% end %>
</h1>
</div>

View File

@@ -4,7 +4,7 @@
<p><%= t("welcome.welcome.instructions_3_html") %></p>
<p>
<%= link_to t("welcome.welcome.verify_account"),
verification_path, class: "button large success radius margin-top expand" %>
verification_path, class: "button success radius margin-top expand" %>
</p>
<p class="text-center">
<%= link_to t("welcome.welcome.go_to_index"),

View File

@@ -3,7 +3,7 @@ en:
confirmations:
title: "Resend confirmation instructions"
email_label: Email
submit: "Resend confirmation instructions"
submit: "Resend confirmation"
mailer:
confirmation_instructions:
title: "Welcome to open government portal"
@@ -37,7 +37,7 @@ en:
new:
title: "Forgot your password?"
email_label: "Email"
send_submit: "Send me reset password instructions"
send_submit: "Send me reset password"
users:
registrations:
edit:

View File

@@ -3,7 +3,7 @@ es:
confirmations:
title: "Reenviar instrucciones de confirmación"
email_label: Email
submit: "Reenviar instrucciones de confirmación"
submit: "Reenviar instrucciones"
mailer:
confirmation_instructions:
title: "Te damos la bienvenida al Portal de Gobierno Abierto del Ayuntamiento de Madrid"
@@ -37,7 +37,7 @@ es:
new:
title: "¿Has olvidado tu contraseña?"
email_label: "Email"
send_submit: "Recibir instrucciones para recuperar mi contraseña"
send_submit: "Recibir instrucciones"
users:
registrations:
edit:

View File

@@ -215,7 +215,7 @@ es:
instructions_3_html: "Sin verificar tus datos <b>el acceso que tienes es limitado</b>. Verificarlos ahora te permitirá, por ejemplo, apoyar propuestas ciudadanas."
verify_account: "Verificar mi cuenta"
go_to_index: "Quiero entrar como un usuario no verificado (acceso limitado)"
instructions_4_html: "Si quieres verificarte más tarde, puedes hacerlo en <i>Mi cuenta -> Verificar mi cuenta</i>."
instructions_4_html: "Si quieres verificarte más tarde, puedes hacerlo en <i>Mi cuenta > Verificar mi cuenta</i>."
omniauth:
finish_signup:
title: Añade tu email