data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

feat(settings): Increase clickable area (#1401)

Browse source
This commit is contained in:
Sorin Davidoi 2019-08-18 21:29:36 +02:00 committed by Nolan Lawson
parent 94cf7df954
commit c127d0a6bc
3 changed files with 65 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/routes/_pages/settings/general.html
View file

@ -3,44 +3,44 @@
<h2>Media</h2>
<form class="ui-settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-never-mark-media-sensitive"
bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)">
<label for="choice-never-mark-media-sensitive">Show sensitive media by default</label>
</div>
<div class="setting-group">
<input type="checkbox" id="choice-use-blurhash"
bind:checked="$ignoreBlurhash" on:change="onChange(event)">
<label for="choice-use-blurhash">Show a plain gray color for sensitive media</label>
</div>
<div class="setting-group">
Show sensitive media by default
</label>
<label class="setting-group">
<input type="checkbox" id="choice-use-blurhash"
bind:checked="$ignoreBlurhash" on:change="onChange(event)">
Show a plain gray color for sensitive media
</label>
<label class="setting-group">
<input type="checkbox" id="choice-mark-media-sensitive"
bind:checked="$markMediaAsSensitive" on:change="onChange(event)">
<label for="choice-mark-media-sensitive">Treat all media as sensitive</label>
</div>
<div class="setting-group">
Treat all media as sensitive
</label>
<label class="setting-group">
<input type="checkbox" id="choice-large-inline-media"
bind:checked="$largeInlineMedia" on:change="onChange(event)">
<label for="choice-large-inline-media">Show large inline images and videos</label>
</div>
<div class="setting-group">
Show large inline images and videos
</label>
<label class="setting-group">
<input type="checkbox" id="choice-autoplay-gif"
bind:checked="$autoplayGifs" on:change="onChange(event)">
<label for="choice-autoplay-gif">Autoplay GIFs</label>
</div>
Autoplay GIFs
</label>
</form>
<h2>UI</h2>
<form class="ui-settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-disable-custom-scrollbars"
bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
<label for="choice-disable-custom-scrollbars">Disable custom scrollbars</label>
</div>
<div class="setting-group">
Disable custom scrollbars
</label>
<label class="setting-group">
<input type="checkbox" id="choice-disable-infinite-scroll"
bind:checked="$disableInfiniteScroll" on:change="onChange(event)">
<label for="choice-disable-infinite-scroll">Disable
Disable
<Tooltip
text="infinite scroll"
tooltipText={
@ -48,42 +48,41 @@
"or top of the timeline. Instead, buttons will allow you to load more content on demand."
}
/>
</label>
</div>
<div class="setting-group">
</label>
<label class="setting-group">
<input type="checkbox" id="choice-hide-cards"
bind:checked="$hideCards" on:change="onChange(event)">
<label for="choice-hide-cards">Hide link preview cards</label>
</div>
<div class="setting-group">
Hide link preview cards
</label>
<label class="setting-group">
<input type="checkbox" id="choice-underline-links"
bind:checked="$underlineLinks" on:change="onChange(event)">
<label for="choice-underline-links">Underline links in toots and profiles</label>
</div>
Underline links in toots and profiles
</label>
</form>
<h2>Accessibility</h2>
<form class="ui-settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-reduce-motion"
bind:checked="$reduceMotion" on:change="onChange(event)">
<label for="choice-reduce-motion">Reduce motion in UI animations</label>
</div>
<div class="setting-group">
Reduce motion in UI animations
</label>
<label class="setting-group">
<input type="checkbox" id="choice-disable-tap-on-status"
bind:checked="$disableTapOnStatus" on:change="onChange(event)">
<label for="choice-disable-tap-on-status">Disable tappable area on entire toot</label>
</div>
<div class="setting-group">
Disable tappable area on entire toot
</label>
<label class="setting-group">
<input type="checkbox" id="choice-omit-emoji-in-display-names"
bind:checked="$omitEmojiInDisplayNames" on:change="onChange(event)">
<label for="choice-omit-emoji-in-display-names">Remove emoji from user display names</label>
</div>
<div class="setting-group">
Remove emoji from user display names
</label>
<label class="setting-group">
<input type="checkbox" id="choice-disable-long-aria-labels"
bind:checked="$disableLongAriaLabels" on:change="onChange(event)">
<label for="choice-disable-long-aria-labels">Use short article ARIA labels</label>
</div>
Use short article ARIA labels
</label>
</form>
{#if $isUserLoggedIn }
@ -100,6 +99,7 @@
line-height: 2em;
}
.setting-group {
display: block;
padding: 5px 0;
}
</style>

7
src/routes/_pages/settings/hotkeys.html
View file

@ -3,11 +3,11 @@
<h2 class="sr-only">Preferences</h2>
<form class="ui-settings" aria-label="Hotkey settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-disable-hotkeys"
bind:checked="$disableHotkeys" on:change="onChange()">
<label for="choice-disable-hotkeys">Disable hotkeys</label>
</div>
Disable hotkeys
</label>
</form>
<h2 class="sr-only">Guide</h2>
@ -24,6 +24,7 @@
margin-bottom: 20px;
}
.setting-group {
display: block;
padding: 5px 0;
}
</style>

41
src/routes/_pages/settings/wellness.html
View file

@ -7,45 +7,41 @@
</p>
<form class="ui-settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-check-all"
on:change="onCheckAllChange(event)">
<label for="choice-check-all">Enable all</label>
</div>
Enable all
</label>
</form>
<h2>Metrics</h2>
<form class="ui-settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-disable-follower-counts"
bind:checked="$disableFollowerCounts" on:change="onChange(event)">
<label for="choice-disable-follower-counts">
Hide follower counts (capped at 10)
</label>
</div>
<div class="setting-group">
Hide follower counts (capped at 10)
</label>
<label class="setting-group">
<input type="checkbox" id="choice-disable-reblog-counts"
bind:checked="$disableReblogCounts" on:change="onChange(event)">
<label for="choice-disable-reblog-counts">Hide boost counts</label>
</div>
<div class="setting-group">
Hide boost counts
</label>
<label class="setting-group">
<input type="checkbox" id="choice-disable-fav-counts"
bind:checked="$disableFavCounts" on:change="onChange(event)">
<label for="choice-disable-fav-counts">Hide favorite counts</label>
</div>
Hide favorite counts
</label>
</form>
<h2>Notifications</h2>
<form class="ui-settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-disable-unread-notification-counts"
bind:checked="$disableNotificationBadge" on:change="onChange(event)">
<label for="choice-disable-unread-notification-counts">
Hide unread notifications count (i.e. the red dot)
</label>
</div>
Hide unread notifications count (i.e. the red dot)
</label>
</form>
<aside>
@ -59,11 +55,11 @@
<h2>UI</h2>
<form class="ui-settings">
<div class="setting-group">
<label class="setting-group">
<input type="checkbox" id="choice-grayscale"
bind:checked="$enableGrayscale" on:change="onChange(event)">
<label for="choice-grayscale">Grayscale mode</label>
</div>
Grayscale mode
</label>
</form>
<p>
These settings are partly based on guidelines from the
@ -79,6 +75,7 @@
line-height: 2em;
}
.setting-group {
display: block;
padding: 5px 0;
}
aside {