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

widget css immowelt

Browse Source
This commit is contained in:
Robert Jagtiani
2025-02-09 20:23:56 +01:00
parent b2d81edc08
commit 3f0d1f6906
10 changed files with 595 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte
View File

@@ -26,7 +26,7 @@
<div id="ProduktUebersichtBedarfssausweisGewerbe">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

4
src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte
View File

@@ -26,7 +26,7 @@
<div id="ProduktUebersichtBedarfssausweisWohnen">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

4
src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte
View File

@@ -26,7 +26,7 @@
<div id="ProduktUebersichtVerbrauchsausweisGewerbe">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

4
src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte
View File

@@ -26,7 +26,7 @@ bullets = [
<div id="ProduktUebersichtVerbrauchsausweisWohnen">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@ bullets = [
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

18
src/components/design/content/WidgetCardTemplate.svelte
View File

@@ -31,9 +31,7 @@
/>
<div class="justify-self-start">
<p class="promo">
<span class="[font-family:Antique_Olive_Compact_bold]">
ab {price} €
</span>
ab {price} €
</p>
</div>
@@ -80,7 +78,7 @@
.sumCent{@apply justify-self-center col-span-2 md:mb-6}
.sumRows{@apply hidden md:grid grid-rows-subgrid row-span-5}
.forServices{@apply w-full md:w-auto}
.forServices{@apply block}
.image{@apply w-[75%] justify-self-center
md:w-[75%] md:pl-12}
@@ -88,11 +86,11 @@
.buttoncols{@apply grid grid-cols-1 gap-x-10 w-full
md:grid-cols-2 md:w-[auto]}
.buttoncol{@apply mt-[0.5rem] text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
hover:bg-primary}
.buttoncol{@apply mt-[0.5rem] text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
hover:bg-[#222222] hover:text-white}
.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
.promo{@apply tracking-tighter text-[2rem] text-gray-700 pl-12 m-0 -mt-4;
font-family: "Antique Olive Compact bold";}
@@ -104,16 +102,16 @@ hover:bg-primary}
}
.services {
@apply hidden w-full text-start py-1 md:grid grid-cols-[1fr_minmax(25px,50px)] items-center;
@apply hidden w-full text-start py-1 md:grid md:grid-cols-[1fr_50px]
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;
}
.check {
@apply justify-self-end font-bold text-green-700;
@apply justify-self-end self-center font-bold text-green-700;
}
.check-no {
@apply justify-self-end font-bold text-red-700;
@apply justify-self-end self-center font-bold text-red-700;
}
</style>

40
src/components/widgets/WelcherAusweisWidget_1.svelte
View File

@@ -170,7 +170,7 @@ $: {
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
price={PRICES.VerbrauchsausweisWohnen[0]}
src="/images/right-sidebar/wohngebaeude.svg"
src="/images/immowelt/wohngebaeude_immowelt.svg"
alt="Wohnhaus Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
@@ -195,7 +195,7 @@ $: {
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
price={PRICES.BedarfsausweisWohnen[0]}
src="/images/right-sidebar/wohngebaeude.svg"
src="/images/immowelt/wohngebaeude_immowelt.svg"
alt="Wohnhaus Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
@@ -212,7 +212,7 @@ $: {
</div>
{/if}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (ausnahme === false)}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
@@ -220,13 +220,13 @@ $: {
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbegebäude"
price={PRICES.VerbrauchsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
services={[
["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom&nbsp;nötig.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
["Wird nicht immer bei den Banken akzeptiert.", false],
@@ -247,7 +247,7 @@ $: {
<WidgetCardTemplate
name="Bedarfsausweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
@@ -273,7 +273,7 @@ $: {
<WidgetCardTemplate
name="GEG-Nachweis Wohngebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
empfehlung="nein"
@@ -300,7 +300,7 @@ $: {
<WidgetCardTemplate
name="GEG-Nachweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
empfehlung="nein"
@@ -340,8 +340,26 @@ $: {
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
}
@font-face {
font-family: "immo Sans";
src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
font-style: normal;
font-weight: 400;
}
*{font-family: "Heron";}
@font-face {
font-family: "immo Sans Bold";
src: url('/fonts/Immo-Sans/immoSans-Bold.eot');
src: url('/fonts/Immo-Sans/immoSans-Bold.eot?#iefix') format('embedded-opentype'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff2') format('woff2'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff') format('woff');
font-style: normal;
font-weight: 700;
}
*{font-family: "immo Sans";}
#OEA_widget {
@apply min-w-[320px] max-w-[1920px] p-[4px]
@@ -350,7 +368,7 @@ $: {
.firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
.titel{@apply text-white font-sans font-bold bg-[#444f94] px-2 py-1 rounded-[0.25rem];}
.titel{@apply text-black font-bold bg-[#ffcc00] px-2 py-1 rounded-[0.25rem];}
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
@@ -359,7 +377,7 @@ $: {
.secondrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 mt-4
sm:grid-cols-4 sm:gap-x-4 sm:gap-y-2;
.titel{@apply text-black font-sans font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
.titel{@apply text-black font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}

1
src/style/global.css
View File

@@ -35,6 +35,7 @@
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
color:#222222;
}