YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: add container-queries tailwind plugin

Browse Source
This commit is contained in:
Steven
2023-10-14 14:13:55 +08:00
parent c58820fa64
commit 5359d5a66d
7 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

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

11
web/pnpm-lock.yaml generated
View File

@ -20,6 +20,9 @@ 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.3)
axios:
specifier: ^0.27.2
version: 0.27.2
@ -1307,6 +1310,14 @@ packages:
resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
dev: true
/@tailwindcss/container-queries@0.1.1(tailwindcss@3.3.3):
resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
peerDependencies:
tailwindcss: '>=3.2.0'
dependencies:
tailwindcss: 3.3.3
dev: false
/@trivago/prettier-plugin-sort-imports@3.4.0(prettier@2.6.2):
resolution: {integrity: sha512-485Iailw8X5f7KetzRka20RF1kPBEINR5LJMNwlBZWY1gRAlVnv5dZzyNPnLxSP0Qcia8HETa9Cdd8LlX9o+pg==}
peerDependencies:

4
web/src/components/Header.tsx
View File

@ -88,13 +88,13 @@ const Header = () => {
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
showHeader && "opacity-60 pointer-events-auto"
}`}
onClick={() => layoutStore.setHeaderStatus(false)}
></div>
<header
className={`relative w-56 sm:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 -translate-x-full sm:translate-x-0 ${
className={`relative w-56 sm:w-full h-full max-h-screen border-r sm:border-none dark:border-r-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 -translate-x-full sm:translate-x-0 ${
showHeader && "translate-x-0 shadow-2xl"
}`}
>

6
web/src/components/HomeSidebar.tsx
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 @lg:sticky top-0 left-0 w-full @lg:w-56 h-full shrink-0 pointer-events-none @lg:pointer-events-auto z-10 ${
showHomeSidebar && "pointer-events-auto"
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full bg-black 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 @lg:!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 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 @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 ${
showHomeSidebar && "!translate-x-0 shadow-2xl"
}`}
>

2
web/src/components/MobileHeader.tsx
View File

@ -12,7 +12,7 @@ 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 @lg: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"

4
web/src/pages/Home.tsx
View File

@ -6,8 +6,8 @@ import MobileHeader from "@/components/MobileHeader";
const Home = () => {
return (
<div className="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="@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">
<MobileHeader />
<div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />

1
web/tailwind.config.js
View File

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