UMBENOMENA
@@ -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="">
|
||||
<div class="sumCent">
|
||||
<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">
|
||||
<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
|
||||
<span class="[font-family:Antique_Olive_Compact_bold]">
|
||||
ab {price} €
|
||||
</span>
|
||||
</p>
|
||||
{#each services as [service, check]}
|
||||
<div class="services">
|
||||
<span>{@html service}</span>
|
||||
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="variante justify-self-end">{variant}</div>
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
<div class="sumCent buttoncols">
|
||||
<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
|
||||
class="buttoncol">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
|
||||
class="buttoncol">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;
|
||||
|
||||
99
src/components/design/content/WidgetCardTemplate_ORG.svelte
Normal file
99
src/components/design/content/WidgetCardTemplate_ORG.svelte
Normal file
@@ -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>
|
||||
@@ -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').classList.add('grid-cols-3');
|
||||
document.getElementById('firstrow').style.gridTemplateColumns = "repeat(3, minmax(0, 1fr))";
|
||||
}else{
|
||||
document.getElementById('firstrow').classList.remove('grid-cols-3');
|
||||
document.getElementById('firstrow').classList.add('grid-cols-2');
|
||||
document.getElementById('firstrow').style.gridTemplateColumns = "repeat(2, minmax(0, 1fr))";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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++) {
|
||||
x[i].classList.remove('col-span-1');
|
||||
x[i].classList.add('col-span-2');
|
||||
}
|
||||
// for (let i = 0; i < x.length; i++) {
|
||||
// x[i].classList.remove('col-span-1');
|
||||
// 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++) {
|
||||
x[i].classList.remove('col-span-2');
|
||||
x[i].classList.add('col-span-1');
|
||||
}
|
||||
// for (let i = 0; i < x.length; i++) {
|
||||
// x[i].classList.remove('col-span-2');
|
||||
// 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)
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user