Merge pull request 'OZG-7292-Barrierefreiheit-Vorgangsliste' (#853) from...

Merge pull request 'OZG-7292-Barrierefreiheit-Vorgangsliste' (#853) from OZG-7292-Barrierefreiheit-Vorgangsliste into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/853


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>
Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

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">

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,

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"

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;
-  }
 }

alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html

@@ -27,22 +27,20 @@
   [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 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-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">
+        <div class="ml-6 flex text-sm lg:mt-3">
           <alfa-vorgang-bescheid-status
             *ngIf="vorgang.antragBewilligt !== null"
             [vorgang]="vorgang"
@@ -50,7 +48,7 @@
           ></alfa-vorgang-bescheid-status>
         </div>
       </div>
-  <div class="flex flex-1 flex-col gap-1">
+      <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>
@@ -66,6 +64,7 @@
           </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>
@@ -88,7 +87,9 @@
             </ozgcloud-postfach-icon>
           </div>
         </div>
-  <div class="w-10 flex-none">
+      </div>
+    </div>
+    <div class="flex-none">
       <alfa-user-profile-in-vorgang-list-item-container
         *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
         data-test-id="vorgang-user-icon"
@@ -96,4 +97,5 @@
         class="user-icon"
       ></alfa-user-profile-in-vorgang-list-item-container>
     </div>
+  </div>
 </a>

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;
 }

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"
   >

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;
 }