Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make 'Read more' buttons look more consistent everywhere

Browse source 
Too many cooks spoil the broth
This commit is contained in:
Lim Chee Aun 2023-09-23 19:14:11 +08:00
parent f6ab5e9afa
commit cd3ab50a18
3 changed files with 64 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/components/status.css
View file

@ -107,24 +107,20 @@
--inset-offset: 16px;
inset-block-end: var(--inset-offset);
inset-inline-end: var(--inset-offset);
color: var(--link-color);
background-color: var(--bg-faded-blur-color);
backdrop-filter: blur(8px);
border: 1px solid var(--outline-color);
color: var(--text-color);
background-color: var(--bg-faded-color);
border: 1px dashed var(--link-color);
box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
padding: 0.5em 0.75em;
border-radius: 10em;
font-size: 90%;
white-space: nowrap;
box-shadow: inset 0 0 0 1px var(--bg-color);
text-shadow: 0 -1px var(--bg-color);
transition-property: transform, background-color, border-color;
transition-duration: 0.2s;
transition-timing-function: ease-out;
transition: transform 0.2s ease-out;
}
&:is(:hover, :focus):after {
border-color: var(--link-color);
background-color: var(--bg-color);
color: var(--link-color);
transform: translate(2px, 0);
}
}
@ -1536,26 +1532,52 @@ a.card:is(:hover, :focus):visited {
text-overflow: ellipsis;
}
#filtered-status-peek .status-link {
border-radius: 16px;
border: var(--hairline-width) dashed var(--text-insignificant-color);
max-height: 33vh;
max-height: 33dvh;
overflow: hidden;
}
#filtered-status-peek .status-link .status {
pointer-events: none;
font-size: 90%;
max-height: 33vh;
max-height: 33dvh;
overflow: hidden;
mask-image: linear-gradient(black 80%, transparent 95%);
}
#filtered-status-peek .status-post-link {
float: right;
position: sticky;
bottom: 8px;
right: 8px;
#filtered-status-peek {
.status-link {
margin: 8px 0 0;
border-radius: 16px;
border: var(--hairline-width) solid var(--divider-color);
position: relative;
max-height: 33vh;
max-height: 33dvh;
overflow: hidden;
&.truncated {
.status {
mask-image: linear-gradient(to bottom, #000 80px, transparent);
}
&:after {
content: attr(data-read-more);
line-height: 1;
display: inline-block;
position: absolute;
--inset-offset: 16px;
inset-block-end: var(--inset-offset);
inset-inline-end: var(--inset-offset);
color: var(--text-color);
background-color: var(--bg-faded-color);
border: 1px dashed var(--link-color);
box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
padding: 0.5em 0.75em;
border-radius: 10em;
font-size: 90%;
white-space: nowrap;
transition: transform 0.2s ease-out;
}
&:is(:hover, :focus):after {
color: var(--link-color);
transform: translate(2px, 0);
}
}
.status {
pointer-events: none;
font-size: 90%;
}
}
}
/* REACTIONS */

7
src/components/status.jsx
View file

@ -2089,6 +2089,8 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
},
);
const statusPeekRef = useTruncated();
return (
<div
class={isReblog ? (group ? 'status-group' : 'status-reblog') : ''}
@ -2162,16 +2164,15 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
</header>
<main tabIndex="-1">
<Link
ref={statusPeekRef}
class="status-link"
to={`/${instance}/s/${status.id}`}
onClick={() => {
setShowPeek(false);
}}
data-read-more="Read more →"
>
<Status status={status} instance={instance} size="s" readOnly />
<button type="button" class="status-post-link plain3">
See post &raquo;
</button>
</Link>
</main>
</div>

17
src/pages/notifications.css
View file

@ -118,23 +118,20 @@
--inset-offset: 16px;
inset-block-end: var(--inset-offset);
inset-inline-end: var(--inset-offset);
color: var(--link-color);
background-color: var(--bg-faded-blur-color);
backdrop-filter: blur(8px);
border: 1px solid var(--outline-color);
color: var(--text-color);
background-color: var(--bg-faded-color);
border: 1px dashed var(--link-color);
box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
padding: 0.5em 0.75em;
border-radius: 10em;
font-size: 90%;
white-space: nowrap;
box-shadow: inset 0 0 0 1px var(--bg-color);
text-shadow: 0 -1px var(--bg-color);
transition-property: transform, background-color, border-color;
transition-duration: 0.2s;
transition-timing-function: ease-out;
transition: transform 0.2s ease-out;
}
.notification .status-link:is(:hover, :focus).truncated:after {
border-color: var(--link-color);
background-color: var(--bg-color);
color: var(--link-color);
transform: translate(2px, 0);
}
.notification .status-link.status-type-mention {