Ivan/blog-fs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 适配小屏自适应

Browse Source
This commit is contained in:
Ivan Li 2021-07-15 21:08:33 +08:00
parent ad881bde93
commit 6f959b1d30
8 changed files with 163 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/layouts/global-layout.module.css → components/layouts/global-sidebar.module.css
View File

@ -1,8 +1,14 @@
.wrapper {
@apply bg-green-400 text-white min-h-screen;
@apply absolute top-0 left-0 right-0 bottom-0 sm:static;
@apply -translate-x-full transform transition-transform sm:transition-none sm:translate-x-0;
:global(.dark) & {
@apply bg-gray-800 text-gray-400;
}
&.focusOpen {
@apply translate-x-0;
}
}
.sidebar {
@apply overflow-hidden flex flex-col fixed top-0;
@ -11,8 +17,9 @@
}
.avatar {
@apply w-16 h-16;
@apply md:w-36 md:h-36 rounded-full;
@apply w-36 h-36 rounded-full;
@apply sm:w-16 sm:h-16;
@apply md:w-36 md:h-36;
@apply mx-auto md:my-8 flex-none;
:global(.dark) & {
@ -21,14 +28,14 @@
}
.name {
@apply md:text-3xl md:tracking-wide font-mono;
@apply sm:text-base md:text-3xl text-3xl md:tracking-wide font-mono;
@apply md:my-8 my-4 flex-none select-all;
}
.nav {
@apply my-auto text-left self-center;
}
.navItem {
@apply leading-8 md:text-lg cursor-pointer my-2;
@apply leading-8 md:text-lg sm:text-base text-lg cursor-pointer my-2;
@apply tracking-widest;
small {
@apply text-xs md:inline hidden;

23
components/layouts/global-sidebar.tsx
View File

@ -1,19 +1,28 @@
import React, { FC } from "react";
import styles from "./global-layout.module.css";
import Image from "next/image";
import React, { FC, MouseEventHandler } from "react";
import styles from "./global-sidebar.module.css";
import Link from "next/link";
import classnames from 'classnames';
import classnames from "classnames";
const fullName = `${process.env.NEXT_PUBLIC_FIRST_NAME} ${process.env.NEXT_PUBLIC_LAST_NAME}`;
interface Props {
className: string;
focusOpen?: boolean;
onClick?: MouseEventHandler;
}
export const GlobalSidebar: FC<Props> = ({className}) => {
export const GlobalSidebar: FC<Props> = ({
className,
focusOpen = false,
onClick,
}) => {
return (
<div className={classnames(className, styles.wrapper)}>
<div
className={classnames(className, styles.wrapper, {
[styles.focusOpen]: focusOpen,
})}
onClick={onClick}
>
<aside className={classnames(className, styles.sidebar)}>
<img className={styles.avatar} src="/images/avatar.png" />
<h2 className={styles.name}>{fullName}</h2>

91
package-lock.json generated
View File

@ -8,9 +8,13 @@
"version": "0.1.0",
"dependencies": {
"@apollo/client": "^3.3.16",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"apollo-link-scalars": "^2.1.3",
"babel-plugin-superjson-next": "^0.3.0",
"classnames": "^2.2.6",
"clsx": "^1.1.1",
"date-fns": "^2.22.1",
"graphql": "^15.5.0",
"graphql-scalars": "^1.10.0",
@ -1227,6 +1231,51 @@
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
"dev": true
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "0.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "1.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.1.14",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"react": ">=16.x"
}
},
"node_modules/@fullhuman/postcss-purgecss": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@ -3499,6 +3548,14 @@
"mimic-response": "^1.0.0"
}
},
"node_modules/clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
"engines": {
"node": ">=6"
}
},
"node_modules/code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@ -10611,6 +10668,35 @@
}
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.14",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
"requires": {
"prop-types": "^15.7.2"
}
},
"@fullhuman/postcss-purgecss": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@ -12531,6 +12617,11 @@
"mimic-response": "^1.0.0"
}
},
"clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
},
"code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",

4
package.json
View File

@ -11,9 +11,13 @@
},
"dependencies": {
"@apollo/client": "^3.3.16",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"apollo-link-scalars": "^2.1.3",
"babel-plugin-superjson-next": "^0.3.0",
"classnames": "^2.2.6",
"clsx": "^1.1.1",
"date-fns": "^2.22.1",
"graphql": "^15.5.0",
"graphql-scalars": "^1.10.0",

16
pages/_app.module.css
View File

@ -2,10 +2,10 @@
@apply flex;
}
.sidebar {
@apply md:w-64 w-32 flex-none;
@apply w-full md:w-64 sm:w-32 flex-none;
}
.primary {
@apply flex-auto;
@apply flex-auto w-screen min-w-0;
@apply bg-gray-100 text-gray-700;
:global(.dark) & {
@apply bg-gray-700 text-gray-300;
@ -21,3 +21,15 @@
@apply bg-gray-800;
}
}
.headerBtn {
@apply sm:hidden text-green-400;
@apply w-4 h-4 p-0 focus:outline-none;
&.opened {
@apply text-white;
}
& > * {
@apply absolute;
}
}

28
pages/_app.tsx
View File

@ -1,22 +1,44 @@
import "../styles/globals.css";
import "tailwindcss/tailwind.css";
import React from "react";
import React, { useState } from "react";
import { GlobalSidebar } from "../components/layouts/global-sidebar";
import styles from "./_app.module.css";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../commons/graphql/client";
import { ThemeProvider, useTheme } from '../commons/theme';
import { ThemeProvider, useTheme } from "../commons/theme";
import { SwitchTheme } from "../components/switch-theme";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCross,
faHamburger,
faTimes,
} from "@fortawesome/free-solid-svg-icons";
import clsx from "clsx";
function MyApp({ Component, pageProps }) {
const apolloClient = useApollo(pageProps);
const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
return (
<ApolloProvider client={apolloClient}>
<ThemeProvider>
<div className={styles.page}>
<GlobalSidebar className={styles.sidebar} />
<GlobalSidebar
className={styles.sidebar}
focusOpen={focusOpenSidebar}
onClick={() => setFocusOpenSidebar(false)}
/>
<div className={styles.primary}>
<header className={styles.pageHeader}>
<button
className={clsx(styles.headerBtn, {
[styles.opened]: focusOpenSidebar,
})}
onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
>
<FontAwesomeIcon
icon={focusOpenSidebar ? faTimes : faHamburger}
/>
</button>
<h1>{"Ivan Li 的个人博客"}</h1>
<div className={styles.actions}>
<SwitchTheme />

0
pages/articles/article.css
View File

4
pages/articles/article.module.css
View File

@ -1,7 +1,7 @@
.articleDetail {
}
.article {
@apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;
@apply bg-gray-50 md:mx-2 overflow-hidden rounded-xl my-6;
:global(.dark) & {
@apply bg-gray-800;
@ -9,7 +9,7 @@
& > header {
@apply my-8 mx-4;
h1 {
@apply text-4xl font-medium mb-4;
@apply text-2xl md:text-4xl font-medium mb-4;
:global(.dark) & {
@apply text-gray-200;