Merge pull request #194 from AyuntamientoMadrid/styling_admin

Styling admin

app/assets/fonts/icons.svg

@@ -21,4 +21,5 @@
 <glyph unicode="&#108;" d="M477 350c0-7-2-14-8-19l-206-207-39-39c-6-5-12-8-20-8-7 0-14 3-19 8l-142 142c-6 6-8 12-8 20 0 7 2 14 8 19l38 39c6 5 12 8 20 8 7 0 14-3 19-8l84-84 188 188c5 5 12 8 19 8 8 0 14-3 20-8l38-39c6-6 8-12 8-20z"/>
 <glyph unicode="&#109;" d="M140 73l26 26-67 67-26-26 0-30 37 0 0-37z m150 265c0 4-2 7-7 7-1 0-3-1-4-2l-155-155c-2-2-2-3-2-5 0-4 2-6 6-6 2 0 4 0 5 2l155 154c1 2 2 3 2 5z m-16 55l119-119-238-237-118 0 0 118z m195-27c0-10-3-19-10-26l-48-47-118 118 47 48c7 7 15 10 26 10 10 0 18-3 26-10l67-67c7-8 10-16 10-26z"/>
 <glyph unicode="&#110;" d="M494 327c0-4-3-9-8-14l-103-101 24-143c0-1 0-3 0-5 0-4-1-8-3-10-2-3-4-5-8-5-4 0-8 2-12 4l-128 67-128-67c-4-2-8-4-12-4-4 0-7 2-9 5-2 2-3 6-3 10 0 1 0 3 1 5l24 143-104 101c-4 6-7 10-7 14 0 7 6 12 16 13l144 21 64 130c4 8 8 12 14 12 6 0 10-4 14-12l64-130 144-21c10-1 16-6 16-13z"/>
+<glyph unicode="&#112;" d="M256 448c-96 0-208-64-256-192 48-96 144-160 256-160 112 0 208 64 256 160-48 128-160 192-256 192z m0-320c-96 0-176 64-192 128 16 64 96 128 192 128 96 0 176-64 192-128-16-64-96-128-192-128z m0 224c-10 0-19-2-28-5 17-7 28-24 28-43 0-27-21-48-48-48-19 0-36 11-43 28-3-9-5-18-5-28 0-53 43-96 96-96 53 0 96 43 96 96 0 53-43 96-96 96z"/>
 </font></defs></svg>

app/assets/stylesheets/admin.scss

