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 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>

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

@ -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;
}
}