From e023cfed9dfaa62a34dbe60a4caafc5f308a7b2c Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Mon, 28 Oct 2024 15:50:22 +0100
Subject: [PATCH] OZG-6676 OZG-7035 Adjust styling
---
...xterne-fachstelle-container.component.html | 4 ++--
.../organisations-einheit.component.html | 2 +-
...nisations-einheit-container.component.html | 7 +++++-
.../zustaendige-stelle-header.component.html | 10 +++++----
...ustaendige-stelle-header.component.spec.ts | 22 +++++++++++++++++++
.../zustaendige-stelle-header.component.ts | 1 +
6 files changed, 38 insertions(+), 8 deletions(-)
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/search-externe-fachstelle-container/search-externe-fachstelle-container.component.html b/alfa-client/libs/zustaendige-stelle/src/lib/search-externe-fachstelle-container/search-externe-fachstelle-container.component.html
index 041d3b4727..c3e48e9305 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/search-externe-fachstelle-container/search-externe-fachstelle-container.component.html
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/search-externe-fachstelle-container/search-externe-fachstelle-container.component.html
@@ -1,7 +1,7 @@
<ng-container *ngIf="externeFachstelleResource$ | async as externeFachstelleResource; else searchButton">
- <alfa-zustaendige-stelle-header title="Externe Fachstelle" [subTitle]="externeFachstelleResource.name">
+ <alfa-zustaendige-stelle-header title="Externe Fachstelle" [subTitle]="externeFachstelleResource.name" [isSubTitleBold]="true">
<ods-external-unit-icon icon />
- <div class="flex flex-col text-sm text-text" info>
+ <div class="flex flex-1 flex-col text-sm text-text" info>
<p>{{ externeFachstelleResource.anschrift }}</p>
<p>{{ 'Email: ' + externeFachstelleResource.email }}</p>
</div>
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/organisations-einheit/organisations-einheit.component.html b/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/organisations-einheit/organisations-einheit.component.html
index c2185aebc4..4dfc708d60 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/organisations-einheit/organisations-einheit.component.html
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/organisations-einheit/organisations-einheit.component.html
@@ -1 +1 @@
-<p class="text-base text-text">{{ address }}</p>
+<p class="text-sm text-text">{{ address }}</p>
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.html b/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.html
index 25fadc812b..77443b9e24 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.html
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.html
@@ -1,9 +1,14 @@
<ng-container *ngIf="organisationsEinheitResource$ | async as organisationsEinheitResource; else searchButton">
- <alfa-zustaendige-stelle-header title="Öffentliche Verwaltung" [subTitle]="organisationsEinheitResource.name">
+ <alfa-zustaendige-stelle-header
+ title="Öffentliche Verwaltung"
+ [subTitle]="organisationsEinheitResource.name"
+ [isSubTitleBold]="true"
+ >
<ods-public-administration-icon icon />
<alfa-organisations-einheit
data-test-id="organisations-einheit-in-collaboration"
[organisationsEinheitResource]="organisationsEinheitResource"
+ class="flex-1"
info
/>
<alfa-edit-zustaendige-stelle-button title="Zuständige Stelle auswählen" dataTestId="edit-organisations-einheit-button" />
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.html b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.html
index 951400884e..eda66df020 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.html
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.html
@@ -1,9 +1,11 @@
-<div class="flex justify-between">
- <div class="flex gap-3">
+<div class="flex">
+ <div class="flex flex-1 gap-3">
<ng-content select="[icon]" />
- <div class="flex flex-col text-base">
+ <div class="flex flex-1 flex-col text-base">
<p class="text-primary" data-test-id="zustaendige-stelle-header-title">{{ title }}</p>
- <p class="text-text" data-test-id="zustaendige-stelle-header-sub-title">{{ subTitle }}</p>
+ <p class="text-text" [class.font-medium]="isSubTitleBold" data-test-id="zustaendige-stelle-header-sub-title">
+ {{ subTitle }}
+ </p>
</div>
<ng-content select="[info]" />
</div>
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.spec.ts b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.spec.ts
index 5b819aa910..a9f48ee516 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.spec.ts
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.spec.ts
@@ -45,5 +45,27 @@ describe('ZustaendigeStelleHeaderComponent', () => {
expect(subTitleElement.innerHTML).toContain('I am test sub title');
});
});
+
+ describe('isSubTitleBold', () => {
+ it('should add class if true', () => {
+ component.subTitle = 'I am test sub title';
+ component.isSubTitleBold = true;
+ fixture.detectChanges();
+
+ const subTitleElement: HTMLElement = getElementFromFixture(fixture, subTitleSelector);
+
+ expect(subTitleElement.classList).toContain('font-medium');
+ });
+
+ it('should not add class if false', () => {
+ component.subTitle = 'I am test sub title';
+ component.isSubTitleBold = false;
+ fixture.detectChanges();
+
+ const subTitleElement: HTMLElement = getElementFromFixture(fixture, subTitleSelector);
+
+ expect(subTitleElement.classList).not.toContain('font-medium');
+ });
+ });
});
});
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.ts b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.ts
index 167c08a22d..1315d4eb44 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.ts
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.ts
@@ -7,4 +7,5 @@ import { Component, Input } from '@angular/core';
export class ZustaendigeStelleHeaderComponent {
@Input() title: string;
@Input() subTitle: string;
+ @Input() isSubTitleBold: boolean = false;
}
--
GitLab