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

Ausweis Module RESPONSIV

Browse Source
This commit is contained in:
Robert Jagtiani
2025-02-12 01:20:32 +01:00
parent 094b40e604
commit e48753f9bd
11 changed files with 61 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@
export let images: UploadedGebaeudeBild[] = [];
</script>
<div class="grid grid-cols-2 gap-x-6 mt-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 mt-6">
<div class="box card mb-0 relative">
@@ -60,8 +60,6 @@
<DatenblattButton {ausweis} />
</div>
</div>
</div>

34
src/components/Ausweis/DaemmungImage.svelte
View File

@@ -8,17 +8,17 @@
export let gebaeude: ObjektClient;
</script>
<div class="grid grid-cols-2 gap-x-6 mt-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
<div class="box card mb-0">
<div class="md:box md:card mb-0">
<p class="font-bold mb-2">
<div class="font-bold mb-2">
<span class="text-red-500">WICHTIG:</span>
Bild Upload - Wärmedämmung (2 bis 4 Bilder)
</p>
</div>
<p>
<div>
Seit Mai 2021 wird das neue Gebäudeenergiegesetz (GEG) in
Deutschland angewendet. Daher werden von nun an Bilder vom Gebäude
zur Einschätzung der Modernisierungsempfehlungen benötigt. Hierfür
@@ -26,23 +26,17 @@
Gebäudehülle und der Anlagentechnik (Wärmeerzeuger etc.) zur
Verfügung gestellt werden. Diese Bilder erscheinen nicht auf Ihrem
Energieausweis.
</p>
</div>
<br />
<ol>
<li>1.Bild : Detailbild Dach bzw. des Dachinnenraums*</li>
<li>
2.Bild : <em
>(weiteres Detailbild Dach bzw. des Dachinnenraums)</em
>
</li>
<li>2.Bild :<em>(weiteres Detailbild Dach bzw. des Dachinnenraums)</em></li>
<li>3.Bild : Detailbild der Außenwand*</li>
<li>
4.Bild : <em>(weiteres Detailbild der Außenwand)</em>
</li>
<li>4.Bild : <em>(weiteres Detailbild der Außenwand)</em></li>
</ol>
<p>* erforderliches Bild</p>
<div>* erforderliches Bild</div>
<br />
<p>
<div>
Idealerweise sollte Dämmung oder nicht vorhandene Dämmung gut zu
erkennen sein. Sollte aufgrund der Verkleidung bzw. Verschalung, der
Dämmzustand nicht erkennbar sein, reicht ein Bild vom ausgebauten
@@ -50,15 +44,15 @@
beim Detailbild der Außenwand aufgrund des Wandaufbaus die Dämmung
nicht erkennbar sein, reicht ein normales Bild der Außenwand
und/oder vom Dach-Wandanschluss.
</p>
</div>
</div>
<div class="box card mb-0">
<p>
<div class="md:box md:card mb-0 mt-6 md:mt-0">
<div>
Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
Energieausweis!<br />
<strong>Bitte laden Sie hier mind. 2 Bilder hoch:</strong>
</p>
</div>
<ImageGrid
max={4}
min={2}

38
src/components/Ausweis/FensterImage.svelte
View File

