Skip to content
Snippets Groups Projects
Commit 2e96d7ac authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

improved usability for tasks page

parent ecbaec55
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
@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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment