From 7490b8d464fcf208e93c10a7d443ca4cbdcc6379 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sat, 23 Mar 2024 09:28:10 +0100 Subject: [PATCH] added & design help component --- src/app/app.component.scss | 7 +- src/app/app.routes.ts | 6 +- .../components/header/header.component.html | 4 +- .../components/header/header.component.ts | 9 +- .../components/help/help.component.html | 109 ++++++++++++++++++ .../components/help/help.component.scss | 73 ++++++++++++ .../components/help/help.component.spec.ts | 23 ++++ .../shared/components/help/help.component.ts | 18 +++ .../components/sidebar/sidebar.component.scss | 4 +- src/assets/img/arrow-left.svg | 5 + src/styles.scss | 5 +- 11 files changed, 249 insertions(+), 14 deletions(-) create mode 100644 src/app/shared/components/help/help.component.html create mode 100644 src/app/shared/components/help/help.component.scss create mode 100644 src/app/shared/components/help/help.component.spec.ts create mode 100644 src/app/shared/components/help/help.component.ts create mode 100644 src/assets/img/arrow-left.svg diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 5fde856..15906e2 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -7,6 +7,7 @@ app-sidebar { width: 232px; height: 100%; background-color: var(--bgSidebar); + overflow-y: none; } main { @@ -22,8 +23,10 @@ app-header { } .content { - width: calc(100vw - 232px - 64px); + width: calc(100% - 128px); + min-width: calc(100vw - 232px - 128px); height: 100vh; - padding: 64px 0 0 64px; + padding: 64px; background-color: var(--bgContent); + overflow-y: auto; } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 77ac85e..b6606f5 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,4 +1,8 @@ import { Routes } from '@angular/router'; import { SummaryComponent } from './components/summary/summary.component'; +import { HelpComponent } from './shared/components/help/help.component'; -export const routes: Routes = [{ path: '', component: SummaryComponent }]; +export const routes: Routes = [ + { path: '', component: SummaryComponent }, + { path: 'help', component: HelpComponent }, +]; diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html index d2762ac..a0bd22e 100644 --- a/src/app/shared/components/header/header.component.html +++ b/src/app/shared/components/header/header.component.html @@ -1,9 +1,9 @@
Kanban Project Management Tool
-
+
-
+
G
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts index c780cb4..dbfd57c 100644 --- a/src/app/shared/components/header/header.component.ts +++ b/src/app/shared/components/header/header.component.ts @@ -1,12 +1,11 @@ import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; @Component({ selector: 'app-header', standalone: true, - imports: [], + imports: [RouterModule], templateUrl: './header.component.html', - styleUrl: './header.component.scss' + styleUrl: './header.component.scss', }) -export class HeaderComponent { - -} +export class HeaderComponent {} diff --git a/src/app/shared/components/help/help.component.html b/src/app/shared/components/help/help.component.html new file mode 100644 index 0000000..c85b2a8 --- /dev/null +++ b/src/app/shared/components/help/help.component.html @@ -0,0 +1,109 @@ +
+
+

Help

+ +
+

+ Welcome to the help page for Join, your guide to + using our kanban project management tool. Here, we'll provide an overview of + what Join is, how it can benefit you, and how to + use it. +

+

What is Join?

+

+ Join is a kanban-based project management tool designed and built by a group + of dedicated students as part of their web development bootcamp at the + Developer Akademie. +
+
+ Kanban, a Japanese term meaning "billboard", is a highly effective method to + visualize work, limit work-in-progress, and maximize efficiency (or flow). + Join leverages the principles of kanban to help + users manage their tasks and projects in an intuitive, visual interface. +
+
+ It is important to note that Join is designed as + an educational exercise and is not intended for extensive business usage. + While we strive to ensure the best possible user experience, we cannot + guarantee consistent availability, reliability, accuracy, or other aspects + of quality regarding Join. +

+ +

How to use it

+

+ Here is a step-by-step guide on how to use + Join: +

+ + + + + + + + + + + + + + + + + + + + + +
1. +

Exploring the Board

+

+ When you log in to Join, you'll find a + default board. This board represents your project and contains four + default lists: "To Do", "In Progress", “Await feedback” and "Done". +

+
2. +

Creating Contacts

+

+ In Join, you can add contacts to + collaborate on your projects. Go to the "Contacts" section, click on + "New contact", and fill in the required information. Once added, these + contacts can be assigned tasks and they can interact with the tasks on + the board. +

+
3. +

Adding Cards

+

+ Now that you've added your contacts, you can start adding cards. Cards + represent individual tasks. Click the "+" button under the appropriate + list to create a new card. Fill in the task details in the card, like + task name, description, due date, assignees, etc. +

+
4. +

Moving Cards

+

+ As the task moves from on stage to another, xou can reflect that on + the board by dragging and dropping the card from one list to another. +

+
5. +

Deleting Cards

+

+ Once a task is completed, you can either move it to the "Done" list or + delete it. Deleting a card will permanently remove it from the board. + Please exercise caution when deleting cards, as this action is + irreversible. +
+ Remember that using Join effectively + requires consistent updates from you and your team to ensure the board + reflects the current state of your project. +
+ Have more questions about Join? Feel free + to contact us at .We're here to help you! +

+
+
+

Enjoy using Join!

+
diff --git a/src/app/shared/components/help/help.component.scss b/src/app/shared/components/help/help.component.scss new file mode 100644 index 0000000..c3ef99e --- /dev/null +++ b/src/app/shared/components/help/help.component.scss @@ -0,0 +1,73 @@ +section { + width: 100%; + a { + text-decoration: none; + color: var(--gray); + &:hover { + color: var(--light-blue); + } + } +} + +h1 { + font-size: 61px; + font-weight: 700; +} + +h2 { + font-size: 27px; + font-weight: 700; + margin: 24px 0; +} + +h3 { + font-size: 20px; + font-weight: 700; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; + img { + width: 32px; + height: 32px; + cursor: pointer; + margin-left: 48px; + } + &:hover { + width: 36px; + height: 36px; + background-color: var(--light-gray); + border-radius: 18px; + } +} + +.content-table { + margin-top: 24px; + td:first-child { + display: flex; + font-size: 27px; + font-weight: 700; + margin-right: 35px; + } + p { + margin: 16px 0; + } +} + +.color { + color: var(--light-blue); +} + +@media (max-width: 634px) { + .navbar-links { + padding: 48px 16px 0 16px; + } + + .navbar-links h1 { + font-size: 36px; + font-weight: 700; + } +} diff --git a/src/app/shared/components/help/help.component.spec.ts b/src/app/shared/components/help/help.component.spec.ts new file mode 100644 index 0000000..ca57ff3 --- /dev/null +++ b/src/app/shared/components/help/help.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HelpComponent } from './help.component'; + +describe('HelpComponent', () => { + let component: HelpComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HelpComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HelpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/help/help.component.ts b/src/app/shared/components/help/help.component.ts new file mode 100644 index 0000000..583bd6f --- /dev/null +++ b/src/app/shared/components/help/help.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-help', + standalone: true, + imports: [RouterModule], + templateUrl: './help.component.html', + styleUrl: './help.component.scss', +}) +export class HelpComponent { + constructor(private location: Location) {} + + backClicked() { + this.location.back(); + } +} diff --git a/src/app/shared/components/sidebar/sidebar.component.scss b/src/app/shared/components/sidebar/sidebar.component.scss index bb5ca01..df8ae1e 100644 --- a/src/app/shared/components/sidebar/sidebar.component.scss +++ b/src/app/shared/components/sidebar/sidebar.component.scss @@ -35,7 +35,7 @@ nav { align-items: center; font-size: 16px; width: 100%; - color: var(--lightgray); + color: var(--light-gray); } &:hover { background-color: var(--very-dark-blue); @@ -56,7 +56,7 @@ nav { display: flex; text-align: center; justify-content: center; - color: var(--lightgray); + color: var(--light-gray); padding-top: 2vh; padding-bottom: 2vh; cursor: pointer; diff --git a/src/assets/img/arrow-left.svg b/src/assets/img/arrow-left.svg new file mode 100644 index 0000000..4b70ce0 --- /dev/null +++ b/src/assets/img/arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/styles.scss b/src/styles.scss index 9db9182..8444555 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -9,7 +9,8 @@ --bgContent: #f6f7f8; --white: #fff; --black: #000; - --lightgray: #cdcdcd; + --gray: #a8a8a8; + --light-gray: #cdcdcd; --light-blue: #29abe2; --very-dark-blue: #091931; --very-light-gray: #f6f7f8; @@ -26,7 +27,7 @@ } *::-webkit-scrollbar-thumb { - background-color: var(--lightgray); + background-color: var(--light-gray); border-radius: 10px; border: 3px solid var(--black); }