IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

responsiv

Browse Source
This commit is contained in:
Robert Jagtiani
2025-02-19 19:30:44 +01:00
parent faf9ef8b0b
commit cde5661e30
11 changed files with 40 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/datenblatt.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 23 KiB

2
src/components/AnsichtsausweisButton.svelte
View File

@@ -38,6 +38,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>

2
src/components/Ausweis/AusweisPreviewContainer.svelte
View File

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

3
src/components/Ausweis/ButtonSpaeterHilfe.svelte
View File

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

6
src/components/Ausweis/ButtonWeiterHilfe.svelte
View File

@@ -57,9 +57,9 @@
let loginOverlayHidden = true;
</script>
<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>
<Hilfe />

7
src/components/Ausweis/Progressbar.svelte
View File

@@ -19,17 +19,17 @@
<div class="phase justify-self-start">
<div class="{step1} point">1</div>
<div class="">Gebäudedaten</div>
<div class="titel">Gebäudedaten</div>
</div>
<div class="phase">
<div class="{step2} point">2</div>
<div class="">Kundendaten</div>
<div class="titel">Kundendaten</div>
</div>
<div class="phase justify-self-end">
<div class="{step3} point">3</div>
<div class="">Kaufbestätigung</div>
<div class="titel">Kaufbestätigung</div>
</div>
</div>
@@ -41,5 +41,6 @@
.point{@apply rounded-full w-8 h-8 text-white font-bold bg-gray-300 text-center pt-1 ring-white ring-4;}
.step{@apply bg-secondary}
}
.titel{@apply [font-size:_clamp(12px,1vw,1.5rem)]}
</style>

2
src/components/DatenblattButton.svelte
View File

@@ -14,6 +14,6 @@
</script>
<a class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" target="_blank" href="/pdf/datenblatt?ausweis={base64Ausweis}&objekt=${base64Objekt}&aufnahme={base64Aufnahme}&bilder={base64Bilder}">
<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>
</a>

1
src/components/design/footer/Footer.astro
View File

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

6
src/components/design/header/AusweisHeader.astro
View File

@@ -2,7 +2,7 @@
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
@@ -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

32
src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
View File

@@ -158,9 +158,12 @@
</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
">
<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
<PerformanceScore
bind:ausweis
bind:aufnahme={aufnahme}
@@ -168,13 +171,14 @@
{ausweisart}
/>
</div>
</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>
<ProgressBar progress={0} />
<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
<ProgressBar step1={'step'}/>
</div>
</div>
<form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
@@ -1003,6 +1007,7 @@
/></Bereich
>
</div>
<ButtonWeiterHilfe {spaeterWeitermachen}
bind:ausweis
@@ -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>

2
src/style/global.css
View File

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