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 { .button {
color: white; color: white;
font-family: inherit; 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 { .top-bar {
background: white; background: rgba(0,0,0,.5);
color: $header-color; color: white; //$header-color;
height: $line-height*4; height: $line-height*4;
max-width: 1170px !important; max-width: 1170px !important;
.name a { .name a {
color: black; color: white;
font-family: 'Lato'; font-family: 'Lato';
font-size: rem-calc(36); font-size: rem-calc(36);
font-weight: lighter; font-weight: lighter;
@@ -119,7 +161,7 @@ header {
padding-left: 0; padding-left: 0;
span { span {
color: $brand; // color: $brand;
font-size: rem-calc(24); font-size: rem-calc(24);
font-weight: normal; font-weight: normal;
} }
@@ -131,14 +173,29 @@ header {
} }
.top-bar-section { .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) { li:not(.has-form) a:not(.button) {
background: white; background: none;
color: $brand; color: white;
line-height: $line-height*4; line-height: $line-height*4;
&:hover {
background: none;
color: $link-hover;
}
} }
li.active:not(.has-form) a:not(.button) { li.active:not(.has-form) a:not(.button) {
background: none;
height: $line-height*4; height: $line-height*4;
line-height: $line-height*4; line-height: $line-height*4;
} }
@@ -147,9 +204,13 @@ header {
.top-links { .top-links {
color: white; color: white;
font-size: rem-calc(14); font-size: rem-calc(14);
height: $line-height*2; height: $line-height*3;
padding: $line-height/2 0; padding: $line-height/2 0;
@media (min-width: 480px) {
height: $line-height*2;
}
a { a {
color: white; color: white;
} }
@@ -179,7 +240,7 @@ header {
.icon-like { .icon-like {
background: white; background: white;
border: 2px solid white; border: 2px solid $votes-border;
border-radius: rem-calc(3); border-radius: rem-calc(3);
color: $votes-neutral; color: $votes-neutral;
display: inline-block; display: inline-block;
@@ -187,10 +248,10 @@ header {
line-height: rem-calc(30); line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6); padding: rem-calc(3) rem-calc(6);
position: relative; position: relative;
//when active => color: $votes-like;
&:hover { &:hover {
background: $votes-like; background: $votes-like;
border-color: white;
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
@@ -202,7 +263,7 @@ header {
.icon-unlike { .icon-unlike {
background: white; background: white;
border: 2px solid white; border: 2px solid $votes-border;
border-radius: rem-calc(3); border-radius: rem-calc(3);
color: $votes-neutral; color: $votes-neutral;
display: inline-block; display: inline-block;
@@ -210,10 +271,10 @@ header {
line-height: rem-calc(30); line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6); padding: rem-calc(3) rem-calc(6);
position: relative; position: relative;
//when active => color: $votes-unlike;
&:hover { &:hover {
background: $votes-unlike; background: $votes-unlike;
border-color: white;
color: white; color: white;
cursor: pointer; cursor: pointer;
} }

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

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

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

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

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

@@ -1,53 +1,48 @@
<header class="<%= header_css %>"> <header class="<%= header_css %>">
<section class="top-links"> <section class="top-links">
<div class="row"> <div class="row">
<div class="small-12 column"> <div class="language">
<div class="right"> <span id="locale-switcher">
<a href="#"><%= t("layouts.header.external_link_transparency") %></a> | <a href="#"><%= t("layouts.header.external_link_opendata") %></a> <%= t("layouts.header.language") %>
| [
<span id="locale-switcher"> <% available_locales_to_switch.each do |locale| %>
[ <%= link_to(locale, params.merge(locale: locale), id: "locale-link-#{locale}") %>
<% available_locales_to_switch.each do |locale| %> <% end %>
<%= link_to(locale, params.merge(locale: locale), id: "locale-link-#{locale}") %> ]
<% end %> </div>
] <div class="external-links">
</span> <%= link_to t("layouts.header.participation"), root_path, class: "selected" %>&nbsp;|&nbsp;
</div> <a href="#"><%= t("layouts.header.external_link_transparency") %></a>&nbsp;|&nbsp;
</div> <a href="#"><%= t("layouts.header.external_link_opendata") %></a>
</div> </div>
</section> </div>
</section>
<div class="contain-to-grid"> <div class="contain-to-grid clear">
<nav class="top-bar" data-topbar role="navigation"> <nav class="top-bar" data-topbar role="navigation">
<ul class="title-area"> <ul class="title-area">
<li class="name"> <li class="name">
<%= link_to root_path do %> <%= link_to root_path do %>
<%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96') %> <%= 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> <%= t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %> | <span><%= t("layouts.header.participation") %></span>
<% end %> <% end %>
</li> </li>
<li class="toggle-topbar menu-icon"><a href="#"><span><%= t("layouts.header.menu") %></span></a></li> <li class="toggle-topbar menu-icon"><a href="#"><span><%= t("layouts.header.menu") %></span></a></li>
</ul> </ul>
<section class="top-bar-section"> <section class="top-bar-section">
<%= render 'devise/menu/login_items' %> <%= render 'devise/menu/login_items' %>
</section>
</nav>
</div>
<% if user_signed_in? %> <% if home_page? %>
<ul class="right"> <div class="row home-page">
<li><%= link_to(t("layouts.header.my_account_link"), account_path) %></li> <div class="small-12 column text-center">
</ul> <h1><%= t("layouts.header.open_city") %></h1>
<% end %> <h2><%= t("layouts.header.open_city_slogan") %></h2>
</section> <%= link_to t("layouts.header.create_debate"), new_debate_path, class: 'button radius' %>
</nav> </div>
</div> </div>
<% end %>
<% if home_page? %> </header>
<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 %>
</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. open_city_slogan: So the citizens can decide what kind of city they want.
create_debate: Create a debate create_debate: Create a debate
my_account_link: My account my_account_link: My account
language: Site language
debates: debates:
index: index:
create_debate: Create a debate 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. open_city_slogan: Para que todos los madrileños decidamos que ciudad queremos tener.
create_debate: Crea un debate create_debate: Crea un debate
my_account_link: Mi cuenta my_account_link: Mi cuenta
language: Idioma de la página
debates: debates:
index: index:
create_debate: Crea un debate create_debate: Crea un debate