From 8d3a3ed3ee5dac55ea4c75b68b81e508edd3c4eb Mon Sep 17 00:00:00 2001 From: philipp lang Date: Wed, 27 Oct 2021 00:39:15 +0200 Subject: [PATCH] Add fields --- assets/css/app.css | 1 + assets/css/range.css | 91 +++++++++ assets/css/stepper.css | 10 + assets/js/Stepper.vue | 185 +++++++++++++++--- assets/js/app.js | 5 +- assets/js/svg.mixin.js | 7 + package.json | 2 +- resources/img/sprite.svg | 1 + .../img}/svg/anschlussfinanzierung.svg | 0 {assets => resources/img}/svg/bauvorhaben.svg | 0 {assets => resources/img}/svg/home.svg | 0 .../img}/svg/immobilienfinanzierung.svg | 0 src/Stepper.php | 25 +-- stepper.php | 3 + tailwind.config.js | 24 ++- 15 files changed, 294 insertions(+), 60 deletions(-) create mode 100644 assets/css/range.css create mode 100644 assets/js/svg.mixin.js create mode 100644 resources/img/sprite.svg rename {assets => resources/img}/svg/anschlussfinanzierung.svg (100%) rename {assets => resources/img}/svg/bauvorhaben.svg (100%) rename {assets => resources/img}/svg/home.svg (100%) rename {assets => resources/img}/svg/immobilienfinanzierung.svg (100%) diff --git a/assets/css/app.css b/assets/css/app.css index fe879df..14dcb6e 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -2,6 +2,7 @@ @import "tailwindcss/components"; @import "stepper"; +@import "range"; @import "tailwindcss/utilities"; diff --git a/assets/css/range.css b/assets/css/range.css new file mode 100644 index 0000000..125b2b6 --- /dev/null +++ b/assets/css/range.css @@ -0,0 +1,91 @@ +input[type=range] { + width: 100%; + margin: 7.3px 0; + background-color: transparent; + -webkit-appearance: none; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + background: rgba(48, 113, 169, 0.78); + border: 0.2px solid #010101; + border-radius: 1.3px; + width: 100%; + height: 11.4px; + cursor: pointer; +} +input[type=range]::-webkit-slider-thumb { + margin-top: -7.5px; + width: 26px; + height: 26px; + background: #feffff; + border: 1.8px solid #00001e; + border-radius: 15px; + cursor: pointer; + -webkit-appearance: none; +} +input[type=range]:focus::-webkit-slider-runnable-track { + background: #367ebd; +} +input[type=range]::-moz-range-track { + background: rgba(48, 113, 169, 0.78); + border: 0.2px solid #010101; + border-radius: 1.3px; + width: 100%; + height: 11.4px; + cursor: pointer; +} +input[type=range]::-moz-range-thumb { + width: 26px; + height: 26px; + background: #feffff; + border: 1.8px solid #00001e; + border-radius: 15px; + cursor: pointer; +} +input[type=range]::-ms-track { + background: transparent; + border-color: transparent; + border-width: 8.2px 0; + color: transparent; + width: 100%; + height: 11.4px; + cursor: pointer; +} +input[type=range]::-ms-fill-lower { + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; +} +input[type=range]::-ms-fill-upper { + background: rgba(48, 113, 169, 0.78); + border: 0.2px solid #010101; + border-radius: 2.6px; +} +input[type=range]::-ms-thumb { + width: 26px; + height: 26px; + background: #feffff; + border: 1.8px solid #00001e; + border-radius: 15px; + cursor: pointer; + margin-top: 0px; + /*Needed to keep the Edge thumb centred*/ +} +input[type=range]:focus::-ms-fill-lower { + background: rgba(48, 113, 169, 0.78); +} +input[type=range]:focus::-ms-fill-upper { + background: #367ebd; +} +/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out +how to remove the virtical space around the range input in IE*/ + @supports (-ms-ime-align:auto) { + /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */ + input[type=range] { + margin: 0; + /*Edge starts the margin from the thumb, not the track as other browsers do*/ + } + } + diff --git a/assets/css/stepper.css b/assets/css/stepper.css index e014874..ec5192c 100644 --- a/assets/css/stepper.css +++ b/assets/css/stepper.css @@ -7,6 +7,16 @@ .stepper { + .option-box > span { + @apply bg-gray-200 p-3 rounded flex justify-center items-center flex-col; + & > span:nth-child(1) svg { + @apply w-10 h-10; + } + & > span:nth-child(1) { + @apply font-semibold mt-5; + } + } + .fancy-checkbox { display: flex; align-items: center; diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue index e42d453..9b2def1 100644 --- a/assets/js/Stepper.vue +++ b/assets/js/Stepper.vue @@ -1,10 +1,108 @@ @@ -13,8 +111,53 @@ export default { data: function() { return { + value: { + category_id: null, + kind_id: null, + grundstuecksflaeche: null, + wohnflaeche: null, + rooms: 1, + constructedAt: 1950, + firstname: '', + lastname: '', + address: '', + zip: '', + location: '', + phone: '', + email: '', + etagen: null, + }, innerStep: 0, - slideCount: 2, + slideCount: 8, + categories: [ + { key: 'house', label: 'Haus', kinds: [ + { label: 'Einfamilienhaus' }, + { label: 'Mehrfamilienhaus' }, + { label: 'Reihenhaus' }, + { label: 'Doppelhaushälfte' }, + ] }, + { key: 'area', label: 'Grundstück', kinds: [] }, + { key: 'apartment', label: 'Wohnung', kinds: [] }, + { key: 'gewerbe', label: 'Gewerbe', kinds: [] }, + ], + grundstuecksflaechen: [ + { label: 'bis 300 m²' }, + { label: 'bis 301 - 1000 m²' }, + { label: 'über 1000 m²' }, + { label: 'weiß nicht' }, + ], + wohnflaechen: [ + { label: 'bis 100 m²' }, + { label: '101 - 200 m²' }, + { label: 'über 200 m²' }, + { label: 'weiß nicht' }, + ], + etagen: [ + { label: '1' }, + { label: '2' }, + { label: '3' }, + { label: '4 oder mehr' }, + ] }; }, computed: { @@ -32,29 +175,15 @@ export default { } }, }, - methods: { - slideTo(e, index) { - if (e !== null) { - e.preventDefault(); - } - - var _self = this; - this.step = index; - - if (index === 0) { - window.setTimeout(function() { - _self.value.kind = null; - }, 500); - } - - jQuery('html, body').stop().animate({ - 'scrollTop': jQuery('#stepper-main').offset().top - }, 600, 'swing'); - - this.$nextTick(function() { - _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index; - }); - } + mounted() { + this.$refs.stepper.scrollLeft = this.$refs.stepper.scrollWidth / this.slideCount * this.innerStep; } }; + + diff --git a/assets/js/app.js b/assets/js/app.js index a8ce2a4..bae955e 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -2,7 +2,9 @@ import axios from 'axios'; import wNumb from 'wnumb'; import Vue from 'vue'; import Stepper from './Stepper.vue'; +import svg from './svg.mixin.js'; +Vue.mixin(svg); const app = new Vue({ components: { Stepper @@ -100,9 +102,6 @@ window.stepper = { ], /* Methods */ - svg(icon) { - return ``; - }, submit() { axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', { diff --git a/assets/js/svg.mixin.js b/assets/js/svg.mixin.js new file mode 100644 index 0000000..be04ca3 --- /dev/null +++ b/assets/js/svg.mixin.js @@ -0,0 +1,7 @@ +export default { + methods: { + svg(icon, cls) { + return ``; + } + } +}; diff --git a/package.json b/package.json index e152fe2..e68b2e9 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", - "img": "cd assets/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../public/sprite.svg && rm -R sprite" + "img": "rm -R assets/public/img; cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img assets/public/img" }, "keywords": [], "author": "", diff --git a/resources/img/sprite.svg b/resources/img/sprite.svg new file mode 100644 index 0000000..bd952c6 --- /dev/null +++ b/resources/img/sprite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/anschlussfinanzierung.svg b/resources/img/svg/anschlussfinanzierung.svg similarity index 100% rename from assets/svg/anschlussfinanzierung.svg rename to resources/img/svg/anschlussfinanzierung.svg diff --git a/assets/svg/bauvorhaben.svg b/resources/img/svg/bauvorhaben.svg similarity index 100% rename from assets/svg/bauvorhaben.svg rename to resources/img/svg/bauvorhaben.svg diff --git a/assets/svg/home.svg b/resources/img/svg/home.svg similarity index 100% rename from assets/svg/home.svg rename to resources/img/svg/home.svg diff --git a/assets/svg/immobilienfinanzierung.svg b/resources/img/svg/immobilienfinanzierung.svg similarity index 100% rename from assets/svg/immobilienfinanzierung.svg rename to resources/img/svg/immobilienfinanzierung.svg diff --git a/src/Stepper.php b/src/Stepper.php index 5d721a2..8a7d488 100644 --- a/src/Stepper.php +++ b/src/Stepper.php @@ -11,7 +11,8 @@ use Twig\TwigFunction as Func; class Stepper { private $twig; - public $url; + public string $url; + public string $scriptUrl; public function __construct() { $loader = new FilesystemLoader(__DIR__.'/../views'); @@ -45,29 +46,15 @@ class Stepper { } public function enqueue() { - wp_enqueue_script('stepper-js', $this->url.'assets/public/app.js', [], false, true); - wp_enqueue_style('stepper-css', $this->url.'assets/public/app.css'); + wp_enqueue_script('stepper-js', $this->scriptUrl.'app.js', [], false, true); + wp_enqueue_style('stepper-css', $this->scriptUrl.'app.css'); } public function handle() { - if (array_key_exists('kind', $_GET)) { - $data = [ - 'kaufpreis' => $_GET['kaufpreis'], - 'eigenk' => $_GET['eigenkapital'], - 'kind' => $_GET['kind'], - 'step' => 1 - ]; - } else { - $data = [ - 'kaufpreis' => 300000, - 'eigenk' => 0, - 'kind' => null, - 'step' => 0 - ]; - } + $data = []; return $this->twig->render('stepper.twig.htm', [ - 'sprite' => $this->url.'assets/public/sprite.svg', + 'sprite' => $this->url.'assets/public/img/sprite.svg', 'data' => $data, ]); } diff --git a/stepper.php b/stepper.php index d0c1114..43e4578 100644 --- a/stepper.php +++ b/stepper.php @@ -20,5 +20,8 @@ use Zoomyboy\Stepper\Stepper; $stepper = new Stepper(); $stepper->loadEnv(__DIR__); $stepper->url = plugin_dir_url(__FILE__); +$stepper->scriptUrl = file_exists(__DIR__.'/assets/public/hot') + ? 'http://localhost:8080/' + : plugin_dir_url(__FILE__); $stepper->initFrontend(); diff --git a/tailwind.config.js b/tailwind.config.js index 62dfdaf..e4822b5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,17 @@ module.exports = { - purge: [], - darkMode: false, // or 'media' or 'class' - theme: { - extend: {}, - }, - variants: { - extend: {}, - }, - plugins: [], + purge: [], + darkMode: false, // or 'media' or 'class' + theme: { + extend: { + colors: { + primary: { + DEFAULT: 'hsl(26.5, 86.5%, 50.8%)' + } + } + }, + }, + variants: { + extend: {}, + }, + plugins: [], }