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

Add CSS Overwrite

dev
Philipp Lang 2 years ago
parent
e279af606e
commit
bdfbf05000
9 changed files with 99 additions and 74 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. 3
      assets/css/fix-carousel.css
  2. 1
      assets/css/slider-default.css
  3. 116
      assets/js/Stepper.vue
  4. 4
      assets/js/app.js
  5. 14
      assets/js/components/VSlider.vue
  6. 7
      package-lock.json
  7. 2
      package.json
  8. 13
      src/Stepper.php
  9. 13
      templates/overwrite.htm

3
assets/css/fix-carousel.css
View File

@ -0,0 +1,3 @@
li.carousel__slide {
display: block;
}

1
assets/css/slider-default.css
View File

File diff suppressed because one or more lines are too long

116
assets/js/Stepper.vue
View File

@ -2,63 +2,45 @@
<form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto w-[960px]" @submit.prevent="submit">
<carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" class="">
<slide :key="0" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
<heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
<radio-grid id="category" v-model="value.category" class="mt-8" :options="categories"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
</pagination>
</div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
<heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
<radio-grid id="category" v-model="value.category" class="mt-8" :options="categories"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
</pagination>
</slide>
<!-- ********************************* Haus ********************************** -->
<slide v-if="value.category == 'Haus'" :key="1" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?
</heading>
<radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8"
:options="plotAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
<radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide>
<slide v-if="value.category == 'Haus'" :key="2" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
<heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
<radio-grid id="house_living_area" v-model="value.living_area" class="mt-8"
:options="livingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
<heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
<radio-grid id="house_living_area" v-model="value.living_area" class="mt-8"
:options="livingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide>
<slide v-if="value.category == 'Haus'" :key="3" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
<radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
:options="numbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
<radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
:options="numbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide>
<slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
<heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :step="1" :handles="[1950]" class="w-4/5 mx-auto mt-10"
:range="range" v-model="value.construction_year" />
-->
<pagination v-model="innerStep" class="mt-24"></pagination>
</div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
<heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
<slider :min="1900" :max="maxYear" v-model="value.construction_year" class="slider-custom"> </slider>
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
<radio-grid id="house_condition" v-model="value.condition" class="mt-8"
:options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
<radio-grid id="house_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide>
<!-- ********************************* Gewerbe ********************************** -->
@ -88,9 +70,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 mt-10" :range="range"
v-model="value.construction_year" />
-->
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :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-16 px-8">
@ -120,9 +102,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 mt-10" :range="range"
v-model="value.construction_year" />
-->
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
v-model="value.construction_year" />
-->
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="5">
@ -174,7 +156,7 @@
<slide v-if="value.category" :key="slideCount[value.category] + 1">
<div
class="w-full h-full bg-white shadow-2xl 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">
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">
@ -221,7 +203,7 @@
<script>
import Heading from './components/Heading.vue';
import veeno from 'veeno';
import Slider from '@vueform/slider';
import wNumb from 'wnumb';
import 'nouislider/distribute/nouislider.min.css';
import axios from 'axios';
@ -230,7 +212,7 @@ import dayjs from 'dayjs';
export default {
components: {
Heading,
veeno,
Slider,
},
data: function () {
return {
@ -241,20 +223,8 @@ export default {
'Grundstück': 3,
},
finished: true,
tooltips: [wNumb({ decimals: 0 })],
pipsy: {
mode: 'steps',
density: 1,
filter: function (value) {
return value % 50 === 0 ? 1 : 0;
},
format: wNumb({
decimals: 0,
}),
},
range: { min: [1800, 1], max: [dayjs().year(), 1] },
value: {
category: null,
category: 'Haus',
living_area: null,
plot_area: null,
construction_year: null,
@ -270,7 +240,7 @@ export default {
source: 'Deine Immobilienbewertung',
datenschutz: false,
},
innerStep: 0,
innerStep: 4,
categories: [
{ key: 'Haus', label: 'Haus', icon: 'category-house' },
{ key: 'Grundstück', label: 'Grundstück', icon: 'category-plot' },
@ -363,6 +333,11 @@ export default {
furnishings: [{ label: 'einfach' }, { label: 'gepflegt' }, { label: 'sehr gut' }, { label: 'luxuriös' }],
};
},
computed: {
maxYear() {
return dayjs().add(1, 'year').get('year');
}
},
methods: {
setCategoryId(id) {
this.value.category = id;
@ -381,8 +356,3 @@ export default {
};
</script>
<style scoped>
.radio-grid {
display: grid;
grid-gap: 1rem;
}</style>

4
assets/js/app.js
View File

@ -10,8 +10,11 @@ import VBtn from './components/VBtn.vue';
import VText from './components/VText.vue';
import VCheckbox from './components/VCheckbox.vue';
import svg from './svg.mixin.js';
import VSlider from './components/VSlider.vue';
import 'vue3-carousel/dist/carousel.css';
import '../css/fix-carousel.css';
import '../css/slider-default.css';
var app = createApp()
.mixin(svg)
@ -23,6 +26,7 @@ var app = createApp()
.component('v-btn', VBtn)
.component('pagination', Pagination)
.component('v-checkbox', VCheckbox)
.component('v-slider', VSlider)
.component('v-text', VText);
app.provide('axios', app.config.globalProperties.axios);

14
assets/js/components/VSlider.vue
View File

@ -0,0 +1,14 @@
<template>
<div>
<slider :value="modelValue" @input="$emit('update:modelValue', $event)"> </slider>
</div>
</template>
<script setup>
import Slider from '@vueform/slider';
defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {},
});
</script>

7
package-lock.json
View File

@ -9,6 +9,7 @@
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
"@vueform/slider": "^2.1.10",
"axios": "^0.21.4",
"dayjs": "^1.11.10",
"eslint": "^8.55.0",
@ -2629,6 +2630,12 @@
"integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==",
"dev": true
},
"node_modules/@vueform/slider": {
"version": "2.1.10",
"resolved": "https://registry.npmjs.org/@vueform/slider/-/slider-2.1.10.tgz",
"integrity": "sha512-L2G3Ju51Yq6yWF2wzYYsicUUaH56kL1QKGVtimUVHT1K1ADcRT94xVyIeJpS0klliVEeF6iMZFbdXtHq8AsDHw==",
"dev": true
},
"node_modules/@webassemblyjs/ast": {
"version": "1.11.6",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",

2
package.json
View File

@ -16,6 +16,7 @@
"author": "",
"license": "ISC",
"devDependencies": {
"@vueform/slider": "^2.1.10",
"axios": "^0.21.4",
"dayjs": "^1.11.10",
"eslint": "^8.55.0",
@ -27,7 +28,6 @@
"postcss-nested": "^4.2.3",
"prettier": "^3.1.1",
"tailwindcss": "^3.3.6",
"veeno": "^0.0.4",
"vue": "^3.3",
"vue-axios": "^3.5.2",
"vue-loader": "^16.8.3",

13
src/Stepper.php
View File

@ -22,12 +22,25 @@ class Stepper
add_action('wp_enqueue_scripts', [$this, 'enqueue']);
add_action('wp_ajax_nopriv_stepper_submit', [$this, 'onSubmit']);
add_action('wp_ajax_stepper_submit', [$this, 'onSubmit']);
add_action('wp_footer', [$this, 'enqueueOverwrite']);
if (!is_admin()) {
add_shortcode('stepper', [$this, 'handle']);
}
}
public function enqueueOverwrite(): void
{
if (is_admin()) {
return;
}
ob_start();
require(__DIR__ . '/../templates/overwrite.htm');
echo ob_get_clean();
}
public function enqueue()
{
wp_enqueue_script('stepper-js', $this->scriptUrl . 'app.js', [], false, true);

13
templates/overwrite.htm
View File

@ -0,0 +1,13 @@
<style type="text/css">
.slider-custom {
--slider-connect-bg: #ef4444;
--slider-tooltip-bg: #ef4444;
--slider-handle-ring-color: #ef444430;
}
.bg-primary {
background-color: #ff0000 !important;
}
.text-primary {
color: #ff0000 !important;
}
</style>
Write Preview
Loading…
Cancel
Save