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

FELDER DESIGN #205

Merged
UMBENOMENA merged 1 commits from UMBE into main 2024-12-10 20:44:42 +00:00
Conversation 0 Commits 1 Files Changed 4 +366 -234
4 changed files with 366 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
public/images/icons/info-mark.ai
View File

File diff suppressed because one or more lines are too long

15
public/images/icons/info-mark.svg
View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 38 38">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10.9 23.8">
<defs>
<style>
.cls-1, .cls-2 {
@@ -29,15 +29,18 @@
</defs>
<!-- Generator: Adobe Illustrator 28.7.3, SVG Export Plug-In . SVG Version: 1.2.0 Build 164) -->
<g>
<g id="Ebene_1">
<circle class="cls-4" cx="19" cy="19.2" r="19.2"/>
<circle class="cls-3" cx="19" cy="19.2" r="16.4"/>
<g id="Ebene_1" class="cls-5">
<circle class="cls-4" cx="5.4" cy="12.8" r="19.2"/>
<circle class="cls-3" cx="5.4" cy="12.8" r="16.4"/>
<g class="cls-5">
<path class="cls-1" d="M15.9,29.2c-.7,0-1.1-.2-1.5-.7-.4-.6-.6-1.4-.6-2.4,0-1.8,1-5.2,2.9-10l.8-1.9c0-.2.3-.4.6-.4s.2,0,.4,0c.5.1,1,.3,1.4.6.4.3.6.6.6.9s-.1.5-.4,1.2c-1.9,4.7-2.8,7.9-2.8,9.8s0,.6.3.6.5-.3,1-.8c.6-.7,1.2-1.4,1.7-2.1,1.3-1.7,2.3-3,3-4,.1-.2.3-.3.5-.3s.3,0,.4.2c.1.1.2.3.2.4s0,.3-.1.4c-1.4,2-2.9,4-4.4,6-.4.5-.9,1.1-1.7,1.7-.6.5-1.3.8-2,.8ZM20.3,13.3c-.5,0-.9-.2-1.3-.5s-.5-.8-.5-1.3.2-.9.5-1.3c.4-.4.8-.5,1.3-.5s.9.2,1.3.5c.4.4.5.8.5,1.3s-.2.9-.5,1.3-.8.5-1.3.5Z"/>
<path class="cls-1" d="M2.3,22.8c-.7,0-1.1-.2-1.5-.7-.4-.6-.6-1.4-.6-2.4,0-1.8,1-5.2,2.9-10l.8-1.9c0-.2.3-.4.6-.4s.2,0,.4,0c.5.1,1,.3,1.4.6.4.3.6.6.6.9s-.1.5-.4,1.2c-1.9,4.7-2.8,7.9-2.8,9.8s0,.6.3.6.5-.3,1-.8c.6-.7,1.2-1.4,1.7-2.1,1.3-1.7,2.3-3,3-4,.1-.2.3-.3.5-.3s.3,0,.4.2c.1.1.2.3.2.4s0,.3-.1.4c-1.4,2-2.9,4-4.4,6-.4.5-.9,1.1-1.7,1.7-.6.5-1.3.8-2,.8ZM6.8,6.9c-.5,0-.9-.2-1.3-.5s-.5-.8-.5-1.3.2-.9.5-1.3c.4-.4.8-.5,1.3-.5s.9.2,1.3.5c.4.4.5.8.5,1.3s-.2.9-.5,1.3-.8.5-1.3.5Z"/>
</g>
</g>
<g id="Ebene_3">
<rect class="cls-4" x=".1" width="10.7" height="23.8"/>
</g>
<g id="Ebene_2">
<text class="cls-2" transform="translate(13.6 30.1)"><tspan x="0" y="0">i</tspan></text>
<text class="cls-2" transform="translate(0 23.7)"><tspan x="0" y="0">i</tspan></text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

98
src/components/Bedarfsausweis/BedarfsausweisContent2.svelte
View File

@@ -141,29 +141,87 @@
<div class="w-[300px] p-4">
<!-- Anlass für Energieausweis -->
<div class="grid grid-cols-[max-content_1fr_38px] items-center">
<div class=" w-full justify-self-start bg-secondary text-white py-[6px] px-[10px] rounded-s-md min-h-[38px] ring-1 ring-secondary">Anlass*</div>
<select id="ausstellgrund" class="rounded-s-none" name="ausstellgrund">
<option value="" disabled selected>Anlass</option>
<option value="Neubau">Neubau</option>
<option value="Vermietung">Vermietung</option>
<option value="Verkauf">Verkauf</option>
<option value="Modernisierung">Modernisierung</option>
<option value="Sonstiges">Sonstiges</option>
</select>
<div class=""><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Anlass *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anlass">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Heizung *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Gebäude *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Anzahl Wohnungen *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anzahl Wohnungen">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Sanierungsstatus *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Sanierungsstatus">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
</div>
<br>
<div class="grid grid-cols-[1fr_38px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Heizung</div>
<input id="baujahr_anlage" class="pt-[18px]" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung">
<div class=""><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Straße, Hausnummer *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Straße, Hausnummer *">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">PLZ *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="PLZ *">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Ort *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Ort *">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Wohnfläche m² *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Wohnfläche m² *">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Keller *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Keller *">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Dachgeschoss *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Dachgeschoss *">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Gesamtfläche m²</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Gesamtfläche m²">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
</div>

22
src/components/HelpLabel_new.svelte
View File

@@ -6,17 +6,17 @@
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
<img
src="/images/icons/info-mark.svg"
alt="?"
class="w-[30px] h-[30px] ml-2"
/>
<div class="tooltip">
<slot></slot>
<div id="arrow" class="invisible absolute h-3 w-6 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
</div>
</div>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-center">
<img
src="/images/icons/info-mark.svg"
alt="info"
class="w-[10px] h-[18px]"
/>
<div class="tooltip">
<slot></slot>
<div id="arrow" class="invisible absolute h-3 w-6 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
</div>
</div>