zumbiepig/MineXLauncher
zumbiepig/MineXLauncher
1
0
Fork 0
mirror of https://github.com/zumbiepig/MineXLauncher.git synced 2025-06-08 09:24:48 +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;

14
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,17 +172,17 @@ 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) {
articleAnimationLock = true;
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null; const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (modal) { if (!articleAnimationLock && modal) {
modal.style.animation = 'article 0.5s ease-in-out reverse'; articleAnimationLock = true;
modal.style.animation = 'article-2 0.5s ease-in-out alternate 1';
modal.addEventListener( modal.addEventListener(
'animationend', 'animationend',
() => { () => {
@ -193,7 +192,6 @@ const article = {
{ once: true } { once: true }
); );
} }
}
}, },
}; };