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

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

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

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

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