From 3d0654a43ff2317eaa61cae238dd55db47b54946 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Thu, 15 Apr 2021 22:28:07 +0200
Subject: [PATCH] changes to route and first steps for tasks page
---
client/src/App.tsx | 6 +-
.../helpers/Rerouters/ProtectedRoute.tsx | 18 +++++-
client/src/components/ui/Header/header.scss | 7 +++
client/src/components/ui/Header/index.tsx | 7 ++-
client/src/components/ui/Navigation/index.tsx | 2 +-
.../components/ui/Navigation/navigation.scss | 57 +++++++++++++++++--
client/src/images/svg/hamburger.svg | 5 ++
client/src/images/svg/profile.svg | 4 ++
client/src/index.scss | 2 +-
client/src/pages/Tasks/index.tsx | 15 ++---
10 files changed, 103 insertions(+), 20 deletions(-)
create mode 100644 client/src/images/svg/hamburger.svg
create mode 100644 client/src/images/svg/profile.svg
diff --git a/client/src/App.tsx b/client/src/App.tsx
index d3835a3..38ea359 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -16,9 +16,9 @@ export default function App() {
<Router>
<Suspense fallback={false}>
<Switch>
- <ProtectedRoute path="/tasks" component={Tasks} />
- <ProtectedRoute path="/projects" component={Projects} />
- <ProtectedRoute path="/stats" component={Stats} />
+ <ProtectedRoute path="/tasks" component={<Tasks />} />
+ <ProtectedRoute path="/projects" component={<Projects />} />
+ <ProtectedRoute path="/stats" component={<Stats />} />
<LoginRoute path="/login" component={Login} />
<LoginRoute path="/register" component={Register} />
<Route path="/" component={Home} />
diff --git a/client/src/components/helpers/Rerouters/ProtectedRoute.tsx b/client/src/components/helpers/Rerouters/ProtectedRoute.tsx
index 1d9ff00..c3f3dae 100644
--- a/client/src/components/helpers/Rerouters/ProtectedRoute.tsx
+++ b/client/src/components/helpers/Rerouters/ProtectedRoute.tsx
@@ -1,17 +1,29 @@
-import { ComponentType } from 'react';
import { Redirect, Route } from 'react-router-dom';
import { isLoggedIn } from 'adapters/api';
+import Navigation from 'components/ui/Navigation';
+import Header from 'components/ui/Header';
interface Props {
path: string,
exact?: boolean,
- component: ComponentType<any>
+ component: JSX.Element
}
+
+
export default function ProtectedRoute({ path, exact, component }: Props) {
+ console.log(component);
+
+
if (isLoggedIn()) {
return (
- <Route path={path} exact={exact} component={component} />
+ <Route path={path} exact={exact} render={() =>
+ <>
+ <Header />
+ <Navigation />
+ { component }
+ </>
+ } />
);
}
return (
diff --git a/client/src/components/ui/Header/header.scss b/client/src/components/ui/Header/header.scss
index e69de29..4d13738 100644
--- a/client/src/components/ui/Header/header.scss
+++ b/client/src/components/ui/Header/header.scss
@@ -0,0 +1,7 @@
+.site-header {
+ display: flex;
+ justify-content: space-between;
+ img {
+ padding: 35px;
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Header/index.tsx b/client/src/components/ui/Header/index.tsx
index 2733442..22257f9 100644
--- a/client/src/components/ui/Header/index.tsx
+++ b/client/src/components/ui/Header/index.tsx
@@ -1,7 +1,12 @@
import './header.scss';
+import hamburger from 'images/svg/hamburger.svg';
+import profile from 'images/svg/profile.svg';
export default function Header() {
return (
- <div></div>
+ <header className="site-header">
+ <img src={hamburger} alt="Navigation"/>
+ <img src={profile} alt="Profile"/>
+ </header>
);
}
\ No newline at end of file
diff --git a/client/src/components/ui/Navigation/index.tsx b/client/src/components/ui/Navigation/index.tsx
index 2eeebf0..4a019f2 100644
--- a/client/src/components/ui/Navigation/index.tsx
+++ b/client/src/components/ui/Navigation/index.tsx
@@ -6,7 +6,7 @@ import background from 'images/svg/nav-bg.svg';
export default function Navigation() {
return (
- <nav>
+ <nav className="site-nav">
<NavLink to="/tasks" activeClassName="active" className="nav-link">
<span className="icon material-icons-outlined">
home
diff --git a/client/src/components/ui/Navigation/navigation.scss b/client/src/components/ui/Navigation/navigation.scss
index 5edd637..5d192c4 100644
--- a/client/src/components/ui/Navigation/navigation.scss
+++ b/client/src/components/ui/Navigation/navigation.scss
@@ -1,5 +1,54 @@
-.active {
- .icon {
- font-family: 'Material Icons';
+@use 'styles/settings.scss'as s;
+
+.site-nav {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .background {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ max-width: 100%;
+ height: auto;
+ z-index: -1;
}
-}
\ No newline at end of file
+
+ .nav-link {
+ color: s.$body-color;
+ position: relative;
+ padding: 10px 30px;
+ display: flex;
+
+ .icon {
+ font-size: 24px;
+ line-height: 1;
+ }
+
+ .label {
+ position: absolute;
+ opacity: 0;
+ font-size: 12px;
+ top: 50%;
+ left: 60px;
+ transform: translateY(-50%);
+ z-index: -1;
+ }
+
+ &.active {
+ padding-right: 60px;
+ .icon {
+ font-family: 'Material Icons';
+ }
+
+ .label {
+ opacity: 1;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/src/images/svg/hamburger.svg b/client/src/images/svg/hamburger.svg
new file mode 100644
index 0000000..b370555
--- /dev/null
+++ b/client/src/images/svg/hamburger.svg
@@ -0,0 +1,5 @@
+<svg width="31" height="24" viewBox="0 0 31 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="31" height="4" rx="2" fill="#3A5255"/>
+<rect y="10" width="24" height="4" rx="2" fill="#3A5255"/>
+<rect y="20" width="12" height="4" rx="2" fill="#3A5255"/>
+</svg>
diff --git a/client/src/images/svg/profile.svg b/client/src/images/svg/profile.svg
new file mode 100644
index 0000000..c4a4f4e
--- /dev/null
+++ b/client/src/images/svg/profile.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="25" viewBox="0 0 21 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" width="15" height="15" rx="7.5" fill="#3A5255"/>
+<rect y="18" width="21" height="7" rx="3.5" fill="#3A5255"/>
+</svg>
diff --git a/client/src/index.scss b/client/src/index.scss
index 526bfef..46b3eb5 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -46,7 +46,7 @@ a {
max-width: 1280px;
width: 100%;
margin: 0 auto;
- padding: 20px;
+ padding: 30px;
}
h1, h2, h3, h4, h5, h6 {
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 8393561..6e12d53 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -1,13 +1,14 @@
-import Navigation from 'components/ui/Navigation';
import './tasks.scss';
export default function Tasks() {
return (
- <div className="tasks-page">
- <Navigation />
- <main>
- <h1>Tasks</h1>
- </main>
- </div>
+ <>
+ <div className="tasks-page page-container">
+ <main className="content-container">
+ <h1>Tasks</h1>
+ <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
+ </main>
+ </div>
+ </>
);
}
\ No newline at end of file
--
GitLab