Skip to content

Commit

Permalink
uninstall puzzle shell and implement banner on our own
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vakmeth @kcinay055679
Vakmeth authored and kcinay055679 committed Dec 8, 2023
1 parent 42c3fb1 commit 989d51f
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 38 deletions.
5 changes: 1 addition & 4 deletions frontend/angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,7 @@
"stylePreprocessorOptions": {
"includePaths": ["src/style", "src/assets"]
},
"scripts": [
"node_modules/@puzzleitc/puzzle-shell/dist/bundle.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
},
"configurations": {
"production": {
Expand Down
72 changes: 38 additions & 34 deletions frontend/src/app/application-banner/application-banner.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
<pzsh-banner id="okrBanner" #okrBanner>
<img alt="okr-tangram" height="140" ngSrc="assets/images/triangles-okr-header.svg" slot="tangram" width="274" />
<div class="h-100 m-0 d-flex" slot="content">
<section class="d-none d-md-flex">
<div class="header-content h-100 m-0 pt-3 pb-3 d-flex gap-2 flex-column container-fluid">
<div class="d-flex align-items-end gap-2">
<span class="d-flex flex-column">
<p class="mb-2">Quartal</p>
<app-quarter-filter></app-quarter-filter>
</span>
<app-objective-filter></app-objective-filter>
<div id="okrBanner" #okrBanner>
<div class="d-flex flex-row">
<div class="h-100 m-0 d-flex w-50" slot="content">
<section class="d-none d-md-flex">
<div class="header-content h-100 m-0 pt-3 pb-3 d-flex gap-2 flex-column container-fluid">
<div class="d-flex align-items-end gap-2">
<span class="d-flex flex-column">
<p class="mb-2">Quartal</p>
<app-quarter-filter></app-quarter-filter>
</span>
<app-objective-filter></app-objective-filter>
</div>
<app-team-filter></app-team-filter>
</div>
<app-team-filter></app-team-filter>
</div>
</section>
</section>

<section class="m-0 d-sm-flex d-md-none w-100">
<mat-accordion [displayMode]="'flat'" class="w-100">
<mat-expansion-panel (closed)="panelOpenState = false" (opened)="panelOpenState = true" id="header-accordion">
<mat-expansion-panel-header>
<mat-panel-title>
<span *ngIf="!panelOpenState; else openedPanel">{{
(quarterLabel$ | async) || quarterLabel$.getValue()
}}</span>
<ng-template #openedPanel> Filter </ng-template>
</mat-panel-title>
</mat-expansion-panel-header>
<section class="m-0 d-sm-flex d-md-none w-100">
<mat-accordion [displayMode]="'flat'" class="w-100">
<mat-expansion-panel (closed)="panelOpenState = false" (opened)="panelOpenState = true" id="header-accordion">
<mat-expansion-panel-header>
<mat-panel-title>
<span *ngIf="!panelOpenState; else openedPanel">{{
(quarterLabel$ | async) || quarterLabel$.getValue()
}}</span>
<ng-template #openedPanel> Filter </ng-template>
</mat-panel-title>
</mat-expansion-panel-header>

<div class="d-flex gap-2 flex-column">
<app-quarter-filter (quarterLabel$)="quarterLabel$.next($event)"></app-quarter-filter>
<app-objective-filter></app-objective-filter>
<app-team-filter></app-team-filter>
</div>
</mat-expansion-panel>
</mat-accordion>
</section>
<div class="d-flex gap-2 flex-column">
<app-quarter-filter (quarterLabel$)="quarterLabel$.next($event)"></app-quarter-filter>
<app-objective-filter></app-objective-filter>
<app-team-filter></app-team-filter>
</div>
</mat-expansion-panel>
</mat-accordion>
</section>
</div>
<div class="w-50 d-flex justify-content-end">
<img alt="okr-tangram" height="140" ngSrc="assets/images/triangles-okr-header.svg" slot="tangram" width="274" />
</div>
</div>
</pzsh-banner>
</div>
1 change: 1 addition & 0 deletions frontend/src/app/application-banner/application-banner.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
height: min-content;
z-index: 100;
transition: 0.5s;
background-color: #dcedf9;
}

.header-content {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/application-banner/application-banner.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export class ApplicationBannerComponent implements AfterViewInit, OnDestroy {

ngAfterViewInit(): void {
this.resizeObserver.observe(this.okrBanner.nativeElement);
this.changeHeaderAppearance();
}

changeHeaderAppearance() {
Expand Down

0 comments on commit 989d51f

Please sign in to comment.