From 2e96d7ac6b8ea26ceddc8f28aa83317b9ba258e7 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Mon, 21 Jun 2021 11:28:33 +0200
Subject: [PATCH] improved usability for tasks page
---
client/src/pages/Tasks/index.tsx | 13 ++++++++-----
client/src/pages/Tasks/tasks.scss | 22 ++++++++++++++--------
2 files changed, 22 insertions(+), 13 deletions(-)
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 5dd3d91..f1ab3db 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -30,7 +30,7 @@ export default function Tasks() {
.filter(task =>
!task.assigned.some(ass => ass.user === user?.id)
&& task.requirements.some(
- req => teams?.some(team => team.role === req.role)
+ req => teams?.some(team => team.role === req.role)
)
);
@@ -40,9 +40,11 @@ export default function Tasks() {
<div className="content-container">
<section className="intro-section">
<h1 className="underlined">Tasks</h1>
+ <p>Hey {user.realname ?? user.username}, you have <strong>{tasks.length} {tasks.length !== 1 ? 'tasks' : 'task'}</strong>.</p>
</section>
- <p>Hey {user.realname ?? user.username}, you have <strong>{tasks.length} {tasks.length !== 1 ? 'tasks' : 'task'}</strong>.</p>
<section className="tasks-container">
+ <h2>Your tasks</h2>
+ <p>Here are some tasks for which you were assigned directly ordered by their importancy.</p>
{
tasks.length > 0
? (
@@ -61,9 +63,10 @@ export default function Tasks() {
})}
</div>
)
- : (<div className="task-error">No open tasks found</div>)
+ : (<div className="task-error">No open tasks found.</div>)
}
- <h2>Other tasks you could do</h2>
+ <h2>Recommended tasks</h2>
+ <p>Here are some tasks you could do, since you fit their requirements.</p>
{
acceptableTasks.length > 0
? (
@@ -79,7 +82,7 @@ export default function Tasks() {
}
</div>
)
- : (<div className="task-error">You don't fit the requirements for any other tasks</div>)
+ : (<div className="task-error">No open tasks found.</div>)
}
</section>
</div>
diff --git a/client/src/pages/Tasks/tasks.scss b/client/src/pages/Tasks/tasks.scss
index 4da644b..6dd3952 100644
--- a/client/src/pages/Tasks/tasks.scss
+++ b/client/src/pages/Tasks/tasks.scss
@@ -1,18 +1,24 @@
-
-@use 'styles/settings' as s;
-@use 'styles/mixins' as mx;
-@use 'styles/functions' as fn;
+@use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
+@use 'styles/functions'as fn;
.tasks-page {
h2 {
+
margin-top: 40px;
+ margin-bottom: 10px;
+
+ @include mx.breakpoint(medium) {
+ margin-top: 60px;
+ margin-bottom: 10px;
+ }
}
.intro-section {
font-size: fn.toRem(18);
@include mx.breakpoint(large) {
- font-size: fn.toRem(24);
+ font-size: fn.toRem(20);
}
}
@@ -24,12 +30,12 @@
margin-bottom: 30px;
}
}
-
+
.task-error {
margin-top: 20px;
border-radius: 5px;
padding: 20px;
background: s.$background-white;
+ text-align: center;
}
-}
-
+}
\ No newline at end of file
--
GitLab