chore: update response styles

This commit is contained in:
Steven 2023-11-08 22:10:15 +08:00
parent e76509a577
commit 5ff0234c71
7 changed files with 8 additions and 26 deletions

View File

@ -15,7 +15,6 @@
"@matejmazur/react-katex": "^3.1.3",
"@mui/joy": "5.0.0-beta.13",
"@reduxjs/toolkit": "^1.9.7",
"@tailwindcss/container-queries": "^0.1.1",
"axios": "^1.6.0",
"classnames": "^2.3.2",
"copy-to-clipboard": "^3.3.3",

View File

@ -20,9 +20,6 @@ dependencies:
'@reduxjs/toolkit':
specifier: ^1.9.7
version: 1.9.7(react-redux@8.1.3)(react@18.2.0)
'@tailwindcss/container-queries':
specifier: ^0.1.1
version: 0.1.1(tailwindcss@3.3.5)
axios:
specifier: ^1.6.0
version: 1.6.0
@ -1301,14 +1298,6 @@ packages:
resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
dev: true
/@tailwindcss/container-queries@0.1.1(tailwindcss@3.3.5):
resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
peerDependencies:
tailwindcss: '>=3.2.0'
dependencies:
tailwindcss: 3.3.5
dev: false
/@trivago/prettier-plugin-sort-imports@3.4.0(prettier@2.6.2):
resolution: {integrity: sha512-485Iailw8X5f7KetzRka20RF1kPBEINR5LJMNwlBZWY1gRAlVnv5dZzyNPnLxSP0Qcia8HETa9Cdd8LlX9o+pg==}
peerDependencies:

View File

@ -21,7 +21,7 @@ const HeaderDrawer = () => {
};
return (
<div>
<div className="sm:hidden">
<IconButton onClick={toggleDrawer(true)}>
<Icon.Menu className="w-5 h-auto dark:text-gray-200" />
</IconButton>

View File

@ -9,18 +9,18 @@ const HomeSidebar = () => {
return (
<div
className={`fixed @lg:sticky top-0 left-0 w-full @lg:w-56 h-full shrink-0 pointer-events-none @lg:pointer-events-auto z-10 ${
className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
showHomeSidebar && "pointer-events-auto"
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 @lg:!hidden ${
className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
showHomeSidebar && "opacity-60 pointer-events-auto"
}`}
onClick={() => layoutStore.setHomeSidebarStatus(false)}
></div>
<aside
className={`absolute @lg:relative top-0 right-0 w-56 pr-2 @lg:w-full h-full max-h-screen border-l sm:border-none dark:border-l-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 @lg:bg-transparent @lg:shadow-none transition-all duration-300 translate-x-full @lg:translate-x-0 ${
className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen border-l sm:border-none dark:border-l-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
showHomeSidebar && "!translate-x-0 shadow-2xl"
}`}
>

View File

@ -13,14 +13,8 @@ const MobileHeader = (props: Props) => {
const [titleText] = useState("MEMOS");
return (
<div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex @lg:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
<div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
<div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
{/* <div
className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent"
onClick={() => layoutStore.setHeaderStatus(true)}
>
<Icon.Menu className="w-5 h-auto dark:text-gray-200" />
</div> */}
<HeaderDrawer />
<span
className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"

View File

@ -5,8 +5,8 @@ import MobileHeader from "@/components/MobileHeader";
const Home = () => {
return (
<div className="@container w-full flex flex-row justify-start items-start">
<div className="w-full px-4 @lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
<div className="w-full flex flex-row justify-start items-start">
<div className="w-full px-4 md:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
<MobileHeader />
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
<MemoList />

View File

@ -34,5 +34,5 @@ module.exports = {
},
},
},
plugins: [require("@tailwindcss/container-queries")],
plugins: [],
};