History

Improve settings UI

Thibaut Courouble committed 9 years ago

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

Unified · Split

3 files
  1. assets/javascripts/templates/pages/settings_tmpl.coffee +6 −10
  2. assets/stylesheets/components/_mobile.scss +4 −0
  3. assets/stylesheets/components/_settings.scss +3 −7
assets/javascripts/templates/pages/settings_tmpl.coffee+6−10
@@ -8,16 +8,17 @@ app.templates.settingsPage = (settings) -> """ · 7 unmodified lines
8 <label class="_settings-label">8 <label class="_settings-label">
9 <input type="checkbox" name="dark" value="1"#{if settings.dark then ' checked' else ''}>Enable dark theme9 <input type="checkbox" name="dark" value="1"#{if settings.dark then ' checked' else ''}>Enable dark theme
10 </label>10 </label>
11 <label class="_settings-label _settings-max-width">11 <label class="_settings-label _setting-max-width">
12 <input type="checkbox" name="layout" value="_max-width"#{if settings['_max-width'] then ' checked' else ''}>Enable fixed-width layout12 <input type="checkbox" name="layout" value="_max-width"#{if settings['_max-width'] then ' checked' else ''}>Enable fixed-width layout
13 </label>13 </label>
14 <label class="_settings-label">14 <label class="_settings-label _hide-on-mobile">
15 <input type="checkbox" name="layout" value="_sidebar-hidden"#{if settings['_sidebar-hidden'] then ' checked' else ''}>Automatically hide and show the sidebar15 <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 </label>17 </label>
17 </div>18 </div>
18 </div>19 </div>
19 20
20 <div class="_settings-fieldset">21 <div class="_settings-fieldset _hide-on-mobile">
21 <h2 class="_settings-legend">Scrolling:</h2>22 <h2 class="_settings-legend">Scrolling:</h2>
22 23
23 <div class="_settings-inputs">24 <div class="_settings-inputs">
@@ -31,11 +32,6 @@ app.templates.settingsPage = (settings) -> """ · 7 unmodified lines
31 </div>32 </div>
32 </div>33 </div>
33 34
34 <div class="_settings-fieldset">35 <p>
35 <h2 class="_settings-legend">Advanced:</h2>36 <a href="#" class="_reset-link" data-behavior="reset">Reset all settings and data</a>
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>
41"""37"""
assets/stylesheets/components/_mobile.scss+4−0
@@ -6,6 +6,8 @@ · 5 unmodified lines
6 font-size: 100%;6 font-size: 100%;
7 background: $contentBackground;7 background: $contentBackground;
8 8
9 ._hide-on-mobile { display: none; }
10
9 // Layout11 // Layout
10 12
11 body { -ms-overflow-style: -ms-autohiding-scrollbar; }13 body { -ms-overflow-style: -ms-autohiding-scrollbar; }
@@ -36,6 +38,8 @@ · 24 unmodified lines
36 box-shadow: none;38 box-shadow: none;
37 }39 }
38 40
41 // Settings
42
39 ._settings { position: relative; }43 ._settings { position: relative; }
40 ._settings-tabs { display: block; }44 ._settings-tabs { display: block; }
41 ._header ._settings-btn { width: auto; }45 ._header ._settings-btn { width: auto; }
assets/stylesheets/components/_settings.scss+3−7
@@ -66,15 +66,11 @@ · 65 unmodified lines
66}66}
67 67
68@media (max-width: $maxWidth) {68@media (max-width: $maxWidth) {
69 ._settings-max-width { display: none; }69 ._setting-max-width { display: none; }
70}70}
71 71
72._settings-link {72._reset-link {
73 display: inline-block;73 color: $textColorRed;
74 vertical-align: top;
75 margin-left: .375rem;
76
77 &[data-behavior="reset"] { color: $textColorRed; }
78}74}
79 75
80//76//