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

Changes styles for header

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-08-07 23:23:16 +02:00
parent a0140f6dda
commit d45a22781a
7 changed files with 138 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/home_header_bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 201 KiB

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

@@ -96,7 +96,49 @@ header {
.button {
color: white;
font-family: inherit;
margin-top: $line-height*2;
margin-top: $line-height;
}
.home-page {
.button {
color: white;
font-family: inherit;
margin-top: $line-height*2;
}
}
.selected {
position: relative;
&:before {
top: -14px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: #fff;
border-width: 8px;
margin-left: -8px;
}
}
.language {
float: none;
text-align: center;
@media (min-width: 480px) {
float: left;
}
}
.external-links {
@extend .language;
@media (min-width: 480px) {
float: right;
}
}
}
@@ -105,13 +147,13 @@ header {
}
.top-bar {
background: white;
color: $header-color;
background: rgba(0,0,0,.5);
color: white; //$header-color;
height: $line-height*4;
max-width: 1170px !important;
.name a {
color: black;
color: white;
font-family: 'Lato';
font-size: rem-calc(36);
font-weight: lighter;
@@ -119,7 +161,7 @@ header {
padding-left: 0;
span {
color: $brand;
// color: $brand;
font-size: rem-calc(24);
font-weight: normal;
}
@@ -131,14 +173,29 @@ header {
}
.top-bar-section {
margin-right: $line-height;
ul li > a {
font-size: rem-calc(14);
}
ul li, ul li:hover:not(.has-form) > a {
background: none;
}
li:not(.has-form) a:not(.button) {
background: white;
color: $brand;
background: none;
color: white;
line-height: $line-height*4;
&:hover {
background: none;
color: $link-hover;
}
}
li.active:not(.has-form) a:not(.button) {
background: none;
height: $line-height*4;
line-height: $line-height*4;
}
@@ -147,9 +204,13 @@ header {
.top-links {
color: white;
font-size: rem-calc(14);
height: $line-height*2;
height: $line-height*3;
padding: $line-height/2 0;
@media (min-width: 480px) {
height: $line-height*2;
}
a {
color: white;
}
@@ -179,7 +240,7 @@ header {
.icon-like {
background: white;
border: 2px solid white;
border: 2px solid $votes-border;
border-radius: rem-calc(3);
color: $votes-neutral;
display: inline-block;
@@ -187,10 +248,10 @@ header {
line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6);
position: relative;
//when active => color: $votes-like;
&:hover {
background: $votes-like;
border-color: white;
color: white;
cursor: pointer;
}
@@ -202,7 +263,7 @@ header {
.icon-unlike {
background: white;
border: 2px solid white;
border: 2px solid $votes-border;
border-radius: rem-calc(3);
color: $votes-neutral;
display: inline-block;
@@ -210,10 +271,10 @@ header {
line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6);
position: relative;
//when active => color: $votes-unlike;
&:hover {
background: $votes-unlike;
border-color: white;
color: white;
cursor: pointer;
}

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

@@ -26,7 +26,8 @@ $comments-info: #A5B2B9;
$comments-text: #3F4549;
$header-color: #292B33;
$link: #0077B9;
$link: #2895F1;
$link-hover: #2178BF;
$tags-bg: #FAFAFA;
$tags-border: #F0F0F0;
@@ -37,8 +38,8 @@ $text-medium: #999999;
$text-light: #A3A6AD;
$votes: #31708f;
$votes-background: #0081B3;
$votes-border: #005b80;
$votes-background: #26AEEE;//#0081B3;
$votes-border: #1F94CB;//#005b80;
$votes-like: #7BD2A8;
$votes-like-act: #5D9E7F;
$votes-neutral: #CCCCCC;

27
app/views/devise/menu/_login_items.html.erb
View File

@@ -1,14 +1,17 @@
<ul class="right">
<% if user_signed_in? %>
<li>
<%= link_to(t("devise_views.menu.login_items.logout"), destroy_user_session_path, method: :delete) %>
</li>
<% else %>
<li>
<%= link_to(t("devise_views.menu.login_items.login"), new_user_session_path) %>
</li>
<li class="active">
<%= link_to(t("devise_views.menu.login_items.signup"), new_user_registration_path) %>
</li>
<% end %>
<% if user_signed_in? %>
<li>
<%= link_to(t("layouts.header.my_account_link"), account_path) %>
</li>
<li>
<%= link_to(t("devise_views.menu.login_items.logout"), destroy_user_session_path, method: :delete) %>
</li>
<% else %>
<li>
<%= link_to(t("devise_views.menu.login_items.login"), new_user_session_path) %>
</li>
<li>
<%= link_to(t("devise_views.menu.login_items.signup"), new_user_registration_path, class: "button radius small") %>
</li>
<% end %>
</ul>

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

@@ -1,53 +1,48 @@
<header class="<%= header_css %>">
<section class="top-links">
<div class="row">
<div class="small-12 column">
<div class="right">
<a href="#"><%= t("layouts.header.external_link_transparency") %></a> | <a href="#"><%= t("layouts.header.external_link_opendata") %></a>
|
<span id="locale-switcher">
[
<% available_locales_to_switch.each do |locale| %>
<%= link_to(locale, params.merge(locale: locale), id: "locale-link-#{locale}") %>
<% end %>
]
</span>
</div>
</div>
</div>
</section>
<section class="top-links">
<div class="row">
<div class="language">
<span id="locale-switcher">
<%= t("layouts.header.language") %>
[
<% available_locales_to_switch.each do |locale| %>
<%= link_to(locale, params.merge(locale: locale), id: "locale-link-#{locale}") %>
<% end %>
]
</div>
<div class="external-links">
<%= link_to t("layouts.header.participation"), root_path, class: "selected" %>&nbsp;|&nbsp;
<a href="#"><%= t("layouts.header.external_link_transparency") %></a>&nbsp;|&nbsp;
<a href="#"><%= t("layouts.header.external_link_opendata") %></a>
</div>
</div>
</section>
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<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>
<div class="contain-to-grid clear">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<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' %>
<section class="top-bar-section">
<%= render 'devise/menu/login_items' %>
</section>
</nav>
</div>
<% if user_signed_in? %>
<ul class="right">
<li><%= link_to(t("layouts.header.my_account_link"), account_path) %></li>
</ul>
<% end %>
</section>
</nav>
</div>
<% if home_page? %>
<div class="row">
<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.create_debate"), new_debate_path, class: 'button radius' %>
</div>
</div>
<% end %>
<% if home_page? %>
<div class="row home-page">
<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.create_debate"), new_debate_path, class: 'button radius' %>
</div>
</div>
<% end %>
</header>

1
config/locales/en.yml
View File

@@ -11,6 +11,7 @@ en:
open_city_slogan: So the citizens can decide what kind of city they want.
create_debate: Create a debate
my_account_link: My account
language: Site language
debates:
index:
create_debate: Create a debate

1
config/locales/es.yml
View File

@@ -11,6 +11,7 @@ es:
open_city_slogan: Para que todos los madrileños decidamos que ciudad queremos tener.
create_debate: Crea un debate
my_account_link: Mi cuenta
language: Idioma de la página
debates:
index:
create_debate: Crea un debate