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

78
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={
@ -49,41 +49,40 @@
} }
/> />
</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>

33
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>
</div> <label class="setting-group">
<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 {