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[] = []; export let images: UploadedGebaeudeBild[] = [];
</script> </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"> <div class="box card mb-0 relative">
@@ -60,8 +60,6 @@
<DatenblattButton {ausweis} /> <DatenblattButton {ausweis} />
</div> </div>
</div> </div>
</div> </div>

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

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

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

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

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

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

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

@@ -23,9 +23,9 @@
</script> </script>
<div id="sanierungszustand" class="bereich-box grid <div id="sanierungszustand" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-1 grid-cols-1 gap-x-4 gap-y-1
sm:grid-cols-1 sm:gap-x-6 sm: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 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 <div
id="sanierungszustand" id="sanierungszustand"
class="bereich-box grid 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 md:grid-cols-2 md:gap-x-6 md:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl: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> </script>
<div id="sanierungszustand" class="bereich-box grid <div id="sanierungszustand" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-1 grid-cols-1 gap-x-4 gap-y-1
sm:grid-cols-1 sm:gap-x-6 sm: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 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 --> <!-- 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"> <div class="input-standard">
<Inputlabel title="Heizquellen"></Inputlabel> <Inputlabel title="Heizquellen"></Inputlabel>
@@ -139,7 +139,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
</div> </div>
<div class="input-standard"> <div class="input-standard">
<Inputlabel title="Heizquellen"></Inputlabel>
<div class="input-checkboxen"> <div class="input-checkboxen">
<div <div
class="grid grid-cols-[25px_max-content] items-center justify-items-start" 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; let collapse: HTMLDivElement;
</script> </script>
<div class="bereichs-label"> <div class="bereichs-label w-full">
<div>
<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-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2">{title}</div> <div class="formular-abschnitt2">{title}</div>
<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={() => { on:click={() => {
open = !open open = !open
}} }}
@@ -26,7 +26,7 @@
</div> </div>
</div> </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> <slot></slot>
</div> </div>

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

@@ -23,13 +23,13 @@
<div class="bereichs-label" bind:this={label}> <div class="bereichs-label" bind:this={label}>
<div> <div>
<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-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2"><slot></slot></div> <div class="formular-abschnitt2"><slot></slot></div>
<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} on:click={toggleBereich}
> >
{#if open} {#if open}

2
src/layouts/AusweisLayoutDaten_immowelt.astro
View File

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