zumbiepig/MineXLauncher
zumbiepig/MineXLauncher
1
0
Fork 0
mirror of https://github.com/zumbiepig/MineXLauncher.git synced 2025-06-08 08:04:49 +00:00
Code

.

Browse Source
This commit is contained in:
zumbiepig 2024-09-05 20:42:04 -07:00
parent c146fc70c1
commit 939f5946a5
No known key found for this signature in database
GPG Key ID: 17C891BE28B953DE
2 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/resources/styles/themes/default.css
View File

@ -778,24 +778,28 @@ body {
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
} }
} }
@media (max-width: 1500px) { @media (max-width: 1500px) {
.mod-list, .mod-list,
.article-list { .article-list {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
@media (max-width: 1250px) { @media (max-width: 1250px) {
.mod-list, .mod-list,
.article-list { .article-list {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.mod-list, .mod-list,
.article-list { .article-list {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
@media (max-width: 775px) { @media (max-width: 775px) {
.mod-list, .mod-list,
.article-list { .article-list {
@ -803,7 +807,22 @@ body {
} }
} }
@keyframes article { /* bruh pls find a fix for this */
@keyframes article-1 {
0% {
opacity: 0;
scale: 0;
}
80% {
scale: 1.1;
}
100% {
opacity: 1;
scale: 1;
}
}
@keyframes article-2 {
0% { 0% {
opacity: 0; opacity: 0;
scale: 0; scale: 0;

30
src/resources/scripts/main.ts
View File

@ -157,15 +157,14 @@ const article = {
open: function (articleId: string) { open: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null; const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
const modalContent = document.querySelector(`#article-${articleId} .article-content`) as HTMLElement | null; const modalContent = document.querySelector(`#article-${articleId} .article-content`) as HTMLElement | null;
if (modal && modalContent) { if (!articleAnimationLock && modal && modalContent) {
articleAnimationLock = true; articleAnimationLock = true;
modal.style.animation = 'article 0.5s ease-in-out normal'; modal.style.animation = 'article-1 0.5s ease-in-out alternate 1';
modal.style.display = 'flex'; modal.style.display = 'flex';
modalContent.scroll({ top: 0, left: 0, behavior: 'instant' }); modalContent.scroll({ top: 0, left: 0, behavior: 'instant' });
modal.addEventListener( modal.addEventListener(
'animationend', 'animationend',
() => { () => {
articleAnimationLock = false;
const closeArticleHandler = (event: Event) => { const closeArticleHandler = (event: Event) => {
if (event.target === modal) { if (event.target === modal) {
modal.removeEventListener('click', closeArticleHandler); modal.removeEventListener('click', closeArticleHandler);
@ -173,26 +172,25 @@ const article = {
} }
}; };
modal.addEventListener('click', closeArticleHandler); modal.addEventListener('click', closeArticleHandler);
articleAnimationLock = false;
}, },
{ once: true } { once: true }
); );
} }
}, },
close: function (articleId: string) { close: function (articleId: string) {
if (!articleAnimationLock) { const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (!articleAnimationLock && modal) {
articleAnimationLock = true; articleAnimationLock = true;
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null; modal.style.animation = 'article-2 0.5s ease-in-out alternate 1';
if (modal) { modal.addEventListener(
modal.style.animation = 'article 0.5s ease-in-out reverse'; 'animationend',
modal.addEventListener( () => {
'animationend', modal.style.display = 'none';
() => { articleAnimationLock = false;
modal.style.display = 'none'; },
articleAnimationLock = false; { once: true }
}, );
{ once: true }
);
}
} }
}, },
}; };