oreolek/phanpy
1
0
Fork 0
Code Activity

New "shazam" CSS effect utility lolol

Browse source 
I might rename this in the future
This commit is contained in:
Lim Chee Aun 2023-05-09 18:03:26 +08:00
parent c316f0106b
commit ef12916bab
4 changed files with 69 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/account-info.css
View file

@ -199,17 +199,6 @@
margin: 0;
}
.account-container .common-followers {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.5s ease-in-out;
}
.account-container .common-followers[hidden] {
grid-template-rows: 0fr;
}
.account-container .common-followers > .common-followers-inner {
overflow: hidden;
}
.account-container .common-followers p {
font-size: 90%;
color: var(--text-insignificant-color);

7
src/components/account-info.jsx
View file

@ -487,8 +487,11 @@ function RelatedActions({ info, instance, authenticated }) {
return (
<>
<div class="common-followers" hidden={!familiarFollowers?.length}>
<div class="common-followers-inner">
<div
class="common-followers shazam-container no-animation"
hidden={!familiarFollowers?.length}
>
<div class="shazam-container-inner">
<p>
Also followed by{' '}
<span class="ib">

23
src/index.css
View file

@ -391,3 +391,26 @@ code {
object-position: 50% 50%;
}
}
@keyframes shazam {
0% {
grid-template-rows: 0fr;
}
100% {
grid-template-rows: 1fr;
}
}
.shazam-container {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.5s ease-in-out;
}
.shazam-container:not(.no-animation) {
animation: shazam 0.5s ease-in-out both !important;
}
.shazam-container[hidden] {
grid-template-rows: 0fr;
}
.shazam-container-inner {
overflow: hidden;
}

78
src/pages/notifications.jsx
View file

@ -235,44 +235,48 @@ function Notifications() {
)}
</header>
{announcements.length > 0 && (
<details class="announcements">
<summary>
<span>
<Icon icon="announce" class="announcement-icon" size="l" />{' '}
<b>Announcement{announcements.length > 1 ? 's' : ''}</b>{' '}
<small class="insignificant">{instance}</small>
</span>
{announcements.length > 1 && (
<span class="announcements-nav-buttons">
{announcements.map((announcement, index) => (
<button
type="button"
class="plain2 small"
onClick={() => {
announcementsListRef.current?.children[
index
].scrollIntoView({ behavior: 'smooth' });
}}
>
{index + 1}
</button>
<div class="shazam-container">
<div class="shazam-container-inner">
<details class="announcements">
<summary>
<span>
<Icon icon="announce" class="announcement-icon" size="l" />{' '}
<b>Announcement{announcements.length > 1 ? 's' : ''}</b>{' '}
<small class="insignificant">{instance}</small>
</span>
{announcements.length > 1 && (
<span class="announcements-nav-buttons">
{announcements.map((announcement, index) => (
<button
type="button"
class="plain2 small"
onClick={() => {
announcementsListRef.current?.children[
index
].scrollIntoView({ behavior: 'smooth' });
}}
>
{index + 1}
</button>
))}
</span>
)}
</summary>
<ul
class={`announcements-list-${
announcements.length > 1 ? 'multiple' : 'single'
}`}
ref={announcementsListRef}
>
{announcements.map((announcement) => (
<li>
<AnnouncementBlock announcement={announcement} />
</li>
))}
</span>
)}
</summary>
<ul
class={`announcements-list-${
announcements.length > 1 ? 'multiple' : 'single'
}`}
ref={announcementsListRef}
>
{announcements.map((announcement) => (
<li>
<AnnouncementBlock announcement={announcement} />
</li>
))}
</ul>
</details>
</ul>
</details>
</div>
</div>
)}
{followRequests.length > 0 && (
<div class="follow-requests">