Skip to content

Commit

Permalink
Design update (WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
NeKzor committed May 24, 2024
1 parent bdfb2fe commit cb94a72
Show file tree
Hide file tree
Showing 12 changed files with 364 additions and 186 deletions.
6 changes: 3 additions & 3 deletions src/server/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { tw } from 'twind';
import { AppDispatchContext, AppState, AppStateContext, reducer } from './AppState.ts';
import { RouteMeta } from './Routes.ts';
import Navbar from './components/Navbar.tsx';
import Footer from './components/Footer.tsx';
import Sidebar from './components/Sidebar.tsx';

const metaNames: (keyof RouteMeta)[] = [
'title',
Expand Down Expand Up @@ -105,10 +105,10 @@ export const Body = ({ initialState, children }: BodyProps) => {
<AppDispatchContext.Provider value={dispatch}>
<div className={tw`flex flex-col h-screen`}>
<Navbar />
<main className={tw`mt-[88px] m-4 grow`}>
<Sidebar queued={state.clients.length} />
<main className={tw`pr-4 mt-[70px] sm:ml-64 grow`}>
{children}
</main>
<Footer />
</div>
</AppDispatchContext.Provider>
</AppStateContext.Provider>
Expand Down
37 changes: 17 additions & 20 deletions src/server/app/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,24 @@ import { tw } from 'twind';

const Footer = () => {
return (
<footer className={tw`bg-white shadow dark:bg-gray-900`}>
<footer className={tw`fixed floating bottom-0 left-0 z-50 w-full bg-white dark:bg-gray-900`}>
<div className={tw`w-full mx-auto max-w-screen-xl p-4 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`}>
NeKz
</a>
</span>
<ul
className={tw`flex flex-wrap items-center mb-6 gap-6 text-sm font-medium text-gray-500 mb-0 dark:text-gray-400`}
className={tw`flex flex-wrap items-center gap-2 text-sm font-medium text-gray-500 mb-0 dark:text-gray-400`}
>
<li>
<a href='https://discord.gg/p2sr' target='_blank' className={tw`hover:underline`}>
Discord
</a>
</li>
<li>
<a href='https://github.com/NeKzor/autorender' target='_blank' className={tw`hover:underline`}>
GitHub
</a>
</li>
<li>
<a href='/privacy' target='_blank' className={tw`hover:underline`}>
Privacy Policy
Privacy
</a>
</li>
<li>
Expand All @@ -36,21 +35,19 @@ const Footer = () => {
target='_blank'
className={tw`hover:underline`}
>
Report Issue
</a>
</li>
<li>
<a href='https://github.com/NeKzor/autorender' target='_blank' className={tw`hover:underline`}>
Source Code
</a>
</li>
<li>
<a href='/status' className={tw`hover:underline`}>
Status
Report
</a>
</li>
</ul>
</div>
<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`}>
NeKz
</a>
</span>
</div>
</footer>
);
};
Expand Down
35 changes: 28 additions & 7 deletions src/server/app/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,30 @@ const Navbar = () => {

return (
<nav
className={tw`bg-white dark:bg-gray-900 fixed w-full z-20 top-0 left-0`}
className={tw`bg-white opacity-95 dark:bg-gray-900 fixed w-full z-50 top-0 left-0 pr-[16px]`}
>
<div className={tw`max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4`}>
<div className={tw`flex flex-wrap items-center justify-between mx-auto p-2`}>
<div id='nav-items-left' className={tw`flex items-center`}>
<a href='/' aria-label='Go to home'>
<button
id='nav-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`}
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
viewBox='0 0 24 24'
>
<path stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M5 7h14M5 12h14M5 17h14' />
</svg>
</button>
<a href='/' aria-label='Go to home' className={tw`hover:animate-spin`}>
<img
src='/assets/images/autorender_logo.webp'
alt='Autorender logo'
Expand Down Expand Up @@ -80,7 +99,7 @@ const Navbar = () => {
<input
type='text'
id='nav-search-input'
className={tw`block w-full p-2 pl-10 md:min-w-[300px] lg:min-w-[400px] text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500`}
className={tw`block w-full p-2 pl-10 md:min-w-[300px] lg:min-w-[400px] text-sm text-gray-900 border-1 border-gray-300 rounded-[12px] focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-900 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500`}
placeholder='Search'
value={searchValue}
autoComplete='off'
Expand Down Expand Up @@ -136,7 +155,7 @@ const Navbar = () => {
id='theme-toggle-button'
aria-label='Toggle theme'
type='button'
className={tw`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: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
Expand Down Expand Up @@ -192,9 +211,11 @@ const Navbar = () => {
>
<div className={tw`px-4 py-3`}>
<span className={tw`block text-sm text-gray-900 dark:text-white`}>{state.user.username}</span>
<span className={tw`block text-sm text-gray-500 truncate dark:text-gray-400`}>
{
/* <span className={tw`block text-sm text-gray-500 truncate dark:text-gray-400`}>
{state.user.username}
</span>
</span> */
}
</div>
<ul className={tw`py-2`} aria-labelledby='user-menu-button'>
<li>
Expand Down
2 changes: 1 addition & 1 deletion src/server/app/components/RerenderModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const RerenderModal = ({ isCoop }: { isCoop: boolean }) => {
className={tw`hidden flex fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full`}
>
<div className={tw`relative w-full max-w-sm max-h-full`}>
<div className={tw`relative bg-white rounded-lg shadow dark:bg-gray-700`}>
<div className={tw`relative bg-white rounded-lg shadow dark:bg-gray-800`}>
<button
id='rerender-modal-close-button'
type='button'
Expand Down
2 changes: 1 addition & 1 deletion src/server/app/components/ShareModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const ShareModal = () => {
className={tw`hidden flex fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full`}
>
<div className={tw`relative w-full max-w-lg max-h-full`}>
<div className={tw`relative bg-white rounded-lg shadow dark:bg-gray-700`}>
<div className={tw`relative bg-white rounded-lg shadow dark:bg-gray-800`}>
<button
id='share-modal-close-button'
type='button'
Expand Down
158 changes: 158 additions & 0 deletions src/server/app/components/Sidebar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/*
* Copyright (c) 2023-2024, NeKz
*
* SPDX-License-Identifier: MIT
*/

import * as React from 'react';
import { tw } from 'twind';
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`}
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`}>
<ul className={tw`space-y-2 font-medium`}>
<li>
<a
href='/'
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`}
>
<svg
className={tw`w-6 h-6 text-gray-800 dark:text-white`}
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
viewBox='0 0 24 24'
>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='2'
d='m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5'
/>
</svg>
<span className={tw`ml-3`}>Home</span>
</a>
</li>
<li>
<a
href='/status'
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`}
>
<svg
className={tw`w-6 h-6 text-gray-800 dark:text-white`}
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
viewBox='0 0 24 24'
>
<path stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M5 7h14M5 12h14M5 17h10' />
</svg>
<span className={tw`flex-1 ml-3 whitespace-nowrap`}>Queue</span>
{queued > 0 && (
<span
className={tw`inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300`}
>
{queued}
</span>
)}
</a>
</li>
{username !== undefined && (
<li>
<a
href={`/profile/${username}`}
className={tw`flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-800 group`}
>
<svg
className={tw`w-6 h-6 text-gray-800 dark:text-white`}
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
viewBox='0 0 24 24'
>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='2'
d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 0a8.949 8.949 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.948 8.948 0 0 0 12 21Zm3-11a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'
/>
</svg>
<span className={tw`flex-1 ml-3 whitespace-nowrap`}>Your renders</span>
</a>
</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`}
>
<svg
className={tw`w-6 h-6 text-gray-800 dark:text-white`}
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
viewBox='0 0 24 24'
>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='2'
d='M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
/>
</svg>
<span className={tw`flex-1 ml-3 whitespace-nowrap`}>History</span>
</a>
</li>
{username !== undefined && (
<li>
<a
href='/bookmarks'
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`}
>
<svg
className={tw`w-6 h-6 text-gray-800 dark:text-white`}
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
viewBox='0 0 24 24'
>
<path
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='2'
d='m17 21-5-4-5 4V3.889a.92.92 0 0 1 .244-.629.808.808 0 0 1 .59-.26h8.333a.81.81 0 0 1 .589.26.92.92 0 0 1 .244.63V21Z'
/>
</svg>

<span className={tw`flex-1 ml-3 whitespace-nowrap`}>Bookmarks</span>
</a>
</li>
)}
</ul>
</div>
<Footer />
</aside>
);
};

export default Sidebar;
12 changes: 6 additions & 6 deletions src/server/app/components/VideoCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ type VideoCardData =

export const VideoCard = ({ video }: { video: VideoCardData }) => {
return (
<div
className={tw`p-4 rounded shadow bg-white dark:bg-gray-900 dark:text-white max-w-[378px]`}
>
<a href={`/videos/${video.share_id}`}>
<a href={`/videos/${video.share_id}`}>
<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]`}
>
<div
className={tw`relative flex items-center justify-center h-48 mb-4${
video.thumbnail_url_small ? '' : ' bg-gray-300 dark:bg-gray-700 rounded-[12px]'
Expand Down Expand Up @@ -111,7 +111,7 @@ export const VideoCard = ({ video }: { video: VideoCardData }) => {
</div>
</div>
</div>
</a>
</div>
</div>
</a>
);
};
10 changes: 5 additions & 5 deletions src/server/app/components/VideoRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ const RequestedBy = ({ video }: { video: VideoRowData }) => {
export const VideoRow = ({ video }: { video: VideoRowData }) => {
return (
<div
className={tw`w-full pl-4 pt-4 pb-4 pr-2 rounded shadow bg-white dark:bg-gray-900 dark:text-white`}
className={tw`w-full pl-4 pr-2 rounded bg-white dark:bg-gray-900 dark:text-white`}
>
<div className={tw`rounded-xl shadow-sm overflow-hidden`}>
<div className={tw`rounded-xl overflow-hidden`}>
<div className={tw`sm:flex`}>
<div className={tw`sm:shrink-0`}>
<a href={`/videos/${video.share_id}`} aria-label='Go to video'>
Expand Down Expand Up @@ -163,7 +163,7 @@ export const VideoRow = ({ video }: { video: VideoRowData }) => {
aria-label='Open video menu'
data-dropdown-toggle={`video-menu-dropdown-${video.share_id}`}
type='button'
className={tw`mx-2 hover:text-white focus:outline-none font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-gray-500 dark:text-gray-500 dark:hover:text-white dark:focus:ring-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700`}
className={tw`mx-2 hover:text-white focus:outline-none font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:text-gray-500 dark:hover:text-white dark:focus:ring-gray-800`}
>
<svg
className={tw`w-3 h-3 text-gray-800 dark:text-white`}
Expand All @@ -177,15 +177,15 @@ export const VideoRow = ({ video }: { video: VideoRowData }) => {
</button>
<div
id={`video-menu-dropdown-${video.share_id}`}
className={tw`z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
className={tw`z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg w-44 dark:bg-gray-800`}
>
<ul className={tw`py-2`} aria-labelledby='video-menu-button'>
<li>
<div
data-modal-target='share-modal'
data-modal-toggle='share-modal'
id={`video-share-button-${video.share_id}`}
className={tw`video-share-button block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white cursor-pointer`}
className={tw`video-share-button block px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white cursor-pointer`}
>
Share
</div>
Expand Down
Loading

0 comments on commit cb94a72

Please sign in to comment.