Merge pull request #283 from AyuntamientoMadrid/improve_design
Improve design
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 95 KiB |
BIN
app/assets/images/favicon.ico
Normal file
BIN
app/assets/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
app/assets/images/header_bg.jpg
Normal file
BIN
app/assets/images/header_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 269 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 201 KiB |
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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") %>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 %>
|
||||
Reference in New Issue
Block a user