Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Felix Niklas 2015-06-24 15:16:13 +02:00
parent bd26aa9ebb
commit 369de95fb4
2 changed files with 48 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/javascripts/app/views/layout_ref/sla.jst.eco
View file

@ -77,19 +77,21 @@
</div> </div>
<div class="sla"> <div class="sla">
<div class="sla-filters"> <div class="sla-flow">
<h3>Filters</h3> <div class="sla-filters">
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br> <h3>Filters</h3>
Where <b>Priority</b> is <b>high</b>. Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
</div> Where <b>Priority</b> is <b>high</b>.
<div class="arrow"> </div>
<svg class="icon"><use xlink:href="#icon-arrow-right" /></svg> <div class="sla-arrow">
</div> <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
<div class="sla-times"> </div>
<h3>Repsonse Times</h3> <div class="sla-times">
00:30 Stunden First Response Time<br> <h3>Repsonse Times</h3>
02:00 Stunden Update Time<br> 00:30 hours First Response Time<br>
48:00 Stunden Solution Time 02:00 hours Update Time<br>
48:00 hours Solution Time
</div>
</div> </div>
<div class="sla-businessHours"> <div class="sla-businessHours">
<h3>Business Hours <span class="subtitle">in European Central Time</span></h3> <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
@ -102,18 +104,20 @@
</div> </div>
<div class="sla is-inactive"> <div class="sla is-inactive">
<div class="sla-filters"> <div class="sla-flow">
<h3>Filters</h3> <div class="sla-filters">
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br> <h3>Filters</h3>
Where <b>Priority</b> is <b>high</b>. Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
</div> Where <b>Priority</b> is <b>high</b>.
<div class="arrow"> </div>
<svg class="icon"><use xlink:href="#icon-arrow-right" /></svg> <div class="sla-arrow">
</div> <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
<div class="sla-times"> </div>
<h3>Repsonse Times</h3> <div class="sla-times">
00:30 Stunden First Response Time<br> <h3>Repsonse Times</h3>
01:00 Stunden Update Time 00:30 hours First Response Time<br>
01:00 hours Update Time
</div>
</div> </div>
<div class="sla-businessHours"> <div class="sla-businessHours">
<h3>Business Hours <span class="subtitle">in European Central Time</span></h3> <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>

37
app/assets/stylesheets/zammad.css.scss
View file

@ -5525,28 +5525,37 @@ output {
background: white; background: white;
border: 1px solid hsl(199,44%,93%); border: 1px solid hsl(199,44%,93%);
color: hsl(206,7%,28%); color: hsl(206,7%,28%);
box-shadow: 0 2px hsl(210,7%,94%);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 20px; padding: 10px;
box-shadow: 0 2px hsl(210,7%,94%);
& + .sla { & + .sla {
margin-top: 17px; margin-top: 17px;
} }
&.is-inactive { &.is-inactive {
background: none;
box-shadow: none; box-shadow: none;
position: relative; position: relative;
top: 2px; top: 2px;
background: none; border-color: hsl(199,44%,94%);
& > *:not(.sla-controls) { & > *:not(.sla-controls) {
opacity: 0.33; opacity: 0.33;
} }
}
.sla-controls .btn { .sla-flow {
background: none; display: flex;
} }
.sla-filters,
.sla-arrow,
.sla-times,
.sla-businessHours,
.sla-controls {
padding: 10px;
} }
h3 { h3 {
@ -5554,9 +5563,9 @@ output {
margin-top: 0; margin-top: 0;
} }
.arrow { .sla-arrow {
align-self: center; align-self: center;
margin: 22px 50px 0; margin: 22px 20px 0;
.icon { .icon {
width: 15px; width: 15px;
@ -5565,18 +5574,10 @@ output {
} }
} }
.sla-businessHours {
flex-basis: 100%;
margin: 20px 0;
}
.sla-controls { .sla-controls {
flex-basis: 100%;
display: flex; display: flex;
margin-left: auto;
.sla-edit { align-items: flex-end;
margin-left: auto;
}
} }
} }