diff --git a/src/App.tsx b/src/App.tsx index f70283c..5425c12 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,8 +9,7 @@ import { queryIsEmpty } from './components/navigation/Navbar/utils'; import SubjectList from './views/SubjectList'; import { ILoadingState, IFilterQuery } from './types'; import NothingFound from './views/NothingFound'; -import UploadForm from './views/Admin/UploadForm'; -import LogInForm from './views/Admin/LogInForm'; +import Admin from './views/Admin'; const useDidUpdate: typeof useEffect = (func, dependencies) => { const didMountRef = useRef(false); @@ -72,15 +71,8 @@ const App = () => { setLoading={setLoading} /> - - - - - + + diff --git a/src/components/navigation/Header/utils.ts b/src/components/navigation/Header/utils.ts index 43201ea..1d5b50c 100644 --- a/src/components/navigation/Header/utils.ts +++ b/src/components/navigation/Header/utils.ts @@ -9,11 +9,11 @@ const genName = ( return error.toString(); } - if (path === '/u') { + if (path === '/a/u') { return 'Upload form'; } - if (path === '/l') { + if (path === '/a/l') { return 'login'; } diff --git a/src/components/navigation/Navbar/main.css b/src/components/navigation/Navbar/main.css index f53458e..69532fd 100644 --- a/src/components/navigation/Navbar/main.css +++ b/src/components/navigation/Navbar/main.css @@ -87,6 +87,7 @@ height: 6vh; border-radius: 20px; width: 75vw; + color: rgb(54, 54, 69); font-size: 2.5vh; } diff --git a/src/views/Admin/LogInForm/index.tsx b/src/views/Admin/LogInForm/index.tsx index e9a7086..e7dcab8 100644 --- a/src/views/Admin/LogInForm/index.tsx +++ b/src/views/Admin/LogInForm/index.tsx @@ -1,8 +1,10 @@ import React, { Dispatch, SetStateAction, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; + import { ILoadingState } from '../../../types'; import { handleFormSubmit } from '../../../utils'; import { handleSuccessfulLogin } from './handlers'; +import './main.css'; type props = { setLoading: Dispatch>; @@ -16,14 +18,17 @@ const LogInForm: React.FC = ({ setLoading, token, setToken }) => { useEffect(() => { setLoading({ fetching: false, error: '' }); if (token) { - historyPush('/u'); + historyPush('/a/u'); } }, [setLoading, historyPush, token]); return (
- handleFormSubmit(e, 'api/login', (res: Response) => handleSuccessfulLogin(res, setToken)) + handleFormSubmit(e, 'api/login', (res: Response) => + handleSuccessfulLogin(res, setToken) + ) } > diff --git a/src/views/Admin/LogInForm/main.css b/src/views/Admin/LogInForm/main.css index e69de29..563573b 100644 --- a/src/views/Admin/LogInForm/main.css +++ b/src/views/Admin/LogInForm/main.css @@ -0,0 +1,24 @@ +#logIn { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + padding: 2vh; + padding-top: 5vh; +} + +#logIn input { + height: 6vh; + border: none; + border-radius: 1000px; + box-sizing: border-box; + padding: 0 2vh; + width: 100%; + margin: 1vh 0; +} + +#logIn input[type='submit'] { + background-color: rgb(255, 109, 109); + color: white; +} \ No newline at end of file diff --git a/src/views/Admin/UploadForm/index.tsx b/src/views/Admin/UploadForm/index.tsx index 7cfd11a..54db40a 100644 --- a/src/views/Admin/UploadForm/index.tsx +++ b/src/views/Admin/UploadForm/index.tsx @@ -5,6 +5,7 @@ import Select from '../../../components/uploadForm/Select'; import { ILoadingState } from '../../../types'; import { handleFormSubmit } from '../../../utils'; import selectOptions from './selectOptions.json'; +import './main.css'; type props = { setLoading: Dispatch>; @@ -16,62 +17,54 @@ const UploadForm: React.FC = ({ setLoading, token, setToken }) => { const { push: historyPush } = useHistory(); useEffect(() => { - setLoading({ fetching: false, error: '' }); if (!token) { - historyPush('/l'); + historyPush('/a/l'); } }, [setLoading, historyPush, token]); return ( - <> - - handleFormSubmit(e, 'api/card/create', undefined, { - Authorization: `Token ${localStorage.token}` - }) - } - > - - + + handleFormSubmit(e, 'api/card/create', undefined, { + Authorization: `Token ${localStorage.token}` + }) + } + > + + - - - - - + + - - - - + + ); }; diff --git a/src/views/Admin/UploadForm/main.css b/src/views/Admin/UploadForm/main.css index e69de29..020147e 100644 --- a/src/views/Admin/UploadForm/main.css +++ b/src/views/Admin/UploadForm/main.css @@ -0,0 +1,28 @@ +#uploadForm { + padding: 2vh; + display: flex; + flex-direction: column; +} + +#uploadForm>input, +#uploadForm>select, +#uploadForm>aside { + height: 6vh; + border: none; + border-radius: 1000px; + box-sizing: border-box; + padding: 0 2vh; + appearance: none; + width: 100%; + background-color: white; + margin: 1vh 0; + color: inherit; +} + +#uploadForm aside { + display: flex; + align-items: center; + justify-content: center; +} + +#uploadFrom input[type='file'] {} \ No newline at end of file diff --git a/src/views/Admin/index.tsx b/src/views/Admin/index.tsx index e3351c4..06b2993 100644 --- a/src/views/Admin/index.tsx +++ b/src/views/Admin/index.tsx @@ -1,7 +1,66 @@ -import React from 'react'; +import React, { Dispatch, SetStateAction, useEffect } from 'react'; +import { Link, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'; -const Admin: React.FC = () => { - return
; +import { ILoadingState } from '../../types'; +import LogInForm from './LogInForm'; +import UploadForm from './UploadForm'; +import './main.css'; + +type props = { + token: string | null; + setToken: Dispatch>; + setLoading: Dispatch>; +}; + +const Admin: React.FC = ({ token, setToken, setLoading }) => { + const { path, url } = useRouteMatch(); + + useEffect(() => { + setLoading({ fetching: false, error: '' }); + }, [setLoading]); + + return ( +
+ + + + + + + + + + + + +
+ ); }; export default Admin; diff --git a/src/views/Admin/main.css b/src/views/Admin/main.css index e69de29..69d34c8 100644 --- a/src/views/Admin/main.css +++ b/src/views/Admin/main.css @@ -0,0 +1,52 @@ +#admin { + min-height: calc(79.5vh + 20px); + height: 100%; +} + +#admin nav { + background-color: white; + padding: 2vh; + padding-top: calc(20px + 0.75vh); + margin-top: -20px; + border-radius: 0 0 20px 20px; + height: 16vmax; + position: relative; +} + +#admin nav ul { + display: flex; + flex-direction: column; + height: 100%; + flex-wrap: wrap; + justify-content: space-around; +} + +#admin nav li { + list-style-type: none; +} + +#admin nav li a { + color: rgb(255, 109, 109); + border-bottom: 1px solid rgb(255, 109, 109); +} + +#admin nav li a, +#admin nav #logSwitch a { + text-decoration: none; +} + +#admin nav #logSwitch { + position: absolute; + background-color: rgb(255, 109, 109); + border: none; + padding: 1.5vh; + height: 6vh; + border-radius: 20px; + font-size: 2.5vh; + right: 2vh; + top: calc((16vmax + 20px - 6vh) / 2); +} + +#admin nav #logSwitch a { + color: white; +} \ No newline at end of file