From 12e75e54f25abd3231f33e69be29753aad00e356 Mon Sep 17 00:00:00 2001 From: steinhaus Date: Thu, 18 Apr 2024 07:58:05 +0200 Subject: [PATCH] added template page --- src/app/wlo-search/core/view.service.ts | 11 ++- .../template/template.component.html | 22 ++++++ .../template/template.component.scss | 78 +++++++++++++++++++ .../wlo-search/template/template.component.ts | 12 +++ .../wlo-search/wlo-search-routing.module.ts | 2 + src/app/wlo-search/wlo-search.component.html | 2 +- src/app/wlo-search/wlo-search.component.ts | 1 + src/app/wlo-search/wlo-search.module.ts | 3 +- 8 files changed, 127 insertions(+), 4 deletions(-) create mode 100644 src/app/wlo-search/template/template.component.html create mode 100644 src/app/wlo-search/template/template.component.scss create mode 100644 src/app/wlo-search/template/template.component.ts diff --git a/src/app/wlo-search/core/view.service.ts b/src/app/wlo-search/core/view.service.ts index 3400d7cb..f7a18cee 100644 --- a/src/app/wlo-search/core/view.service.ts +++ b/src/app/wlo-search/core/view.service.ts @@ -1,6 +1,6 @@ import { BreakpointObserver } from '@angular/cdk/layout'; -import { Injectable } from '@angular/core'; -import { NavigationStart, Router } from '@angular/router'; +import {Injectable} from '@angular/core'; +import { ActivatedRoute, NavigationStart, Router } from '@angular/router'; import { Node } from 'ngx-edu-sharing-api'; import * as rxjs from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs'; @@ -45,7 +45,12 @@ export class ViewService { private breakpointObserver: BreakpointObserver, private router: Router, private pageMode: PageModeService, + private route: ActivatedRoute, ) { + this.route.url.subscribe(_segments => { + const url = window.location.pathname; + this.isTemplate.next(url.includes('/template')); + }) this.registerStoredItems(); this.registerBehaviorHooks(); } @@ -176,4 +181,6 @@ export class ViewService { getIsLoading(): Observable { return this.isLoadingCounter.pipe(map((counter) => counter > 0)); } + + isTemplate = new BehaviorSubject(false); } diff --git a/src/app/wlo-search/template/template.component.html b/src/app/wlo-search/template/template.component.html new file mode 100644 index 00000000..b4dcd6ff --- /dev/null +++ b/src/app/wlo-search/template/template.component.html @@ -0,0 +1,22 @@ +
+
+
+
+

Template

+

Dieser Text beschreibt das Thema der Seite und führt in es ein. Er ist typischerweise etwas + länger und umfasst somit einige Sätze. Manche dieser Sätze haben vielen Kommata, andere nicht. + Es können längere und kürzere Sätze dort vorkommen.

