public
/
di-stepper
6
0
Fork 0
Code Issues Pull Requests Projects Releases 6 Wiki Activity
Browse Source

mod overwrites

dev
Philipp Lang 2 years ago
parent
0b9492eb90
commit
e6d460ba5c
7 changed files with 93 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      assets/js/Stepper.vue
  2. 2
      assets/js/components/RadioGrid.vue
  3. 2
      assets/js/components/VBtn.vue
  4. 2
      assets/js/components/VCheckbox.vue
  5. 16
      assets/js/components/VText.vue
  6. 12
      tailwind.config.js
  7. 15
      templates/overwrite.htm

146
assets/js/Stepper.vue
View File

@ -68,9 +68,9 @@
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
<heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
v-model="value.construction_year" />
-->
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
v-model="value.construction_year" />
-->
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide v-if="value.category == 'Gewerbe'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
@ -99,9 +99,9 @@
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
<heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
v-model="value.construction_year" />
-->
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
v-model="value.construction_year" />
-->
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="5">
@ -125,75 +125,73 @@
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide>
<!--
<slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
<heading>Bitte geben Sie Ihre Daten ein</heading>
<div class="grid grid-cols-2 gap-4">
<v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
<v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
<v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
<v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
<v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
<v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
<v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
<v-checkbox class="col-span-2" v-model="value.datenschutz" id="datenschutz" name="datenschutz"
label='Ich habe die <a href="/datenschutzerklaerung" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
</div>
<pagination v-model="innerStep" class="mt-6" :nextable="
value.object_address.length > 0 &&
value.object_zip.length > 0 &&
value.object_location.length > 0 &&
value.firstname.length !== 0 &&
value.lastname.length !== 0 &&
value.email.length !== 0 &&
value.phone.length !== 0
" submit></pagination>
</slide>
<slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
<heading>Bitte geben Sie Ihre Daten ein</heading>
<div class="grid grid-cols-2 gap-4">
<v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
<v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
<v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
<v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
<v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
<v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
<v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
<v-checkbox class="col-span-2" v-model="value.datenschutz" id="datenschutz" name="datenschutz"
label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
</div>
<pagination v-model="innerStep" class="mt-6" :nextable="
value.object_address.length > 0 &&
value.object_zip.length > 0 &&
value.object_location.length > 0 &&
value.firstname.length !== 0 &&
value.lastname.length !== 0 &&
value.email.length !== 0 &&
value.phone.length !== 0
" submit></pagination>
</slide>
<slide v-if="value.category" :key="slideCount[value.category] + 1">
<div
class="w-full h-full bg-white ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
<div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
<svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
<div
class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]">
</div>
</div>
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
<img class="w-64 h-32 object-cover"
src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
</div>
<div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
<img class="w-64 h-32 object-cover"
src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
</div>
</div>
<div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
<div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
<div class="text-sm mt-4 md:text-lg">
In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei
Ihnen melden.
</div>
<div class="flex justify-between mt-3 items-end">
<span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine
Immobilienbewertung</span>
<div class="flex-none ml-3">
<img
src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
</div>
</div>
</div>
</div>
</slide>
-->
<slide v-if="value.category" :key="slideCount[value.category] + 1">
<div
class="w-full h-full bg-white ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
<div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
<svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
<div
class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]">
</div>
</div>
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
<img class="w-64 h-32 object-cover"
src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
</div>
<div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
<img class="w-64 h-32 object-cover"
src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
</div>
</div>
<div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
<div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
<div class="text-sm mt-4 md:text-lg">
In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei
Ihnen melden.
</div>
<div class="flex justify-between mt-3 items-end">
<span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine
Immobilienbewertung</span>
<div class="flex-none ml-3">
<img
src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
</div>
</div>
</div>
</div>
</slide>
</carousel>
</form>
</template>

2
assets/js/components/RadioGrid.vue
View File

@ -11,7 +11,7 @@
@click="$emit('update:modelValue', item.key)"
/>
<span
class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primarycustom peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
>
<img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
<span class="mt-4 font-semibold text-gray-700 text-sm" v-text="item.label"></span>

2
assets/js/components/VBtn.vue
View File

@ -1,7 +1,7 @@
<template>
<button
:type="type"
class="bg-primarycustom px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
class="bg-primary px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
@click.prevent="$emit('click', $event)"
>
<slot></slot>

2
assets/js/components/VCheckbox.vue
View File

@ -3,7 +3,7 @@
<label :for="id" class="block relative flex items-center">
<input :id="id" type="checkbox" :name="name" :checked="inner === true" class="peer absolute invisible" @change="inner = !inner" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
<span class="peer-checked:bg-primarycustom left-[6px] w-3 h-3 absolute rounded-sm block"></span>
<span class="peer-checked:bg-primary left-[6px] w-3 h-3 absolute rounded-sm block"></span>
<span class="pl-8" v-html="label"></span>
</label>
</div>

16
assets/js/components/VText.vue
View File

@ -1,6 +1,12 @@
<template>
<label class="w-full border border-solid focus-within:border-primary rounded-lg relative flex">
<input :name="name" :id="id" placeholder=" " v-model="inner" class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto" />
<input
:id="id"
v-model="inner"
:name="name"
placeholder=" "
class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto"
/>
<span
class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm"
>{{ label }} <span class="text-red-800 ml-1">*</span></span
@ -14,7 +20,7 @@ export default {
value: {},
label: {},
id: {},
name: {}
name: {},
},
computed: {
@ -24,8 +30,8 @@ export default {
},
set(v) {
this.$emit('input', v);
}
}
}
},
},
},
};
</script>

12
tailwind.config.js
View File

@ -1,16 +1,14 @@
module.exports = {
content: [
'./assets/js/**/*.vue',
],
content: ['./assets/js/**/*.vue'],
theme: {
extend: {
colors: {
primary: {
DEFAULT: 'hsl(25.3, 71.3%, 56.3%)'
}
}
DEFAULT: 'var(--iw-slider-primary-color)',
},
},
},
},
plugins: [],
important: true,
}
};

15
templates/overwrite.htm
View File

@ -1,16 +1,5 @@
<style type="text/css">
.slider-custom {
--slider-connect-bg: #ef4444;
--slider-tooltip-bg: #ef4444;
--slider-handle-ring-color: #ef444430;
}
.bg-primarycustom {
background-color: #ff0000 !important;
}
.peer:checked ~ .peer-checked\:border-b-primarycustom {
border-bottom-color: #ff0000 !important;
}
.text-primary {
color: #ff0000 !important;
:root {
--iw-slider-primary-color: #ff0000;
}
</style>

Write Preview
Loading…
Cancel
Save