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

Includes first styles for header and debates

Browse Source
This commit is contained in:
Alberto García Cabeza
2015-07-26 23:13:13 +02:00
parent f9fc69916a
commit f4c7b0edda
6 changed files with 187 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@
// 02. Global styles // 02. Global styles
// 03. Header // 03. Header
// 04. Footer // 04. Footer
// 05. Debates
// 01. Variables // 01. Variables
@@ -12,32 +13,129 @@
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24); $line-height: rem-calc(24);
$brand: #0077B9;
$debates: #008CCF;
$header-color: #292B33;
$text-color: #919399;
// 02. Global styles // 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
body {
font-family: $font-family-sans-serif;
font-weight: 300;
p {
font-weight: 300;
}
}
// 03. Header
// 02. Header
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
header { header {
background: url('https://static.pexels.com/photos/2752/city-sunny-people-street-large.jpg'); background: url('home-header-bg.jpg');
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
min-height: $line-height*20; min-height: $line-height*20;
} }
.contain-to-grid { .contain-to-grid {
background: none; background: none;
}
.top-bar {
background: white;
color: $header-color;
height: $line-height*4;
.name h1 a {
color: black;
font-family: 'Lato';
font-size: rem-calc(36);
font-weight: lighter;
line-height: $line-height*4;
padding-left: 0;
white-space: nowrap;
span {
color: $brand;
font-size: rem-calc(24);
font-weight: normal;
}
img {
margin-right: $line-height/2;
}
}
}
.top-bar-section li:not(.has-form) a:not(.button) {
background: white;
color: $brand;
line-height: $line-height*4;
} }
.top-links { .top-links {
color: white; color: white;
font-size: rem-calc(14); font-size: rem-calc(14);
padding: $header-line-height/2+em 0; padding: $header-line-height/2+em 0;
a { a {
color: white; color: white;
} }
} }
// 04. Footer
// - - - - - - - - - - - - - - - - - - - - - - - - -
// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -
.debates-index {
margin-top: $line-height;
}
.debate {
.panel {
.fi-comment-quotes {
color: $debates;
font-size: rem-calc(36);
line-height: $line-height;
}
.label {
margin-top: $line-height/4;
}
h3 a {
clear: both;
color: $header-color;
display: block;
font-size: rem-calc(16);
}
p {
color: $text-color;
font-size: rem-calc(13);
}
}
}

19
app/views/debates/_debate.html.erb
View File

@@ -1,12 +1,13 @@
<div id="debate-<%= debate.id %>" class='debate'> <div id="debate-<%= debate.id %>" class="small-12 medium-2 large-4 column debate">
<p><%= link_to debate.title, debate %></p>
<p><%= debate.description %></p>
<p> <div class="panel">
Creado el: <%= l debate.created_at.to_date %> <i class="fi-comment-quotes left"></i>
por: <%= debate.author.name %> <span class="label radius right">Debate</span>
</p>
<p><%= render 'shared/tags', debate: debate %></p> <h3><%= link_to debate.title, debate %></h3>
<p><%= debate.description %></p>
<p> Creado el: <%= l debate.created_at.to_date %> por: <%= debate.author.name %></p>
<p><%= render 'shared/tags', debate: debate %></p>
</div>
</div> </div>
<br/><br/><br/><br/>

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

@@ -1,10 +1,11 @@
<h1>Debates sobre Madrid</h1> <%#= link_to 'New Debate', new_debate_path, :class => 'button radius right' %>
<div id='debates'> <section id='debates' class="debates-index">
<%= render @debates %> <div class="row">
</div> <%= render @debates %>
</div>
</section>
<%= render 'shared/tag_cloud' %> <aside>
<%= render 'shared/tag_cloud' %>
<br/><br/> </aside>
<%= link_to 'New Debate', new_debate_path %>

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

@@ -1,11 +1,14 @@
<div style="float:right; margin-right:50px"> <ul class="right">
<% if user_signed_in? %> <% if user_signed_in? %>
<li> <li>
<%= link_to('Logout', destroy_user_session_path, method: :delete) %> <%= link_to('Logout', destroy_user_session_path, method: :delete) %>
</li> </li>
<% else %> <% else %>
<li> <li>
<%= link_to('Login', new_user_session_path) %> <%= link_to('Login', new_user_session_path) %>
</li> </li>
<% end %> <li class="active">
</div> <%#= link_to('Sign up', new_registration_path) %>
</li>
<% end %>
</ul>

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

@@ -5,26 +5,27 @@
<div class="right"> <div class="right">
<a href="#">Portal de Transparencia</a> | <a href="#">Datos abiertos</a> <a href="#">Portal de Transparencia</a> | <a href="#">Datos abiertos</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<div class="contain-to-grid"> <div class="contain-to-grid">
<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">
<h1><a href="#">gobierno<strong>abierto</strong> | Participación</a></h1> <h1>
</li> <%= link_to root_path do %>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> <%= image_tag('header-logo-madrid.png', :class => 'left', :size => '96x96') %>
</ul> gobierno<strong>abierto</strong> | <span>Participación</span>
<% end %>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section"> <section class="top-bar-section">
<ul class="right"> <%= render 'devise/menu/login_items' %>
<li><a href="#">Entrar</a></li> </section>
<li class="active"><a href="#">Registrarse</a></li>
<%= render 'devise/menu/login_items' %>
</ul>
</section>
</nav> </nav>
</div> </div>
</header> </header>

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

@@ -1,22 +1,32 @@
<!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 %>
</head> </head>
<body style="margin:50px"> <body>
<p class="alert"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= render 'devise/menu/login_items' %> <%= render 'layouts/header' %>
<%= yield %> <% if notice %>
</body> <p class="alert-box success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert-box success"><%= alert %></p>
<% end %>
<div class="row">
<div class="small-12 column">
<%= yield %>
</div>
</div>
</body>
</html> </html>