From a5075d2accdff50e8ca844b02720c2f7adf97eea Mon Sep 17 00:00:00 2001 From: salgado2004 Date: Tue, 2 Jul 2024 10:20:47 -0300 Subject: [PATCH 1/4] feat: new component Sidenav --- .../componentes/sidenav/sidenav.component.css | 112 ++++++++++++++++++ .../sidenav/sidenav.component.html | 13 ++ .../sidenav/sidenav.component.spec.ts | 23 ++++ .../componentes/sidenav/sidenav.component.ts | 13 ++ 4 files changed, 161 insertions(+) create mode 100644 src/app/simulados/componentes/sidenav/sidenav.component.css create mode 100644 src/app/simulados/componentes/sidenav/sidenav.component.html create mode 100644 src/app/simulados/componentes/sidenav/sidenav.component.spec.ts create mode 100644 src/app/simulados/componentes/sidenav/sidenav.component.ts diff --git a/src/app/simulados/componentes/sidenav/sidenav.component.css b/src/app/simulados/componentes/sidenav/sidenav.component.css new file mode 100644 index 0000000..6ce7be9 --- /dev/null +++ b/src/app/simulados/componentes/sidenav/sidenav.component.css @@ -0,0 +1,112 @@ +:host { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 20%; + background-color: #18202f; +} + +.sidebar { + width: 100%; +} + +.sidebar a { + display: block; + color: #fff; + padding: 16px; + text-decoration: none; +} + +.sidebar a.active { + border-bottom: 2px solid #319bf5; +} + +.sidebar a:hover { + background-color: #555; +} + +.menu{ + display: none; + height: auto; + padding: 4px; + background: transparent; + border: none; + outline: none; + float: right; +} + +.menu img{ + width: 36px; +} + +.menu:hover { + background-color: #555; +} + +.contribute { + background-color: #2f3643; + color: #fff; + padding: 16px 20px; + margin: 6px; + border-radius: 10px; +} + +.contribute a { + display: flex; + align-items: center; + color: #319bf5; + text-decoration: none; + font-size: 10pt; + font-weight: bold; +} + +.contribute a img{ + max-height: 20px; + margin: 4px; +} + +.contribute a:hover{ + text-decoration: underline; +} + +@media screen and (max-width: 800px) { + :host { + width: 100%; + } + + .contribute { + position: absolute; + top: 25%; + width: 75%; + box-shadow: 2px 2px 5px #319bf5; + } + + .menu{ + display: block; + } + + .hide{ + display: none; + } + + .sidebar { + height: auto; + position: relative; + } + + .sidebar a { + float: left; + } + + div.content { + margin-left: 0; + } +} + +@media screen and (max-width: 400px) { + .sidebar a { + text-align: center; + float: none; + } +} \ No newline at end of file diff --git a/src/app/simulados/componentes/sidenav/sidenav.component.html b/src/app/simulados/componentes/sidenav/sidenav.component.html new file mode 100644 index 0000000..04b2ada --- /dev/null +++ b/src/app/simulados/componentes/sidenav/sidenav.component.html @@ -0,0 +1,13 @@ +
+ Simulados + +
+
+
Contribua para o projeto:
+ + GitHub + + Discussões +
\ No newline at end of file diff --git a/src/app/simulados/componentes/sidenav/sidenav.component.spec.ts b/src/app/simulados/componentes/sidenav/sidenav.component.spec.ts new file mode 100644 index 0000000..0291958 --- /dev/null +++ b/src/app/simulados/componentes/sidenav/sidenav.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidenavComponent } from './sidenav.component'; + +describe('SidenavComponent', () => { + let component: SidenavComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SidenavComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SidenavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/simulados/componentes/sidenav/sidenav.component.ts b/src/app/simulados/componentes/sidenav/sidenav.component.ts new file mode 100644 index 0000000..59fd2f1 --- /dev/null +++ b/src/app/simulados/componentes/sidenav/sidenav.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-sidenav', + templateUrl: './sidenav.component.html', + styleUrl: './sidenav.component.css' +}) +export class SidenavComponent { + showContribute(){ + let contribute = document.querySelector(".contribute"); + contribute.classList.toggle("hide"); + } +} From 583737eabb25317d15c795eeb42a236dbf74d96f Mon Sep 17 00:00:00 2001 From: salgado2004 Date: Tue, 2 Jul 2024 10:20:56 -0300 Subject: [PATCH 2/4] style: new icons --- src/assets/icons/comments-solid.svg | 2 ++ src/assets/icons/github.svg | 2 ++ src/assets/icons/menu.svg | 1 + 3 files changed, 5 insertions(+) create mode 100644 src/assets/icons/comments-solid.svg create mode 100644 src/assets/icons/github.svg create mode 100644 src/assets/icons/menu.svg diff --git a/src/assets/icons/comments-solid.svg b/src/assets/icons/comments-solid.svg new file mode 100644 index 0000000..eb4ddb2 --- /dev/null +++ b/src/assets/icons/comments-solid.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg new file mode 100644 index 0000000..c465245 --- /dev/null +++ b/src/assets/icons/github.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg new file mode 100644 index 0000000..5707bf8 --- /dev/null +++ b/src/assets/icons/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file From 41ca3a41e4fa27762a53f892ddcb4ade3b1a25b9 Mon Sep 17 00:00:00 2001 From: salgado2004 Date: Tue, 2 Jul 2024 10:21:05 -0300 Subject: [PATCH 3/4] feat: update simulados/home --- .../componentes/exam-card/exam-card.component.css | 15 +++++++++------ .../exam-card/exam-card.component.html | 15 ++++++++------- .../componentes/header/header.component.css | 1 + .../list-simulados/list-simulados.component.css | 12 +++++++++--- .../list-simulados/list-simulados.component.html | 1 - src/app/simulados/pages/home/home.component.css | 6 ++++++ src/app/simulados/pages/home/home.component.html | 1 + src/app/simulados/simulados.module.ts | 2 ++ 8 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/app/simulados/componentes/exam-card/exam-card.component.css b/src/app/simulados/componentes/exam-card/exam-card.component.css index 1450975..3955b64 100644 --- a/src/app/simulados/componentes/exam-card/exam-card.component.css +++ b/src/app/simulados/componentes/exam-card/exam-card.component.css @@ -1,12 +1,14 @@ :host{ - display: block; + display: flex; + flex-direction: column; + justify-content: space-between; box-sizing: border-box; - width: 20%; + width: 23%; border: 2px solid #319bf5; background-color: #18202f; border-radius: 16px; padding: 16px; - margin: 12px; + margin-top: 8px; } picture{ @@ -30,16 +32,17 @@ p{ color: #fff; font-size: 12pt; font-weight: 500; - margin-bottom: 6px; + margin-bottom: 8px; + line-height: 1.5; } -div{ +.input{ display: flex; justify-content: space-between; align-items: center; } -div span{ +.input span{ color: #fff; font-size: 10pt; } diff --git a/src/app/simulados/componentes/exam-card/exam-card.component.html b/src/app/simulados/componentes/exam-card/exam-card.component.html index 201594e..723ebbb 100644 --- a/src/app/simulados/componentes/exam-card/exam-card.component.html +++ b/src/app/simulados/componentes/exam-card/exam-card.component.html @@ -3,10 +3,11 @@

{{ exam.fullname }}

- Questões: - -
- - Praticar - +
+ Questões: + +
+ + Praticar + + \ No newline at end of file diff --git a/src/app/simulados/componentes/header/header.component.css b/src/app/simulados/componentes/header/header.component.css index 4c3e248..61d0abe 100644 --- a/src/app/simulados/componentes/header/header.component.css +++ b/src/app/simulados/componentes/header/header.component.css @@ -2,6 +2,7 @@ background-color: #080e19; display: block; box-sizing: border-box; + max-height: 10vh; } h1{ diff --git a/src/app/simulados/componentes/list-simulados/list-simulados.component.css b/src/app/simulados/componentes/list-simulados/list-simulados.component.css index 39c2a9e..c2ec4d5 100644 --- a/src/app/simulados/componentes/list-simulados/list-simulados.component.css +++ b/src/app/simulados/componentes/list-simulados/list-simulados.component.css @@ -1,17 +1,23 @@ :host{ + width: 80%; + max-height: 90vh; display: block; box-sizing: border-box; - padding: 12px; + overflow-y: scroll; } .simulados{ display: flex; flex-wrap: wrap; - justify-content: flex-start; + justify-content: space-evenly; } @media (max-width: 590px) { + :host{ + width: 100%; + } + .simulados{ - justify-content: center; + padding: 12px; } } \ No newline at end of file diff --git a/src/app/simulados/componentes/list-simulados/list-simulados.component.html b/src/app/simulados/componentes/list-simulados/list-simulados.component.html index b8bd941..1c60088 100644 --- a/src/app/simulados/componentes/list-simulados/list-simulados.component.html +++ b/src/app/simulados/componentes/list-simulados/list-simulados.component.html @@ -1,5 +1,4 @@
-

Selecione um simulado para começar:

diff --git a/src/app/simulados/pages/home/home.component.css b/src/app/simulados/pages/home/home.component.css index 33d4861..4cf1954 100644 --- a/src/app/simulados/pages/home/home.component.css +++ b/src/app/simulados/pages/home/home.component.css @@ -5,4 +5,10 @@ margin: 0; padding: 0; box-sizing: border-box; +} + +main{ + display: flex; + flex-wrap: wrap; + height: 90vh; } \ No newline at end of file diff --git a/src/app/simulados/pages/home/home.component.html b/src/app/simulados/pages/home/home.component.html index da7b96e..18293aa 100644 --- a/src/app/simulados/pages/home/home.component.html +++ b/src/app/simulados/pages/home/home.component.html @@ -2,5 +2,6 @@
+
diff --git a/src/app/simulados/simulados.module.ts b/src/app/simulados/simulados.module.ts index 17700df..a4ee108 100644 --- a/src/app/simulados/simulados.module.ts +++ b/src/app/simulados/simulados.module.ts @@ -12,6 +12,7 @@ import { QueryExamsService } from './utils/query-exams.service'; import { HomeComponent } from './pages/home/home.component'; import { ExamComponent } from './pages/exam/exam.component'; import { HeaderComponent } from './componentes/header/header.component'; +import { SidenavComponent } from './componentes/sidenav/sidenav.component'; import { ExamCardComponent } from './componentes/exam-card/exam-card.component'; import { ExamSummaryComponent } from './componentes/exam-summary/exam-summary.component'; import { DomainSummaryComponent } from './componentes/domain-summary/domain-summary.component'; @@ -41,6 +42,7 @@ import { MatSelectModule } from '@angular/material/select'; HomeComponent, ExamComponent, HeaderComponent, + SidenavComponent, ExamCardComponent, ExamSummaryComponent, QuestionsContainerComponent, From d8890917300fd929ab25d6c623610100fd094e9c Mon Sep 17 00:00:00 2001 From: salgado2004 Date: Tue, 2 Jul 2024 11:37:23 -0300 Subject: [PATCH 4/4] config: update the routing modules --- src/app/app.routes.ts | 2 +- src/app/simulados/componentes/sidenav/sidenav.component.html | 2 +- src/app/simulados/pages/exam/exam.component.html | 2 +- src/app/simulados/simulados.module.ts | 2 +- src/app/simulados/{simulados.route.ts => simulados.routes.ts} | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) rename src/app/simulados/{simulados.route.ts => simulados.routes.ts} (87%) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 30bded0..e8343e9 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,6 +1,6 @@ import { Routes } from '@angular/router'; export const routes: Routes = [ - { path: '', redirectTo: '/simulados/home', pathMatch: 'full' }, + { path: '', redirectTo: '/simulados', pathMatch: 'full' }, { path: 'simulados', loadChildren: () => import('./simulados/simulados.module').then(m => m.SimuladosModule) } ]; diff --git a/src/app/simulados/componentes/sidenav/sidenav.component.html b/src/app/simulados/componentes/sidenav/sidenav.component.html index 04b2ada..004e43d 100644 --- a/src/app/simulados/componentes/sidenav/sidenav.component.html +++ b/src/app/simulados/componentes/sidenav/sidenav.component.html @@ -1,5 +1,5 @@
- Simulados + Simulados diff --git a/src/app/simulados/pages/exam/exam.component.html b/src/app/simulados/pages/exam/exam.component.html index 7941d7b..b9eed23 100644 --- a/src/app/simulados/pages/exam/exam.component.html +++ b/src/app/simulados/pages/exam/exam.component.html @@ -5,7 +5,7 @@

