fix: tweak underlining of links (#920)

This commit is contained in:
Nolan Lawson 2019-01-26 13:50:45 -08:00 committed by GitHub
parent 109022fab9
commit 648d9a3cf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 45 additions and 34 deletions

View file

@ -45,11 +45,6 @@ if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') {
theScrollbarStyle.setAttribute('media', 'only x') // disables the style
}
if (hasLocalStorage && localStorage.store_underlineLinks === 'true') {
// if the user wants links underlined, then underline 'em
document.body.classList.add('underline-links')
}
// hack to make the scrollbars rounded only on macOS
if (/mac/i.test(navigator.platform)) {
document.documentElement.style.setProperty('--scrollbar-border-radius', '50px')

View file

@ -1,5 +1,5 @@
<h1 class="sr-only">Profile for {accountName}</h1>
<div class="account-profile {headerImageIsMissing ? 'header-image-is-missing' : ''}"
<div class={className}
style="background-image: url({headerImage});">
<div class="account-profile-grid-wrapper">
<div class="account-profile-grid">
@ -75,13 +75,19 @@
import AccountProfileMeta from './AccountProfileMeta.html'
import AccountProfileDetails from './AccountProfileDetails.html'
import { store } from '../../_store/store'
import { classname } from '../../_utils/classname'
export default {
store: () => store,
computed: {
headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
accountName: ({ account }) => (account && (account.display_name || account.username)) || ''
accountName: ({ account }) => (account && (account.display_name || account.username)) || '',
className: ({ headerImageIsMissing, $underlineLinks }) => (classname(
'account-profile',
headerImageIsMissing && 'header-image-is-missing',
$underlineLinks && 'underline-links'
))
},
components: {
AccountProfileHeader,

View file

@ -81,6 +81,10 @@
padding: 10px 10px 10px 20px;
}
:global(.underline-links .account-profile-meta a) {
text-decoration: underline;
}
@media (max-width: 767px) {
.account-profile-meta {
padding: 5px 0;

View file

@ -24,6 +24,10 @@
margin: 0;
}
:global(.underline-links .account-profile-note a) {
text-decoration: underline;
}
@media (max-width: 767px) {
.account-profile-note {
padding: 5px 0;

View file

@ -3,7 +3,7 @@
{status} {notification} {active} {shortcutScope} on:recalculateHeight
/>
{:else}
<article class="notification-article {active ? 'status-active' : ''}"
<article class={className}
tabindex="0"
aria-posinset={index}
aria-setsize={length}
@ -44,6 +44,7 @@
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
import { goto } from '../../../../__sapper__/client'
import { composeNewStatusMentioning } from '../../_actions/mention'
import { classname } from '../../_utils/classname'
export default {
components: {
@ -67,7 +68,12 @@
},
ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
!status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
)
),
className: ({ active, $underlineLinks }) => (classname(
'notification-article',
active && 'status-active',
$underlineLinks && 'underline-links'
))
},
methods: {
openAuthorProfile () {

View file

@ -269,12 +269,13 @@
status.reblog ||
timelineType === 'pinned'
),
className: ({ visibility, timelineType, isStatusInOwnThread, active }) => (classname(
className: ({ visibility, timelineType, isStatusInOwnThread, active, $underlineLinks }) => (classname(
'status-article',
visibility === 'direct' && 'status-direct',
timelineType !== 'search' && 'status-in-timeline',
isStatusInOwnThread && 'status-in-own-thread',
active && 'status-active'
active && 'status-active',
$underlineLinks && 'underline-links'
)),
content: ({ originalStatus }) => originalStatus.content || '',
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,

View file

@ -50,6 +50,10 @@
position: absolute;
}
:global(.underline-links .status-content a) {
text-decoration: underline;
}
</style>
<script>
import { mark, stop } from '../../_utils/marks'

View file

@ -28,6 +28,10 @@
margin: 20px 10px 20px 5px;
}
:global(.underline-links .status-mentions a) {
text-decoration: underline;
}
</style>
<script>
export default {

View file

@ -40,6 +40,11 @@
padding: 5px 10px;
font-size: 1.1em;
}
:global(.underline-links .status-spoiler a) {
text-decoration: underline;
}
</style>
<script>
import Shortcut from '../shortcut/Shortcut.html'

View file

@ -35,7 +35,7 @@
<div class="setting-group">
<input type="checkbox" id="choice-underline-links"
bind:checked="$underlineLinks" on:change="onChange(event)">
<label for="choice-underline-links">Underline links</label>
<label for="choice-underline-links">Underline links in toots and profiles</label>
</div>
</form>

View file

@ -4,7 +4,6 @@ import { notificationObservers } from './notificationObservers'
import { autosuggestObservers } from './autosuggestObservers'
import { notificationPermissionObservers } from './notificationPermissionObservers'
import { customScrollbarObservers } from './customScrollbarObservers'
import { underlineLinksObservers } from './underlineLinksObservers'
// These observers can be lazy-loaded when the user is actually logged in.
// Prevents circular dependencies and reduces the size of main.js
@ -15,5 +14,4 @@ export default function loggedInObservers () {
autosuggestObservers()
notificationPermissionObservers()
customScrollbarObservers()
underlineLinksObservers()
}

View file

@ -1,12 +0,0 @@
import { store } from '../store'
export function underlineLinksObservers () {
store.observe('underlineLinks', underlineLinks => {
if (!process.browser) {
return
}
// disables or enables the style
document.body.classList.toggle('underline-links', underlineLinks)
}, { init: false })
}

View file

@ -99,10 +99,6 @@ a {
text-decoration: underline;
}
.underline-links & {
text-decoration: underline;
}
}
input {