mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-23 01:35:38 +03:00
Catch-up (beta)
This commit is contained in:
Lim Chee Aun
parent
a419bb9b61
commit
201ca6ce4a
9 changed files with 2267 additions and 47 deletions
|
|
@ -103,6 +103,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|||
max-width: 100%;
|
||||
background-color: var(--bg-color);
|
||||
overflow-anchor: auto;
|
||||
|
||||
&.wide {
|
||||
width: 60em;
|
||||
}
|
||||
}
|
||||
.deck.contained {
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import Shortcuts from './components/shortcuts';
|
|||
import NotFound from './pages/404';
|
||||
import AccountStatuses from './pages/account-statuses';
|
||||
import Bookmarks from './pages/bookmarks';
|
||||
import Catchup from './pages/catchup';
|
||||
import Favourites from './pages/favourites';
|
||||
import FollowedHashtags from './pages/followed-hashtags';
|
||||
import Following from './pages/following';
|
||||
|
|
@ -394,7 +395,7 @@ function PrimaryRoutes({ isLoggedIn, loading }) {
|
|||
const location = useLocation();
|
||||
const nonRootLocation = useMemo(() => {
|
||||
const { pathname } = location;
|
||||
return !/^\/(login|welcome)/.test(pathname);
|
||||
return !/^\/(login|welcome)/i.test(pathname);
|
||||
}, [location]);
|
||||
|
||||
return (
|
||||
|
|
@ -457,6 +458,7 @@ function SecondaryRoutes({ isLoggedIn }) {
|
|||
<Route path=":id" element={<List />} />
|
||||
</Route>
|
||||
<Route path="/ft" element={<FollowedHashtags />} />
|
||||
<Route path="/catchup" element={<Catchup />} />
|
||||
</>
|
||||
)}
|
||||
<Route path="/:instance?/t/:hashtag" element={<Hashtag />} />
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ body.cloak,
|
|||
.account-container :is(header, main > *:not(.actions)),
|
||||
.account-container :is(header, main > *:not(.actions)) *,
|
||||
.header-double-lines,
|
||||
.account-block {
|
||||
.account-block,
|
||||
.post-peek-html * {
|
||||
text-decoration-thickness: 1.1em;
|
||||
text-decoration-line: line-through;
|
||||
/* text-rendering: optimizeSpeed; */
|
||||
|
|
@ -26,9 +27,10 @@ body.cloak,
|
|||
|
||||
.status :is(img, video, audio),
|
||||
.media-post .media,
|
||||
.avatar,
|
||||
.avatar *,
|
||||
.emoji,
|
||||
.header-banner {
|
||||
.header-banner,
|
||||
.post-peek-media {
|
||||
filter: contrast(0) !important;
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
text-shadow: 0 1px var(--bg-blur-color);
|
||||
transition: opacity 0.3s ease-out;
|
||||
|
||||
&:not(#columns &) {
|
||||
#trending-page &:not(#columns &) {
|
||||
@media (min-width: 40em) {
|
||||
width: 95vw;
|
||||
max-width: calc(320px * 3.3);
|
||||
|
|
@ -96,6 +96,7 @@
|
|||
}
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -113,34 +114,34 @@
|
|||
margin: 0 0 -16px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
vertical-align: top;
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
hsl(0, 0%, 0%) 0%,
|
||||
hsla(0, 0%, 0%, 0.987) 14%,
|
||||
hsla(0, 0%, 0%, 0.951) 26.2%,
|
||||
hsla(0, 0%, 0%, 0.896) 36.8%,
|
||||
hsla(0, 0%, 0%, 0.825) 45.9%,
|
||||
hsla(0, 0%, 0%, 0.741) 53.7%,
|
||||
hsla(0, 0%, 0%, 0.648) 60.4%,
|
||||
hsla(0, 0%, 0%, 0.55) 66.2%,
|
||||
hsla(0, 0%, 0%, 0.45) 71.2%,
|
||||
hsla(0, 0%, 0%, 0.352) 75.6%,
|
||||
hsla(0, 0%, 0%, 0.259) 79.6%,
|
||||
hsla(0, 0%, 0%, 0.175) 83.4%,
|
||||
hsla(0, 0%, 0%, 0.104) 87.2%,
|
||||
hsla(0, 0%, 0%, 0.049) 91.1%,
|
||||
hsla(0, 0%, 0%, 0.013) 95.3%,
|
||||
hsla(0, 0%, 0%, 0) 100%
|
||||
);
|
||||
img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
vertical-align: top;
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
hsl(0, 0%, 0%) 0%,
|
||||
hsla(0, 0%, 0%, 0.987) 14%,
|
||||
hsla(0, 0%, 0%, 0.951) 26.2%,
|
||||
hsla(0, 0%, 0%, 0.896) 36.8%,
|
||||
hsla(0, 0%, 0%, 0.825) 45.9%,
|
||||
hsla(0, 0%, 0%, 0.741) 53.7%,
|
||||
hsla(0, 0%, 0%, 0.648) 60.4%,
|
||||
hsla(0, 0%, 0%, 0.55) 66.2%,
|
||||
hsla(0, 0%, 0%, 0.45) 71.2%,
|
||||
hsla(0, 0%, 0%, 0.352) 75.6%,
|
||||
hsla(0, 0%, 0%, 0.259) 79.6%,
|
||||
hsla(0, 0%, 0%, 0.175) 83.4%,
|
||||
hsla(0, 0%, 0%, 0.104) 87.2%,
|
||||
hsla(0, 0%, 0%, 0.049) 91.1%,
|
||||
hsla(0, 0%, 0%, 0.013) 95.3%,
|
||||
hsla(0, 0%, 0%, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,5 +188,9 @@
|
|||
overflow: hidden;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -176,6 +176,10 @@ function NavMenu(props) {
|
|||
<Icon icon="following" size="l" /> <span>Following</span>
|
||||
</MenuLink>
|
||||
)}
|
||||
<MenuLink to="/catchup">
|
||||
<Icon icon="history" />
|
||||
<span>Catch-up</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/mentions">
|
||||
<Icon icon="at" size="l" /> <span>Mentions</span>
|
||||
</MenuLink>
|
||||
|
|
|
|||
832
src/pages/catchup.css
Normal file
832
src/pages/catchup.css
Normal file
|
|
@ -0,0 +1,832 @@
|
|||
#catchup-page {
|
||||
transform: none;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.deck {
|
||||
background-color: var(--bg-faded-color);
|
||||
}
|
||||
|
||||
/* Hide the shortcuts nav + adjustments */
|
||||
~ :is(#shortcuts, #compose-button) {
|
||||
display: none;
|
||||
}
|
||||
.timeline-deck {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
header {
|
||||
/* --margin-top: 8px !important; */
|
||||
position: static;
|
||||
}
|
||||
|
||||
h1 sup {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
color: var(--text-insignificant-color);
|
||||
}
|
||||
|
||||
.catchup-start {
|
||||
padding: 16px;
|
||||
padding-top: 15vh;
|
||||
text-align: center;
|
||||
max-width: 40em;
|
||||
margin-inline: auto;
|
||||
|
||||
.catchup-info {
|
||||
animation: appear 0.3s ease-out;
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.catchup-prev {
|
||||
margin: 2em auto;
|
||||
padding: 1em;
|
||||
width: fit-content;
|
||||
color: var(--text-insignificant-color);
|
||||
border-top: 1px solid var(--bg-color);
|
||||
|
||||
ul,
|
||||
ul li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-align: left;
|
||||
justify-content: space-between;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catchup-form {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 16px;
|
||||
background-color: var(--link-bg-color);
|
||||
border-radius: 32px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
* {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
accent-color: var(--link-color);
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
.catchup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
gap: 8px;
|
||||
|
||||
aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 90%;
|
||||
|
||||
button[hidden] {
|
||||
display: inline;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catchup-posts-viz-bar {
|
||||
margin: 0 16px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--bg-color);
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
pointer-events: none;
|
||||
justify-content: stretch;
|
||||
height: 3px;
|
||||
|
||||
&:has(.post-dot:nth-child(320)) {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.post-dot {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
opacity: 0.5;
|
||||
background-color: var(--link-color);
|
||||
transition: 0.25s ease-in-out;
|
||||
transition-property: opacity, transform;
|
||||
|
||||
&.post-dot-highlight {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.post-dot:not(.post-dot-highlight)) .post-dot-highlight {
|
||||
/* transform: scaleY(2); */
|
||||
transform: scale3d(1, 2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.catchup-filters {
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
/* flex-wrap: wrap; */
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
max-width: 100%;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 16px calc(100% - 16px),
|
||||
transparent
|
||||
);
|
||||
padding-inline-end: 25%;
|
||||
|
||||
.filter-label {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-insignificant-color);
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 80%;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--text-insignificant-color);
|
||||
position: relative;
|
||||
|
||||
select {
|
||||
/* appearance: none;
|
||||
background-color: var(--bg-faded-color);
|
||||
color: var(--link-color);
|
||||
border: 0;
|
||||
border-radius: 12px; */
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type] {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.filter-cat {
|
||||
padding: 8px 12px;
|
||||
background-color: var(--bg-blur-color);
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
background-color: var(--link-bg-color);
|
||||
}
|
||||
|
||||
&:has(:checked) {
|
||||
color: var(--link-color);
|
||||
background-color: var(--link-bg-color);
|
||||
box-shadow: inset 0 0 0 2px var(--link-color);
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 70%;
|
||||
margin-left: 4px;
|
||||
background-color: var(--bg-color);
|
||||
padding: 4px 6px;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.filter-author {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
/* transition: filter 0.15s ease; */
|
||||
|
||||
.avatar {
|
||||
margin-bottom: 2px;
|
||||
/* transition: box-shadow 0.15s ease; */
|
||||
}
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
filter: none;
|
||||
|
||||
.avatar {
|
||||
box-shadow: 0 0 0 0.5px var(--bg-color),
|
||||
0 0 0 3px var(--link-faded-color) !important;
|
||||
|
||||
img {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
&.has-alpha {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: filter 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(:checked) {
|
||||
box-shadow: none;
|
||||
filter: none;
|
||||
|
||||
.avatar {
|
||||
box-shadow: 0 0 0 1px var(--bg-color), 0 0 0 3px var(--link-color);
|
||||
}
|
||||
|
||||
.username {
|
||||
color: var(--link-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--link-color);
|
||||
border-color: var(--link-color);
|
||||
box-shadow: 0 0 0 1px var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: -4px;
|
||||
font-size: 10px;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
border: 1px solid var(--link-faded-color);
|
||||
padding: 0 2px;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.username {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
black calc(100% - 0.5em),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.filter-author :checked)
|
||||
.filter-author:not(:has(:checked)):not(:is(:hover, :focus)) {
|
||||
.avatar img {
|
||||
filter: grayscale(1) contrast(2) opacity(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.radio-field-group {
|
||||
display: flex;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
gap: 1px;
|
||||
|
||||
label {
|
||||
padding: 4px 8px;
|
||||
line-height: 2em;
|
||||
min-width: 32px;
|
||||
text-align: center;
|
||||
background-color: var(--bg-blur-color);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
background-color: var(--link-bg-color);
|
||||
}
|
||||
|
||||
&:has(:checked) {
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
background-color: var(--link-bg-color);
|
||||
box-shadow: inset 0 -2px 0 var(--link-color);
|
||||
}
|
||||
|
||||
&:has(:disabled) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catchup-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
/* background-color: var(--bg-color); */
|
||||
border-top: var(--hairline-width) solid var(--bg-faded-color);
|
||||
--corner-radius: 8px;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
border-radius: var(--corner-radius);
|
||||
/* border: var(--hairline-width) solid var(--outline-color); */
|
||||
|
||||
> li {
|
||||
&:first-child > a {
|
||||
border-top-left-radius: var(--corner-radius);
|
||||
border-top-right-radius: var(--corner-radius);
|
||||
}
|
||||
|
||||
&:last-child > a {
|
||||
border-bottom-left-radius: var(--corner-radius);
|
||||
border-bottom-right-radius: var(--corner-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
margin: 0 0 1px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
/* border-bottom: var(--hairline-width) solid var(--outline-color); */
|
||||
|
||||
&.separator {
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
&.separator + li a {
|
||||
border-top-left-radius: var(--corner-radius);
|
||||
border-top-right-radius: var(--corner-radius);
|
||||
}
|
||||
|
||||
&:has(+ .separator) a {
|
||||
border-bottom-left-radius: var(--corner-radius);
|
||||
border-bottom-right-radius: var(--corner-radius);
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
background-color: var(--bg-color);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
/* transition: background-color 0.3s ease; */
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: var(--bg-faded-color);
|
||||
box-shadow: 0 8px 16px -8px var(--drop-shadow-color),
|
||||
inset 0 1px var(--bg-color);
|
||||
outline: 1px solid var(--outline-color);
|
||||
text-shadow: 0 1px var(--bg-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: brightness(0.95);
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--outline-color);
|
||||
|
||||
*,
|
||||
.post-peek-html * a[href] {
|
||||
color: var(--outline-color) !important;
|
||||
|
||||
* {
|
||||
color: var(--outline-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-line {
|
||||
border-radius: inherit;
|
||||
animation: appear-smooth 0.3s ease-in-out both;
|
||||
--pad: 16px;
|
||||
min-height: 44px;
|
||||
padding: var(--pad);
|
||||
column-gap: calc(0.5 * var(--pad));
|
||||
row-gap: 4px;
|
||||
width: 100%;
|
||||
/* display: flex;
|
||||
flex-direction: column; */
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
'author meta'
|
||||
'content content';
|
||||
/* align-items: center; */
|
||||
background-image: linear-gradient(
|
||||
160deg,
|
||||
var(--post-bg-color),
|
||||
transparent min(80px, 50%)
|
||||
);
|
||||
/* background-image: linear-gradient(
|
||||
90deg,
|
||||
var(--post-bg-color),
|
||||
var(--post-bg-color) 8px,
|
||||
transparent 8px
|
||||
); */
|
||||
|
||||
@media (min-width: 40em) {
|
||||
/* flex-direction: row;
|
||||
align-items: center; */
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: 'author content meta';
|
||||
}
|
||||
|
||||
&.reblog {
|
||||
--post-bg-color: var(--reblog-faded-color);
|
||||
}
|
||||
&.group {
|
||||
--post-bg-color: var(--group-faded-color);
|
||||
}
|
||||
&.reply-to {
|
||||
--post-bg-color: var(--reply-to-faded-color);
|
||||
}
|
||||
&.followed-tags {
|
||||
--post-bg-color: var(--hashtag-faded-color);
|
||||
}
|
||||
&.filtered {
|
||||
filter: grayscale(1);
|
||||
background-image: none;
|
||||
|
||||
.post-author {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
&.visibility-direct {
|
||||
--yellow-stripes: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--reply-to-faded-color),
|
||||
var(--reply-to-faded-color) 10px,
|
||||
var(--reply-to-faded-color) 10px,
|
||||
transparent 10px,
|
||||
transparent 20px
|
||||
);
|
||||
background-image: var(--yellow-stripes);
|
||||
}
|
||||
|
||||
.post-reblog-avatar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.icon {
|
||||
color: var(--reblog-color);
|
||||
}
|
||||
}
|
||||
|
||||
.post-author {
|
||||
grid-area: author;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
black calc(100% - 1em),
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
@media (min-width: 40em) {
|
||||
--width: 25vw;
|
||||
width: var(--width);
|
||||
min-width: 9em;
|
||||
max-width: 13em;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: normal;
|
||||
/* font-weight: 500; */
|
||||
opacity: 0.7;
|
||||
}
|
||||
i {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li:nth-child(10) ~ li .post-line {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.post-peek {
|
||||
grid-area: content;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
column-gap: 8px;
|
||||
row-gap: 4px;
|
||||
align-self: stretch;
|
||||
/* align-items: center; */
|
||||
/* margin-left: 24px; */
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
||||
/* CLOAK - uncomment when taking screenshots */
|
||||
/* text-decoration-thickness: 1.1em;
|
||||
text-decoration-line: line-through;
|
||||
text-rendering: optimizeSpeed;
|
||||
filter: opacity(0.5);
|
||||
pointer-events: none;
|
||||
img {
|
||||
filter: contrast(0) !important;
|
||||
background-color: #000 !important;
|
||||
} */
|
||||
|
||||
.post-peek-content {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
flex-basis: 20em;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.3;
|
||||
opacity: 0.9;
|
||||
/* font-size: 0.9em; */
|
||||
text-wrap: balance;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-peek-html {
|
||||
pointer-events: none;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-size: 0.9em;
|
||||
color: var(--green-color);
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
br {
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
/* all block level elements */
|
||||
p,
|
||||
div,
|
||||
blockquote,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
li,
|
||||
pre,
|
||||
br {
|
||||
&:after {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
br:after {
|
||||
font-size: 0.75em;
|
||||
content: ' ↵ ';
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.ellipsis:after {
|
||||
content: '...';
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links are not clickable, so remove the underlines */
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration-color: transparent;
|
||||
color: var(--link-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.post-peek-spoiler {
|
||||
line-height: 1.5;
|
||||
border-radius: 1em;
|
||||
padding-inline: 0.5em;
|
||||
border: 1px dashed var(--button-bg-color);
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
color: var(--button-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.post-peek-filtered {
|
||||
border-radius: 1em;
|
||||
padding-inline: 0.5em;
|
||||
border: 1px dashed var(--outline-hover-color);
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
color: var(--outline-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-peek-post-content {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-self: center;
|
||||
transition: transform 0.05s ease-in-out;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:has(.post-peek-media):hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 2px;
|
||||
outline: var(--hairline-width) solid var(--outline-color);
|
||||
vertical-align: middle;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 0 0 1px var(--outline-color);
|
||||
object-fit: cover;
|
||||
transition: transform 0.05s ease-in-out;
|
||||
background-color: var(--bg-color);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: position-object 5s ease-in-out 5;
|
||||
|
||||
/* @media (min-width: 40em) and (min-height: 600px) {
|
||||
transform: scale(3);
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 40em) {
|
||||
&:has(.post-peek-media),
|
||||
.post-peek-media:first-child img {
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.post-peek-faux-media {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-faded-color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 0 1px var(--outline-color);
|
||||
}
|
||||
|
||||
.post-peek-card img {
|
||||
outline: 3px double var(--link-faded-color);
|
||||
}
|
||||
}
|
||||
|
||||
.post-peek-tag {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-insignificant-color);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--outline-color);
|
||||
padding: 2px !important;
|
||||
align-self: center;
|
||||
background-color: var(--bg-faded-color);
|
||||
line-height: 1;
|
||||
|
||||
&.post-peek-poll {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex-direction: column;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.post-peek-thread {
|
||||
font-size: 10px;
|
||||
/* padding: 2px 4px; */
|
||||
font-weight: 700;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--reply-to-text-color) !important;
|
||||
border-color: var(--reply-to-color);
|
||||
background-image: repeating-linear-gradient(
|
||||
-70deg,
|
||||
transparent,
|
||||
transparent 3px,
|
||||
var(--reply-to-faded-color) 3px,
|
||||
var(--reply-to-faded-color) 4px
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
> li > a:is(:hover, :focus) .post-peek-content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
grid-area: meta;
|
||||
font-size: 90%;
|
||||
color: var(--text-insignificant-color);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.post-stats {
|
||||
opacity: 0;
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
transform: translateX(4px);
|
||||
/* transition: all 0.25s ease-out; */
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.post-line:hover .post-stats {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
+ footer {
|
||||
min-height: 15vh;
|
||||
color: var(--text-insignificant-color);
|
||||
padding-block: 15vh;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
1371
src/pages/catchup.jsx
Normal file
1371
src/pages/catchup.jsx
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
|||
import './trending.css';
|
||||
import '../components/links-bar.css';
|
||||
|
||||
import { MenuItem } from '@szhsin/react-menu';
|
||||
import { getBlurHashAverageColor } from 'fast-blurhash';
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@ import {
|
|||
set,
|
||||
} from 'idb-keyval';
|
||||
|
||||
const draftsStore = createStore('drafts-db', 'drafts-store');
|
||||
|
||||
// Add additonal `draftsStore` parameter to all methods
|
||||
|
||||
const drafts = {
|
||||
set: (key, val) => set(key, val, draftsStore),
|
||||
get: (key) => get(key, draftsStore),
|
||||
getMany: (keys) => getMany(keys, draftsStore),
|
||||
del: (key) => del(key, draftsStore),
|
||||
delMany: (keys) => delMany(keys, draftsStore),
|
||||
clear: () => clear(draftsStore),
|
||||
keys: () => keys(draftsStore),
|
||||
};
|
||||
function initDB(dbName, storeName) {
|
||||
const store = createStore(dbName, storeName);
|
||||
return {
|
||||
set: (key, val) => set(key, val, store),
|
||||
get: (key) => get(key, store),
|
||||
getMany: (keys) => getMany(keys, store),
|
||||
del: (key) => del(key, store),
|
||||
delMany: (keys) => delMany(keys, store),
|
||||
clear: () => clear(store),
|
||||
keys: () => keys(store),
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
drafts,
|
||||
drafts: initDB('drafts-db', 'drafts-store'),
|
||||
catchup: initDB('catchup-db', 'catchup-store'),
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue