diff --git a/alfa-client/apps/alfa/src/app/app.component.html b/alfa-client/apps/alfa/src/app/app.component.html
index db1bfcb9fd820d9d2dbacafe0771e0d2f7249619..2235e19749df21c01e02e4bcebda86648edcaa13 100644
--- a/alfa-client/apps/alfa/src/app/app.component.html
+++ b/alfa-client/apps/alfa/src/app/app.component.html
@@ -27,7 +27,7 @@
<ozgcloud-spinner [stateResource]="apiRoot">
<alfa-header-container [apiRootStateResource]="apiRoot"></alfa-header-container>
- <div class="relative ml-4 mt-16 flex flex-grow items-start justify-between">
+ <div class="relative ml-4 flex flex-grow items-start justify-between sm:mt-16">
<div class="mat-app-background relative grow"><router-outlet></router-outlet></div>
<section class="mat-app-background right-nav">
diff --git a/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts b/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts
index 9b7fbff3e927e5390264eab7fbcd5441d1d7011d..682b688db34a95c07b3f916f5c465b433bb9e379 100644
--- a/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts
+++ b/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts
@@ -30,7 +30,7 @@ import { CheckIconComponent } from '../../icons/check-icon/check-icon.component'
standalone: true,
imports: [CommonModule, CheckIconComponent],
template: `<button
- class="flex cursor-pointer items-center gap-1 px-3 py-1.5 outline-none hover:bg-neutral-300 focus-visible:bg-neutral-300 dark:hover:bg-neutral-600 dark:focus-visible:bg-neutral-600"
+ class="flex h-full cursor-pointer items-center gap-1 px-3 py-1.5 outline-none hover:bg-neutral-300 focus-visible:bg-neutral-300 dark:hover:bg-neutral-600 dark:focus-visible:bg-neutral-600"
[ngClass]="{
'bg-neutral-200 font-bold hover:bg-neutral-200 focus-visible:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800':
isChecked,
diff --git a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html b/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html
index d242083a8ace00b985014ed7514aa0b02bcb2172..c8f98e7e33a3f0a9c816674f8ebb1f39b3fcf1ef 100644
--- a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html
+++ b/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html
@@ -24,13 +24,13 @@
-->
<header data-test-id="header">
- <div class="left">
+ <div class="flex self-center sm:ml-3 lg:min-w-60">
<alfa-header-logo></alfa-header-logo>
</div>
- <div class="middle">
+ <div class="grow sm:order-2 sm:mr-4 lg:w-full">
<alfa-vorgang-search-container></alfa-vorgang-search-container>
</div>
- <div class="flex items-center text-ozggray-800 dark:text-ozggray-300">
+ <div class="flex flex-1 items-center justify-end self-end text-ozggray-800 dark:text-ozggray-300 sm:order-3 sm:self-center">
<common-accessibility-button
*ngIf="apiRootStateResource?.resource.barrierefreiheitUrl"
[url]="apiRootStateResource.resource.barrierefreiheitUrl"
diff --git a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss b/alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss
index 6e2b0ab30e640d060074709372aaa04afeb4874f..af0d57f07af15136ea44ffbac3f6cdb538005530 100644
--- a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/alfa-client/libs/navigation/src/lib/header-container/header/header.component.scss
@@ -26,30 +26,13 @@
@import 'variables';
header {
- height: $header-height;
+ @apply flex flex-row flex-wrap content-between items-center gap-2 pb-2 pl-4 pr-4 pt-2 sm:fixed sm:flex-nowrap sm:content-between sm:gap-0 sm:pr-8;
+
+ min-height: $header-height;
box-shadow: $shadow-bottom;
- padding: 0.5rem 2rem 0.5rem 1rem;
left: 0;
top: 0;
right: 0;
width: 100%;
z-index: 3;
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: fixed;
-}
-
-.middle {
- flex-grow: 1;
- margin-right: 1rem;
-}
-
-.left {
- display: flex;
- align-items: inherit;
- margin-left: 0.75rem;
- @include media('>desktop') {
- min-width: 240px;
- }
}
diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html b/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
index c0a54bbede7b5052d1550ea6861d1f3c98833333..b7e362147f00bd68bec7cf1f850f8e37a8eb7c58 100644
--- a/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
+++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
@@ -27,73 +27,75 @@
[attr.aria-label]="ariaLabel"
routerLink="/vorgang/{{ vorgang | toResourceUri: vorgangLinkRel.VORGANG_WITH_EINGANG }}"
[attr.data-test-id]="'vorgang-list-item-' + vorgang.name | convertForDataTest"
- class="flex flex-row gap-4 border-b-2 border-gray-200 p-4 hover:shadow-[inset_1px_-1px_0_0_rgba(0,0,0,0.16)] dark:border-b dark:border-gray-300 dark:hover:shadow-[inset_1px_-1px_0_0_rgba(255,255,255,0.60)]"
+ class="flex flex-col gap-2 border-b-2 border-gray-200 p-4 hover:shadow-[inset_1px_-1px_0_0_rgba(0,0,0,0.16)] dark:border-b dark:border-gray-300 dark:hover:shadow-[inset_1px_-1px_0_0_rgba(255,255,255,0.60)] lg:flex-row lg:gap-4"
>
- <div class="flex w-32 flex-none flex-col">
- <div class="flex items-center gap-3">
- <alfa-vorgang-status-dot
- [status]="vorgang.status"
- diameter="12"
- data-test-class="status-dot"
- ></alfa-vorgang-status-dot>
- <alfa-vorgang-status-text
- [status]="vorgang.status"
- data-test-class="status-text"
- class="status-text"
- ></alfa-vorgang-status-text>
- </div>
- <div class="ml-6 mt-3 flex text-sm">
- <alfa-vorgang-bescheid-status
- *ngIf="vorgang.antragBewilligt !== null"
- [vorgang]="vorgang"
- data-test-id="vorgang-list-item-bescheid-status"
- ></alfa-vorgang-bescheid-status>
- </div>
- </div>
- <div class="flex flex-1 flex-col gap-1">
- <div data-test-id="name" class="break-all text-base font-medium">
- {{ vorgang.name }}
- </div>
- <div class="mt-1">
- <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
- </div>
- <div>
- <div class="flex flex-row gap-1">
- <div class="flex flex-shrink-0">
- <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon>
+ <div class="flex grow flex-row gap-4">
+ <div class="flex flex-1 flex-col gap-4 lg:flex-row">
+ <div class="flex flex-none flex-row lg:w-32 lg:flex-col">
+ <div class="flex items-center gap-3">
+ <alfa-vorgang-status-dot [status]="vorgang.status" diameter="12" data-test-class="status-dot"></alfa-vorgang-status-dot>
+ <alfa-vorgang-status-text
+ [status]="vorgang.status"
+ data-test-class="status-text"
+ class="status-text"
+ ></alfa-vorgang-status-text>
+ </div>
+ <div class="ml-6 flex text-sm lg:mt-3">
+ <alfa-vorgang-bescheid-status
+ *ngIf="vorgang.antragBewilligt !== null"
+ [vorgang]="vorgang"
+ data-test-id="vorgang-list-item-bescheid-status"
+ ></alfa-vorgang-bescheid-status>
+ </div>
+ </div>
+ <div class="ml-6 flex flex-1 flex-col gap-1 lg:ml-0">
+ <div data-test-id="name" class="break-all text-base font-medium">
+ {{ vorgang.name }}
+ </div>
+ <div class="mt-1">
+ <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
+ </div>
+ <div>
+ <div class="flex flex-row gap-1">
+ <div class="flex flex-shrink-0">
+ <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon>
+ </div>
+ <div alfa-aktenzeichen [vorgang]="vorgang"></div>
+ </div>
+ </div>
+ </div>
+ <div class="ml-6 flex w-48 gap-4 lg:ml-0">
+ <div class="flex w-36 flex-none flex-col gap-2">
+ <div>
+ <alfa-vorgang-created-at class="eingang" [vorgang]="vorgang"></alfa-vorgang-created-at>
+ </div>
+ <div>
+ <alfa-vorgang-next-frist-button
+ *ngIf="vorgang | hasLink: vorgangLinkRel.WIEDERVORLAGEN"
+ [vorgang]="vorgang"
+ class="wiedervorlagen"
+ ></alfa-vorgang-next-frist-button>
+ </div>
+
+ <div>
+ <ozgcloud-postfach-icon
+ data-test-class="postfach-icon"
+ *ngIf="vorgang.hasPostfachNachricht === true"
+ [showBadge]="vorgang.hasNewPostfachNachricht"
+ class="postfach-icon"
+ >
+ </ozgcloud-postfach-icon>
+ </div>
</div>
- <div alfa-aktenzeichen [vorgang]="vorgang"></div>
</div>
</div>
- </div>
- <div class="flex w-36 flex-none flex-col gap-2">
- <div>
- <alfa-vorgang-created-at class="eingang" [vorgang]="vorgang"></alfa-vorgang-created-at>
- </div>
- <div>
- <alfa-vorgang-next-frist-button
- *ngIf="vorgang | hasLink: vorgangLinkRel.WIEDERVORLAGEN"
+ <div class="flex-none">
+ <alfa-user-profile-in-vorgang-list-item-container
+ *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
+ data-test-id="vorgang-user-icon"
[vorgang]="vorgang"
- class="wiedervorlagen"
- ></alfa-vorgang-next-frist-button>
- </div>
-
- <div>
- <ozgcloud-postfach-icon
- data-test-class="postfach-icon"
- *ngIf="vorgang.hasPostfachNachricht === true"
- [showBadge]="vorgang.hasNewPostfachNachricht"
- class="postfach-icon"
- >
- </ozgcloud-postfach-icon>
+ class="user-icon"
+ ></alfa-user-profile-in-vorgang-list-item-container>
</div>
</div>
- <div class="w-10 flex-none">
- <alfa-user-profile-in-vorgang-list-item-container
- *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
- data-test-id="vorgang-user-icon"
- [vorgang]="vorgang"
- class="user-icon"
- ></alfa-user-profile-in-vorgang-list-item-container>
- </div>
</a>
diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss
index 9f76478c287d26d3f40962d9b4b4d591d0be94cd..ad595c4dd830cb588a5cde1daa79d57a7580fe11 100644
--- a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss
+++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component.scss
@@ -24,13 +24,10 @@
@import 'variables';
:host {
- position: sticky;
+ @apply flex items-center justify-end sm:sticky;
top: $header-height;
- height: 3rem;
+ min-height: 3rem;
width: 100%;
z-index: 2;
- display: flex;
- justify-content: flex-end;
- align-items: center;
padding: 0.25rem 0 0.25rem 1rem;
}
diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html
index d17083dc60ab16ecb411155678eba69e8b7f4f1e..698e9bc2fbc0d012efa253f4e8bbad2c7fcab5a8 100644
--- a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html
+++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component.html
@@ -26,18 +26,15 @@
<h1 class="sr-only">Vorgangsliste</h1>
<alfa-vorgang-filter-menu-container class="mat-app-background"></alfa-vorgang-filter-menu-container>
-<div class="flex flex-row">
+<div class="flex flex-col sm:flex-row">
<alfa-vorgang-views-menu-container
*ngIf="apiRootStateResource.resource"
[apiRootResource]="apiRootStateResource.resource"
- class="w-[15.5rem] flex-none"
+ class="w-full sm:w-[15.5rem] sm:flex-none"
></alfa-vorgang-views-menu-container>
<main
- *ngIf="
- apiRootStateResource?.resource | hasLink: apiRootLinkRel.ALLE_VORGAENGE;
- else showNoRoleMessage
- "
+ *ngIf="apiRootStateResource?.resource | hasLink: apiRootLinkRel.ALLE_VORGAENGE; else showNoRoleMessage"
data-test-id="vorgaenge-list"
class="flex flex-1 flex-col overflow-hidden border border-gray-200 dark:border-black"
>
diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss
index 41e59faee7e0685dd6a678ee277e472139e6856e..3c840233872982deff0f3bc90a0a16e34c9a8730 100644
--- a/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss
+++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component.scss
@@ -24,10 +24,9 @@
@import 'variables';
:host {
+ @apply self-start md:sticky;
background-color: $background;
padding: 0 1rem 0 0;
- position: sticky;
- align-self: flex-start;
top: $header-height + $navigation-height;
}