From 117bac692b08cb8bf62f0e4151c1d33ddb9190bb Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Fri, 6 Dec 2024 11:30:29 +0100
Subject: [PATCH] OZG-7292 page layout on smaller screens, scroll complete page
---
alfa-client/apps/alfa/src/app/app.component.html | 2 +-
.../vorgang-filter-menu-container.component.scss | 7 ++-----
.../vorgang-list-page/vorgang-list-page.component.html | 9 +++------
.../vorgang-views-menu-container.component.scss | 3 +--
4 files changed, 7 insertions(+), 14 deletions(-)
diff --git a/alfa-client/apps/alfa/src/app/app.component.html b/alfa-client/apps/alfa/src/app/app.component.html
index b10af37299..5582cffad7 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/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 0f988dfaac..b1f84a9744 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 c947a1e4cb..793e849467 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 d952c68d19..87e23be7f2 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
@@ -1,10 +1,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;
}
--
GitLab