From 8cec08735b39e01330f64ed4e88a34df4b606e6c Mon Sep 17 00:00:00 2001 From: BastianStruggl Date: Fri, 4 Nov 2022 15:24:41 +0100 Subject: [PATCH] Climbing-hall - fixed styling - added simulated side refresh on delete and add --- src/app/app-routing.module.ts | 17 +++++----- src/app/app.module.ts | 34 +++++++++---------- .../add-route-form.component.html | 2 +- .../add-route-form.component.scss | 5 ++- .../add-route-form.component.ts | 2 +- .../route-detail-page.component.scss | 1 + .../routes/route/route.component.html | 2 +- .../routes/route/route.component.scss | 29 +++++++++++++--- .../routes/route/route.component.ts | 4 +-- .../components/routes/routes.component.html | 11 +++--- .../components/routes/routes.component.scss | 11 +++--- src/styles.scss | 4 +-- 12 files changed, 76 insertions(+), 46 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0b4edbe..27743a9 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,14 +1,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MembersListComponent } from './components/members/members-list.component' -import {RoutesComponent} from "./components/routes/routes.component"; -import {RouteComponent} from "./components/routes/route/route.component"; -import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component"; -import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component"; +import { MembersListComponent } from './components/members/members-list.component'; +import { RoutesComponent } from './components/routes/routes.component'; +import { RouteComponent } from './components/routes/route/route.component'; +import { RouteDetailPageComponent } from './components/routes/route/route-detail-page/route-detail-page.component'; +import { AddRouteFormComponent } from './components/routes/route/add-route-form/add-route-form.component'; const routes: Routes = [ { - path:'members', component:MembersListComponent + path: 'members', + component: MembersListComponent, }, { path: 'routes', @@ -36,6 +37,6 @@ const routes: Routes = [ @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e194dbf..5f9285f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,26 +3,26 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatMenuModule} from '@angular/material/menu'; +import { MatMenuModule } from '@angular/material/menu'; import { MembersListComponent } from './components/members/members-list.component'; -import {FormsModule, ReactiveFormsModule} from "@angular/forms"; -import {MatTableModule} from "@angular/material/table"; -import {HttpClientModule} from "@angular/common/http"; -import {MatSliderModule} from "@angular/material/slider"; -import {MatPaginatorModule} from "@angular/material/paginator"; -import {MatSortModule} from "@angular/material/sort"; -import {MatFormFieldModule} from "@angular/material/form-field"; -import {MatInputModule} from "@angular/material/input"; -import {MatButtonModule} from '@angular/material/button'; -import {MatIconModule} from "@angular/material/icon"; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatTableModule } from '@angular/material/table'; +import { HttpClientModule } from '@angular/common/http'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSortModule } from '@angular/material/sort'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; import { MatCardModule } from '@angular/material/card'; import { MatDividerModule } from '@angular/material/divider'; import { MatSelectModule } from '@angular/material/select'; -import {RoutesComponent} from "./components/routes/routes.component"; -import {RouteComponent} from "./components/routes/route/route.component"; -import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component"; -import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component"; +import { RoutesComponent } from './components/routes/routes.component'; +import { RouteComponent } from './components/routes/route/route.component'; +import { AddRouteFormComponent } from './components/routes/route/add-route-form/add-route-form.component'; +import { RouteDetailPageComponent } from './components/routes/route/route-detail-page/route-detail-page.component'; @NgModule({ declarations: [ @@ -55,6 +55,6 @@ import {RouteDetailPageComponent} from "./components/routes/route/route-detail-p MatSelectModule, ], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.html b/src/app/components/routes/route/add-route-form/add-route-form.component.html index 734d49c..6d17938 100644 --- a/src/app/components/routes/route/add-route-form/add-route-form.component.html +++ b/src/app/components/routes/route/add-route-form/add-route-form.component.html @@ -3,7 +3,7 @@
Route name - + diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.scss b/src/app/components/routes/route/add-route-form/add-route-form.component.scss index 34fbfb2..cd0db75 100644 --- a/src/app/components/routes/route/add-route-form/add-route-form.component.scss +++ b/src/app/components/routes/route/add-route-form/add-route-form.component.scss @@ -17,13 +17,14 @@ mat-divider { .error { color: red; + font-size: 1.1rem; } form { font-size: 1.4rem; border: 2px solid darkgrey; background-color: white; - width: 20%; + width: 27%; margin: 30px auto; padding: 20px; } @@ -42,3 +43,5 @@ form * { .send-btn { margin: 0 auto; } + + diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.ts b/src/app/components/routes/route/add-route-form/add-route-form.component.ts index 50b996e..a761714 100644 --- a/src/app/components/routes/route/add-route-form/add-route-form.component.ts +++ b/src/app/components/routes/route/add-route-form/add-route-form.component.ts @@ -34,7 +34,7 @@ export class AddRouteFormComponent implements OnInit { difficultyLevelEnum: this.addRouteForm.get('difficultyLevel')?.value, }; this.routeService.addRoute(route).subscribe(); - this.router.navigateByUrl('/routes'); + this.router.navigateByUrl('/members', {skipLocationChange: true}).then(() => this.router.navigate(['/routes'])); } } } diff --git a/src/app/components/routes/route/route-detail-page/route-detail-page.component.scss b/src/app/components/routes/route/route-detail-page/route-detail-page.component.scss index c5c5739..cbfdfff 100644 --- a/src/app/components/routes/route/route-detail-page/route-detail-page.component.scss +++ b/src/app/components/routes/route/route-detail-page/route-detail-page.component.scss @@ -27,6 +27,7 @@ mat-divider { mat-card-title { font-size: 2rem; + margin-top: 13px; margin-bottom: 40px; } diff --git a/src/app/components/routes/route/route.component.html b/src/app/components/routes/route/route.component.html index fa165e1..ce8a6ee 100644 --- a/src/app/components/routes/route/route.component.html +++ b/src/app/components/routes/route/route.component.html @@ -1,7 +1,7 @@ info - Route: {{ route?.name }} + {{ route?.name }} diff --git a/src/app/components/routes/route/route.component.scss b/src/app/components/routes/route/route.component.scss index b1466bb..c1a1676 100644 --- a/src/app/components/routes/route/route.component.scss +++ b/src/app/components/routes/route/route.component.scss @@ -1,17 +1,24 @@ .route { font-size: 1.1rem; margin: 20px auto; - height: 45px; + height: 65px; width: 900px; - margin-bottom: 20px; + margin-bottom: 10px; display: flex; justify-content: space-between; + padding: 0; + color: #444444; +} + +.route:first-of-type { + margin-top: 0; } .delete-btn { width: 100px; height: 38px; cursor: pointer; + margin: auto 10px; } .delete-wrapper { @@ -26,13 +33,27 @@ mat-icon { .name-wrapper { display: flex; - justify-content: center; + justify-content: flex-start; align-items: center; cursor: pointer; + font-size: 1.5rem; + min-width: 320px; + + mat-icon { + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 14px; + padding-right: 14px; + border-right: 2px solid #efeded; + border-radius: 5px 0 0 5px; + height: 100%; + margin-left: 3px; + color: darkgrey; + } span { margin-left: 13px; - font-size: 1.5rem; } } diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index 46f94ad..e000fac 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -17,7 +17,7 @@ export class RouteComponent implements OnInit { deleteRoute(route: Route): void { this.routeService.deleteRoute(route.id).subscribe(); - // this.routeService.deleteRoute(route); - // this.router.navigateByUrl('/routes'); + // redirect to "dummy" and then back to this component to achieve a "refresh" without site reload + this.router.navigateByUrl('/members', {skipLocationChange: true}).then(() => this.router.navigate(['/routes'])); } } diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html index 9720654..2ed3ea8 100644 --- a/src/app/components/routes/routes.component.html +++ b/src/app/components/routes/routes.component.html @@ -1,8 +1,9 @@ - - - - + + + + diff --git a/src/app/components/routes/routes.component.scss b/src/app/components/routes/routes.component.scss index 0ec277b..d4a4208 100644 --- a/src/app/components/routes/routes.component.scss +++ b/src/app/components/routes/routes.component.scss @@ -2,7 +2,7 @@ mat-list * { display: flex; align-items: center; justify-content: center; - margin: 60px auto; + margin: 40px auto; } button { @@ -12,11 +12,14 @@ button { } .add-route-btn { - font-size: 1.3rem; + font-size: 1.1rem; display: flex; justify-content: center; align-items: center; - width: 200px; - height: 50px; + width: 100px; + height: 38px; cursor: pointer; + margin-top: 40px; + margin-bottom: -10px; + margin-left: 400px; } diff --git a/src/styles.scss b/src/styles.scss index 233abbe..21a0036 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,7 @@ /* You can add global styles to this file, and also import other style files */ -html, body { height: 100%; margin: 20px; box-sizing: border-box; font-size: 16px} -body { margin: 0; font-family: 'Segoe UI', Roboto, "Helvetica Neue", sans-serif; } +html, body { height: 90vh; margin: 20px; box-sizing: border-box; font-size: 16px} +body { margin: 0; font-family: 'Segoe UI', Roboto, "Helvetica Neue", sans-serif; background-color: #efeded} .active { background-color: darkred; -- GitLab