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
|
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
|
// hack to make the scrollbars rounded only on macOS
|
||||||
if (/mac/i.test(navigator.platform)) {
|
if (/mac/i.test(navigator.platform)) {
|
||||||
document.documentElement.style.setProperty('--scrollbar-border-radius', '50px')
|
document.documentElement.style.setProperty('--scrollbar-border-radius', '50px')
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<h1 class="sr-only">Profile for {accountName}</h1>
|
<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});">
|
style="background-image: url({headerImage});">
|
||||||
<div class="account-profile-grid-wrapper">
|
<div class="account-profile-grid-wrapper">
|
||||||
<div class="account-profile-grid">
|
<div class="account-profile-grid">
|
||||||
|
@ -75,13 +75,19 @@
|
||||||
import AccountProfileMeta from './AccountProfileMeta.html'
|
import AccountProfileMeta from './AccountProfileMeta.html'
|
||||||
import AccountProfileDetails from './AccountProfileDetails.html'
|
import AccountProfileDetails from './AccountProfileDetails.html'
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
|
import { classname } from '../../_utils/classname'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
store: () => store,
|
store: () => store,
|
||||||
computed: {
|
computed: {
|
||||||
headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
|
headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
|
||||||
headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
|
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: {
|
components: {
|
||||||
AccountProfileHeader,
|
AccountProfileHeader,
|
||||||
|
@ -91,4 +97,4 @@
|
||||||
AccountProfileDetails
|
AccountProfileDetails
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -81,6 +81,10 @@
|
||||||
padding: 10px 10px 10px 20px;
|
padding: 10px 10px 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.underline-links .account-profile-meta a) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.account-profile-meta {
|
.account-profile-meta {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
|
@ -113,4 +117,4 @@
|
||||||
})))
|
})))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -24,6 +24,10 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.underline-links .account-profile-note a) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.account-profile-note {
|
.account-profile-note {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
|
@ -42,4 +46,4 @@
|
||||||
massagedNote: ({ note, emojis, $autoplayGifs }) => massageUserText(note, emojis, $autoplayGifs)
|
massagedNote: ({ note, emojis, $autoplayGifs }) => massageUserText(note, emojis, $autoplayGifs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
{status} {notification} {active} {shortcutScope} on:recalculateHeight
|
{status} {notification} {active} {shortcutScope} on:recalculateHeight
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<article class="notification-article {active ? 'status-active' : ''}"
|
<article class={className}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
aria-posinset={index}
|
aria-posinset={index}
|
||||||
aria-setsize={length}
|
aria-setsize={length}
|
||||||
|
@ -44,6 +44,7 @@
|
||||||
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
|
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
|
||||||
import { goto } from '../../../../__sapper__/client'
|
import { goto } from '../../../../__sapper__/client'
|
||||||
import { composeNewStatusMentioning } from '../../_actions/mention'
|
import { composeNewStatusMentioning } from '../../_actions/mention'
|
||||||
|
import { classname } from '../../_utils/classname'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
@ -67,7 +68,12 @@
|
||||||
},
|
},
|
||||||
ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
|
ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
|
||||||
!status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
|
!status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
|
||||||
)
|
),
|
||||||
|
className: ({ active, $underlineLinks }) => (classname(
|
||||||
|
'notification-article',
|
||||||
|
active && 'status-active',
|
||||||
|
$underlineLinks && 'underline-links'
|
||||||
|
))
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openAuthorProfile () {
|
openAuthorProfile () {
|
||||||
|
|
|
@ -269,12 +269,13 @@
|
||||||
status.reblog ||
|
status.reblog ||
|
||||||
timelineType === 'pinned'
|
timelineType === 'pinned'
|
||||||
),
|
),
|
||||||
className: ({ visibility, timelineType, isStatusInOwnThread, active }) => (classname(
|
className: ({ visibility, timelineType, isStatusInOwnThread, active, $underlineLinks }) => (classname(
|
||||||
'status-article',
|
'status-article',
|
||||||
visibility === 'direct' && 'status-direct',
|
visibility === 'direct' && 'status-direct',
|
||||||
timelineType !== 'search' && 'status-in-timeline',
|
timelineType !== 'search' && 'status-in-timeline',
|
||||||
isStatusInOwnThread && 'status-in-own-thread',
|
isStatusInOwnThread && 'status-in-own-thread',
|
||||||
active && 'status-active'
|
active && 'status-active',
|
||||||
|
$underlineLinks && 'underline-links'
|
||||||
)),
|
)),
|
||||||
content: ({ originalStatus }) => originalStatus.content || '',
|
content: ({ originalStatus }) => originalStatus.content || '',
|
||||||
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
|
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
|
||||||
|
|
|
@ -50,6 +50,10 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.underline-links .status-content a) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import { mark, stop } from '../../_utils/marks'
|
import { mark, stop } from '../../_utils/marks'
|
||||||
|
|
|
@ -28,6 +28,10 @@
|
||||||
margin: 20px 10px 20px 5px;
|
margin: 20px 10px 20px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.underline-links .status-mentions a) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
@ -35,4 +39,4 @@
|
||||||
mentions: ({ originalStatus }) => originalStatus.mentions || []
|
mentions: ({ originalStatus }) => originalStatus.mentions || []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -40,6 +40,11 @@
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.underline-links .status-spoiler a) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import Shortcut from '../shortcut/Shortcut.html'
|
import Shortcut from '../shortcut/Shortcut.html'
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
<div class="setting-group">
|
<div 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</label>
|
<label for="choice-underline-links">Underline links in toots and profiles</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,6 @@ import { notificationObservers } from './notificationObservers'
|
||||||
import { autosuggestObservers } from './autosuggestObservers'
|
import { autosuggestObservers } from './autosuggestObservers'
|
||||||
import { notificationPermissionObservers } from './notificationPermissionObservers'
|
import { notificationPermissionObservers } from './notificationPermissionObservers'
|
||||||
import { customScrollbarObservers } from './customScrollbarObservers'
|
import { customScrollbarObservers } from './customScrollbarObservers'
|
||||||
import { underlineLinksObservers } from './underlineLinksObservers'
|
|
||||||
|
|
||||||
// These observers can be lazy-loaded when the user is actually logged in.
|
// These observers can be lazy-loaded when the user is actually logged in.
|
||||||
// Prevents circular dependencies and reduces the size of main.js
|
// Prevents circular dependencies and reduces the size of main.js
|
||||||
|
@ -15,5 +14,4 @@ export default function loggedInObservers () {
|
||||||
autosuggestObservers()
|
autosuggestObservers()
|
||||||
notificationPermissionObservers()
|
notificationPermissionObservers()
|
||||||
customScrollbarObservers()
|
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;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.underline-links & {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
Loading…
Reference in New Issue