client/settings: rearrange the form, add hints

This commit is contained in:
rr- 2016-08-05 18:43:35 +02:00
parent d5a00fe4b9
commit 9383fd2b27
2 changed files with 11 additions and 9 deletions

View file

@ -15,13 +15,13 @@ form
display: block
padding: 0.3em 0
.input
margin-bottom: 1em
margin-bottom: 2em
.input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
.input li:first-child
padding-top: 0
margin-top: 0
.hint
margin-top: 0.5em
margin-top: 0.2em
margin-bottom: 0
color: $inactive-link-color
font-size: 80%

View file

@ -4,22 +4,24 @@
<p>These settings are saved to the browser's local storage and are not coupled to the user account, so they don't apply to other devices or browsers alike.</p>
<div class='input'>
<ul>
<li>
<%= ctx.makeCheckbox({text: 'Upscale small posts', id: 'upscale-small-posts', name: 'upscale-small-posts', checked: ctx.browsingSettings.upscaleSmallPosts}) %>
</li>
<li>
<%= ctx.makeCheckbox({text: 'Endless scroll', id: 'endless-scroll', name: 'endless-scroll', checked: ctx.browsingSettings.endlessScroll}) %>
<p class='hint'>Rather than using a paged navigation, smoothly scroll through the content.</p>
</li>
<li>
<%= ctx.makeCheckbox({text: 'Enable keyboard shortcuts', id: 'keyboard-shortcuts', name: 'keyboard-shortcuts', checked: ctx.browsingSettings.keyboardShortcuts}) %>
<a class='append icon' href='/help/keyboard'><i class='fa fa-question-circle-o'></i></a>
</li>
<li>
<%= ctx.makeCheckbox({text: 'Upscale small posts', id: 'upscale-small-posts', name: 'upscale-small-posts', checked: ctx.browsingSettings.upscaleSmallPosts}) %>
</li>
<li>
<%= ctx.makeCheckbox({text: 'Endless scroll', id: 'endless-scroll', name: 'endless-scroll', checked: ctx.browsingSettings.endlessScroll}) %>
<p class='hint'>Rather than using a paged navigation, smoothly scrolls through the content.</p>
</li>
<li>
<%= ctx.makeCheckbox({text: 'Enable transparency grid', id: 'transparency-grid', name: 'transparency-grid', checked: ctx.browsingSettings.transparencyGrid}) %>
<p class='hint'>Renders a checkered pattern behind posts with transparent background.</p>
</li>
<li>
<%= ctx.makeCheckbox({text: 'Show tag suggestions', id: 'tag-suggestions', name: 'tag-suggestions', checked: ctx.browsingSettings.tagSuggestions}) %>
<p class='hint'>Shows a popup with suggested tags in edit forms.</p>
</li>
</ul>
</div>