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

Merge pull request #212 from AyuntamientoMadrid/reorganize_header

Browse Source 
Reorganize header
This commit is contained in:
Juanjo Bazán
2015-08-21 15:17:32 +02:00
parent 0a4cb357ce 3c29ac90c9
commit e69688e91f
5 changed files with 105 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -136,7 +136,11 @@ header {
min-height: rem-calc(480);
&.results {
min-height: rem-calc(216);
min-height: rem-calc(48);
@media (min-width: $small-breakpoint) {
min-height: rem-calc(216);
}
}
h1 {
@@ -181,7 +185,7 @@ header {
height: 0;
width: 0;
position: absolute;
border-top-color: #fff;
border-top-color: white;
border-width: 8px;
margin-left: -8px;
}
@@ -212,43 +216,81 @@ header {
.top-bar {
background: rgba(0,0,0,.5);
color: white;
height: rem-calc(96);
height: rem-calc(48);
max-width: 1170px !important;
.name a {
color: white;
font-family: 'Lato';
font-size: rem-calc(36);
font-weight: lighter;
line-height: $line-height*4;
padding-left: 0;
@media (min-width: $small-breakpoint) {
height: rem-calc(96);
}
span {
font-size: rem-calc(24);
font-weight: normal;
}
.name {
height: rem-calc(48);
img {
margin-right: rem-calc(12);
a {
color: white;
font-family: 'Lato';
font-size: rem-calc(18);
font-weight: lighter;
line-height: $line-height*2;
padding-left: 0;
span {
font-size: rem-calc(14);
font-weight: normal;
}
@media (min-width: $small-breakpoint) {
line-height: $line-height*4;
}
@media (min-width: $medium-breakpoint) {
font-size: rem-calc(30);
span {
font-size: rem-calc(20);
}
}
img {
height: 48px;
margin-right: rem-calc(6);
width: 48px;
@media (min-width: $small-breakpoint) {
height: 96px;
margin-right: rem-calc(12);
width: 96px;
}
}
}
}
}
.top-bar-section {
margin-right: rem-calc(24);
width: 100%;
ul li > a {
font-size: rem-calc(14);
}
ul li, ul li:hover:not(.has-form) > a {
background: none;
line-height: $line-height;
@media (min-width: $small-breakpoint) {
background: none;
border: 0;
line-height: $line-height*4;
}
}
li:not(.has-form) a:not(.button) {
background: none;
color: white;
line-height: $line-height*4;
@media (min-width: $small-breakpoint) {
line-height: $line-height*4;
}
&:hover {
background: none;
@@ -279,27 +321,31 @@ header {
}
.subnavigation {
background: white;
border-bottom: 1px solid white;
background: rgba(255,255,255,.95);
clear: both;
text-transform: lowercase;
@media (min-width: 480px) {
text-align: center;
}
a {
color: $link;
font-size: rem-calc(14);
font-weight: bold;
&.active {
color: $text;
font-weight: bold;
&:after {
bottom: -17px;
bottom: -16px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: #fff;
border-top-color: rgba(255,255,255,.95);
border-width: 8px;
margin-left: -8px;
}

15
app/assets/stylesheets/variables.scss
View File

@@ -5,6 +5,7 @@
// 03. Forms
// 04. Alerts
// 05. Levels
// 06. Responsive
//
// 01. Fonts
@@ -78,3 +79,17 @@ $association: #222222;
$comment-author: rgba(45,144,248,.15);
$comment-official: rgba(70,219,145,.3);
$comment-level-5: rgba(255,241,204,1);
// 06. Responsive
// - - - - - - - - - - - - - - - - - - - - - - - - -
$small-breakpoint: em-calc(640);
$medium-breakpoint: em-calc(1024);
$large-breakpoint: em-calc(1440);
$xlarge-breakpoint: em-calc(1920);
$small-range: (0, $small-breakpoint);
$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint);
$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint);
$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint);
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));

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

@@ -1,12 +1,11 @@
<header class="<%= header_css %>">
<section class="top-links">
<section class="top-links show-for-medium-up">
<div class="row">
<%= render 'shared/locale_switcher' %>
<%= render "shared/locale_switcher" %>
<div class="external-links">
<%= link_to t("layouts.header.participation"), root_path, class: "selected" %>&nbsp;|
<%= link_to t("layouts.header.external_link_transparency"), "#" %>&nbsp;|
<%= link_to t("layouts.header.external_link_opendata"), "#" %>&nbsp;|
<%= link_to t("layouts.header.external_link_blog"), "#" %>
<%= link_to t("layouts.header.external_link_opendata"), "#" %>
</div>
</div>
</section>
@@ -14,33 +13,36 @@
<div class="contain-to-grid clear">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><a href="#"><span><%= t("layouts.header.menu") %></span></a></li>
<li class="name">
<%= link_to root_path do %>
<%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96') %>
<%= t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %> | <span><%= t("layouts.header.participation") %></span>
<% end %>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span><%= t("layouts.header.menu") %></span></a></li>
</ul>
<section class="top-bar-section">
<%= render 'devise/menu/login_items' %>
<%= render 'shared/admin_login_items' %>
<%= render "devise/menu/login_items" %>
<%= render "shared/admin_login_items" %>
</section>
<section class="subnavigation row text-center">
<div class="small-12 medium-3 column end">
<%= link_to t("layouts.header.welcome"), root_path, class: ("active" if current_page?(root_path)) %>
<section class="subnavigation row">
<div class="small-12 medium-2 medium-offset-1 column end">
<%= link_to t("layouts.header.welcome"), root_path %>
</div>
<div class="small-12 medium-3 column end">
<%= link_to t("layouts.header.news"), "#" %>
<div class="small-12 medium-2 column end">
<%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: "debates")) %>
</div>
<div class="small-12 medium-3 column end">
<%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: 'debates')) %>
</div>
<div class="small-12 medium-3 column end">
<div class="small-12 medium-2 column end">
<%= link_to t("layouts.header.initiatives"), "#" %>
</div>
<div class="small-12 medium-2 column end">
<%= link_to t("layouts.header.how_it_works"), "#" %>
</div>
<div class="small-12 medium-2 column end">
<%= link_to t("layouts.header.external_link_blog"), "#" %>
</div>
</section>
</nav>
</div>
@@ -50,7 +52,7 @@
<div class="small-12 column text-center">
<h1><%= t("layouts.header.open_city") %></h1>
<h2><%= t("layouts.header.open_city_slogan") %></h2>
<%= 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" %>
</div>
</div>
<% end %>

2
config/locales/en.yml
View File

@@ -17,7 +17,7 @@ en:
administration: Administration
moderation: Moderation
welcome: Welcome
news: News
how_it_works: How it works
debates: Debates
initiatives: Initiatives
footer:

2
config/locales/es.yml
View File

@@ -17,7 +17,7 @@ es:
administration: Administrar
moderation: Moderar
welcome: Portada
news: Novedades
how_it_works: "Cómo funciona"
debates: Debates
initiatives: Iniciativas
footer: