diff --git a/web/assets/images/bg.jpg b/web/assets/images/bg.jpg new file mode 100644 index 00000000..12b80c49 Binary files /dev/null and b/web/assets/images/bg.jpg differ diff --git a/web/package.json b/web/package.json index b846bddf..df79f718 100644 --- a/web/package.json +++ b/web/package.json @@ -38,6 +38,7 @@ "autoprefixer": "^10.2.6", "css-loader": "^5.2.6", "esbuild-loader": "^2.13.1", + "file-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "mini-css-extract-plugin": "^1.6.2", "postcss": "^8.3.5", @@ -46,6 +47,7 @@ "ts-node": "^10.0.0", "tsconfig-paths": "^3.9.0", "typescript": "^4.3.4", + "url-loader": "^4.1.1", "webpack": "^5.41.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" diff --git a/web/src/App.tsx b/web/src/App.tsx index b931a66a..ced9c866 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -22,7 +22,7 @@ export const App: React.FC = React.memo(() => { return ( <div - className={clsx({ + className={clsx('h-screen w-screen', { dark: darkMode, })} > diff --git a/web/src/routes/Entry/index.tsx b/web/src/routes/Entry/index.tsx index ed13e2cd..4e2e3aa2 100644 --- a/web/src/routes/Entry/index.tsx +++ b/web/src/routes/Entry/index.tsx @@ -1,16 +1,21 @@ import React from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; import { LoginView } from './LoginView'; +import bgImage from '../../../assets/images/bg.jpg'; export const EntryRoute = React.memo(() => { return ( - <div> - <div> + <div className="h-full flex flex-row"> + <div className="w-142 sm:w-full bg-gray-600 text-white"> <Switch> <Route path="/entry/login" component={LoginView} /> <Redirect to="/entry/login" /> </Switch> </div> + <div + className="flex-1 sm:hidden bg-center bg-cover bg-no-repeat" + style={{ backgroundImage: `url(${bgImage})` }} + /> </div> ); }); diff --git a/web/src/routes/Main.tsx b/web/src/routes/Main.tsx index 0b303ebd..04d90395 100644 --- a/web/src/routes/Main.tsx +++ b/web/src/routes/Main.tsx @@ -19,7 +19,7 @@ const NavbarNavItem: React.FC<{ export const MainRoute: React.FC = React.memo(() => { return ( - <div className="flex h-screen w-screen"> + <div className="flex"> <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1"> {/* Navbar */} <div className="flex-1"> diff --git a/web/tailwind.config.js b/web/tailwind.config.js index e6419765..13384545 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -8,9 +8,17 @@ module.exports = { }, darkMode: 'class', // or 'media' theme: { + screens: { + 'lg': {'min': '1024px'}, + 'md': {'max': '767px'}, + 'sm': {'max': '639px'}, + }, extend: { borderRadius: { "1/2": '50%' + }, + spacing: { + "142": "35.5rem" } }, }, diff --git a/web/types/index.d.ts b/web/types/index.d.ts new file mode 100644 index 00000000..20c9243a --- /dev/null +++ b/web/types/index.d.ts @@ -0,0 +1 @@ +declare module '*.jpg'; diff --git a/web/webpack.config.ts b/web/webpack.config.ts index e2da1240..7aa7acd4 100644 --- a/web/webpack.config.ts +++ b/web/webpack.config.ts @@ -68,6 +68,14 @@ const config: Configuration = { }, ], }, + { + test: /\.(png|jpg|gif|woff|woff2|svg|eot|ttf)$/, + loader: 'url-loader', + options: { + limit: 8192, + name: 'assets/[name].[hash:7].[ext]', + }, + }, ], }, resolve: { diff --git a/yarn.lock b/yarn.lock index 3673ab2d..fc3f6e5c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2002,6 +2002,14 @@ figures@^2.0.0: dependencies: escape-string-regexp "^1.0.5" +file-loader@^6.2.0: + version "6.2.0" + resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d" + integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + file-uri-to-path@1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd" @@ -5339,6 +5347,15 @@ urix@^0.1.0: resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72" integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI= +url-loader@^4.1.1: + version "4.1.1" + resolved "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2" + integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA== + dependencies: + loader-utils "^2.0.0" + mime-types "^2.1.27" + schema-utils "^3.0.0" + url-parse@^1.4.3, url-parse@^1.5.1: version "1.5.1" resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"