Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 17:16:26 +01:00
Code Issues Projects Releases Packages 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; opacity: 0;
} }
100% { 100% {
transform: translate(-50%, 150%); transform: translate(-50%, 0);
opacity: 1; opacity: 1;
} }
} }
.updates-button { .updates-button {
position: absolute; position: absolute;
z-index: 1;
animation: fade-from-top 2s ease-out; animation: fade-from-top 2s ease-out;
left: 50%; left: 50%;
transform: translate(-50%, 150%); margin-top: 8px;
transform: translate(-50%, 0);
font-size: 90%; font-size: 90%;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,

2
src/pages/home.jsx
View file

@ -199,6 +199,7 @@ function Home({ hidden }) {
<Icon icon="notification" size="l" alt="Notifications" /> <Icon icon="notification" size="l" alt="Notifications" />
</a> </a>
</div> </div>
</header>
{snapStates.homeNew.length > 0 && ( {snapStates.homeNew.length > 0 && (
<button <button
class="updates-button" class="updates-button"
@ -220,7 +221,6 @@ function Home({ hidden }) {
<Icon icon="arrow-up" /> New posts <Icon icon="arrow-up" /> New posts
</button> </button>
)} )}
</header>
{snapStates.home.length ? ( {snapStates.home.length ? (
<> <>
<ul class="timeline"> <ul class="timeline">

5
src/pages/notifications.jsx
View file

@ -311,13 +311,13 @@ function Notifications() {
<div class="header-side"> <div class="header-side">
<Loader hidden={uiState !== 'loading'} /> <Loader hidden={uiState !== 'loading'} />
</div> </div>
</header>
{snapStates.notificationsNew.length > 0 && ( {snapStates.notificationsNew.length > 0 && (
<button <button
class="updates-button" class="updates-button"
type="button" type="button"
onClick={() => { onClick={() => {
const uniqueNotificationsNew = const uniqueNotificationsNew = snapStates.notificationsNew.filter(
snapStates.notificationsNew.filter(
(notification) => (notification) =>
!snapStates.notifications.some( !snapStates.notifications.some(
(n) => n.id === notification.id, (n) => n.id === notification.id,
@ -336,7 +336,6 @@ function Notifications() {
<Icon icon="arrow-up" /> New notifications <Icon icon="arrow-up" /> New notifications
</button> </button>
)} )}
</header>
<div id="mentions-option"> <div id="mentions-option">
<label> <label>
<input <input