+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/src/app/wlo-search/template/template.component.scss b/src/app/wlo-search/template/template.component.scss new file mode 100644 index 00000000..623a7173 --- /dev/null +++ b/src/app/wlo-search/template/template.component.scss @@ -0,0 +1,78 @@ +:host { + display: flex; + flex-direction: column; + padding: 20px; + max-width: 800px; + margin: auto; +} + +.template-header { + background-color: #ec4a70; + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + .template-header-wrapper { + display: flex; + justify-content: space-around; + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: 24px 36px; + padding-bottom: 24px; + padding-bottom: 0; + transition: 0.3s; + .template-header-container { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 70%; + background: #ffffff; + border-radius: 24px 24px 0px 0px; + .template-header-content { + display: flex; + flex-direction: column; + margin: 32px 0; + padding: 0 64px; + h1 { + font-family: "Montserrat-Medium", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 40px; + font-weight: normal; + line-height: 1.3; + color: #313131; + margin-bottom: 0.5em; + } + } + } + } +} + +.portal-plus-filterbar-wrapper { + display: block; + .portal-wrapper { + display: flex; + justify-content: center; + max-width: initial; + background: white; + margin: 0 auto; + padding-bottom: 0.5em; + transition: 0.3s; + .portal-wrapper-left { + margin: 0.5em; + width: 0; + flex-grow: 1; + max-width: 1200px; + background: #f4f4f4; + .fachportal-header-accordion { + background: white; + width: 100%; + padding-top: 42px; + .wlo-accordion-wrapper { + background-color: rgba(236,74,112, 0.2); + position: relative; + width: 100%; + padding: 0 0 24px; + border-radius: 24px 24px 0px 0px; + } + } + } + } +} diff --git a/src/app/wlo-search/template/template.component.ts b/src/app/wlo-search/template/template.component.ts new file mode 100644 index 00000000..3ebbc263 --- /dev/null +++ b/src/app/wlo-search/template/template.component.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {SharedModule} from "../shared/shared.module"; + +@Component({ + standalone: true, + imports: [SharedModule], + selector: 'app-template', + templateUrl: './template.component.html', + styleUrls: ['./template.component.scss'], +}) +export class TemplateComponent { +} diff --git a/src/app/wlo-search/wlo-search-routing.module.ts b/src/app/wlo-search/wlo-search-routing.module.ts index 72cf270a..be08f679 100644 --- a/src/app/wlo-search/wlo-search-routing.module.ts +++ b/src/app/wlo-search/wlo-search-routing.module.ts @@ -10,6 +10,7 @@ import { SearchResultsComponent } from './search/search-page/search-results/sear import { SubjectsPortalResolverService } from './search/search-page/subjects-portal/subjects-portal-resolver.service'; import { SubjectsPortalComponent } from './search/search-page/subjects-portal/subjects-portal.component'; import { WloSearchComponent } from './wlo-search.component'; +import { TemplateComponent } from "./template/template.component"; const routes: Routes = [ { @@ -44,6 +45,7 @@ const routes: Routes = [ resolve: { entry: DetailsPageResolverService }, }, { path: 'experiments', component: ExperimentsTogglesComponent }, + { path: 'template', component: TemplateComponent }, { path: '', redirectTo: 'search', pathMatch: 'full' }, { path: 'error', component: ErrorPageComponent }, ], diff --git a/src/app/wlo-search/wlo-search.component.html b/src/app/wlo-search/wlo-search.component.html index 220d3bd2..a25409bf 100644 --- a/src/app/wlo-search/wlo-search.component.html +++ b/src/app/wlo-search/wlo-search.component.html @@ -1,6 +1,6 @@
- +
diff --git a/src/app/wlo-search/wlo-search.component.ts b/src/app/wlo-search/wlo-search.component.ts index 4ce2efdb..53d24448 100644 --- a/src/app/wlo-search/wlo-search.component.ts +++ b/src/app/wlo-search/wlo-search.component.ts @@ -23,6 +23,7 @@ import { ViewService } from './core/view.service'; export class WloSearchComponent implements OnInit, OnDestroy { readonly headerStyle$ = this.pageMode.getPageConfig('headerStyle'); readonly isLoading$ = this.view.getIsLoading(); + readonly isTemplate$ = this.view.isTemplate; private readonly destroyed$ = new Subject(); constructor( diff --git a/src/app/wlo-search/wlo-search.module.ts b/src/app/wlo-search/wlo-search.module.ts index 5f80cf3f..5f5ffefb 100644 --- a/src/app/wlo-search/wlo-search.module.ts +++ b/src/app/wlo-search/wlo-search.module.ts @@ -6,9 +6,10 @@ import { SearchModule } from './search/search.module'; import { SharedModule } from './shared/shared.module'; import { WloSearchRoutingModule } from './wlo-search-routing.module'; import { WloSearchComponent } from './wlo-search.component'; +import { TemplateComponent } from "./template/template.component"; @NgModule({ declarations: [WloSearchComponent], - imports: [WloSearchRoutingModule, CoreModule, SharedModule, SearchModule, PreferencesModule], + imports: [WloSearchRoutingModule, CoreModule, SharedModule, SearchModule, PreferencesModule, TemplateComponent], }) export class WloSearchModule {}