Merge pull request #312 from IBCornelsen/main

Update

src/components/design/content/WidgetCardTemplate.svelte

@@ -10,74 +10,63 @@
 </script>
 
 
+		
+
 
 
-		<div class="relative">
 		<h2 class="titel">{name}</h2>
+
 		{#if empfehlung=="ja"}
-		<div class="empfehlung bg-red-700 text-[0.75rem] text-white absolute right-12 top-1 px-2 py-1 rounded-full rotate-[5deg]">Empfelung</div>
+		<!--<div class="empfehlung">Empfehlung</div>-->
 		{/if}
-		</div>
+		
 
-		<hr class="mb-2" />
 
-		<div class="titelPic grid grid-cols-[25%_1fr_25%] items-center mb-0 mt-0 w-full">
+			<div class="sumCent">
-			
-			<div class="">
 				<img
-					class="w-[100%] justify-self-start"
+					class="image"
 					{src}
 					{alt}
 				/>
+				<div class="justify-self-start">
+					<p class="promo">
+						<span class="[font-family:Antique_Olive_Compact_bold]">
+							ab {price} €
+						</span> 
+					</p>
+				</div>
+
 			</div>
+
+	
+
+			<!--<div class="sumCent variante justify-self-end">{variant}</div>-->
+
+			<div class="sumCent sumRows">
 			
-			<div class="justify-self-start">
+				{#each services as [service, check]}
-				<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
+				<div class="services">
-					<span class="[font-family:Antique_Olive_Compact_bold]">
+					<span>{@html service}</span>
-						ab {price} €
+					<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
-					</span> 
+				</div>
-				</p>
+				{/each}
+	
 			</div>
 
-			<div class="variante justify-self-end">{variant}</div>
-
-			
-
-		</div>
 
 
-
+			<div class="sumCent buttoncols">	
-
-
-		<div class="white grid grid-rows-subgrid row-span-6 relative">
-			{#each services as [service, check]}
-			<div class="services grid grid-cols-[content-fit_1fr] items-center">
-				<span>{@html service}</span>
-				<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
-			</div>
-			{/each}
-		</div>
-
-
-
-
-		<div class="w-full grid grid-cols-2 gap-2">
 			<a
 				{href}
-				class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
+				class="buttoncol">jetzt&nbsp;online erstellen</a
-                    hover:bg-primary
-            ">jetzt online erstellen</a
 			>
 
 			<a
 				{href}
-				class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline 
+				class="buttoncol">Produktübersicht</a
-                    hover:bg-secondary/15
-            ">zur Produktübersicht</a
 			>
-		</div>
-
 
+			</div>
 
 
 
@@ -85,15 +74,25 @@
 
 
 <style lang="postcss">
-	.titel {@apply [font-size:_clamp(14px,1.5vw,18px)] 
+
-		pr-12 text-left
+
-	}
+.sumCent{@apply justify-self-center col-span-2 mb-6}
+.sumRows{@apply grid grid-rows-subgrid row-span-5}
+.image{@apply w-[75%] pl-12}
+.buttoncols{@apply grid grid-cols-2 gap-x-10}
+.buttoncol{@apply w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
+	hover:bg-primary}
+.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
+				font-family: "Antique Olive Compact bold";}
+
+	.titel {@apply col-span-2 text-center [font-size:_clamp(14px,2.5vw,28px)]}
+	.empfehlung{@apply bg-red-700 text-[0.75rem] text-white  px-2 py-1 rounded-sm rotate-[5deg]}
 	.variante {
-		@apply -mt-2 text-xl w-fit text-black justify-self-end;
+		@apply col-span-2 -mt-2 text-xl w-fit text-black justify-self-end;
 	}
 
 	.services {
-		@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)];
+		@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)] items-center;
 	}
 	.services:not(:last-child) {
 		@apply border-b-[1px] border-gray-200;

src/components/design/content/WidgetCardTemplate_ORG.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	export let price: number;
+	export let name: string;
+	export let variant: string;
+	export let services: [string, boolean][];
+	export let href: string;
+	export let src: string;
+	export let alt: string;
+	export let empfehlung: string;
+</script>
+
+		
+		<h2 class="titel">{name}</h2>
+		{#if empfehlung=="ja"}
+		<!--<div class="empfehlung">Empfehlung</div>-->
+		{/if}
+		
+
+		<div class="titelPic grid grid-cols-2 items-center mb-0 mt-0 w-full">
+			
+			<div style="">
+				<img
+					{src}
+					{alt}
+				/>
+			</div>
+			
+			<div class="justify-self-start">
+				<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
+					<span class="[font-family:Antique_Olive_Compact_bold]">
+						ab {price} €
+					</span> 
+				</p>
+			</div>
+
+		</div>
+
+
+		<div class="variante justify-self-end">{variant}</div>
+
+
+		<div class="white grid grid-rows-subgrid row-span-6 relative">
+			{#each services as [service, check]}
+			<div class="services grid grid-cols-[content-fit_1fr] items-center">
+				<span>{@html service}</span>
+				<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
+			</div>
+			{/each}
+		</div>
+
+
+
+
+		<div class="w-full grid grid-cols-2 gap-2">
+			<a
+				{href}
+				class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
+                    hover:bg-primary
+            ">jetzt online erstellen</a
+			>
+
+			<a
+				{href}
+				class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline 
+                    hover:bg-secondary/15
+            ">zur Produktübersicht</a
+			>
+		</div>
+
+
+
+
+
+
+
+
+<style lang="postcss">
+	.titel {@apply [font-size:_clamp(14px,1.5vw,18px)] 
+		pr-12 text-left
+	}
+	.empfehlung{@apply bg-red-700 text-[0.75rem] text-white  px-2 py-1 rounded-sm rotate-[5deg]}
+	.variante {
+		@apply -mt-2 text-xl w-fit text-black justify-self-end;
+	}
+
+	.services {
+		@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)];
+	}
+	.services:not(:last-child) {
+		@apply border-b-[1px] border-gray-200;
+	}
+	.check {
+		@apply justify-self-end font-bold text-green-700;
+	}
+	.check-no {
+		@apply justify-self-end font-bold text-red-700;
+	}
+
+</style>

src/components/widgets/WelcherAusweisWidget_1.svelte

@@ -40,12 +40,12 @@
 
 function row3col(){
     var x = document.getElementById('anlass').value;
+	
     if(allowedReason.includes(x)){
-    document.getElementById('firstrow').classList.remove('grid-cols-2');
+    document.getElementById('firstrow').style.gridTemplateColumns = "repeat(3, minmax(0, 1fr))";
-    document.getElementById('firstrow').classList.add('grid-cols-3');
     }else{
-    document.getElementById('firstrow').classList.remove('grid-cols-3');
+    document.getElementById('firstrow').style.gridTemplateColumns = "repeat(2, minmax(0, 1fr))";
-    document.getElementById('firstrow').classList.add('grid-cols-2');    
+  
     }
 }
 
@@ -59,24 +59,24 @@ if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){
 if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('4');anzahl=4;}
 
 var cols 		= 'grid-cols-'+anzahl
