From 0443a6bc4cf8e6510bdf87c97d1fca620dd56b72 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Thu, 22 Apr 2021 10:55:25 +0200
Subject: [PATCH] basic task styling
---
client/src/components/ui/Task/index.tsx | 37 +++++++++++++++++++++++++
client/src/components/ui/Task/task.scss | 21 ++++++++++++++
client/src/index.scss | 8 ++----
client/src/pages/Home/home.scss | 6 +++-
client/src/pages/Tasks/index.tsx | 19 +++++++++++++
client/src/pages/Tasks/tasks.scss | 10 ++++++-
6 files changed, 94 insertions(+), 7 deletions(-)
create mode 100644 client/src/components/ui/Task/index.tsx
create mode 100644 client/src/components/ui/Task/task.scss
diff --git a/client/src/components/ui/Task/index.tsx b/client/src/components/ui/Task/index.tsx
new file mode 100644
index 0000000..1e79ab2
--- /dev/null
+++ b/client/src/components/ui/Task/index.tsx
@@ -0,0 +1,37 @@
+import './task.scss';
+
+interface TaskInt {
+ name: string,
+ icon: string,
+ start: number,
+ end: number
+}
+
+interface Props {
+ task: TaskInt,
+ active?: boolean,
+}
+
+function formattedTime(date: Date) {
+ return date.getHours() + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+}
+
+export default function Task({ task, active }: Props) {
+ const start = new Date(task.start);
+ const end = new Date(task.end);
+
+
+
+ return (
+ <div className="task">
+ <div className="icon-container">
+ {task.icon}
+ </div>
+ <div className="text-container">
+ <h4>{task.name}</h4>
+ <div className="time">{formattedTime(start)} - {formattedTime(end)}</div>
+ </div>
+
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss
new file mode 100644
index 0000000..ed71250
--- /dev/null
+++ b/client/src/components/ui/Task/task.scss
@@ -0,0 +1,21 @@
+.task {
+ display: flex;
+ align-items: center;
+ padding: 15px 25px;
+ border-radius: 5px;
+ background: rgba(#fff, .5);
+
+ .icon-container {
+ font-size: 36px;
+ margin-right: 15px;
+ }
+
+ h4 {
+ margin-bottom: 0;
+ }
+
+ .time {
+ opacity: .75;
+ font-size: 12px;
+ }
+}
\ No newline at end of file
diff --git a/client/src/index.scss b/client/src/index.scss
index f83ef1d..7bdf4f6 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -19,9 +19,6 @@ body {
position: relative;
background: linear-gradient(to right, #fff 0%, #f2f2f2 100%);
- @include mx.breakpoint(xlarge) {
- padding: 5rem 0;
- }
}
a {
@@ -102,8 +99,9 @@ h2 {
}
h3 {
- font-size: fn.toRem(20);
+ font-size: fn.toRem(18);
margin-bottom: fn.toRem(12);
+ font-weight: s.$weight-semi-bold;
@include mx.breakpoint(large) {
font-size: fn.toRem(24);
@@ -162,4 +160,4 @@ h4 {
background: s.$accent;
}
}
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
index 8d01b07..3726789 100644
--- a/client/src/pages/Home/home.scss
+++ b/client/src/pages/Home/home.scss
@@ -6,6 +6,10 @@
.landing-page {
//General
+ @include mx.breakpoint(xlarge) {
+ padding: 5rem 0;
+ }
+
section {
margin-bottom: 70px;
@@ -447,4 +451,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 612654d..9270a75 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -1,4 +1,5 @@
import Page from 'components/ui/Page';
+import Task from 'components/ui/Task';
import './tasks.scss';
export default function Tasks() {
@@ -10,6 +11,24 @@ export default function Tasks() {
<h1 className="underlined">Tasks</h1>
<p>Hey Daniel, you have <strong>10 tasks</strong> for today.</p>
</section>
+ <section className="tasks-container">
+ <h2>Today</h2>
+ <div className="hour-container">
+ <h3>09:00</h3>
+ <Task task={{
+ name: 'Create API Routes',
+ icon: '🌎',
+ start: 1619074800000,
+ end: 1619076600000
+ }} />
+ <Task task={{
+ name: 'Create API Routes',
+ icon: '🌎',
+ start: 1619074800000,
+ end: 1619076600000
+ }} />
+ </div>
+ </section>
</main>
</Page>
<div className="background-container">
diff --git a/client/src/pages/Tasks/tasks.scss b/client/src/pages/Tasks/tasks.scss
index 494fdb8..401e675 100644
--- a/client/src/pages/Tasks/tasks.scss
+++ b/client/src/pages/Tasks/tasks.scss
@@ -4,6 +4,14 @@
.tasks-page {
.intro-section {
- font-size: fn.toRem(18);
+ font-size: fn.toRem(18);
+ }
+
+ .tasks-container {
+ margin-top: 50px;
+
+ .task {
+ margin-bottom: 30px;
+ }
}
}
\ No newline at end of file
--
GitLab