chore: tweak max width

pull/3310/head
Steven 1 year ago
parent e16546f80a
commit f9258e41a0

@ -38,12 +38,7 @@ const UploadResourceButton = () => {
if (!fileInputRef.current || !fileInputRef.current.files) { if (!fileInputRef.current || !fileInputRef.current.files) {
return; return;
} }
const filesOnInput = Array.from(fileInputRef.current.files);
for (const file of fileInputRef.current.files) { for (const file of fileInputRef.current.files) {
const fileOnInput = filesOnInput.find((fileOnInput) => fileOnInput.name === file.name);
if (!fileOnInput) {
continue;
}
const { name: filename, size, type } = file; const { name: filename, size, type } = file;
const buffer = new Uint8Array(await file.arrayBuffer()); const buffer = new Uint8Array(await file.arrayBuffer());
const resource = await resourceStore.createResource({ const resource = await resourceStore.createResource({
@ -65,7 +60,7 @@ const UploadResourceButton = () => {
}; };
return ( return (
<IconButton size="sm"> <IconButton size="sm" disabled={state.uploadingFlag}>
<Icon.Paperclip className="w-5 h-5 mx-auto" /> <Icon.Paperclip className="w-5 h-5 mx-auto" />
<input <input
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"

@ -1,5 +1,4 @@
import { memo } from "react"; import { memo } from "react";
import { absolutifyLink } from "@/helpers/utils";
import { Resource } from "@/types/proto/api/v1/resource_service"; import { Resource } from "@/types/proto/api/v1/resource_service";
import { getResourceType, getResourceUrl } from "@/utils/resource"; import { getResourceType, getResourceUrl } from "@/utils/resource";
import MemoResource from "./MemoResource"; import MemoResource from "./MemoResource";
@ -28,7 +27,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
showPreviewImageDialog(imgUrls, index); showPreviewImageDialog(imgUrls, index);
}; };
const MediaCard = ({ resource, thumbnail }: { resource: Resource; thumbnail?: boolean }) => { const MediaCard = ({ resource }: { resource: Resource }) => {
const type = getResourceType(resource); const type = getResourceType(resource);
const url = getResourceUrl(resource); const url = getResourceUrl(resource);
@ -36,7 +35,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
return ( return (
<img <img
className="cursor-pointer min-h-full w-auto object-cover" className="cursor-pointer min-h-full w-auto object-cover"
src={resource.externalLink ? url : `${url}${thumbnail ? "?thumbnail=1" : ""}`} src={url}
onClick={() => handleImageClick(url)} onClick={() => handleImageClick(url)}
decoding="async" decoding="async"
loading="lazy" loading="lazy"
@ -48,7 +47,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
className="cursor-pointer w-full h-full object-contain bg-zinc-100 dark:bg-zinc-800" className="cursor-pointer w-full h-full object-contain bg-zinc-100 dark:bg-zinc-800"
preload="metadata" preload="metadata"
crossOrigin="anonymous" crossOrigin="anonymous"
src={absolutifyLink(url)} src={url}
controls controls
/> />
); );
@ -73,7 +72,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
key={resource.name} key={resource.name}
className="flex justify-center items-center border dark:border-zinc-900 rounded overflow-hidden hide-scrollbar hover:shadow-md" className="flex justify-center items-center border dark:border-zinc-900 rounded overflow-hidden hide-scrollbar hover:shadow-md"
> >
<MediaCard resource={resource} thumbnail /> <MediaCard resource={resource} />
</SquareDiv> </SquareDiv>
)); ));

@ -4,7 +4,7 @@ import MobileHeader from "@/components/MobileHeader";
const About = () => { const About = () => {
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 sm:px-6"> <div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300"> <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">

@ -87,7 +87,7 @@ const Archived = () => {
}; };
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 sm:px-6"> <div className="w-full px-4 sm:px-6">
<div className="w-full flex flex-col justify-start items-start"> <div className="w-full flex flex-col justify-start items-start">

@ -55,7 +55,7 @@ const Explore = () => {
}; };
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
{!md && ( {!md && (
<MobileHeader> <MobileHeader>
<ExploreSidebarDrawer /> <ExploreSidebarDrawer />

@ -69,7 +69,7 @@ const Home = () => {
}, [memoList]); }, [memoList]);
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
{!md && ( {!md && (
<MobileHeader> <MobileHeader>
<HomeSidebarDrawer /> <HomeSidebarDrawer />

@ -23,7 +23,7 @@ const Inboxes = () => {
}, []); }, []);
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 sm:px-6"> <div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300"> <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">

@ -66,7 +66,7 @@ const MemoDetail = () => {
}; };
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 sm:px-6"> <div className="w-full px-4 sm:px-6">
{parentMemo && ( {parentMemo && (

@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";
const NotFound = () => { const NotFound = () => {
return ( return (
<section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6"> <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
<p className="font-medium">{"The page you are looking for can't be found."}</p> <p className="font-medium">{"The page you are looking for can't be found."}</p>

@ -2,7 +2,7 @@ import MobileHeader from "@/components/MobileHeader";
const PermissionDenied = () => { const PermissionDenied = () => {
return ( return (
<section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6"> <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
<p className="font-medium">Permission denied</p> <p className="font-medium">Permission denied</p>

@ -74,7 +74,7 @@ const Resources = () => {
}; };
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 sm:px-6"> <div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300"> <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">

@ -57,7 +57,7 @@ const Setting = () => {
}, []); }, []);
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 sm:px-6"> <div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-gray-600 dark:text-gray-400"> <div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-gray-600 dark:text-gray-400">

@ -119,7 +119,7 @@ const Timeline = () => {
}; };
return ( return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
{!md && ( {!md && (
<MobileHeader> <MobileHeader>
<TimelineSidebarDrawer /> <TimelineSidebarDrawer />

@ -100,7 +100,7 @@ const UserProfile = () => {
}; };
return ( return (
<section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> <section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader /> <MobileHeader />
<div className="w-full px-4 sm:px-6 flex flex-col justify-start items-center"> <div className="w-full px-4 sm:px-6 flex flex-col justify-start items-center">
{!loadingState.isLoading && {!loadingState.isLoading &&

Loading…
Cancel
Save