Merge pull request #324 from IBCornelsen/UMBE

widget

src/components/design/content/WidgetCardTemplate.svelte

@@ -11,16 +11,14 @@
 </script>
 
 
-
+{#if empfehlung=="ja"}
+<div class="empfehlung">Empfehlung</div>
+{/if}
 		<h2 class="titel sm:mb-2">{name}</h2>
 
-		{#if empfehlung=="ja"}
-		<!--<div class="empfehlung">Empfehlung</div>-->
-		{/if}
-		
-
 
 			<div class="sumCent">
+				<div class="variante">{variant}</div>
 				<img
 					class="image"
 					{src}
@@ -47,8 +45,6 @@
 	
 				</div>
 
-			<!--<div class="sumCent variante justify-self-end">{variant}</div>-->
-
 			<div class="sumRows forServices">
 			
 				{#each services as [service, check]}
@@ -61,14 +57,6 @@
 			</div>
 
 
-
-
-
-
-
-
-
-
 <style lang="postcss">
 
 
@@ -87,15 +75,15 @@ md:grid-cols-2 md:w-[auto]}
 hover:bg-[#222222] hover:text-white}
 
 
-	.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4;
+	.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4 text-nowrap;
 				font-family: "Antique Olive Compact bold";}
 
 
 
 	.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
-	.empfehlung{@apply bg-red-700 text-[0.75rem] text-white  px-2 py-1 rounded-sm rotate-[5deg]}
+	.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
 	.variante {
-		@apply col-span-2 -mt-2 text-xl w-fit text-black justify-self-end;
+		@apply italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-[#ffcc00] rounded-md pl-[4px] pr-[6px] py-[0px];
 	}
 
 	.services {

src/components/widgets/WelcherAusweisWidget_1.svelte

@@ -34,12 +34,12 @@ function getCount(){
 if(oneBOX===true){
 	console.log('ONE');
 	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
-	document.getElementById('thirdrow')?.classList.remove('grid-cols-4');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
 	document.getElementById('thirdrow')?.classList.add('grid-cols-1');
 }else if(threeBOX===true){
 	console.log('THREE');
 	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
-	document.getElementById('thirdrow')?.classList.remove('grid-cols-4');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
 
 	document.getElementById('thirdrow')?.classList.add('md:grid-cols-6');
 
@@ -49,11 +49,9 @@ else{
 	console.log('FOUR');
 	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
 	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
-	document.getElementById('thirdrow')?.classList.add('grid-cols-4');
+	document.getElementById('thirdrow')?.classList.add('md:grid-cols-4');
 }
 
-
-
 }
 
 
@@ -63,11 +61,12 @@ ausnahme 	= 	((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (bau
             : false;
 
 oneBOX 		=  	((ausnahme === true) && (gebaeudetyp != "Gewerbegebäude")) && (gebaeudetyp != "Mischgebäude") || 
-				((!twoBoxReason.includes(anlass)) && (gebaeudetyp != "Mischgebäude"))
+				((!twoBoxReason.includes(anlass)) && (gebaeudetyp != "Mischgebäude")) || 
+				((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
             ? true 
             : false;
 
-threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass)))
+threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
             ? true 
             : false;
 			
@@ -249,7 +248,7 @@ threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBo
 				</div>
 			{/if}
 
-			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
+			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
 				<div
 					class="produktbox"
 					transition:fade={{ duration: 0 }}
@@ -322,7 +321,8 @@ threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBo
 					["xxx", false],
 					["xxx", false],
 				]}
-				href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/" 
 
 			></WidgetCardTemplate>
 			
@@ -349,7 +349,8 @@ threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBo
 					["xxx", false],
 					["xxx", false],
 				]}
-				href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
 			></WidgetCardTemplate>
 			
 			</div>
@@ -414,10 +415,10 @@ threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBo
 
 #OEA_input{@apply grid}
 
-.thirdrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 col-start-1
+.thirdrow{@apply grid grid-cols-1 gap-x-4 gap-y-2 col-start-1
 	md:grid-cols-4 md:gap-x-4 md:gap-y-2;
 
-.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 sm:row-span-12 bg-black/5 rounded-lg
+.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
 	px-2 py-2 mt-5;
 	box-shadow:2px 2px 8px rgba(0,0,0,0.25)