nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix updates button got cut off in larger viewport

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-01 19:24:08 +08:00
parent 6fcf844893
commit d2d8571b3f
3 changed files with 49 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app.css
View file

@ -430,15 +430,17 @@ a.mention span {
opacity: 0;
}
100% {
transform: translate(-50%, 150%);
transform: translate(-50%, 0);
opacity: 1;
}
}
.updates-button {
position: absolute;
z-index: 1;
animation: fade-from-top 2s ease-out;
left: 50%;
transform: translate(-50%, 150%);
margin-top: 8px;
transform: translate(-50%, 0);
font-size: 90%;
background: linear-gradient(
to bottom,

42
src/pages/home.jsx
View file

@ -199,28 +199,28 @@ function Home({ hidden }) {
<Icon icon="notification" size="l" alt="Notifications" />
</a>
</div>
{snapStates.homeNew.length > 0 && (
<button
class="updates-button"
type="button"
onClick={() => {
const uniqueHomeNew = snapStates.homeNew.filter(
(status) => !states.home.some((s) => s.id === status.id),
);
states.home.unshift(...uniqueHomeNew);
loadStatuses(true);
states.homeNew = [];
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New posts
</button>
)}
</header>
{snapStates.homeNew.length > 0 && (
<button
class="updates-button"
type="button"
onClick={() => {
const uniqueHomeNew = snapStates.homeNew.filter(
(status) => !states.home.some((s) => s.id === status.id),
);
states.home.unshift(...uniqueHomeNew);
loadStatuses(true);
states.homeNew = [];
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New posts
</button>
)}
{snapStates.home.length ? (
<>
<ul class="timeline">

49
src/pages/notifications.jsx
View file

@ -311,32 +311,31 @@ function Notifications() {
<div class="header-side">
<Loader hidden={uiState !== 'loading'} />
</div>
{snapStates.notificationsNew.length > 0 && (
<button
class="updates-button"
type="button"
onClick={() => {
const uniqueNotificationsNew =
snapStates.notificationsNew.filter(
(notification) =>
!snapStates.notifications.some(
(n) => n.id === notification.id,
),
);
states.notifications.unshift(...uniqueNotificationsNew);
loadNotifications(true);
states.notificationsNew = [];
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New notifications
</button>
)}
</header>
{snapStates.notificationsNew.length > 0 && (
<button
class="updates-button"
type="button"
onClick={() => {
const uniqueNotificationsNew = snapStates.notificationsNew.filter(
(notification) =>
!snapStates.notifications.some(
(n) => n.id === notification.id,
),
);
states.notifications.unshift(...uniqueNotificationsNew);
loadNotifications(true);
states.notificationsNew = [];
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New notifications
</button>
)}
<div id="mentions-option">
<label>
<input