fix: tweak underlining of links (#920)
This commit is contained in:
parent
109022fab9
commit
648d9a3cf6
|
@ -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')
|
||||
|
|
|
@ -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,
|
||||
|
@ -91,4 +97,4 @@
|
|||
AccountProfileDetails
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -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;
|
||||
|
@ -113,4 +117,4 @@
|
|||
})))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -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;
|
||||
|
@ -42,4 +46,4 @@
|
|||
massagedNote: ({ note, emojis, $autoplayGifs }) => massageUserText(note, emojis, $autoplayGifs)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -50,6 +50,10 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
:global(.underline-links .status-content a) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import { mark, stop } from '../../_utils/marks'
|
||||
|
|
|
@ -28,6 +28,10 @@
|
|||
margin: 20px 10px 20px 5px;
|
||||
}
|
||||
|
||||
:global(.underline-links .status-mentions a) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
|
@ -35,4 +39,4 @@
|
|||
mentions: ({ originalStatus }) => originalStatus.mentions || []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
|
|
|
@ -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 })
|
||||
}
|
|
@ -99,10 +99,6 @@ a {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.underline-links & {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
Loading…
Reference in a new issue