From 0b29920a0c594b41b69bf7b721610b57450f76cb Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 27 May 2015 10:49:45 +0200
Subject: [PATCH] make sidebar header clickarea even bigger

---
 .../app/views/generic/actions.jst.eco         |  2 +-
 .../app/views/layout_ref/local_modal.jst.eco  |  4 +-
 .../layout_ref/organization_profile.jst.eco   |  2 +-
 .../app/views/layout_ref/user_profile.jst.eco |  2 +-
 .../app/views/navigation/menu.jst.eco         |  2 +-
 app/assets/stylesheets/zammad.css.scss        | 51 ++++++++++---------
 6 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/app/views/generic/actions.jst.eco b/app/assets/javascripts/app/views/generic/actions.jst.eco
index c637968cb..159851a1a 100644
--- a/app/assets/javascripts/app/views/generic/actions.jst.eco
+++ b/app/assets/javascripts/app/views/generic/actions.jst.eco
@@ -1,5 +1,5 @@
 <div class="dropdown dropdown--actions">
-  <div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
+  <div class="dropdown-toggle" id="userAction" data-toggle="dropdown">
     <% if @type isnt 'small': %>
       <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
       <label><%- @T('Action') %></label>
diff --git a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
index b68a51cb5..c5f61a467 100644
--- a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
@@ -1,4 +1,4 @@
-<div class="flex profile">
+<div class="profile">
   <div class="modal modal--local">
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
@@ -301,7 +301,7 @@
   <div class="profile-window">
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
-        <div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
+        <div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
           <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
diff --git a/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco b/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
index fce6fc5f1..5767433c2 100644
--- a/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
@@ -3,7 +3,7 @@
   <div class="profile-window">
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
-        <div class="dropdown-toggle horizontal center" id="organizationProfile" data-toggle="dropdown">
+        <div class="dropdown-toggle" id="organizationProfile" data-toggle="dropdown">
           <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
diff --git a/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco b/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco
index 538952c7e..da49d2b35 100644
--- a/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco
@@ -3,7 +3,7 @@
   <div class="profile-window">
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
-        <div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
+        <div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
           <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
diff --git a/app/assets/javascripts/app/views/navigation/menu.jst.eco b/app/assets/javascripts/app/views/navigation/menu.jst.eco
index 2c8f74bdf..2c0a9c5b8 100644
--- a/app/assets/javascripts/app/views/navigation/menu.jst.eco
+++ b/app/assets/javascripts/app/views/navigation/menu.jst.eco
@@ -1,7 +1,7 @@
 <% for item in @items: %>
   <% if item.child: %>
   <li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
-    <a href="<%= item.target %>" class="dropdown-toggle horizontal center" data-toggle="dropdown">
+    <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
         <svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
         <span class="nav-item-name flex">
           <%- @T( item.name ) %>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 6d7465153..1e3d38462 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -3416,21 +3416,17 @@ footer {
 
   .tabsSidebar .sidebar-header {
     display: flex;
-    align-items: center;
+    align-content: stretch;
     position: relative;
     margin: 0 20px;
     
     + hr {
       margin-top: 0;
     }
-    
-    .dropdown {
-      position: static;
-    }
   }
 
   .sidebar-header-headline {
-    padding: 25px 0 15px 25px;
+    padding: 33px 0 17px 25px;
     margin: 0 0 0 -20px;
     line-height: 1;
     padding-right: 8px;
@@ -3439,16 +3435,23 @@ footer {
 
   .sidebar-header-actions {
     flex: 1;
-    margin-top: 10px;
-    margin-right: 20px;
+    margin-right: 5px;
+    display: flex;
+    align-items: center;
+    
+    .dropdown {
+      flex: 1;
+      position: static;
+    }
     
     .dropdown-toggle {
-      height: 30px;
+      padding-top: 38px;
+      padding-bottom: 24px;
     }
   }
 
   .tabsSidebar-close {
-    padding: 28px 35px 20px 0;
+    padding: 27px 35px 12px 0;
     margin: 0 -20px 0 0;
     @extend .u-clickable;
     display: flex;
@@ -3513,20 +3516,18 @@ footer {
     justify-content: center;
   }
 
-  .tabs
-
-    .tabsSidebar-tab.is-changed:before {
-      position: absolute;
-      content: '';
-      left: -3px;
-      width: 6px;
-      height: 6px;
-      top: 50%;
-      margin-top: -3px;
-      border-radius: 100%;
-      background: hsl(198,19%,72%);
-      box-shadow: 0 0 0 2px hsl(210,17%,98%);
-    }
+  .tabsSidebar-tab.is-changed:before {
+    position: absolute;
+    content: '';
+    left: -3px;
+    width: 6px;
+    height: 6px;
+    top: 50%;
+    margin-top: -3px;
+    border-radius: 100%;
+    background: hsl(198,19%,72%);
+    box-shadow: 0 0 0 2px hsl(210,17%,98%);
+  }
 
   .tabsSidebar-tab:first-child {
     border-top-left-radius: 8px;
@@ -3939,6 +3940,8 @@ footer {
 }
 
   .dropdown-toggle {
+    display: flex;
+    align-items: center;
     @extend .u-clickable;
   }