x/onedrive
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

layout stuff for mobile and desktop

Browse source
This commit is contained in:
spencerwooo 2022-01-21 22:12:07 +08:00
parent 1b658b6a98
commit c3daf370ec
No known key found for this signature in database
GPG key ID: 24CD550268849CA0
4 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/FileListing.tsx
View file

@ -34,7 +34,8 @@ import VideoPreview from './previews/VideoPreview'
import PDFPreview from './previews/PDFPreview'
import URLPreview from './previews/URLPreview'
import DefaultPreview from './previews/DefaultPreview'
import { PreviewContainer } from './previews/Containers'
import { DownloadBtnContainer, PreviewContainer } from './previews/Containers'
import DownloadButtonGroup from './DownloadBtnGtoup'
// Disabling SSR for some previews (image gallery view, and PDF view)
const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@ -545,10 +546,15 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
switch (extensions[fileExtension]) {
case preview.image:
return (
<PreviewContainer>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="mx-auto" src={downloadUrl} alt={fileName} />
</PreviewContainer>
<>
<PreviewContainer>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="mx-auto" src={downloadUrl} alt={fileName} />
</PreviewContainer>
<DownloadBtnContainer>
<DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
</DownloadBtnContainer>
</>
)
case preview.text:

12
components/Navbar.tsx
View file

@ -50,17 +50,21 @@ const Navbar = () => {
<SearchModal searchOpen={searchOpen} setSearchOpen={setSearchOpen} />
<div className="flex items-center justify-between w-full mx-auto px-4 py-1">
<div className="flex items-center space-x-4 justify-between w-full mx-auto px-4 py-1">
<Link href="/" passHref>
<a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
<a className="dark:text-white hover:opacity-80 flex items-center py-2 md:p-2 space-x-2">
<Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
<span className="sm:block hidden font-bold">{siteConfig.title}</span>
</a>
</Link>
<div className="flex items-center space-x-4 text-gray-700">
<button className="dark:text-white hover:opacity-80" onClick={openSearchBox}>
<div className="flex items-center flex-1 md:flex-initial space-x-4 text-gray-700">
<button
className="flex-1 flex items-center space-x-2 rounded-lg bg-gray-100 dark:bg-gray-800 md:w-40 px-2.5 py-1.5 dark:text-white hover:opacity-80"
onClick={openSearchBox}
>
<FontAwesomeIcon icon="search" />
<span className="text-sm font-medium">Search ...</span>
</button>
{siteConfig.links.length !== 0 &&

6
components/SearchModal.tsx
View file

@ -62,7 +62,7 @@ function SearchModal({
return (
<Transition appear show={searchOpen} as={Fragment}>
<Dialog as="div" className="inset-0 z-50 fixed overflow-y-auto" onClose={closeSearchBox}>
<Dialog as="div" className="inset-0 z-[200] fixed overflow-y-auto" onClose={closeSearchBox}>
<div className="min-h-screen text-center px-4">
<Transition.Child
as={Fragment}
@ -85,7 +85,7 @@ function SearchModal({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="border rounded border-gray-400/30 shadow-xl my-20 text-left w-full max-w-3xl transform transition-all inline-block overflow-hidden ">
<div className="border rounded border-gray-400/30 shadow-xl my-12 text-left w-full max-w-3xl transform transition-all inline-block overflow-hidden">
<Dialog.Title
as="h3"
className="flex items-center space-x-4 dark:text-white border-b bg-gray-50 border-gray-400/30 p-4 dark:bg-gray-800"
@ -102,7 +102,7 @@ function SearchModal({
<div className="px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 font-medium text-xs">ESC</div>
</Dialog.Title>
<div className="bg-white dark:text-white dark:bg-gray-900">
<div className="bg-white dark:text-white dark:bg-gray-900 max-h-[80vh] overflow-x-hidden overflow-y-scroll">
{results.loading && (
<div className="text-center px-4 py-12 text-sm font-medium">
<LoadingIcon className="animate-spin w-4 h-4 mr-2 inline-block svg-inline--fa" />

2
pages/api/search.ts
View file

@ -3,7 +3,6 @@ import type { NextApiRequest, NextApiResponse } from 'next'
import { encodePath, getAccessToken } from '.'
import apiConfig from '../../config/api.json'
import siteConfig from '../../config/site.json'
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
// Get access token from storage
@ -22,7 +21,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
headers: { Authorization: `Bearer ${accessToken}` },
params: {
select: 'id,name,file,folder,parentReference',
top: '10',
},
})
res.status(200).json(data.value)