Merge pull request #478 from AyuntamientoMadrid/mobile

Mobile
This commit is contained in:
Enrique García
2015-09-12 18:50:41 +02:00
14 changed files with 151 additions and 89 deletions

View File

@@ -305,11 +305,12 @@
.panel {
border-radius: 0;
box-shadow: 0px 1px 3px 0 $border;
margin-bottom: rem-calc(4);
margin-bottom: rem-calc(12);
min-height: rem-calc(192);
padding-top: rem-calc(12);
@media (min-width: $small-breakpoint) {
margin-bottom: rem-calc(-1);
padding-bottom: rem-calc(12);
}
@@ -373,7 +374,6 @@
.total-votes {
display: inline-block;
float: none;
line-height: $line-height;
margin-left: rem-calc(24);
padding-top: rem-calc(12);
@@ -381,6 +381,7 @@
@media (min-width: $small-breakpoint) {
display: block;
float: none;
line-height: $line-height*2;
margin-left: 0;
padding-top: 0;
@@ -399,7 +400,7 @@
.not-logged {
line-height: $line-height;
padding-top: rem-calc(36);
padding-top: rem-calc(24);
}
.anonymous-votes, .organizations-votes {
@@ -752,6 +753,14 @@
// 06. Flags
// - - - - - - - - - - - - - - - - - - - - - - - - -
.flag-content {
.button {
background: none;
padding: 0;
}
}
.flag-disable {
color: $text-medium;
line-height: rem-calc(24);

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

@@ -1,23 +1,25 @@
<% if show_flag_action? comment %>
<span class="divider">&nbsp;|&nbsp;</span>
<a id="flag-expand-comment-<%= comment.id %>" data-dropdown="flag-drop-comment-<%= comment.id %>" aria-controls="flag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
&nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
</a>
<ul id="flag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t("shared.flag"), flag_comment_path(comment), method: :put, remote: true, id: "flag-comment-#{comment.id}" %>
</li>
</ul>
<% end %>
<span class="flag-content">
<% if show_flag_action? comment %>
<span class="divider">&nbsp;|&nbsp;</span>
<a class="button" id="flag-expand-comment-<%= comment.id %>" data-dropdown="flag-drop-comment-<%= comment.id %>" aria-controls="flag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
&nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
</a>
<ul id="flag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t("shared.flag"), flag_comment_path(comment), method: :put, remote: true, id: "flag-comment-#{comment.id}" %>
</li>
</ul>
<% end %>
<% if show_unflag_action? comment %>
<span class="divider">&nbsp;|&nbsp;</span>
<a id="unflag-expand-comment-<%= comment.id %>" data-dropdown="unflag-drop-comment-<%= comment.id %>" aria-controls="unflag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
&nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
</a>
<ul id="unflag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t("shared.unflag"), unflag_comment_path(comment), method: :put, remote: true, id: "unflag-comment-#{comment.id}" %>
</li>
</ul>
<% end %>
<% if show_unflag_action? comment %>
<span class="divider">&nbsp;|&nbsp;</span>
<a class="button" id="unflag-expand-comment-<%= comment.id %>" data-dropdown="unflag-drop-comment-<%= comment.id %>" aria-controls="unflag-drop-comment-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
&nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
</a>
<ul id="unflag-drop-comment-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t("shared.unflag"), unflag_comment_path(comment), method: :put, remote: true, id: "unflag-comment-#{comment.id}" %>
</li>
</ul>
<% end %>
</span>

View File

@@ -1,21 +1,23 @@
<% if show_flag_action? debate %>
<a id="flag-expand-debate-<%= debate.id %>" data-dropdown="flag-drop-debate-<%= debate.id %>" aria-controls="flag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
&nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
</a>
<ul id="flag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t('shared.flag'), flag_debate_path(debate), method: :put, remote: true, id: "flag-debate-#{ debate.id }" %>
</li>
</ul>
<% end %>
<span class="flag-content">
<% if show_flag_action? debate %>
<a class="button" id="flag-expand-debate-<%= debate.id %>" data-dropdown="flag-drop-debate-<%= debate.id %>" aria-controls="flag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
&nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
</a>
<ul id="flag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t('shared.flag'), flag_debate_path(debate), method: :put, remote: true, id: "flag-debate-#{ debate.id }" %>
</li>
</ul>
<% end %>
<% if show_unflag_action? debate %>
<a id="unflag-expand-debate-<%= debate.id %>" data-dropdown="unflag-drop-debate-<%= debate.id %>" aria-controls="unflag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
&nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
</a>
<ul id="unflag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t('shared.unflag'), unflag_debate_path(debate), method: :put, remote: true, id: "unflag-debate-#{ debate.id }" %>
</li>
</ul>
<% end %>
<% if show_unflag_action? debate %>
<a class="button" id="unflag-expand-debate-<%= debate.id %>" data-dropdown="unflag-drop-debate-<%= debate.id %>" aria-controls="unflag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
&nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
</a>
<ul id="unflag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>
<%= link_to t('shared.unflag'), unflag_debate_path(debate), method: :put, remote: true, id: "unflag-debate-#{ debate.id }" %>
</li>
</ul>
<% end %>
</span>

View File

@@ -3,17 +3,17 @@
<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 %>
<%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
</h2>
<h2 class="margin-top">
<%= page_entries_info @debates %>
<%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
</h2>
<% elsif @tag_filter %>
<h2 class="margin-top">
<%= page_entries_info @debates %>
<%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
</h2>
<h2 class="margin-top">
<%= page_entries_info @debates %>
<%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
</h2>
<% end %>
</div>
<% if @tag_filter || @search_terms %>
@@ -22,10 +22,10 @@
<%= t("debates.index.select_order") %>
</h6>
<% else %>
<div class="small-12 column margin-top inline-block">
<h2 class="inline-block">
<%= t("debates.index.select_order_long") %>
</h2>
<div class="small-12 inline-block">
<h2 class="inline-block">
<%= t("debates.index.select_order_long") %>
</h2>
<% end %>
<form class="inline-block">
<select class="js-location-changer" name="order-selector">

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

@@ -10,7 +10,6 @@ en:
external_link_blog_url: "/blog"
open_gov: "%{open} government"
open: "Open"
logo: "Open government | Participation"
participation: Participation
open_city_title: "The city you want, it will be the city you want."
open_city_slogan:

View File

@@ -10,7 +10,6 @@ es:
external_link_blog_url: "/blog"
open_gov: "Gobierno %{open}"
open: "abierto"
logo: "Gobierno abierto | Participación"
participation: Participación
open_city_title: "La ciudad que quieres será la ciudad que quieras."
open_city_slogan:
@@ -215,7 +214,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

View File

@@ -176,7 +176,7 @@ feature 'Users' do
click_link 'Forgot your password?'
fill_in 'user_email', with: 'manuela@madrid.es'
click_button 'Send me reset password instructions'
click_button 'Send me reset password'
expect(page).to have_content "You will receive an email with instructions on how to reset your password in a few minutes."

View File

@@ -41,7 +41,7 @@ module CommonActions
click_link 'Forgot your password?'
fill_in 'user_email', with: 'manuela@madrid.es'
click_button 'Send me reset password instructions'
click_button 'Send me reset password'
end
def comment_on(debate, user = nil)