added template page

openeduhub · Apr 18, 2024 · 12e75e5 · 12e75e5
1 parent ce5afb0
commit 12e75e5
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 4 deletions.
diff --git 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<boolean> {
         return this.isLoadingCounter.pipe(map((counter) => counter > 0));
     }
+
+    isTemplate = new BehaviorSubject<boolean>(false);
 }
diff --git a/src/app/wlo-search/template/template.component.html b/src/app/wlo-search/template/template.component.html
@@ -0,0 +1,22 @@
+<header class="template-header">
+  <div class="template-header-wrapper">
+    <div class="template-header-container">
+      <div class="template-header-content">
+        <h1 i18n>Template</h1>
+        <p>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.</p>
+      </div>
+    </div>
+  </div>
+</header>
+<div class="portal-plus-filterbar-wrapper">
+  <div class="fachportal-filterbar"></div>
+  <div class="portal-wrapper">
+    <div class="portal-wrapper-left">
+      <div class="fachportal-header-accordion">
+      </div>
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/wlo-search/template/template.component.scss 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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 <header>
   <app-menubar *ngIf="(headerStyle$ | async) === 'standard'"></app-menubar>
-  <app-headerbar></app-headerbar>
+  <app-headerbar *ngIf="!(isTemplate$ | async)"></app-headerbar>
 </header>
 <main appSkipTarget="MAIN_CONTENT" class="main">
   <router-outlet></router-outlet>

diff --git 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<void>();
 
     constructor(

diff --git 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 {}