@@ -8,16 +8,16 @@
export let gebaeude: ObjektClient;
</script>
<div class="grid grid-cols-2 gap-x-6 mt-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
<div class="box card mb-0">
<div class="md:box md:card mb-0">
<p class="font-bold mb-2">
<div class="font-bold mb-2">
<span class="text-red-500">WICHTIG:</span>
Bild Upload - Fenster/Dachfenster/Türen (1 bis 4 Bilder)
</p>
</div>
<p>
<div>
Seit Mai 2021 wird das neue Gebäudeenergiegesetz (GEG) in
Deutschland angewendet. Daher werden von nun an Bilder vom Gebäude
zur Einschätzung der Modernisierungsempfehlungen benötigt. Hierfür
@@ -25,36 +25,30 @@
Gebäudehülle und der Anlagentechnik (Wärmeerzeuger etc.) zur
Verfügung gestellt werden. Diese Bilder erscheinen nicht auf Ihrem
Energieausweis.
</p>
<br />
</div>
<br />
<ol>
<li>1. Bild : Exemplarisches Bild eines Fensters*</li>
<li>
2.Bild : <em>(Im Baualter abweichendes Fenster)</em>
</li>
<li>
3.Bild : <em>(Im Baualter abweichendes Fenster)</em>
</li>
<li>
4.Bild : <em>(wenn möglich, Bild der Haustür)</em>
</li>
<li>2.Bild : <em>(Im Baualter abweichendes Fenster)</em></li>
<li>3.Bild : <em>(Im Baualter abweichendes Fenster)</em></li>
<li>4.Bild : <em>(wenn möglich, Bild der Haustür)</em></li>
</ol>
<p>* erforderliches Bild</p>
<div>* erforderliches Bild</div>
<br />
<p>
<div>
Wenn eine Fensterart bzw. Fensterqualität verbaut wurde, reicht ein
exemplarisches Bild, sonst pro Art ein Bild. Wenn möglich eine
Großaufnahme des Fensters bzw. des Fensterfalzes. Idealerweise
sollte der Datumsaufdruck am Verglasungsrahmen zu erkennen sein.
</p>
</div>
</div>
<div class="box card mb-0">
<p>
<div class="md:box md:card mb-0 mt-6 md:mt-0">
<div>
Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
Energieausweis!<br />
<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
</p>
</div>
<ImageGrid
max={4}
min={1}

27
src/components/Ausweis/HeizungImage.svelte
View File

@@ -8,17 +8,16 @@
export let gebaeude: ObjektClient;
</script>
<div class="grid grid-cols-2 gap-x-6 mt-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
<div id="getWidth" class="box card mb-0">
<div class="md:box md:card mb-0">
<p class="font-bold mb-2">
<div class="font-bold mb-2">
<span class="text-red-500">WICHTIG:</span>
Bild Upload - Heizungsanlage bzw. des Wärmeerzeugers (1 bis 4 Bilder)
</p>
</div>
<p>
<div>
Seit Mai 2021 wird das neue Gebäudeenergiegesetz (GEG) in
Deutschland angewendet. Daher werden von nun an Bilder vom Gebäude
zur Einschätzung der Modernisierungsempfehlungen benötigt. Hierfür
@@ -26,31 +25,31 @@
Gebäudehülle und der Anlagentechnik (Wärmeerzeuger etc.) zur
Verfügung gestellt werden. Diese Bilder erscheinen nicht auf Ihrem
Energieausweis.
</p>
</div>
<br />
<ol class="">
<ol>
<li>1.Bild : Heizungsraum mit Heizkessel bzw. Heizungsanlage*</li>
<li>2.Bild : <em>(wenn möglich, Warmwasserleitungen bzw. die Heizungsrohre)</em></li>
<li>3.Bild : <em>(wenn möglich, Detailbild des Wärmeerzeugers bzw. Heizkessel)</em></li>
<li>4.Bild : <em>(wenn möglich, Bild des Typenschildes der Heizung)</em></li>
</ol>
<br>
<p>* erforderliches Bild</p>
<div>* erforderliches Bild</div>
<br />
<p>
<div>
Idealerweise sollte der Heizungsraum mit Heizkessel bzw.
Heizungsanlage fotografiert werden. Die Warmwasserleitungen bzw. die
Heizungsrohre sollten gut sichtbar sein und vorhandene bzw. nicht
vorhandene Dämmung sollte erkennbar sein.
</p>
</div>
</div>
<div class="box card mb-0">
<p>
<div class="md:box md:card mb-0 mt-6 md:mt-0">
<div>
Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf
Ihrem Energieausweis!<br />
<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
</p>
</div>
<ImageGrid
name={"heizung_image"}

