From fbcbfd4a55c9f36846f8ffb7ae2391f0201b6fd8 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Thu, 17 Sep 2015 14:19:30 +0200
Subject: [PATCH] style calendar list

---
 .../app/views/calendar/index.jst.eco          | 75 ++++++++++---------
 app/assets/stylesheets/zammad.css.scss        | 39 ++++++++--
 2 files changed, 74 insertions(+), 40 deletions(-)

diff --git a/app/assets/javascripts/app/views/calendar/index.jst.eco b/app/assets/javascripts/app/views/calendar/index.jst.eco
index a88209d0a..04aa75991 100644
--- a/app/assets/javascripts/app/views/calendar/index.jst.eco
+++ b/app/assets/javascripts/app/views/calendar/index.jst.eco
@@ -19,42 +19,47 @@
 <div class="action" data-id="<%- calendar.id %>">
   <div class="action-flow">
     <div class="action-block">
-      <h3><span title="Last iCal Feed sync at: <%= calendar.last_sync %>: <%= calendar.last_log %>"><%- @Icon('status', 'ok inline') %></span> <%= calendar.name %></h3>
-      <%- @T('Timezone') %>: <%= calendar.timezone %>
+      <h2><span title="Last iCal Feed sync at: <%= calendar.last_sync %>: <%= calendar.last_log %>"><%- @Icon('status', 'ok inline') %></span> <%= calendar.name %></h2>
     </div>
-    <div class="action-block">
-      <%- @T('Business Hours') %>:<br>
-      <table class="table table-fluid">
-        <tr>
-          <td><%- @T('Monday') %></td><td><% if _.isEmpty(calendar.business_hours['mon']): %>-<% else: %><% for from, till of calendar.business_hours['mon']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Tuesday') %></td><td><% if _.isEmpty(calendar.business_hours['tue']): %>-<% else: %><% for from, till of calendar.business_hours['tue']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Wednesday') %></td><td><% if _.isEmpty(calendar.business_hours['wed']): %>-<% else: %><% for from, till of calendar.business_hours['wed']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Thursday') %></td><td><% if _.isEmpty(calendar.business_hours['thu']): %>-<% else: %><% for from, till of calendar.business_hours['thu']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Friday') %></td><td><% if _.isEmpty(calendar.business_hours['fri']): %>-<% else: %><% for from, till of calendar.business_hours['fri']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Saturday') %></td><td><% if _.isEmpty(calendar.business_hours['sat']): %>-<% else: %><% for from, till of calendar.business_hours['sat']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Sunday') %></td><td><% if _.isEmpty(calendar.business_hours['sun']): %>-<% else: %><% for from, till of calendar.business_hours['sun']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
-        </tr>
-      </table>
-    </div>
-    <div class="action-block">
-      <%- @T('Public Holidays') %>:
-      <table class="table table-fluid">
-        <% for holiday, meta of calendar.public_holidays_preview: %>
-          <tr <% if !meta.active: %>class="is-inactive"<% end %>><td><%- @Tdate(holiday) %></td><td><%= meta.summary %></td></tr>
-        <% end %>
-      </table>
+    <div class="action-separator"></div>
+    <div class="action-flow">
+      <div class="action-row">
+        <div class="label"><%- @T('Timezone') %></div> <%= calendar.timezone %>
+      </div>
+      <div class="action-block">
+        <div class="label"><%- @T('Business Hours') %></div>
+        <table class="table table-fluid">
+          <tr>
+            <td><%- @T('Monday') %></td><td><% if _.isEmpty(calendar.business_hours['mon']): %>-<% else: %><% for from, till of calendar.business_hours['mon']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Tuesday') %></td><td><% if _.isEmpty(calendar.business_hours['tue']): %>-<% else: %><% for from, till of calendar.business_hours['tue']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Wednesday') %></td><td><% if _.isEmpty(calendar.business_hours['wed']): %>-<% else: %><% for from, till of calendar.business_hours['wed']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Thursday') %></td><td><% if _.isEmpty(calendar.business_hours['thu']): %>-<% else: %><% for from, till of calendar.business_hours['thu']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Friday') %></td><td><% if _.isEmpty(calendar.business_hours['fri']): %>-<% else: %><% for from, till of calendar.business_hours['fri']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Saturday') %></td><td><% if _.isEmpty(calendar.business_hours['sat']): %>-<% else: %><% for from, till of calendar.business_hours['sat']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Sunday') %></td><td><% if _.isEmpty(calendar.business_hours['sun']): %>-<% else: %><% for from, till of calendar.business_hours['sun']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
+          </tr>
+        </table>
+      </div>
+      <div class="action-block">
+        <div class="label"><%- @T('Public Holidays') %></div>
+        <table class="table table-fluid">
+          <% for holiday, meta of calendar.public_holidays_preview: %>
+            <tr <% if !meta.active: %>class="is-inactive"<% end %>><td><%- @Tdate(holiday) %></td><td><%= meta.summary %></td></tr>
+          <% end %>
+        </table>
+      </div>
     </div>
   </div>
   <div class="action-controls">
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 8a3b82daa..519ea3e51 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -581,14 +581,14 @@ table {
 .table > tbody > tr > td {
   padding: 9px;
   border: none;
-  box-shadow: 0 1px rgba(0,0,0,.02);
+  box-shadow: 0 1px rgba(0,0,0,.03);
 }
 
 .table-hover > tbody > tr:hover > td {
   background: white;
   box-shadow: 
-    0 1px rgba(0,0,0,.02),
-    0 -1px rgba(0,0,0,.02);
+    0 1px rgba(0,0,0,.03),
+    0 -1px rgba(0,0,0,.03);
 }
  
 .table-hover > tbody > tr:hover > th {
@@ -1861,7 +1861,8 @@ ol.tabs li {
   fill: $ok-color;
   
   &.inline {
-    margin: 2px 2px 0 0;
+    margin-top: -3px;
+    vertical-align: middle;
   }
   
   &.ok {
@@ -6099,11 +6100,38 @@ output {
 
   .action-flow {
     display: flex;
+    flex-wrap: wrap;
+  }
+
+  .action-separator {
+    width: 1px;
+    background: hsl(0,0%,97%);
+    margin: 0 10px;
+  }
+
+  .table {
+    margin-left: -9px;
+    margin-right: -9px;
   }
 
   .action-block,
-  .action-controls {
+  .action-controls,
+  .action-row {
     padding: 10px;
+    
+    h2:first-child,
+    h3:first-child {
+      margin-top: 0;
+    }
+
+    h2:only-child,
+    h3:only-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .action-row {
+    flex-basis: 100%;
   }
   
   h3 {
@@ -6124,6 +6152,7 @@ output {
   .action-controls {
     display: flex;
     margin-left: auto;
+    align-self: flex-end;
     
     .btn {
       align-self: center;