From 79b7c50cb68b3a98c744fde33525883184e0cbdd Mon Sep 17 00:00:00 2001 From: NeKz Date: Sat, 8 Jun 2024 17:31:20 +0200 Subject: [PATCH] Design improvements --- .../volumes/storage/files/aptag_avatar.webp | Bin 0 -> 356 bytes docker/volumes/storage/files/mel_avatar.webp | Bin 0 -> 534 bytes src/server/app/App.tsx | 2 +- src/server/app/assets/js/module.js | 30 ++++++++++ src/server/app/components/Footer.tsx | 2 +- src/server/app/components/Navbar.tsx | 11 ++-- src/server/app/components/Sidebar.tsx | 10 ++-- src/server/app/components/VideoCard.tsx | 12 ++-- src/server/app/components/VideoRow.tsx | 1 + src/server/app/index.tsx | 2 +- src/server/app/utils.ts | 11 +++- src/server/app/views/Home.tsx | 7 ++- src/server/app/views/Profile.tsx | 5 +- src/server/app/views/Search.tsx | 2 + src/server/app/views/Status.tsx | 6 +- src/server/app/views/Video.tsx | 52 +++++++++--------- src/server/app/views/tokens/Index.tsx | 2 +- src/server/app/views/tokens/Token.tsx | 2 +- 18 files changed, 107 insertions(+), 50 deletions(-) create mode 100644 docker/volumes/storage/files/aptag_avatar.webp create mode 100644 docker/volumes/storage/files/mel_avatar.webp diff --git a/docker/volumes/storage/files/aptag_avatar.webp b/docker/volumes/storage/files/aptag_avatar.webp new file mode 100644 index 0000000000000000000000000000000000000000..427db06ee622e91853467f12a817e4309a6fda9a GIT binary patch literal 356 zcmV-q0h|6(Nk&Fo0RRA3MM6+kP&gn^0RR9{2mqY{DkuOb06vjGnMtLiq9G?MXs{9q zKp83lZbHB*q{zE{aR#gW$PeZa-Y1XZC4wL{?4SQg+VsJy6c{jcf@2#jy@je8Hh=*B z{*)==Z|?qG9#`Pl-xj`Of>IPvj=^hIUepHHci<-D=C1>_|Ndm#In9VtY&OO%`O__())uo} z-;t1FC;~uX8IV>M#8}tSv}n50ws-gCR)S!EiA_cys>7b%X=M{(z5PeRh=3U$@*hmY zmFja`_;tZc3Uf@wHZhh3es&JVI1bR38o#t7D|fYGwdptwrb~1CXmSBYvBeK&%}1XQ zY>joNiiz_P#AY%BF98n{E|4BzG0uGeI$1wzl00odmNof29la(GupQ1ZBo0$Hc{i-e zRw^gq6KS3OY-HKT*ptt*9WS(eBoXVt0RH~Mm#i+^fs2u4GYPT%zOA{jB*5XI*_D6* z9+Aa?kM@t*$3|ktDpar`QOs~I9a1w7+>Jc^P;zl#ADC4;_)ob@$FsDX&5aM9wQ;JN zq*V##UU#DvuJ6w>n;*AiL&~J~4wwrs>98710Y`eB8Ug8_>nCW$|1P%fku&J6^3_iz z&K}PlBjIby|BS*i75?B2|JHrT1BHhVKQqO?@*{JAYlMj-%b5Rfb`1e@P5+<0?t_Sn z)XzU6vdu~fEc!NkvnRDRZZCCc{!{gHq6P@4!2yd?Friowy9?{RTYf%~A|{S1MuWIw zyyi}w2&cgl1gALiC$EJuP~7BYo1kO`LkGu>Tl_=MdjIj%4w~b+0xyMW)1h%Y*9XO= zPu5QeCtuKwG+EN@wM~*YO@(%m`3xkfv|Esbm3t-`3x!y@4~YN_viE1?iWnBSuLxZ9 zBWt89^2f#rRhXu(`wVAiV?~1+ {
-
+
{children}
diff --git a/src/server/app/assets/js/module.js b/src/server/app/assets/js/module.js index c8983be..c9da2f8 100644 --- a/src/server/app/assets/js/module.js +++ b/src/server/app/assets/js/module.js @@ -140,6 +140,35 @@ const navItemsRight = document.getElementById('nav-items-right'); const themeToggleButton = document.getElementById('theme-toggle-button'); const userMenuButton = document.getElementById('user-menu-button'); const loginButton = document.getElementById('login-button'); +const sidebarButton = document.getElementById('sidebar-button'); +const defaultSidebar = document.getElementById('default-sidebar'); + +if (sidebarButton) { + const main = document.querySelector('main'); + const videos = document.getElementById('videos'); + + sidebarButton.addEventListener('click', () => { + if (window.innerWidth > minWidthBreakpoints.md) { + if (defaultSidebar.classList.contains('hidden')) { + defaultSidebar.classList.remove('hidden'); + main.classList.add('lg:ml-60'); + defaultSidebar.removeAttribute('data-drawer-toggle'); + if (videos) { + videos.className = + 'grid grid-cols gap-x-2 gap-y-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'; + } + } else { + defaultSidebar.classList.add('hidden'); + main.classList.remove('lg:ml-60'); + defaultSidebar.setAttribute('data-drawer-toggle', 'default-sidebar'); + if (videos) { + videos.className = + 'grid grid-cols gap-x-2 gap-y-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'; + } + } + } + }); +} const search = { isOpen: false, @@ -260,6 +289,7 @@ if (themeToggleButton) { const setDarkMode = (colorTheme && colorTheme !== 'dark') || !document.documentElement.classList.contains('dark'); document.documentElement.classList[setDarkMode ? 'add' : 'remove']('dark'); + document.documentElement.style.setProperty('color-scheme', setDarkMode ? 'dark' : 'light'); localStorage.setItem('color-theme', setDarkMode ? 'dark' : 'light'); }); } diff --git a/src/server/app/components/Footer.tsx b/src/server/app/components/Footer.tsx index dec63e1..d4ecbe2 100644 --- a/src/server/app/components/Footer.tsx +++ b/src/server/app/components/Footer.tsx @@ -43,7 +43,7 @@ const Footer = () => {
© 2024{' '} - + NeKz diff --git a/src/server/app/components/Navbar.tsx b/src/server/app/components/Navbar.tsx index 498dcbc..95e6d79 100644 --- a/src/server/app/components/Navbar.tsx +++ b/src/server/app/components/Navbar.tsx @@ -15,16 +15,17 @@ const Navbar = () => { return (