Skip to content

Commit a03153c

Browse files
nilmergnilmerg
committed
event-rule: Simplify stylesheet and make it responsive
1 parent 58f6d60 commit a03153c

File tree

2 files changed

+286
-39
lines changed

2 files changed

+286
-39
lines changed

‎public/css/detail/event-rule-detail.less

Lines changed: 280 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,303 @@
11
.event-rule-detail {
2-
.empty-state-bar {
3-
margin-bottom: 1em;
2+
@connectorHeight: .5em;
3+
@connectorColor: @gray-lighter;
4+
5+
// Layout
6+
7+
display: flex;
8+
9+
> .right-arrow,
10+
> .horizontal-line {
11+
flex: 1 1 auto;
12+
height: @connectorHeight;
13+
margin-top: 2.75em;
14+
min-width: 1em;
415
}
5-
}
616

7-
.new-event-rule {
8-
margin-bottom: 1em;
9-
}
17+
> .search-controls {
18+
flex: 3 1 auto;
19+
min-width: 16em;
20+
height: fit-content;
21+
margin-top: 1.25em;
1022

11-
.event-rule-form {
12-
display: inline-flex;
13-
width: fit-content;
14-
max-width: unset;
15-
align-items: flex-start;
23+
.filter-input {
24+
width: 100%;
25+
margin-right: .5em;
26+
}
27+
}
1628

17-
> h2 {
18-
margin: 0 0 0.5em 0;
29+
> .escalations-with-add-form {
30+
flex: 15 1 auto;
1931
}
2032

21-
.control-group {
22-
display: inline-flex;
23-
margin-right: 2em;
33+
.escalations {
34+
display: grid;
35+
grid-template-columns: min-content minmax(1em, 4em) 1fr minmax(1em, 4em) 1fr;
36+
37+
.escalation {
38+
display: contents;
39+
}
40+
41+
.remove-escalation-form {
42+
.vertical-line();
43+
44+
.remove-button {
45+
margin-top: 2em;
46+
}
47+
}
48+
49+
// The first escalation isn't connected to anything on top of it
50+
.escalation:first-child .remove-escalation-form::before {
51+
top: 2em;
52+
}
53+
54+
.right-arrow {
55+
height: @connectorHeight;
56+
margin-top: 2.75em;
57+
}
58+
59+
.escalation-form {
60+
position: relative;
61+
margin-bottom: 1em;
62+
63+
.options {
64+
list-style-type: none;
65+
margin: 0;
66+
padding: 0;
67+
68+
.option {
69+
display: flex;
70+
margin-bottom: .5em;
71+
72+
.left-operand,
73+
.right-operand {
74+
flex: 1 1 4em;
75+
min-width: 8em;
76+
width: 0;
77+
}
2478

25-
.control-label-group {
26-
width: auto;
79+
.operator-input {
80+
width: 4em;
81+
}
82+
}
83+
84+
& + .add-button {
85+
width: 100%;
86+
87+
> .icon {
88+
margin: 0 auto;
89+
}
90+
}
91+
}
92+
93+
&.removal-allowed .add-button {
94+
width: ~"calc(100% - 3.1em)"; // remove-button width + margin-left = 3.1em
95+
}
96+
97+
:not(.options) + .add-button {
98+
position: absolute;
99+
left: 50%;
100+
top: 50%;
101+
transform: translate(-50%, -50%);
102+
}
27103
}
28104

29-
input[type='text'] {
30-
max-width: unset;
31-
width: 25em;
105+
.escalation:first-child .escalation-form .option:first-child .remove-button {
106+
height: auto; // Don't ask me (jom) why this is necessary. The selector is that specific for this very reason
107+
}
108+
109+
& + .add-escalation-form {
110+
display: inline-block;
111+
112+
.vertical-line();
113+
114+
.add-button {
115+
margin-top: 2em;
116+
}
117+
}
118+
}
119+
120+
// Style
121+
122+
.right-arrow,
123+
.horizontal-line {
124+
background-color: @connectorColor;
125+
}
126+
127+
.search-controls,
128+
.option-wrapper {
129+
padding: .5em;
130+
border: 1px solid @connectorColor;
131+
.rounded-corners();
132+
}
133+
134+
.add-button,
135+
.remove-button {
136+
.event-rule-button();
137+
}
138+
139+
.add-filter-form .add-button,
140+
.escalation-form :not(.options) + .add-button {
141+
// (2em * 2) + 1.5 (icon height) = total height in em of a recipient escalation form with a single recipient
142+
padding: ~"calc(2em + 1px) 4.125em"; // 1px is the border width of an escalation form
143+
144+
.icon::before {
145+
font-size: 2em;
146+
}
147+
}
148+
149+
.remove-escalation-form .remove-button[disabled] {
150+
background: @connectorColor;
151+
color: @disabled-gray;
152+
cursor: not-allowed;
153+
}
154+
155+
.escalation-form .options .option {
156+
> :first-child {
157+
.rounded-corners(.25em);
158+
border-top-right-radius: 0;
159+
border-bottom-right-radius: 0;
160+
}
161+
162+
> :last-child {
163+
.rounded-corners(.25em);
164+
border-top-left-radius: 0;
165+
border-bottom-left-radius: 0;
166+
}
167+
168+
> :not(:last-child) {
169+
margin-right: 1px;
170+
}
171+
172+
> :not(:first-child):not(:last-child) {
173+
.rounded-corners(0);
174+
}
175+
}
176+
177+
&.invalid {
178+
select,
179+
input {
180+
&:invalid {
181+
background-color: @state-critical;
182+
}
183+
}
184+
}
185+
186+
.vertical-line() {
187+
position: relative;
188+
189+
&::before {
190+
position: absolute;
191+
z-index: -1;
192+
top: 0;
193+
bottom: 0;
194+
195+
@halfedConnectorHeight: @connectorHeight / 2;
196+
left: ~"calc(50% - @{halfedConnectorHeight})";
197+
right: ~"calc(50% - @{halfedConnectorHeight})";
198+
199+
content: "";
200+
width: @connectorHeight;
201+
202+
background-color: @connectorColor;
32203
}
33204
}
34205
}
35206

36-
.save-config {
37-
display: inline-flex;
38-
float: right;
39-
width: fit-content;
40-
flex-direction: row-reverse;
207+
#layout.twocols:not(.wide-layout) {
208+
.event-rule-detail {
209+
.search-controls {
210+
min-width: fit-content;
211+
212+
.filter-input {
213+
display: none;
214+
}
215+
}
41216

42-
button[type="submit"] {
43-
margin-right: 1em;
217+
.add-filter-form .add-button,
218+
.escalation-form :not(.options) + .add-button {
219+
padding: .25em 1em;
44220

45-
&.btn-remove:not([disabled]) {
46-
.button(@body-bg-color, @color-critical, @color-critical-accentuated);
47-
border: none;
221+
.icon::before {
222+
font-size: inherit;
223+
}
48224
}
49225

50-
&.btn-discard-changes {
51-
.event-rule-button();
226+
.add-filter-form .add-button {
227+
margin-top: 2em;
52228
}
229+
}
230+
}
231+
232+
// Other stuff
233+
234+
.cache-notice {
235+
margin: 1em;
236+
padding: 1em;
237+
background-color: @gray-lighter;
238+
text-align: center;
239+
.rounded-corners();
240+
}
241+
242+
.event-rule-and-save-forms {
243+
display: flex;
244+
flex-wrap: wrap;
245+
justify-content: space-between;
246+
padding-bottom: 0.75em;
247+
248+
.event-rule-form {
249+
display: inline-flex;
250+
width: fit-content;
251+
max-width: unset;
252+
253+
.control-group {
254+
display: inline-flex;
255+
margin-right: 2em;
256+
257+
:last-child {
258+
float: right;
259+
}
260+
261+
.control-label-group {
262+
width: auto;
263+
}
264+
265+
input[type='text'] {
266+
max-width: unset;
267+
width: 25em;
268+
}
269+
}
270+
}
271+
272+
.save-event-rule {
273+
height: 2.25em;
274+
display: inline-flex;
275+
float: right;
276+
margin: 1em 0 0 auto;
277+
278+
input[type="submit"]:not(:first-child) {
279+
margin-left: 1em;
280+
281+
&:disabled {
282+
background: @gray-light;
283+
color: @disabled-gray;
284+
cursor: not-allowed;
285+
border-color: transparent;
286+
}
287+
288+
&.btn-remove {
289+
border: none;
290+
291+
&:disabled {
292+
background: none;
293+
cursor: not-allowed;
294+
opacity: 0.5;
295+
}
296+
}
53297

54-
&:disabled {
55-
background: @gray-light;
56-
color: @disabled-gray;
57-
cursor: not-allowed;
58-
border: transparent;
298+
&.btn-discard-changes {
299+
.event-rule-button();
300+
}
59301
}
60302
}
61303
}

‎public/css/mixins.less

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
text-align: center;
77
line-height: 1.5;
88
display: block;
9+
padding: .25em 1em;
910

1011
&:hover,
1112
&:focus {
@@ -17,4 +18,8 @@
1718
outline: 3px solid fade(@icinga-blue, 50%);
1819
outline-offset: 1px;
1920
}
20-
}
21+
22+
.icon::before {
23+
margin-right: 0;
24+
}
25+
}

0 commit comments

Comments
 (0)