Improve settings UI

Thibaut Courouble committed 9 years ago

Commit f010b601 parent 4298c603 files · +13 −17Browse files

Unified · Split

3 files

@@ -8,16 +8,17 @@ app.templates.settingsPage = (settings) -> """ · 7 unmodified lines
8	8	<label class="_settings-label">
9	9	<input type="checkbox" name="dark" value="1"#{if settings.dark then ' checked' else ''}>Enable dark theme
10	10	</label>
11		− <label class="_settings-label _settings-max-width">
	11	+ <label class="_settings-label _setting-max-width">
12	12	<input type="checkbox" name="layout" value="_max-width"#{if settings['_max-width'] then ' checked' else ''}>Enable fixed-width layout
13	13	</label>
14		− <label class="_settings-label">
	14	+ <label class="_settings-label _hide-on-mobile">
15	15	<input type="checkbox" name="layout" value="_sidebar-hidden"#{if settings['_sidebar-hidden'] then ' checked' else ''}>Automatically hide and show the sidebar
	16	+ <small>Tip: drag the edge of the sidebar to resize it.</small>
16	17	</label>
17	18	</div>
18	19	</div>
19	20
20		− <div class="_settings-fieldset">
	21	+ <div class="_settings-fieldset _hide-on-mobile">
21	22	<h2 class="_settings-legend">Scrolling:</h2>
22	23
23	24	<div class="_settings-inputs">
@@ -31,11 +32,6 @@ app.templates.settingsPage = (settings) -> """ · 7 unmodified lines
31	32	</div>
32	33	</div>
33	34
34		− <div class="_settings-fieldset">
35		− <h2 class="_settings-legend">Advanced:</h2>
36		−
37		− <div class="_settings-inputs">
38		− <a href="#" class="_settings-link" data-behavior="reset">Reset all settings and data</a>
39		− </div>
40		− </div>
	35	+ <p>
	36	+ <a href="#" class="_reset-link" data-behavior="reset">Reset all settings and data</a>
41	37	"""

@@ -6,6 +6,8 @@ · 5 unmodified lines
6	6	font-size: 100%;
7	7	background: $contentBackground;
8	8
	9	+ ._hide-on-mobile { display: none; }
	10	+
9	11	// Layout
10	12
11	13	body { -ms-overflow-style: -ms-autohiding-scrollbar; }
@@ -36,6 +38,8 @@ · 24 unmodified lines
36	38	box-shadow: none;
37	39	}
38	40
	41	+ // Settings
	42	+
39	43	._settings { position: relative; }
40	44	._settings-tabs { display: block; }
41	45	._header ._settings-btn { width: auto; }

@@ -66,15 +66,11 @@ · 65 unmodified lines
66	66	}
67	67
68	68	@media (max-width: $maxWidth) {
69		− ._settings-max-width { display: none; }
	69	+ ._setting-max-width { display: none; }
70	70	}
71	71
72		−._settings-link {
73		− display: inline-block;
74		− vertical-align: top;
75		− margin-left: .375rem;
76		−
77		− &[data-behavior="reset"] { color: $textColorRed; }
	72	+._reset-link {
	73	+ color: $textColorRed;
78	74	}
79	75
80	76	//