Merge pull request #283 from AyuntamientoMadrid/improve_design

Improve design
This commit is contained in:
Juanjo Bazán
2015-08-29 11:08:21 +02:00
13 changed files with 141 additions and 56 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 201 KiB

View File

@@ -256,7 +256,11 @@
padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);
&:first-child {
padding-top: rem-calc(24);
padding-top: rem-calc(12);
@media (min-width: $small-breakpoint) {
padding-top: rem-calc(24);
}
}
.label {
@@ -298,10 +302,14 @@
border: 1px solid $votes-border;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
margin: 0 rem-calc(-24) 0 rem-calc(12);
margin: 0 rem-calc(-12);
@media (min-width: $small-breakpoint) {
margin: 0 rem-calc(-24) 0 rem-calc(12);
}
&:after {
content: "";
content: none;
position: absolute;
display: block;
border-style: solid;
@@ -311,12 +319,26 @@
border-right-color: transparent;
right: rem-calc(-1);
border-width: 1em 1em 0 0;
@media (min-width: $small-breakpoint) {
content: "";
}
}
.total-votes {
display: block;
display: inline-block;
float: none;
line-height: $line-height;
margin-left: rem-calc(24);
padding-top: rem-calc(12);
vertical-align: top;
@media (min-width: $small-breakpoint) {
display: block;
line-height: $line-height*2;
margin-left: 0;
padding-top: 0;
}
}
.like {

View File

@@ -47,7 +47,7 @@
vertical-align: top;
}
@media (min-width: 480px) {
@media (min-width: $small-breakpoint) {
font-size: rem-calc(28);
span {
font-size: rem-calc(20);
@@ -75,6 +75,10 @@ body {
background: $brand !important;
color: white !important;
}
&.bg-white {
background: white;
}
}
p {
@@ -187,9 +191,11 @@ h1, h2, h3, h4, h5, h6 {
// - - - - - - - - - - - - - - - - - - - - - - - - -
header {
background: image-url('home_header_bg.jpg');
background: url('header_bg.jpg');
background-position: 50% 50%;
background-size: cover;
box-shadow: 0 1px 3px #999;
color: $text;
min-height: rem-calc(480);
&.results {
@@ -201,39 +207,31 @@ header {
}
h1 {
color: white;
font-size: rem-calc(45);
font-size: rem-calc(36);
font-weight: bolder;
line-height: $line-height*3;
margin: rem-calc(24) 0 0 0;
line-height: $line-height*2;
margin: rem-calc(24) 0;
padding: 0;
}
h2 {
@extend h1;
font-size: rem-calc(24);
font-weight: normal;
line-height: $line-height*2;
margin: 0;
}
p {
color: white;
font-size: rem-calc(18);
font-size: rem-calc(14);
line-height: $line-height;
}
.button {
color: white;
font-family: inherit;
margin-top: rem-calc(24);
margin-top: 0;
}
.home-page {
background-color: rgba(255,255,255,.85);
.button {
color: white;
font-family: inherit;
margin-top: rem-calc(48);
margin-top: 0;
}
}
@@ -260,7 +258,7 @@ header {
padding-top: rem-calc(3);
text-align: center;
@media (min-width: 480px) {
@media (min-width: $small-breakpoint) {
float: left;
}
}
@@ -270,7 +268,7 @@ header {
padding: rem-calc(12) 0;
text-align: center;
@media (min-width: 480px) {
@media (min-width: $small-breakpoint) {
float: right;
}
}
@@ -331,12 +329,47 @@ header {
}
}
}
&.expanded .title-area {
background: none;
}
.toggle-topbar a {
font-size: rem-calc(10);
}
&.expanded .toggle-topbar a {
color: white;
}
&.expanded .toggle-topbar a span::after {
box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
}
}
.top-bar-section {
margin-right: rem-calc(24);
width: 100%;
ul li > a {
font-size: rem-calc(14);
&.button {
border-radius: 0;
line-height: $line-height*1.5;
text-align: left;
}
@media (min-width: $small-breakpoint) {
&.button {
border-radius: rem-calc(3);
line-height: normal;
margin-top: rem-calc(24);
text-align: center;
}
}
}
ul li > a {
font-size: rem-calc(14);
}
@@ -356,7 +389,15 @@ header {
}
ul {
margin-right: rem-calc(12);
margin-left: rem-calc(12);
@media (min-width: $small-breakpoint) {
margin-left: 0;
&.right:first-child {
margin-right: rem-calc(12);
}
}
li:not(.has-form) a:not(.button) {
background: none;
@@ -385,10 +426,15 @@ header {
font-size: rem-calc(14);
height: rem-calc(72);
@media (min-width: 480px) {
@media (min-width: $small-breakpoint) {
height: rem-calc(48);
}
.row {
background-color: rgba(0,0,0,.5);
padding: 0 rem-calc(10);
}
a {
color: white;
}
@@ -399,7 +445,7 @@ header {
clear: both;
text-transform: lowercase;
@media (min-width: 480px) {
@media (min-width: $small-breakpoint) {
text-align: center;
}
@@ -467,6 +513,10 @@ footer {
}
}
}
.footer-sections {
padding-left: 0;
}
}
.subfooter {
@@ -531,11 +581,13 @@ footer {
// - - - - - - - - - - - - - - - - - - - - - - - - -
.auth-page {
background: url('auth_bg.jpg');
margin-top: rem-calc(24);
background: #065687 url("auth_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
padding-top: rem-calc(24);
@media (min-width: 480px) {
margin-top: rem-calc(48);
@media (min-width: $small-breakpoint) {
padding-top: rem-calc(48);
}
h1 {
@@ -685,6 +737,12 @@ form {
}
}
.alert-layout {
position: absolute;
top: 0;
width: 100%;
}
// 10. User account
// - - - - - - - - - - - - - - - - - - - - - - - - -

View File

@@ -37,23 +37,17 @@
<!-- Badge collective name, "collective" by default -->
<td>Colectivo</td>
<!-- /. Badge collective name, "collective" by default -->
<td>
<!-- Edit collective bagde, "collective" by default -->
<%= link_to t("admin.organizations.index.edit"), "", class: "button radius tiny" %>
<!-- /. Edit collective bagde, "collective" by default -->
</td>
<% if organization.verified? %>
<td class="verified">
<i class="icon-check"></i>
<%= t("admin.organizations.index.verified") %>
</td>
<% end %>
<% if organization.rejected? %>
<td class="rejected">
<i class="icon-x"></i>
<%= t("admin.organizations.index.rejected") %>
</td>
<% end %>
<td>
<!-- Edit collective bagde, "collective" by default -->
<%= link_to t("admin.organizations.index.edit"), "", class: "button radius tiny secondary" %>
<!-- /. Edit collective bagde, "collective" by default -->
</td>
<% if can? :verify, organization %>
<td>
<%= link_to t("admin.organizations.index.verify"),
@@ -62,6 +56,12 @@
%>
</td>
<% end %>
<% if organization.rejected? %>
<td class="rejected">
<i class="icon-x"></i>
<%= t("admin.organizations.index.rejected") %>
</td>
<% end %>
<% if can? :reject, organization %>
<td><%= link_to t("admin.organizations.index.reject"),
reject_admin_organization_path(organization, request.query_parameters),

View File

@@ -32,10 +32,12 @@
as: :tag,
html: { id: "edit_tag_#{tag.id}", class: "text-right"}) do |f| %>
<%= f.label "featured_#{tag.id}" do %>
<%= f.check_box :featured, label: false, id: "tag_featured_#{tag.id}", class: "left" %>
<span class="checkbox left"><%= t("admin.tags.mark_as_featured") %></span>
<% end %>
<span class="left">
<%= f.label "featured_#{tag.id}" do %>
<%= f.check_box :featured, label: false, id: "tag_featured_#{tag.id}", class: "inline-block" %>
<span class="checkbox inline-block"><%= t("admin.tags.mark_as_featured") %></span>
<% end %>
</span>
<%= f.submit(class: "button radius tiny success") %>

View File

@@ -15,7 +15,7 @@
</p>
</div>
<div class="small-12 medium-8 column">
<div class="footer-sections small-12 medium-8 column">
<div class="small-12 medium-4 column">
<h4><%= t("layouts.footer.participation_title") %></h4>
<p><%= t("layouts.footer.participation_text") %></p>

View File

@@ -51,8 +51,12 @@
<div class="row home-page">
<div class="small-12 column text-center">
<h1><%= t("layouts.header.open_city_title") %></h1>
<p><%= t("layouts.header.open_city_slogan") %></p>
<p><%= t("layouts.header.open_city_text") %></p>
<div class="small-12 medium-10 column small-centered">
<p><%= t("layouts.header.open_city_slogan") %></p>
</div>
<div class="small-12 medium-10 column small-centered">
<p><%= t("layouts.header.open_city_text") %></p>
</div>
<p><%= t("layouts.header.open_city_soon") %></p>
<%= link_to t("layouts.header.see_all_debates"), debates_path, class: "button radius" %>
</div>

View File

@@ -9,17 +9,18 @@
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag "favicon.ico" %>
</head>
<body>
<body class="<%= "bg-white" if current_page?(root_path) %>">
<%= render 'layouts/header' %>
<% if notice %>
<p class="alert-box success"><%= notice %></p>
<p class="alert-box success alert-layout"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert-box"><%= alert %></p>
<p class="alert-box alert alert-layout"><%= alert %></p>
<% end %>
<%= yield %>

View File

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

View File

@@ -1,6 +1,5 @@
<% if resource.errors.any? %>
<div id="error_explanation" class="alert-box alert radius">
<p>
<strong>
<%= pluralize resource.errors.count, t("form.error"), t("form.errors") %>
@@ -11,6 +10,5 @@
<% end %>
</strong>
</p>
</div>
<% end %>