-console.log(cols);
+
 if(anzahl==1){
 
 }else if(anzahl==2) {
 	var x = document.getElementById('thirdrow')?.children;
 	console.log(x);
-	for (let i = 0; i < x.length; i++) {
+//	for (let i = 0; i < x.length; i++) {
-			x[i].classList.remove('col-span-1');
+//			x[i].classList.remove('col-span-1');
-			x[i].classList.add('col-span-2');
+//			x[i].classList.add('col-span-2');
-}
+//}
 
 }else if(anzahl==4) {
 	var x = document.getElementById('thirdrow')?.children;
 	console.log(x);
-		for (let i = 0; i < x.length; i++) {
+//		for (let i = 0; i < x.length; i++) {
-			x[i].classList.remove('col-span-2');
+//			x[i].classList.remove('col-span-2');
-			x[i].classList.add('col-span-1');
+//			x[i].classList.add('col-span-1');
-}
+//}
 }
 
 }
@@ -96,7 +96,7 @@ if(anzahl==1){
 				<select
                     id="anlass"
 					class="selectfeld"
-					bind:value={anlass} on:change={row3col} on:change={getDivs}
+					bind:value={anlass} on:change={getDivs} on:change={row3col} 
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Vermietung/Verkauf"
@@ -353,7 +353,7 @@ if(anzahl==1){
 *{font-family: "Heron";}
 
 #OEA_widget {
-	@apply w-full min-w-[640px] max-w-[1920px] p-[10px];
+	@apply min-w-[640px] max-w-[1920px] p-[10px];
 
 .firstrow{@apply grid grid-cols-2 gap-x-4 gap-y-2;
 
@@ -373,8 +373,9 @@ if(anzahl==1){
 
 .thirdrow{@apply grid grid-cols-4 gap-x-4 gap-y-2;
 
-.produktbox{@apply grid grid-rows-subgrid col-span-2 row-span-12 ring-1 ring-black/15 rounded-sm bg-white 
+.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-12 rounded-sm bg-black/5 rounded-lg
 	px-2 py-2 mt-5;
+	box-shadow:2px 2px 8px rgba(0,0,0,0.25)
 
 
 }