Design improvements

NeKzor · Jun 8, 2024 · 79b7c50 · 79b7c50
1 parent 78c49e4
commit 79b7c50
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 50 deletions.
diff --git a/docker/volumes/storage/files/aptag_avatar.webp b/docker/volumes/storage/files/aptag_avatar.webp
diff --git a/docker/volumes/storage/files/mel_avatar.webp b/docker/volumes/storage/files/mel_avatar.webp
diff --git a/src/server/app/App.tsx b/src/server/app/App.tsx
@@ -108,7 +108,7 @@ export const Body = ({ initialState, children }: BodyProps) => {
         <div className={tw`flex flex-col h-screen`}>
           <Navbar />
           <Sidebar queued={state.clients.length} />
-          <main className={tw`pr-4 mt-[70px] sm:ml-64 grow`}>
+          <main className={tw`p-4 mt-[70px] lg:ml-60 grow`}>
             {children}
           </main>
         </div>

diff --git 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
@@ -43,7 +43,7 @@ const Footer = () => {
       <div className={tw`w-full mx-auto max-w-screen-xl p-4 pt-0 flex items-center justify-between`}>
         <span className={tw`text-sm text-gray-500 text-center dark:text-gray-400`}>
           © 2024{' '}
-          <a href='https://github.com/NeKzor' className={tw`hover:underline`}>
+          <a href='https://nekz.io' className={tw`hover:underline`}>
             NeKz
           </a>
         </span>

diff --git a/src/server/app/components/Navbar.tsx b/src/server/app/components/Navbar.tsx
@@ -15,16 +15,17 @@ const Navbar = () => {
 
   return (
     <nav
-      className={tw`bg-white opacity-95 dark:bg-gray-900 fixed w-full z-50 top-0 left-0 pr-[16px]`}
+      className={tw`bg-white dark:bg-gray-900 fixed w-full z-50 top-0 left-0 pr-[16px]`}
     >
       <div className={tw`flex flex-wrap items-center justify-between mx-auto p-2`}>
         <div id='nav-items-left' className={tw`flex items-center`}>
           <button
-            id='nav-sidebar'
+            id='sidebar-button'
+            className={tw`focus:outline-none focus-visible:ring-2 hover:bg-gray-200 hover:dark:bg-gray-700 dark:bg-gray-900 rounded-lg text-sm p-2.5 mr-4`}
+            aria-controls='default-sidebar'
             aria-label='Sidebar'
             type='button'
             aria-expanded='false'
-            className={tw`text-gray-500 dark:text-gray-400 rounded-lg text-sm p-2.5 mr-4`}
           >
             <svg
               className={tw`w-6 h-6 text-gray-800 dark:text-white`}
@@ -49,7 +50,7 @@ const Navbar = () => {
           <a
             href='/'
             aria-label='Go to home'
-            className={tw`self-center pl-1 pt-1 text-2xl font-semibold whitespace-nowrap dark:text-white`}
+            className={tw`hidden md:block self-center pl-1 pt-1 text-2xl font-semibold whitespace-nowrap dark:text-white`}
           >
             Autorender
           </a>
@@ -155,7 +156,7 @@ const Navbar = () => {
             id='theme-toggle-button'
             aria-label='Toggle theme'
             type='button'
-            className={tw`z-100 text-gray-500 inline-flex items-center justify-center dark:text-gray-400 hover:bg-gray-100 w-10 h-10 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-4`}
+            className={tw`z-100 text-gray-500 inline-flex items-center justify-center dark:text-gray-400 hover:bg-gray-100 w-10 h-10 dark:hover:bg-gray-700 focus:outline-none focus-visible:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-4`}
             data-tooltip-target='theme-toggle-button-tooltip'
           >
             <svg

diff --git a/src/server/app/components/Sidebar.tsx b/src/server/app/components/Sidebar.tsx
@@ -11,8 +11,8 @@ import Footer from './Footer.tsx';
 const Sidebar = ({ queued, username }: { queued: number; username?: string }) => {
   return (
     <aside
-      id='logo-sidebar'
-      className={tw`flex w-full flex-col justify-between fixed top-0 left-0 z-40 w-60 h-screen transition-transform -translate-x-full bg-white sm:translate-x-0 dark:bg-gray-900 dark:border-gray-900`}
+      id='default-sidebar'
+      className={tw`flex w-full flex-col justify-between fixed top-0 left-0 z-40 w-60 h-screen transition-transform -translate-x-full bg-white lg:translate-x-0 dark:bg-gray-900 dark:border-gray-900`}
       aria-label='Sidebar'
     >
       <div className={tw`h-full mt-[70px] px-3 pb-4 pt-4 overflow-y-auto bg-white dark:bg-gray-900`}>
@@ -95,7 +95,8 @@ const Sidebar = ({ queued, username }: { queued: number; username?: string }) =>
               </a>
             </li>
           )}
-          <li>
+          {
+            /* <li>
             <a
               href='/history'
               className={tw`flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 group`}
@@ -119,7 +120,8 @@ const Sidebar = ({ queued, username }: { queued: number; username?: string }) =>
               </svg>
               <span className={tw`flex-1 ml-3 whitespace-nowrap`}>History</span>
             </a>
-          </li>
+          </li> */
+          }
           {username !== undefined && (
             <li>
               <a

diff --git a/src/server/app/components/VideoCard.tsx b/src/server/app/components/VideoCard.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { tw } from 'twind';
 import { Video } from '~/shared/models.ts';
 import { VideoLength } from './VideoLength.tsx';
-import { toAgo } from '../utils.ts';
+import { getAutorenderAvatar, toAgo } from '../utils.ts';
 
 type VideoCardData =
   & Pick<
@@ -23,16 +23,20 @@ type VideoCardData =
     | 'thumbnail_url_large'
     | 'video_length'
     | 'board_changelog_id'
+    | 'board_source'
   >
   & {
     requested_by_discord_avatar_url: string | null;
   };
 
 export const VideoCard = ({ video }: { video: VideoCardData }) => {
   return (
-    <a href={`/videos/${video.share_id}`}>
+    <a
+      href={`/videos/${video.share_id}`}
+      className={tw`rounded-[12px]`}
+    >
       <div
-        className={tw`p-4 rounded-[12px] cursor-pointer transform transition duration-300 hover:bg-gray-200 dark:hover:bg-gray-800 dark:bg-gray-900 dark:text-white max-w-[378px]`}
+        className={tw`hover:bg-white-400 dark:hover:bg-gray-800 hover:bg-opacity-10 p-4 rounded-[12px] cursor-pointer transform transition duration-300 dark:bg-gray-900 dark:text-white max-w-[378px]`}
       >
         <div
           className={tw`relative flex items-center justify-center h-48 mb-4${
@@ -86,7 +90,7 @@ export const VideoCard = ({ video }: { video: VideoCardData }) => {
               ? (
                 <img
                   className={tw`w-10 h-10 text-gray-200 dark:text-gray-700 rounded-full`}
-                  src='/storage/files/autorender_avatar.webp'
+                  src={`/storage/files/${getAutorenderAvatar(video.board_source)}`}
                   alt='Avatar of autorender'
                 />
               )

diff --git a/src/server/app/components/VideoRow.tsx b/src/server/app/components/VideoRow.tsx
@@ -24,6 +24,7 @@ type VideoRowData =
     | 'thumbnail_url_small'
     | 'video_length'
     | 'board_changelog_id'
+    | 'board_source'
   >
   & {
     requested_by_discord_avatar_url: string | null;

diff --git a/src/server/app/index.tsx b/src/server/app/index.tsx
@@ -62,7 +62,7 @@ export const index = (
   const styleTag = getStyleTag(sheet, { nonce });
 
   const themeScriptTag =
-    `<script nonce="${nonce}">localStorage.getItem('color-theme')==='light'&&document.documentElement.classList.remove('dark')</script>`;
+    `<script nonce="${nonce}">const theme=localStorage.getItem('color-theme')??'dark';theme==='light'&&document.documentElement.classList.remove('dark');document.documentElement.style.setProperty('color-scheme',theme)</script>`;
 
   const moduleScriptTag =
     `<script nonce="${nonce}" src="/assets/js/module.js?v=${jsModuleVersion}" type="module"></script>`;

diff --git a/src/server/app/utils.ts b/src/server/app/utils.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { Video } from '~/shared/models.ts';
+import { BoardSource, Video } from '~/shared/models.ts';
 import { validateShareId } from '../utils.ts';
 
 export const toAgo = (date: Date | null) => {
@@ -88,3 +88,12 @@ export const parseSortableId = (id: string): SortableId | false => {
     return false;
   }
 };
+
+export const getAutorenderAvatar = (source: BoardSource) => {
+  switch (source) {
+    case BoardSource.Mel:
+      return 'mel_avatar.webp';
+    default:
+      return 'autorender_avatar.webp';
+  }
+};
diff --git a/src/server/app/views/Home.tsx b/src/server/app/views/Home.tsx
@@ -28,6 +28,7 @@ type LatestVideo =
     | 'thumbnail_url_large'
     | 'video_length'
     | 'board_changelog_id'
+    | 'board_source'
   >
   & {
     requested_by_username: string | null;
@@ -56,6 +57,7 @@ const getVideos = async (db: Database, sortableId?: SortableId) => {
           , videos.thumbnail_url_large
           , videos.video_length
           , videos.board_changelog_id
+          , videos.board_source
           , requester.username as requested_by_username
           , requester.discord_avatar_url as requested_by_discord_avatar_url
        from videos
@@ -88,7 +90,10 @@ export const Home = () => {
         <>
           <div className={tw`flex justify-center`}>
             <div
-              className={tw`grid grid-cols sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4`}
+              id='videos'
+              className={tw`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
+                            sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4`}
               x-last-video={getSortableIdByRendered(data.latestVideos.at(-1))}
             >
               {data.latestVideos.map((video) => <VideoCard video={video} />)}

diff --git a/src/server/app/views/Profile.tsx b/src/server/app/views/Profile.tsx
@@ -30,6 +30,7 @@ type JoinedVideo =
     | 'thumbnail_url_large'
     | 'video_length'
     | 'board_changelog_id'
+    | 'board_source'
     | 'pending'
   >
   & {
@@ -73,6 +74,7 @@ const getVideos = async (
           , thumbnail_url_large
           , video_length
           , board_changelog_id
+          , board_source
           , pending
           , requester.username as requested_by_username
           , requester.discord_avatar_url as requested_by_discord_avatar_url
@@ -245,9 +247,8 @@ export const Profile = () => {
               >
               </style>
             )}
-            {/* TODO: This shouldn't be rounded on all sides for 2xl but max-* does not work in twind */}
             <div
-              className={tw`p-4 flex rounded profile-bg ${
+              className={tw`p-4 flex rounded-[12px] profile-bg ${
                 !user.discord_banner ? getProfileColor(user) : ''
               } dark:text-white col-span-1 justify-center items-center gap-2`}
             >

diff --git a/src/server/app/views/Search.tsx b/src/server/app/views/Search.tsx
@@ -32,6 +32,7 @@ type JoinedVideo =
     | 'thumbnail_url_large'
     | 'video_length'
     | 'board_changelog_id'
+    | 'board_source'
   >
   & {
     requested_by_username: string | null;
@@ -69,6 +70,7 @@ const searchVideos = async (db: Database, query: string, sortableId?: SortableId
             , thumbnail_url_large
             , video_length
             , board_changelog_id
+            , board_source
             , requester.username as requested_by_username
             , requester.discord_avatar_url as requested_by_discord_avatar_url
          from videos

diff --git a/src/server/app/views/Status.tsx b/src/server/app/views/Status.tsx
@@ -173,7 +173,7 @@ export const Status = () => {
               const clientState = state?.clientStates.get(token.access_token_id);
 
               return (
-                <tr className={tw`bg-white border-gray-100 dark:bg-gray-900 dark:border-gray-800`}>
+                <tr className={tw`bg-gray-200 border-gray-100 dark:bg-gray-800 dark:border-gray-800`}>
                   <th
                     scope='row'
                     className={tw`px-6 py-4 break-all font-medium text-gray-900 dark:text-white`}
@@ -267,7 +267,7 @@ export const Status = () => {
               {queuedVideos.map((video) => {
                 const createdAt = new Date(video.created_at);
                 return (
-                  <tr className={tw`bg-white border-gray-100 dark:bg-gray-900 dark:border-gray-800`}>
+                  <tr className={tw`bg-gray-200 border-gray-100 dark:bg-gray-800 dark:border-gray-800`}>
                     <th
                       scope='row'
                       className={tw`px-6 py-4 break-all font-medium text-gray-900 dark:text-white`}
@@ -349,7 +349,7 @@ export const Status = () => {
               {failedAutorenderVideos.map((video) => {
                 const createdAt = new Date(video.created_at);
                 return (
-                  <tr className={tw`bg-white border-gray-100 dark:bg-gray-900 dark:border-gray-800`}>
+                  <tr className={tw`bg-gray-200 border-gray-100 dark:bg-gray-800 dark:border-gray-800`}>
                     <th
                       scope='row'
                       className={tw`px-6 py-4 break-all font-medium text-gray-900 dark:text-white`}