From 369de95fb449313a8ad17eef038970b0bc017ada Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 24 Jun 2015 15:16:13 +0200
Subject: [PATCH] sla list: inline controls, make filters and times stay in
 line on smaller screens, let business hours slip into the same line as
 filters on big screens

---
 .../app/views/layout_ref/sla.jst.eco          | 54 ++++++++++---------
 app/assets/stylesheets/zammad.css.scss        | 37 ++++++-------
 2 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
index 39c5cf4cb..63903522e 100644
--- a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
@@ -77,19 +77,21 @@
   </div>
 
   <div class="sla">
-    <div class="sla-filters">
-      <h3>Filters</h3>
-      Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
-      Where <b>Priority</b> is <b>high</b>.
-    </div>
-    <div class="arrow">
-      <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
-    </div>
-    <div class="sla-times">
-      <h3>Repsonse Times</h3>
-      00:30 Stunden First Response Time<br>
-      02:00 Stunden Update Time<br>
-      48:00 Stunden Solution Time
+    <div class="sla-flow">
+      <div class="sla-filters">
+        <h3>Filters</h3>
+        Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
+        Where <b>Priority</b> is <b>high</b>.
+      </div>
+      <div class="sla-arrow">
+        <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
+      </div>
+      <div class="sla-times">
+        <h3>Repsonse Times</h3>
+        00:30 hours First Response Time<br>
+        02:00 hours Update Time<br>
+        48:00 hours Solution Time
+      </div>
     </div>
     <div class="sla-businessHours">
       <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
@@ -102,18 +104,20 @@
   </div>
 
   <div class="sla is-inactive">
-    <div class="sla-filters">
-      <h3>Filters</h3>
-      Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
-      Where <b>Priority</b> is <b>high</b>.
-    </div>
-    <div class="arrow">
-      <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
-    </div>
-    <div class="sla-times">
-      <h3>Repsonse Times</h3>
-      00:30 Stunden First Response Time<br>
-      01:00 Stunden Update Time
+    <div class="sla-flow">
+      <div class="sla-filters">
+        <h3>Filters</h3>
+        Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
+        Where <b>Priority</b> is <b>high</b>.
+      </div>
+      <div class="sla-arrow">
+        <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
+      </div>
+      <div class="sla-times">
+        <h3>Repsonse Times</h3>
+        00:30 hours First Response Time<br>
+        01:00 hours Update Time
+      </div>
     </div>
     <div class="sla-businessHours">
       <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 46dba6f0c..ff9a434a0 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -5525,28 +5525,37 @@ output {
   background: white;
   border: 1px solid hsl(199,44%,93%);
   color: hsl(206,7%,28%);
+  box-shadow: 0 2px hsl(210,7%,94%);
   display: flex;
   flex-wrap: wrap;
-  padding: 20px;
-  box-shadow: 0 2px hsl(210,7%,94%);
+  padding: 10px;
   
   & + .sla {
     margin-top: 17px;
   }
 
   &.is-inactive {
+    background: none;
     box-shadow: none;
     position: relative;
     top: 2px;
-    background: none;
+    border-color: hsl(199,44%,94%);
 
     & > *:not(.sla-controls) {
       opacity: 0.33;
     }
+  }
 
-    .sla-controls .btn {
-      background: none;
-    }
+  .sla-flow {
+    display: flex;
+  }
+
+  .sla-filters,
+  .sla-arrow,
+  .sla-times,
+  .sla-businessHours,
+  .sla-controls {
+    padding: 10px;
   }
   
   h3 {
@@ -5554,9 +5563,9 @@ output {
     margin-top: 0;
   }
   
-  .arrow {
+  .sla-arrow {
     align-self: center;
-    margin: 22px 50px 0;
+    margin: 22px 20px 0;
     
     .icon {
       width: 15px;
@@ -5565,18 +5574,10 @@ output {
     }
   }
 
-  .sla-businessHours {
-    flex-basis: 100%;
-    margin: 20px 0;
-  }
-
   .sla-controls {
-    flex-basis: 100%;
     display: flex;
-    
-    .sla-edit {
-      margin-left: auto;
-    }
+    margin-left: auto;
+    align-items: flex-end;
   }
 }