nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 13:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

use aspect ratios in tailwind 3.0 and remove css hacks

Browse Source
This commit is contained in:
spencerwooo
2021-12-18 09:43:24 +08:00
parent e20a2f52a5
commit 51b05631c3
4 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/FileListing.tsx
+1 -1
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>
components/previews/AudioPreview.tsx
+1 -1
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
components/previews/MarkdownPreview.tsx
+2 -2
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>
) )
components/previews/VideoPreview.tsx
+8 -10
View File
@@ -15,16 +15,14 @@ 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="aspect-video"
className="absolute top-0 left-0 w-full h-full" url={file['@microsoft.graph.downloadUrl']}
url={file['@microsoft.graph.downloadUrl']} controls
controls width="100%"
width="100%" height="100%"
height="100%" 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">