Merge pull request #355 from IBCornelsen/UMBE

responsiv

src/components/AnsichtsausweisButton.svelte

@@ -20,6 +20,6 @@
 		ausweisart
 	})
 }}>
-	<img src="/images/ausweis.webp" alt="Ausweis" />
+	<img class="w-full" src="/images/ausweis.webp" alt="Ausweis" />
 	<span class="text-black font-medium text-lg">Ansichtsausweis</span>
 </button>

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -60,7 +60,7 @@
 
 		</div>
 
-		<div class="grid grid-cols-2 gap-4 mt-4">
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
 			<AnsichtsausweisButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 			<DatenblattButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 		</div>

src/components/Ausweis/ButtonSpaeterHilfe.svelte

@@ -9,7 +9,8 @@
 
 
 
-<div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
+<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0 
+sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">
 	
 	<div></div>
 

src/components/Ausweis/ButtonWeiterHilfe.svelte

@@ -63,9 +63,9 @@
 	let loginOverlayHidden = true;
 </script>
 
-<div
+<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0 
-	class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
+sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">
->
+
 	<div></div>
 
 	<Hilfe />

src/components/Ausweis/Progressbar.svelte

@@ -20,6 +20,7 @@
 		</div>
 	</div>
 
+
 	{#each steps as step, i}
 		<div class="phase">
 			<div class="point" class:active={i === active}>{i + 1}</div>
@@ -28,7 +29,9 @@
 	{/each}
 </div>
 
-<style lang="postcss">
+
+</style>
+
 	.phase {
 		@apply grid grid-cols-1 items-center justify-items-center z-10;
 		.point {
@@ -47,3 +50,4 @@
 		@apply justify-self-end;
 	}
 </style>
+

src/components/DatenblattButton.svelte

@@ -13,6 +13,7 @@
 
 </script>
 
+
 <button class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" on:click={() => {
 	openWindowWithPost("/pdf/datenblatt", {
 		ausweis: JSON.stringify(ausweis),
@@ -22,6 +23,7 @@
 		ausweisart
 	})
 }}>
-	<img src="/images/datenblatt.webp" alt="Datenblatt" />
+	<img class="w-full" src="/images/datenblatt.webp" alt="Datenblatt" />
+
 	<span class="text-black font-medium text-lg">Datenblatt</span>
 </button>

src/components/design/footer/Footer.astro

@@ -5,6 +5,7 @@ const currentYear = new Date().getFullYear();
 <footer class="
 		
 				grid grid-cols-1 bg-primary lg:px-9 lg:py-1
+				xs:grid-cols-2
 				lg:grid-cols-4 lg:px-9 lg:py-1">
 
 	<div class="

src/components/design/header/AusweisHeader.astro

@@ -2,9 +2,9 @@
 import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
 ---
 
-<header id="header">
+<header id="header" class="">
 
-<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
+<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0 
 
 grid-cols-1
 sm:grid-cols-1 
@@ -21,9 +21,9 @@ xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
 md:gap-y-4
 lg:px-0 lg:gap-x-4">
 
-<div class="self-start justify-self-start">
+<div class="self-start justify-self-center xs:justify-self-start">
 	<a href="/">
-		<img id="header-logo" class="w-full 
+		<img id="header-logo" class="w-full max-w-[120px] 
 		xs:max-w-[64px] 
 		sm:max-w-[64px]
 		md:max-w-[64px] md:ml-6

src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte

@@ -158,23 +158,27 @@
 </script>
 
 
-<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4">
+<div id="skala" class="bg-white grid grid-cols-1 p-4
 
-	<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
+lg:grid-cols-2 lg:gap-x-6
-		<PerformanceScore
+">
-			bind:ausweis
+
-			bind:aufnahme={aufnahme}
+<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
-			bind:objekt={objekt}
+	<PerformanceScore
-			{ausweisart}
+		bind:ausweis
-		/>
+		bind:aufnahme={aufnahme}
-	</div>
+		bind:objekt={objekt}
+		{ausweisart}
+	/>
 </div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
+<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
 		
 	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
-	<h2 class="text-primary text-xl">{ausweisart} {PRICES.BedarfsausweisWohnen[0]} €</h2>
+	<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
-	<ProgressBar progress={0} />
+	<ProgressBar step1={'step'}/>
+</div>
+
 </div>
 
 <form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
@@ -1003,7 +1007,8 @@
 				/></Bereich
 			>
 
-	
+		</div>
+		
 			<ButtonWeiterHilfe {spaeterWeitermachen}
 			bind:ausweis
 			bind:images
@@ -1012,15 +1017,8 @@
 			bind:aufnahme
 			ausweisart={Enums.Ausweisart.BedarfsausweisWohnen}
 			/>
-		<BilderZusatzsysteme
+		
-				{ausweis}
+
-				{objekt}
+
-				{aufnahme}
+	
-				{images}
-			/>
-			<hr />
-			<div class="flex flex-row justify-between">
-				<button class="button">Weiter</button>
-			</div>
-	</div>
 </form>

src/style/global.css

@@ -48,7 +48,7 @@ main{
 }
 
 .button {
-	@apply w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
+	@apply w-full sm:w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
 	hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
 }