@@ -0,0 +1,153 @@
+// Table of Contents
+//
+// 01. Global styles
+// 02. Sidebar
+// 03. List elements
+//
+
+// 01. Global styles
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+body.admin {
+  background: white;
+
+  h2 {
+    font-size: rem-calc(24);
+    font-weight: bold;
+  }
+
+  form {
+    .button {
+      margin-top: 0;
+    }
+  }
+
+  .button.secondary {
+    margin-right: rem-calc(12);
+  }
+
+  .button.create {
+    background: #EFD90C;
+    color: $text;
+
+    &:hover {
+      background: #BDAB09;
+    }
+  }
+
+  .admin-content {
+    margin-top: rem-calc(24);
+  }
+
+  .is-featured {
+    margin-top: rem-calc(36);
+  }
+}
+
+// 02. Sidebar
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.admin-sidebar {
+  margin-left: rem-calc(-15);
+  margin-top: rem-calc(-48);
+
+  ul {
+    list-style-type: none;
+    margin-left: 0;
+    padding: 0;
+
+    [class^="icon-"] {
+      display: inline-block;
+      font-size: rem-calc(24);
+      padding-right: rem-calc(24);
+      padding-top: rem-calc(4);
+    }
+
+    li {
+      background: #2E343F;
+      border-bottom: 1px solid #292f39;
+      border-top: 1px solid #353c49;
+      margin: 0;
+      outline: 0;
+
+      &:first-child {
+        background: #2B3139;
+        color: rgba(255,255,255,0.3);
+        padding: rem-calc(24) rem-calc(12);
+        text-transform: uppercase;
+      }
+
+      &.active{
+        background: #373D47;
+
+        a:not(.button) {
+          color: white;
+        }
+      }
+    }
+
+    li a:not(.button) {
+      color: rgba(255,255,255,0.3);
+      line-height: rem-calc(48);
+      padding-left: rem-calc(12);
+      vertical-align: top;
+
+      &:hover {
+        color: white;
+      }
+    }
+  }
+}
+
+// 03. List elements
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.admin-list {
+  list-style-type: none;
+  margin: 0;
+
+  form {
+    clear: both;
+
+    .checkbox {
+      font-size: rem-calc(12);
+    }
+  }
+
+  li {
+    border-bottom: 1px solid #E7E9EC;
+    font-size: rem-calc(14);
+    min-height: rem-calc(72);
+    padding: rem-calc(12);
+
+    &:first-child {
+      border-top: 1px solid #E7E9EC;
+    }
+
+    &:nth-child(odd) {
+      background: #F0F2F6;
+    }
+  }
+
+  .tag {
+    float: left;
+    font-size: rem-calc(18);
+    padding: 0;
+  }
+
+  .button {
+    margin: 0;
+  }
+}
+
+.delete {
+  border-bottom: 1px dotted #CF2A0E;
+  color: #F04124;
+  font-size: rem-calc(11);
+  margin-right: rem-calc(12);
+
+  &:hover, &:active, &:focus {
+    border: 0;
+    color: #cf2a0e;
+  }
+}

app/assets/stylesheets/application.scss

@@ -6,6 +6,7 @@
 @import "fonts";
 @import "icons";
 @import "variables";
+@import "admin";
 @import "participacion";
 @import "debates";
 @import "c3";

app/assets/stylesheets/icons.scss

@@ -79,3 +79,6 @@
 .icon-star:before {
   content: "n";
 }
+.icon-eye:before {
+  content: "p";
+}

app/views/admin/_menu.html.erb

@@ -1,7 +1,42 @@
-<ul id="admin_menu">
-  <li><%= link_to t('admin.menu.settings'), admin_settings_path %></li>
-  <li><%= link_to t('admin.menu.debate_topics'), admin_tags_path %></li>
-  <li><%= link_to t('admin.menu.hidden_debates'), admin_debates_path %></li>
-  <li><%= link_to t('admin.menu.hidden_comments'), admin_comments_path %></li>
-  <li><%= link_to t('admin.menu.officials'), admin_officials_path %></li>
-</ul>
+<nav class="admin-sidebar">
+  <ul id="admin_menu">
+    <li>
+      <%= t("admin.dashboard.index.title") %>
+    </li>
+
+    <li class="active">
+      <%= link_to admin_tags_path do %>
+        <i class="icon-comment-quotes"></i>
+        <%= t('admin.menu.debate_topics') %>
+      <% end %>
+    </li>
+
+    <li>
+      <%= link_to admin_debates_path do %>
+        <i class="icon-eye"></i>
+        <%= t('admin.menu.hidden_debates') %>
+      <% end %>
+    </li>
+
+    <li>
+      <%= link_to admin_comments_path do %>
+        <i class="icon-chat-bubble-two"></i>
+        <%= t('admin.menu.hidden_comments') %>
+      <% end %>
+    </li>
+
+    <li>
+      <%= link_to admin_officials_path do %>
+        <i class="icon-chat-bubble-two"></i>
+        <%= t('admin.menu.officials') %>
+      <% end %>
+    </li>
+
+    <li>
+      <%= link_to admin_settings_path do %>
+        <i class="icon-chat-bubble-two"></i>
+        <%= t('admin.menu.settings') %>
+      <% end %>
+    </li>
+  </ul>
+</nav>

app/views/admin/comments/index.html.erb