4
src/components/Ausweis/SanierungszustandFensterTueren.svelte
View File

@@ -23,9 +23,9 @@
</script>
<div id="sanierungszustand" class="bereich-box grid
<div id="sanierungszustand" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-1
sm:grid-cols-1 sm:gap-x-6 sm:gap-y-1
md:grid-cols-2 md:gap-x-6 md:gap-y-8

4
src/components/Ausweis/SanierungszustandHeizungsanlage.svelte
View File

@@ -24,9 +24,9 @@
<div
id="sanierungszustand"
class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-2
grid-cols-1 gap-x-4 gap-y-1
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
sm:grid-cols-1 sm:gap-x-6 sm:gap-y-1
md:grid-cols-2 md:gap-x-6 md:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8

4
src/components/Ausweis/SanierungszustandWaermedammung.svelte
View File

@@ -24,9 +24,9 @@
</script>
<div id="sanierungszustand" class="bereich-box grid
<div id="sanierungszustand" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-1
sm:grid-cols-1 sm:gap-x-6 sm:gap-y-1
md:grid-cols-2 md:gap-x-6 md:gap-y-8

4
src/components/Ausweis/Verbrauch.svelte
View File

@@ -110,7 +110,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
"
>
<!-- primäre Heizquellen -->
<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 order-1 md:order-1 xl:order-1">
<div class="input-standard">
<Inputlabel title="Heizquellen"></Inputlabel>
@@ -139,7 +139,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</div>
<div class="input-standard">
<Inputlabel title="Heizquellen"></Inputlabel>
<div class="input-checkboxen">
<div
class="grid grid-cols-[25px_max-content] items-center justify-items-start"

12
src/components/labels/Bereich.svelte
View File

@@ -5,15 +5,15 @@
let collapse: HTMLDivElement;
</script>
<div class="bereichs-label">
<div>
<div class="bereichs-label w-full">
<div
class="grid grid-cols-[max-content_1fr_40px] items-center justify-items-start gap-2"
class="grid grid-cols-[max-content_1fr_max-content] items-center justify-items-start gap-2"
>
<div class="formular-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2">{title}</div>
<div
class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
class="justify-self-end self-center cursor-pointer text-[1.25rem] ring-1 ring-secondary px-2 rounded-sm select-none"
on:click={() => {
open = !open
}}
@@ -26,7 +26,7 @@
</div>
</div>
</div>
</div>
<div class="collapseBereich" bind:this={collapse} class:max-h-0={!open} class:overflow-hidden={!open} class:max-h-[1500px]={open} class:overflow-visible={open}>
<div class="collapseBereich" bind:this={collapse} class:max-h-0={!open} class:overflow-hidden={!open} class:max-h-[1800px]={open} class:overflow-visible={open}>
<slot></slot>
</div>

4
src/components/labels/BereichLabel.svelte
View File

@@ -23,13 +23,13 @@
<div class="bereichs-label" bind:this={label}>
<div>
<div
class="grid grid-cols-[max-content_1fr_40px] items-center justify-items-start gap-2"
class="grid grid-cols-[max-content_1fr_max-content] items-center justify-items-start gap-2"
>
<div class="formular-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2"><slot></slot></div>
<div
class="justify-self-center self-center mr-[2px] cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
class="justify-self-center self-center mr-[2px] cursor-pointer text-[2rem] ring-1 ring-secondary px-2 rounded-sm select-none"
on:click={toggleBereich}
>
{#if open}

2
src/layouts/AusweisLayoutDaten_immowelt.astro
View File

@@ -85,7 +85,7 @@ window.addEventListener("scroll", (event) => {
<!--<SidebarLeft />-->
<article class="p-2 lg:p-2">
<article class="p-0 lg:p-2">
<slot />
</article>