Simulado {{ exam.fullname }}

- + Voltar
diff --git a/src/app/simulados/simulados.module.ts b/src/app/simulados/simulados.module.ts index a4ee108..debcd94 100644 --- a/src/app/simulados/simulados.module.ts +++ b/src/app/simulados/simulados.module.ts @@ -4,7 +4,7 @@ import { RouterLink } from '@angular/router'; import { NgFor } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { SimuladosRoutingModule } from './simulados.route'; +import { SimuladosRoutingModule } from './simulados.routes'; import { QueryQuestionsService } from './utils/query-questions.service'; import { QueryExamsService } from './utils/query-exams.service'; diff --git a/src/app/simulados/simulados.route.ts b/src/app/simulados/simulados.routes.ts similarity index 87% rename from src/app/simulados/simulados.route.ts rename to src/app/simulados/simulados.routes.ts index c8ad7a0..8844b41 100644 --- a/src/app/simulados/simulados.route.ts +++ b/src/app/simulados/simulados.routes.ts @@ -4,7 +4,7 @@ import { HomeComponent } from './pages/home/home.component'; import { ExamComponent } from './pages/exam/exam.component'; export const routes: Routes = [ - {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: '', redirectTo: '/simulados/home', pathMatch: 'full'}, {path: 'home' , component: HomeComponent}, {path: 'exam/:exam/:questions', component: ExamComponent} ];