@@ -1,12 +1,18 @@
-<h1><%= t("admin.comments.index.title") %></h1>
+<h2><%= t("admin.comments.index.title") %></h2>
 
-<ul>
+<ul class="admin-list">
   <% @comments.each do |comment| %>
     <li id="<%= dom_id(comment) %>">
-      <%= comment.body %>
-
-      <%= link_to t("admin.actions.restore"), restore_admin_comment_path(comment),
-                  method: :put, data: { confirm: t("admin.actions.confirm") } %>
+      <div class="row">
+        <div class="small-12 medium-10 column">
+          <%= comment.body %>
+        </div>
+        <div class="small-12 medium-2 column">
+          <%= link_to t("admin.actions.restore"), restore_admin_comment_path(comment),
+                      method: :put, data: { confirm: t("admin.actions.confirm") },
+                      class: "button radius tiny success right" %>
+        </div>
+      </div>
     </li>
   <% end %>
-</ul>
+</ul>

app/views/admin/dashboard/index.html.erb

@@ -1 +1,5 @@
-<h1><%= t("admin.dashboard.index.title") %></h1>
+<h2><%= t("admin.dashboard.index.title") %></h2>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+
+<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

app/views/admin/debates/index.html.erb

@@ -1,11 +1,13 @@
-<h1><%= t("admin.debates.index.title") %></h1>
+<h2><%= t("admin.debates.index.title") %></h2>
 
-<ul>
+<ul class="admin-list">
   <% @debates.each do |debate| %>
-    <%= link_to admin_debate_path(debate) do %>
-      <li id="<%= dom_id(debate) %>">
-        <%= link_to debate.title, admin_debate_path(debate) %>
-      </li>
-    <% end %>
+    <li id="<%= dom_id(debate) %>">
+      <%= link_to debate.title, admin_debate_path(debate) %>
+
+      <%= link_to t("admin.actions.restore"), restore_admin_debate_path(debate),
+            method: :put, data: { confirm: t("admin.actions.confirm") },
+            class: "button radius tiny success right" %>
+    </li>
   <% end %>
-</ul>
+</ul>

app/views/admin/debates/show.html.erb

@@ -1,11 +1,12 @@
-<h1><%= t("admin.debates.index.title") %></h1>
+<h2><%= t("admin.debates.index.title") %></h2>
 
-<div>
-  <div><%= @debate.title %></div>
-  <div><%= @debate.description %></div>
+<h3><%= @debate.title %></h3>
 
-  <div>
-    <%= link_to t('admin.actions.restore'), restore_admin_debate_path(@debate),
-              method: :put, data: { confirm: t('admin.actions.confirm') } %>
-  </div>
-</div>
+<div><%= @debate.description %></div>
+
+<%= link_to t("admin.debates.show.back"), admin_debates_path,
+            class: "button radius small secondary" %>
+
+<%= link_to t("admin.actions.restore"), restore_admin_debate_path(@debate),
+            method: :put, data: { confirm: t("admin.actions.confirm") },
+            class: "button radius small success" %>

app/views/admin/tags/index.html.erb

@@ -1,26 +1,46 @@
-<h1><%= t("admin.tags.index.add_tag") %></h1>
+<h2><%= t("admin.tags.index.add_tag") %></h2>
 
 <%= form_for(@tag, url: admin_tags_path, as: :tag) do |f| %>
-  <%= f.text_field :name, placeholder: t("admin.tags.name.placeholder") %>
-  <%= f.check_box :featured, label: false %>
-  <%= t("admin.tags.mark_as_featured") %>
-  <%= f.submit(class: "button radius small") %>
+
+  <div class="row">
+    <div class="small-12 medium-6 column">
+      <%= f.label :name, t("admin.tags.name.placeholder") %>
+      <%= f.text_field :name, placeholder: t("admin.tags.name.placeholder"), label: false  %>
+    </div>
+
+    <div class="is-featured small-12 medium-6 column">
+      <%= f.label :featured do %>
+        <%= f.check_box :featured, label: false %>
+        <span class="checkbox"><%= t("admin.tags.mark_as_featured") %></span>
+      <% end %>
+    </div>
+  </div>
+
+  <%= f.submit(class: "button radius create") %>
+
 <% end %>
 
