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

Styles for header,footer,filters, alerts and pages

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-09-04 15:19:50 +02:00
parent e0959f3e28
commit a75cbefe8d
7 changed files with 143 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -276,7 +276,7 @@
.panel { .panel {
border: 0; border: 0;
border-radius: 0; border-radius: 0;
margin-bottom: 0; margin-bottom: rem-calc(2);
min-height: rem-calc(192); min-height: rem-calc(192);
padding: 0 rem-calc(12) rem-calc(2) rem-calc(12); padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);
@@ -418,6 +418,10 @@
margin: 0; margin: 0;
} }
.edit-debate {
margin-bottom: 0;
}
.debate-info { .debate-info {
clear: both; clear: both;
color: $text-medium; color: $text-medium;

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

@@ -66,6 +66,10 @@
padding: 0; padding: 0;
} }
html, body {
height: 100%;
}
body { body {
background: $body; background: $body;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
@@ -228,6 +232,22 @@ h6 {
border: 0; border: 0;
} }
.wrapper {
min-height: 100%;
margin: 0 auto rem-calc(-288);
height: auto !important;
height: 100%;
}
.footer, .push {
clear: both;
min-height: rem-calc(288);
}
.footer {
background: $brand;
}
// 04. Header // 04. Header
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -460,7 +480,6 @@ header {
&:hover { &:hover {
background: none; background: none;
// color: $link-hover;
color: white; color: white;
text-decoration: underline; text-decoration: underline;
transition: text-decoration 275ms; transition: text-decoration 275ms;
@@ -499,41 +518,58 @@ header {
} }
.subnavigation { .subnavigation {
background: rgba(255,255,255,.95); background: white;
clear: both; clear: both;
text-transform: lowercase;
@media (min-width: $small-breakpoint) { @media (min-width: $small-breakpoint) {
text-align: center; text-align: center;
} }
a { a {
color: $link; color: $text;
display: inline-block; display: block;
font-size: rem-calc(14); font-size: rem-calc(14);
font-weight: bold;
min-width: rem-calc(192); min-width: rem-calc(192);
position: relative; position: relative;
text-align: left;
margin-left: rem-calc(12);
@media (min-width: $small-breakpoint) {
display: inline-block;
line-height: $line-height*2;
margin-left: 0;
min-width: rem-calc(192);
text-align: center;
}
&:hover { &:hover {
color: $text; color: $link;
text-decoration: underline;
@media (min-width: $small-breakpoint) {
background: rgba(0,119,185,.25);
}
} }
&.active { &.active {
color: $text; color: $link;
font-weight: bold;
&:after { @media (min-width: $small-breakpoint) {
bottom: -16px; background: $brand;
left: 50%; color: white;
border: solid transparent;
content: " "; &:after {
height: 0; bottom: -16px;
width: 0; left: 50%;
position: absolute; border: solid transparent;
border-top-color: rgba(255,255,255,.95); content: " ";
border-width: 8px; height: 0;
margin-left: -8px; width: 0;
position: absolute;
border-top-color: $brand;
border-width: 8px;
margin-left: -8px;
}
} }
} }
} }
@@ -543,7 +579,6 @@ header {
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
footer { footer {
background: $brand;
color: white; color: white;
padding: rem-calc(24) 0 rem-calc(48) 0; padding: rem-calc(24) 0 rem-calc(48) 0;
text-align: justify; text-align: justify;
@@ -608,21 +643,20 @@ footer {
.tags { .tags {
a { a {
background: $background; background: #f2f2f2;
border: 1px solid $border; border-radius: rem-calc(30);
border-radius: 3px; color: #4d4d4d;
color: $text-medium;
display: inline-block; display: inline-block;
font-size: rem-calc(13); font-size: rem-calc(13);
font-weight: bold;
line-height: rem-calc(22); line-height: rem-calc(22);
margin-bottom: rem-calc(8); margin-bottom: rem-calc(8);
padding: 0 rem-calc(6); padding: 0 rem-calc(8);
&:hover { &:hover {
color: $link; color: $link;
cursor: pointer; cursor: pointer;
background: #E5F1F8; background: #E5F1F8;
border: 1px solid $brand;
} }
} }
} }
@@ -742,6 +776,10 @@ form {
background: $input-bg; background: $input-bg;
height: rem-calc(48); height: rem-calc(48);
margin-bottom: rem-calc(16); margin-bottom: rem-calc(16);
&.error {
margin-bottom: rem-calc(1);
}
} }
input[type="checkbox"] + label, input[type="checkbox"] + label,
@@ -834,6 +872,22 @@ form {
width: 100%; width: 100%;
} }
span.error, small.error {
background: $alert-bg;
color: $alert-color;
}
.error small.error {
background: $alert-bg;
color: $alert-color;
display: inline-block;
margin: 0 rem-calc(6);
}
label.error, label.error a {
color: $alert-color;
}
// 10. User account // 10. User account
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -1148,7 +1202,7 @@ table {
.page { .page {
background: white; background: white;
min-height: rem-calc(600); padding-bottom: rem-calc(48);
.menu { .menu {
margin-top: rem-calc(24); margin-top: rem-calc(24);
@@ -1282,8 +1336,8 @@ table {
} }
.verification-step { .verification-step {
font-size: rem-calc(11); font-size: rem-calc(12);
padding-top: rem-calc(10); padding-top: rem-calc(6);
@media (min-width: $small-breakpoint) { @media (min-width: $small-breakpoint) {
line-height: $line-height; line-height: $line-height;

14
app/views/debates/index.html.erb
View File

@@ -1,10 +1,10 @@
<section role="main"> <section role="main">
<div class="filters row"> <div class="filters row">
<div class="small-9 column"> <div class="small-12 medium-9 column">
<% if @tag_filter %> <% if @tag_filter %>
<div class="inline-block small-8" > <div class="inline-block small-12 medium-8" >
<h2> <h2>
<%= t("debates.index.filter_topic", <%= t("debates.index.filter_topic",
count: @debates.size, count: @debates.size,
@@ -14,13 +14,15 @@
<% end %> <% end %>
<div class="inline-block <%= 'right' if @tag_filter %>"> <div class="inline-block <%= 'right' if @tag_filter %>">
<h6 class="inline-block">
<% if @tag_filter %> <% if @tag_filter %>
<%= t("debates.index.select_order") %> <h6 class="inline-block">
<%= t("debates.index.select_order") %>
</h6>
<% else %> <% else %>
<%= t("debates.index.select_order_long") %> <h2 class="inline-block">
<%= t("debates.index.select_order_long") %>
</h2>
<% end %> <% end %>
</h6>
<form class="inline-block"> <form class="inline-block">
<select class="js-location-changer" name="order-selector"> <select class="js-location-changer" name="order-selector">
<% @valid_orders.each do |order| %> <% @valid_orders.each do |order| %>

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

@@ -29,10 +29,8 @@
<section class="subnavigation row text-center"> <section class="subnavigation row text-center">
<%#= link_to t("layouts.header.welcome"), root_path %> <%#= link_to t("layouts.header.welcome"), root_path %>
<%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: "/debates")) %>
<%#= link_to t("layouts.header.initiatives"), "#" %> <%#= link_to t("layouts.header.initiatives"), "#" %>
<%= link_to t("layouts.header.more_information"), "/more_information", class: ("active" if current_page?("/more_information")) %> <%= 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"), t("layouts.header.external_link_blog_url"), target: "_blank" %>
<%= link_to t("layouts.header.external_link_blog"), t("layouts.header.external_link_blog_url"), target: "_blank" %>
</section> </section>
</nav> </nav>
</div> </div>
@@ -65,7 +63,7 @@
<%= link_to "Ir al Portal de Transparencia existente anteriormente", t("layouts.header.external_link_transparency_url"), target: "_blank", class: "button radius" %> <%= link_to "Ir al Portal de Transparencia existente anteriormente", t("layouts.header.external_link_transparency_url"), target: "_blank", class: "button radius" %>
<p>Mientras acabamos el nuevo portal, te invitamos a visitar el <a href="http://diario.madrid.es/participa/" target="_blank">blog del Área de Participación Ciudadana, Transparencia y Gobierno Abierto</a> para conocer nuestros avances y novedades; o la <a href="/">sección de Participación Ciudadana</a> donde poder decidir qué ciudad es la que quieres.</p> <p>Mientras acabamos el nuevo portal, te invitamos a visitar el <a href="http://diario.madrid.es/" target="_blank">blog del Área de Participación Ciudadana, Transparencia y Gobierno Abierto</a> para conocer nuestros avances y novedades; o la <a href="/">sección de Participación Ciudadana</a> donde poder decidir qué ciudad es la que quieres.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -81,7 +79,7 @@
<%= link_to "Ir al Portal de Datos Abiertos existente anteriormente", t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button radius" %> <%= link_to "Ir al Portal de Datos Abiertos existente anteriormente", t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button radius" %>
<p>Mientras acabamos el nuevo portal, te invitamos a visitar el <a href="http://diario.madrid.es/participa/" target="_blank">blog del Área de Participación Ciudadana, Transparencia y Gobierno Abierto</a> para conocer nuestros avances y novedades; o la <a href="/">sección de Participación Ciudadana</a> donde poder decidir qué ciudad es la que quieres.</p> <p>Mientras acabamos el nuevo portal, te invitamos a visitar el <a href="http://diario.madrid.es/" target="_blank">blog del Área de Participación Ciudadana, Transparencia y Gobierno Abierto</a> para conocer nuestros avances y novedades; o la <a href="/">sección de Participación Ciudadana</a> donde poder decidir qué ciudad es la que quieres.</p>
</div> </div>
</div> </div>
<% end %> <% end %>

51
app/views/layouts/application.html.erb
View File

@@ -1,30 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "Participación" %></title> <title><%= content_for?(:title) ? yield(:title) : "Participación" %></title>
<%= stylesheet_link_tag "application" %> <%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %> <%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %> <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<%= favicon_link_tag "favicon.ico" %> <%= favicon_link_tag "favicon.ico" %>
</head> </head>
<body class="<%= "bg-white" if current_page?(root_path) %>"> <body class="<%= "bg-white" if current_page?(root_path) %>">
<div class="wrapper">
<%= render 'layouts/header' %>
<%= render 'layouts/header' %> <% if notice %>
<div class="alert-box success alert-layout">
<div class="row">
<%= notice %>
</div>
</div>
<% end %>
<% if notice %> <% if alert %>
<p class="alert-box success alert-layout"><%= notice %></p> <div class="alert-box alert alert-layout">
<% end %> <div class="row">
<%= alert %>
</div>
</div>
<% end %>
<% if alert %> <%= yield %>
<p class="alert-box alert alert-layout"><%= alert %></p> <div class="push"></div>
<% end %> </div>
<div class="footer">
<%= yield %> <%= render 'layouts/footer' %>
</div>
<%= render 'layouts/footer' %>
</body> </body>
</html> </html>

12
app/views/layouts/devise.html.erb
View File

@@ -15,11 +15,19 @@
<body class="auth-page"> <body class="auth-page">
<% if notice %> <% if notice %>
<p class="alert-box success alert-layout"><%= notice %></p> <div class="alert-box success alert-layout">
<div class="row">
<%= notice %>
</div>
</div>
<% end %> <% end %>
<% if alert %> <% if alert %>
<p class="alert-box alert alert-layout"><%= alert %></p> <div class="alert-box alert alert-layout">
<div class="row">
<%= alert %>
</div>
</div>
<% end %> <% end %>
<div class="row"> <div class="row">

4
app/views/pages/census_terms.html.erb
View File

@@ -1,6 +1,6 @@
<div class="row-full page"> <div class="page row-full">
<div class="row"> <div class="row">
<div class="small-12 column"> <div class="text small-12 column">
<%= simple_format t('pages.census_terms') %> <%= simple_format t('pages.census_terms') %>
</div> </div>
</div> </div>