From 56bb06b168c406e746aa8287c676a22a7087776e Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Tue, 31 May 2016 17:10:08 +0200
Subject: [PATCH] Improves general layout for admin

---
 app/assets/stylesheets/admin.scss        | 64 ++++++++++++++----------
 app/assets/stylesheets/layout.scss       |  4 ++
 app/views/admin/_menu.html.erb           | 53 +++++++-------------
 app/views/admin/dashboard/index.html.erb |  5 +-
 app/views/layouts/_admin_header.html.erb | 12 ++---
 app/views/layouts/admin.html.erb         | 21 ++++----
 config/locales/admin.en.yml              |  1 +
 config/locales/admin.es.yml              |  3 +-
 8 files changed, 79 insertions(+), 84 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 4bd332c97..6bd46e4d6 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -8,10 +8,21 @@
 //
 
 // 01. Global styles
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// -----------------
+
+$admin-color: #CF3638;
 
 body.admin {
 
+  header {
+    border: 0;
+  }
+
+  .top-bar {
+    background: $admin-color !important;
+    height: auto;
+  }
+
   form {
     .button {
       margin-top: 0;
@@ -49,7 +60,6 @@ body.admin {
   }
 
   .dashboard {
-    margin-bottom: rem-calc(48);
 
     ul, ol {
       margin-left: rem-calc(12);
@@ -99,17 +109,20 @@ body.admin {
   display: none;
 }
 
+.admin-content {
+  padding: $line-height !important;
+}
+
 // 02. Sidebar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// -----------
 
 .admin-sidebar {
-
-  a {
-    color: white\9 !important;
-  }
+  border-bottom: 1px solid $border;
+  border-right: 1px solid $border;
 
   ul {
     list-style-type: none;
+    margin-bottom: 0;
     margin-left: 0;
     padding: 0;
 
@@ -120,45 +133,44 @@ body.admin {
       padding-top: rem-calc(4);
       padding-left: 12px\9 !important;
       padding-right: 12px\9 !important;
+      vertical-align: middle;
     }
 
     li {
-      background: #2E343F;
-      border-bottom: 1px solid #292f39;
-      border-top: 1px solid #353c49;
+      background: white;
       margin: 0;
       outline: 0;
 
-      &:first-child {
+      &.active a {
+        background: #f3f6f7;
+        color: $admin-color;
         font-weight: bold;
-        text-transform: uppercase;
-      }
-
-      &.active{
-        background: #373D47;
-
-        a:not(.button) {
-          color: white;
-        }
       }
     }
 
-    li a:not(.button) {
-      color: rgba(255,255,255,0.3);
+    li.section {
+      border-bottom: 1px dotted #d5d5d5;
+      border-top: 1px dotted #d5d5d5;
+      height: $line-height/2;
+    }
+
+    li a {
+      color: $text;
       display: block;
       line-height: rem-calc(48);
       padding-left: rem-calc(12);
       vertical-align: top;
 
       &:hover {
-        color: white;
+        background: #f3f6f7;
+        text-decoration: none;
       }
     }
   }
 }
 
 // 03. List elements
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// -----------------
 
 .admin-list {
   list-style-type: none;
@@ -277,7 +289,7 @@ body.admin {
 }
 
 // 04. Stats
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ---------
 
 .stats {
   background: white;
@@ -305,7 +317,7 @@ body.admin {
 }
 
 // 05. Management
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// --------------
 
 .user-permissions {
 
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 42f6f177d..b5a7ff714 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -219,6 +219,10 @@ a {
   float: left;
 }
 
+.no-max-width {
+  max-width: none;
+}
+
 // 02. Header
 // ----------
 
diff --git a/app/views/admin/_menu.html.erb b/app/views/admin/_menu.html.erb
index f8437906f..7ea48b2c6 100644
--- a/app/views/admin/_menu.html.erb
+++ b/app/views/admin/_menu.html.erb
@@ -1,122 +1,103 @@
 <nav class="admin-sidebar">
   <ul id="admin_menu">
-    <li>
-      <%= link_to t("admin.dashboard.index.title"), admin_root_path %>
-    </li>
 
     <li <%= "class=active" if controller_name == "tags" %>>
       <%= link_to admin_tags_path do %>
-        <span class="icon-tag"></span>
-        <%= t("admin.menu.debate_topics") %>
+        <span class="icon-tag"></span><%= t("admin.menu.debate_topics") %>
       <% end %>
     </li>
 
     <li <%= "class=active" if controller_name == "proposals" %>>
       <%= link_to admin_proposals_path do %>
-        <span class="icon-proposals"></span>
-        <%= t("admin.menu.hidden_proposals") %>
+        <span class="icon-proposals"></span><%= t("admin.menu.hidden_proposals") %>
       <% end %>
     </li>
 
     <% if feature?(:debates) %>
       <li <%= "class=active" if controller_name == "debates" %>>
         <%= link_to admin_debates_path do %>
-          <span class="icon-debates"></span>
-          <%= t("admin.menu.hidden_debates") %>
+          <span class="icon-debates"></span><%= t("admin.menu.hidden_debates") %>
         <% end %>
       </li>
     <% end %>
 
     <li <%= "class=active" if controller_name == "comments" %>>
       <%= link_to admin_comments_path do %>
-        <span class="icon-comments"></span>
-        <%= t("admin.menu.hidden_comments") %>
+        <span class="icon-comments"></span><%= t("admin.menu.hidden_comments") %>
       <% end %>
     </li>
 
     <% if feature?(:spending_proposals) %>
       <li <%= "class=active" if controller_name == "spending_proposals" %>>
         <%= link_to admin_spending_proposals_path do %>
-          <span class="icon-budget"></span>
-          <%= t("admin.menu.spending_proposals") %>
+          <span class="icon-budget"></span><%= t("admin.menu.spending_proposals") %>
         <% end %>
       </li>
     <% end %>
 
     <li <%= "class=active" if controller_name == "banners" %>>
       <%= link_to admin_banners_path do %>
-        <span class="icon-eye"></span>
-        <%= t("admin.menu.banner") %>
+        <span class="icon-eye"></span><%= t("admin.menu.banner") %>
       <% end %>
     </li>
-    
+
     <li <%= "class=active" if controller_name == "users" %>>
       <%= link_to admin_users_path do %>
-        <span class="icon-eye"></span>
-        <%= t("admin.menu.hidden_users") %>
+        <span class="icon-eye"></span><%= t("admin.menu.hidden_users") %>
       <% end %>
     </li>
 
     <li <%= "class=active" if controller_name == "verifications" %>>
       <%= link_to admin_verifications_path do %>
-        <span class="icon-eye"></span>
-        <%= t("admin.menu.incomplete_verifications") %>
+        <span class="icon-eye"></span><%= t("admin.menu.incomplete_verifications") %>
       <% end %>
     </li>
 
     <li <%= "class=active" if controller_name == "organizations" %>>
       <%= link_to admin_organizations_path do %>
-        <span class="icon-organizations"></span>
-        <%= t("admin.menu.organizations") %>
+        <span class="icon-organizations"></span><%= t("admin.menu.organizations") %>
       <% end %>
     </li>
 
     <li <%= "class=active" if controller_name == "officials" %>>
       <%= link_to admin_officials_path do %>
-        <span class="icon-user"></span>
-        <%= t("admin.menu.officials") %>
+        <span class="icon-user"></span><%= t("admin.menu.officials") %>
       <% end %>
     </li>
 
     <li <%= 'class=active' if controller_name == 'moderators' %>>
       <%= link_to admin_moderators_path do %>
-        <span class="icon-user"></span>
-        <%= t('admin.menu.moderators') %>
+        <span class="icon-user"></span><%= t('admin.menu.moderators') %>
       <% end %>
     </li>
 
     <li <%= 'class=active' if controller_name == 'valuators' %>>
       <%= link_to admin_valuators_path do %>
-        <span class="icon-user"></span>
-        <%= t('admin.menu.valuators') %>
+        <span class="icon-user"></span><%= t('admin.menu.valuators') %>
       <% end %>
     </li>
 
     <li <%= 'class=active' if controller_name == 'managers' %>>
       <%= link_to admin_managers_path do %>
-        <span class="icon-user"></span>
-        <%= t('admin.menu.managers') %>
+        <span class="icon-user"></span><%= t('admin.menu.managers') %>
       <% end %>
     </li>
 
     <li <%= 'class=active' if controller_name == 'activity' %>>
       <%= link_to admin_activity_path do %>
-        <span class="icon-eye"></span>
-        <%= t('admin.menu.activity') %>
+        <span class="icon-eye"></span><%= t('admin.menu.activity') %>
       <% end %>
     </li>
 
     <li <%= 'class=active' if controller_name == 'settings' %>>
       <%= link_to admin_settings_path do %>
-        <span class="icon-settings"></span>
-        <%= t("admin.menu.settings") %>
+        <span class="icon-settings"></span><%= t("admin.menu.settings") %>
       <% end %>
     </li>
 
     <li <%= "class=active" if controller_name == "stats" %>>
       <%= link_to admin_stats_path do %>
-        <span class="icon-stats"></span>
-        <%= t("admin.menu.stats") %>
+        <span class="icon-stats"></span><%= t("admin.menu.stats") %>
       <% end %>
     </li>
   </ul>
diff --git a/app/views/admin/dashboard/index.html.erb b/app/views/admin/dashboard/index.html.erb
index da64cba15..fc1671737 100644
--- a/app/views/admin/dashboard/index.html.erb
+++ b/app/views/admin/dashboard/index.html.erb
@@ -1,5 +1,8 @@
 <div class="dashboard">
-  <h2><%= t("admin.dashboard.index.title") %></h2>
+
+  <%= link_to t("admin.dashboard.index.back") + " " + Setting['org_name'], root_path, class: "button float-right" %>
+
+  <h2 class="inline-block"><%= t("admin.dashboard.index.title") %></h2>
 
   <p>Desde aquí puedes administrar el sistema, a través de las siguientes acciones:</p>
 
diff --git a/app/views/layouts/_admin_header.html.erb b/app/views/layouts/_admin_header.html.erb
index 43f84534a..e66b8b09f 100644
--- a/app/views/layouts/_admin_header.html.erb
+++ b/app/views/layouts/_admin_header.html.erb
@@ -1,14 +1,8 @@
 <header>
-  <section class="top-links">
-    <div class="row">
-      <%= render 'shared/locale_switcher' %>
-    </div>
-  </section>
-
-  <div class="row">
+  <div class="expanded row">
     <div class="top-bar">
 
-      <%= link_to Setting['org_name'], root_path, class: "logo show-for-small-only" %>
+      <%= link_to Setting['org_name'], admin_root_path, class: "logo show-for-small-only" %>
 
       <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
         <span class="menu-icon dark" data-toggle></span>
@@ -17,7 +11,7 @@
 
       <div id="responsive-menu">
         <div class="top-bar-title">
-          <%= link_to root_path, class: "hide-for-small-only" do %>
+          <%= link_to admin_root_path, class: "hide-for-small-only" do %>
             <%= image_tag('logo_header.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
             <%= Setting['org_name'] %>
             &nbsp;|&nbsp;<%= t("admin.dashboard.index.title") %>
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index cc8e0c4a9..dc2de2862 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -16,19 +16,18 @@
   <body class="admin">
     <%= render 'layouts/admin_header' %>
 
-    <div class="row expanded">
-      <main>
-        <div class="small-12 medium-3 column">
-          <%= side_menu %>
-        </div>
+    <main class="no-margin-top row no-max-width collapse">
+      <div class="small-12 medium-3 large-2 column">
+        <%= side_menu %>
+      </div>
 
-        <div class="admin-content small-12 medium-9 column">
+      <div class="admin-content small-12 medium-9 large-10 column">
 
-          <%= render 'layouts/flash' %>
+        <%= render 'layouts/flash' %>
+
+        <%= yield %>
+      </div>
+    </main>
 
-          <%= yield %>
-        </div>
-      </main>
-    </div>
   </body>
 </html>
diff --git a/config/locales/admin.en.yml b/config/locales/admin.en.yml
index 7d4648c11..6f39b76bb 100755
--- a/config/locales/admin.en.yml
+++ b/config/locales/admin.en.yml
@@ -71,6 +71,7 @@ en:
         title: Hidden comments
     dashboard:
       index:
+        back: Go back to
         title: Administration
     debates:
       index:
diff --git a/config/locales/admin.es.yml b/config/locales/admin.es.yml
index 13bee8ccc..27369e012 100644
--- a/config/locales/admin.es.yml
+++ b/config/locales/admin.es.yml
@@ -69,6 +69,7 @@ es:
         title: Comentarios ocultos
     dashboard:
       index:
+        back: Volver a
         title: Administración
     debates:
       index:
@@ -182,7 +183,7 @@ es:
           all: Todas
           with_confirmed_hide: Confirmadas
           without_confirmed_hide: Pendientes
-        title: Propuestas ocultos
+        title: Propuestas ocultas
     settings:
       flash:
         updated: Valor actualizado