-<h1><%= t("admin.tags.index.title") %></h1>
+<h3><%= t("admin.tags.index.title") %></h3>
 
-<ul>
+<ul class="admin-list">
   <% @tags.each do |tag| %>
     <li>
-      <strong><%= tag.name %></strong>
+      <span class="tag"><%= tag.name %></span>
 
-      <%= form_for(tag, url: admin_tag_path(tag), as: :tag, html: { id: "edit_tag_#{tag.id}"}) do |f| %>
-        <%= f.check_box :featured, label: false, id: "tag_featured_#{tag.id}" %>
-        <%= t("admin.tags.mark_as_featured") %>
-        <%= f.submit(class: "button radius tiny") %>
-        <%= link_to t("admin.tags.destroy"), admin_tag_path(tag), method: :delete, class: 'button tiny alert' %>
+      <%= form_for(tag,
+          url: admin_tag_path(tag),
+          as: :tag,
+          html: { id: "edit_tag_#{tag.id}", class: "text-right"}) do |f| %>
+
+        <%= f.label :featured 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 %>
+
+        <%= f.submit(class: "button radius tiny success") %>
+        <br>
+        <%= link_to t("admin.tags.destroy"), admin_tag_path(tag), method: :delete, class: "delete" %>
       <% end %>
-
     </li>
   <% end %>
-</ul>
+</ul>

app/views/layouts/_admin_header.html.erb

@@ -10,12 +10,6 @@
             <% end %>
           ]
       </div>
-      <div class="external-links">
-        <%= link_to t("layouts.header.participation"), root_path, class: "selected" %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_transparency"), "#" %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_opendata"), "#" %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_blog"), "#" %>
-      </div>
     </div>
   </section>
 
@@ -25,7 +19,7 @@
         <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>
+            <%= t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %> | <span><%= t("admin.dashboard.index.title") %></span>
           <% end %>
         </li>
         <li class="toggle-topbar menu-icon"><a href="#"><span><%= t("layouts.header.menu") %></span></a></li>

app/views/layouts/admin.html.erb

@@ -12,25 +12,26 @@
     <%= csrf_meta_tags %>
   </head>
 
-  <body>
+  <body class="admin">
     <%= render 'layouts/admin_header' %>
 
-    <% if notice %>
-      <p class="alert-box success"><%= notice %></p>
-    <% end %>
+    <div class="row">
 
-    <% if alert %>
-      <p class="alert-box"><%= alert %></p>
-    <% end %>
+      <div class="small-12 medium-3 column">
+        <%= side_menu %>
+      </div>
 
-    <div class="left" style="padding:50px;">
-      <%= side_menu %>
+      <div class="admin-content small-12 medium-9 column">
+        <% if notice %>
+          <div class="alert-box radius success"><%= notice %></div>
+        <% end %>
+
+        <% if alert %>
+          <div class="alert-box radius alert"><%= alert %></div>
+        <% end %>
+
+        <%= yield %>
+      </div>
     </div>
-
-    <div class="left">
-      <%= yield %>
-    </div>
-
   </body>
-
-</html>
+</html>

config/locales/admin.en.yml

@@ -34,6 +34,8 @@ en:
     debates:
       index:
         title: Hidden debates
+      show:
+        back: Back
       restore:
         success: The debate has been restored
     officials:

config/locales/admin.es.yml

@@ -34,6 +34,8 @@ es:
     debates:
       index:
         title: Debates ocultos
+      show:
+        back: Volver
       restore:
         success: El debate ha sido permitido
     officials: