Skip to content

Commit 632fe41

Browse files
kshetlinekshetline
committed
Make sure dimmer doesn't affect dialog. Redo dialog layout using CSS grid layout. Start of work to make grid layout work for IE 11.
1 parent 4db59e7 commit 632fe41

2 files changed

Lines changed: 138 additions & 62 deletions

File tree

‎src/index.html‎

Lines changed: 47 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -128,58 +128,56 @@
128128
</div>
129129
<div id="marquee">&nbsp;</div>
130130
<div class="darksky"><img id="settings-btn" src="assets/gear.svg" width="35" height="40" alt="Settings"><a href="https://darksky.net/poweredby/" target="_blank"><img src="assets/dark-sky-logo.png" width="125" height="50" alt="Powered by Dark Sky"></a></div>
131+
<div id="dimmer"></div>
131132
<div id="settings-dialog" class="dialog-wrapper">
132133
<div>
133134
<div class="user-options">
134-
<div><label for="current-city">Current city:</label><input id="current-city" type="text" size="38"></div>
135-
<div><label for="latitude">Latitude:</label><input id="latitude" type="text" size="38"><span>(negative for south)</span></div>
136-
<div><label for="longitude">Longitude:</label><input id="longitude" type="text" size="38"><span>(negative for west)</span></div>
137-
<div><label for="user-id">User ID:</label><input id="user-id" type="text" size="38"><span>(optional)</span></div>
138-
<div><label for="dimming">Dimming:</label>
139-
<span class="colspan">
140-
<select id="dimming">
141-
<option value="0">None</option>
142-
<option value="25">25%</option>
143-
<option value="30">30%</option>
144-
<option value="35">35%</option>
145-
<option value="40">40%</option>
146-
<option value="45">45%</option>
147-
<option value="50">50%</option>
148-
<option value="55">55%</option>
149-
<option value="60">60%</option>
150-
<option value="65">65%</option>
151-
<option value="70">70%</option>
152-
<option value="75">75%</option>
153-
</select>
154-
&nbsp;
155-
<select id="dimming-start">
156-
</select>
157-
<span id="dimming-to">&nbsp;to&nbsp;</span>
158-
<select id="dimming-end">
159-
</select>
160-
</span>
161-
</div>
162-
<div>
163-
<span></span>
164-
<span class="colspan">
165-
<select id="temperature-option">
166-
<option value="F">°F</option>
167-
<option value="C">°C</option>
168-
</select>
169-
<select id="hours-option">
170-
<option value="24">24-hour time</option>
171-
<option value="AMPM">AM/PM time</option>
172-
</select>
173-
<select id="seconds-option">
174-
<option value="S">Show seconds</option>
175-
<option value="H">Hide seconds</option>
176-
</select>
177-
<select id="planets-option">
178-
<option value="S">Show planets</option>
179-
<option value="H">Hide planets</option>
180-
</select>
181-
</span>
182-
</div>
135+
<label for="current-city">Current city:</label><input id="current-city" type="text" size="38"><span></span>
136+
<label for="latitude">Latitude:</label><input id="latitude" type="text" size="38"><span>(negative for south)</span>
137+
<label for="longitude">Longitude:</label><input id="longitude" type="text" size="38"><span>(negative for west)</span>
138+
<label for="user-id">User ID:</label><input id="user-id" type="text" size="38"><span>(optional)</span>
139+
<label for="dimming">Dimming:</label>
140+
<span class="colspan">
141+
<select id="dimming">
142+
<option value="0">None</option>
143+
<option value="25">25%</option>
144+
<option value="30">30%</option>
145+
<option value="35">35%</option>
146+
<option value="40">40%</option>
147+
<option value="45">45%</option>
148+
<option value="50">50%</option>
149+
<option value="55">55%</option>
150+
<option value="60">60%</option>
151+
<option value="65">65%</option>
152+
<option value="70">70%</option>
153+
<option value="75">75%</option>
154+
</select>
155+
&nbsp;
156+
<select id="dimming-start">
157+
</select>
158+
<span id="dimming-to">&nbsp;to&nbsp;</span>
159+
<select id="dimming-end">
160+
</select>
161+
</span>
162+
<span></span>
163+
<span class="colspan">
164+
<select id="temperature-option">
165+
<option value="F">°F</option>
166+
<option value="C">°C</option>
167+
</select>
168+
<select id="hours-option">
169+
<option value="24">24-hour time</option>
170+
<option value="AMPM">AM/PM time</option>
171+
</select>
172+
<select id="seconds-option">
173+
<option value="S">Show seconds</option>
174+
<option value="H">Hide seconds</option>
175+
</select>
176+
<select id="planets-option">
177+
<option value="S">Show planets</option>
178+
<option value="H">Hide planets</option>
179+
</select>
180+
</span>
183181
</div>
184182
<div class="search-section">
185183
<form action="javascript:void(0)" method="get" id="search">
@@ -210,6 +208,5 @@
210208
</div>
211209
</div>
212210
</div>
213-
<div id="dimmer"></div>
214211
</body>
215212
</html>

‎src/styles.scss‎

Lines changed: 91 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -222,21 +222,100 @@ body {
222222
}
223223

224224
.user-options {
225-
display: table;
226-
border-spacing: 0.5em 2px;
225+
display: -ms-grid;
226+
display: grid;
227+
-ms-grid-columns: max-content auto auto;
228+
grid-template-columns: max-content auto auto;
229+
grid-gap: 4px;
230+
231+
&>* {
232+
align-self: baseline;
233+
}
227234

228-
&>div {
229-
display: table-row;
235+
&>.colspan {
236+
grid-column: 2 / span 2;
237+
}
230238

231-
&>label,>input,>span {
232-
display: table-cell;
233-
}
239+
&>*:nth-child(1) {
240+
-ms-grid-row: 1;
241+
-ms-grid-column: 1;
242+
}
234243

235-
&>span.colspan {
236-
max-width: 1px;
237-
white-space: nowrap;
238-
overflow: visible;
239-
}
244+
&>*:nth-child(2) {
245+
-ms-grid-row: 1;
246+
-ms-grid-column: 2;
247+
}
248+
249+
&>*:nth-child(3) {
250+
-ms-grid-row: 1;
251+
-ms-grid-column: 3;
252+
}
253+
254+
&>*:nth-child(4) {
255+
-ms-grid-row: 2;
256+
-ms-grid-column: 1;
257+
}
258+
259+
&>*:nth-child(5) {
260+
-ms-grid-row: 2;
261+
-ms-grid-column: 2;
262+
}
263+
264+
&>*:nth-child(6) {
265+
-ms-grid-row: 2;
266+
-ms-grid-column: 3;
267+
}
268+
269+
&>*:nth-child(7) {
270+
-ms-grid-row: 3;
271+
-ms-grid-column: 1;
272+
}
273+
274+
&>*:nth-child(8) {
275+
-ms-grid-row: 3;
276+
-ms-grid-column: 2;
277+
}
278+
279+
&>*:nth-child(9) {
280+
-ms-grid-row: 3;
281+
-ms-grid-column: 3;
282+
}
283+
284+
&>*:nth-child(10) {
285+
-ms-grid-row: 4;
286+
-ms-grid-column: 1;
287+
}
288+
289+
&>*:nth-child(11) {
290+
-ms-grid-row: 4;
291+
-ms-grid-column: 2;
292+
}
293+
294+
&>*:nth-child(12) {
295+
-ms-grid-row: 4;
296+
-ms-grid-column: 3;
297+
}
298+
299+
&>*:nth-child(13) {
300+
-ms-grid-row: 5;
301+
-ms-grid-column: 1;
302+
}
303+
304+
&>*:nth-child(14) {
305+
-ms-grid-row: 5;
306+
-ms-grid-column: 2;
307+
-ms-grid-column-span: 2;
308+
}
309+
310+
&>*:nth-child(15) {
311+
-ms-grid-row: 6;
312+
-ms-grid-column: 1;
313+
}
314+
315+
&>*:nth-child(16) {
316+
-ms-grid-row: 6;
317+
-ms-grid-column: 2;
318+
-ms-grid-column-span: 2;
240319
}
241320
}
242321

0 commit comments

Comments
 (0)