evanferrao
/
onedrive-vercel-index
mirror of https://github.com/evanferrao/onedrive-vercel-index.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

use aspect ratios in tailwind 3.0 and remove css hacks

This commit is contained in:
spencerwooo 2021-12-18 09:43:24 +08:00
parent e20a2f52a5
commit 51b05631c3
No known key found for this signature in database
GPG Key ID: 24CD550268849CA0
4 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/FileListing.tsx
View File

@ -334,7 +334,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
return ( return (
<div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded"> <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded">
<div className="dark:border-gray-700 grid items-center grid-cols-12 px-3 space-x-2 border-b border-gray-200"> <div className="dark:border-gray-700 grid items-center grid-cols-12 px-3 space-x-2 border-b border-gray-200">
<div className="md:col-span-6 col-span-12 font-bold">Name</div> <div className="md:col-span-6 col-span-12 font-bold py-3">Name</div>
<div className="md:block hidden col-span-3 font-bold">Last Modified</div> <div className="md:block hidden col-span-3 font-bold">Last Modified</div>
<div className="md:block hidden font-bold">Size</div> <div className="md:block hidden font-bold">Size</div>
<div className="md:block hidden font-bold">Actions</div> <div className="md:block hidden font-bold">Actions</div>

2
components/previews/AudioPreview.tsx
View File

@ -18,7 +18,7 @@ const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
<> <>
<div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded"> <div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded">
<div className="md:flex-row md:space-x-4 flex flex-col space-y-4"> <div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
<div className="dark:bg-gray-700 h-72 md:w-40 md:h-36 flex items-center justify-center w-full transition-all duration-75 bg-gray-100 rounded"> <div className="dark:bg-gray-700 aspect-square flex items-center justify-center w-full md:w-40 transition-all duration-75 bg-gray-100 rounded">
{playerStatus === PlayerState.Loading ? ( {playerStatus === PlayerState.Loading ? (
<div> <div>
<svg <svg

4
components/previews/MarkdownPreview.tsx
View File

@ -67,14 +67,14 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
if (error) { if (error) {
return ( return (
<div className={`${standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}`}> <div className={`${standalone ? 'bg-white dark:bg-gray-900 rounded p-3' : ''}`}>
<FourOhFour errorMsg={error.message} /> <FourOhFour errorMsg={error.message} />
</div> </div>
) )
} }
if (!data) { if (!data) {
return ( return (
<div className={standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}> <div className={standalone ? 'bg-white dark:bg-gray-900 rounded p-3' : ''}>
<Loading loadingText="Loading file content..." /> <Loading loadingText="Loading file content..." />
</div> </div>
) )

4
components/previews/VideoPreview.tsx
View File

@ -15,9 +15,8 @@ const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return ( return (
<> <>
<div className="dark:bg-gray-900 p-3 bg-white rounded"> <div className="dark:bg-gray-900 p-3 bg-white rounded">
<div className="relative" style={{ paddingTop: '56.25%' }}>
<ReactPlayer <ReactPlayer
className="absolute top-0 left-0 w-full h-full" className="aspect-video"
url={file['@microsoft.graph.downloadUrl']} url={file['@microsoft.graph.downloadUrl']}
controls controls
width="100%" width="100%"
@ -25,7 +24,6 @@ const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
config={{ file: { forceVideo: true } }} config={{ file: { forceVideo: true } }}
/> />
</div> </div>
</div>
<div className="flex flex-wrap justify-center mt-4 space-x-2"> <div className="flex flex-wrap justify-center mt-4 space-x-2">
<Toaster /> <Toaster />