fixed image select error

fixed select 2 ui
imporoved ui/ux meta list

public/css/app.css

@@ -730,6 +730,32 @@ li.no_results {
   display: none;
 }
 
+.cats-x3 {
+  -moz-column-count: 4;
+       column-count: 4;
+}
+
+/*-1000px width*/
+@media (max-width: 1000px) {
+  .cats-x3 {
+    -moz-column-count: 3;
+         column-count: 3;
+  }
+}
+/*-600px width*/
+@media (max-width: 600px) {
+  .cats-x3 {
+    -moz-column-count: 2;
+         column-count: 2;
+  }
+}
+/*-300px width*/
+@media (max-width: 300px) {
+  .cats-x3 {
+    -moz-column-count: 1;
+         column-count: 1;
+  }
+}
 .wizard .steps {
   display: flex;
   position: relative;
@@ -906,6 +932,10 @@ li.no_results {
   background: dodgerblue;
 }
 
+.select2-container {
+  max-width: 97%;
+}
+
 body {
   overflow-x: hidden;
   zoom: 100%;

resources/js/components/MetaPrice.vue

@@ -125,7 +125,12 @@ export default {
     },
     methods: {
         changeImg:function ($k) {
+            // console.log($k);
+            // console.log(this.onSelectImage);
+            // console.log(this.quantities);
             this.quantities[this.onSelectImage].image = $k;
+            // console.log(this.quantities);
+            this.$forceUpdate();
         },
         showModal: function (i) {
             // this.showModal(i);
@@ -212,12 +217,16 @@ export default {
     background: #FFFFFF99;
     z-index: 999;
     overflow-y: scroll;
+    backdrop-filter: blur(3px);
 }
 
 
 #overlay img {
     max-width: 100%;
+    width: 100%;
     opacity: .75;
+    height: 150px;
+    object-fit: cover;
 }
 
 #overlay img.selected {

resources/sass/fix-libs.scss

@@ -1,3 +1,7 @@
 .multiselect__tag{
     background: dodgerblue;
 }
+
+.select2-container{
+    max-width: 97%;
+}

resources/sass/props.scss

@@ -2,3 +2,29 @@
 #xls-file,#optionz{
     display: none;
 }
+
+.cats-x3{
+    column-count: 4
+}
+
+/*-1000px width*/
+@media (max-width: 1000px) {
+    .cats-x3{
+        column-count: 3
+    }
+}
+
+/*-600px width*/
+@media (max-width: 600px) {
+    .cats-x3{
+        column-count: 2
+    }
+}
+
+/*-300px width*/
+@media (max-width: 300px) {
+    .cats-x3{
+        column-count: 1
+    }
+}
+

resources/theme/theme.js

@@ -1,69 +1 @@
-axios = require('axios');
+axios = require('axios');
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

alertify = require('alertifyjs');
require('../js/bootstrap');
window._ = require('lodash');
require('bootstrap/dist/js/bootstrap.bundle')
require('chart.js/dist/chart.min')
var $ = window.jQuery = jQuery = require('jquery');
require('lightbox2/dist/js/lightbox.min');
require('owl.carousel/dist/owl.carousel.min');
require('xzoom/dist/xzoom.min');

window.Vue = require('vue').default;

// require('./js/gsap.min.js');
// require('./js/Physics2DPlugin3.min');
// require('./js/mega-menu.js');
require('./js/product.js');
require('./js/theme.js');
require('./js/chart.js');
require('../js/customer.js');




// require('../js/')
Vue.component('example-component', require('../js/components/ExampleComponent.vue').default);
Vue.component('meta-price', require('../js/components/MetaPrice.vue').default);
Vue.component('currency', require('../js/components/CurrencyInput.vue').default);
Vue.component('meta-element', require('../js/components/MetaElement.vue').default);
Vue.component('meta-search', require('../js/components/MetaSearch').default);

var app = new Vue({
    el: '#app',
    data: {
        metaz: '123',
        jdata: [],
        def: [],
    },
    mounted() {

    },
    created() {
        if (document.querySelector('#jDataSrc') !== undefined && document.querySelector('#jDataSrc') != null){
            try {
                this.jdata = JSON.parse(document.querySelector('#jDataSrc').value);
                this.def = JSON.parse(document.querySelector('#jDef').value);
            } catch {
                console.log('json error: for meta product page');
            }
        }
    },
    methods: {
    },
    watch:{
        jdata:{
            handler: function(n) {
                this.$refs.metaEl.updateJdata(n);
                // this.$refs.metaPr.updateJdata(n);
            },
            deep: true
        },
    }
});
window.app = app;
-window.axios = axios;
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-alertify = require('alertifyjs');
-require('../js/bootstrap');
-window._ = require('lodash');
-require('bootstrap/dist/js/bootstrap.bundle')
-require('chart.js/dist/chart.min')
-var $ = window.jQuery = jQuery = require('jquery');
-require('lightbox2/dist/js/lightbox.min');
-require('owl.carousel/dist/owl.carousel.min');
-require('xzoom/dist/xzoom.min');
-
-window.Vue = require('vue').default;
-
-// require('./js/gsap.min.js');
-// require('./js/Physics2DPlugin3.min');
-// require('./js/mega-menu.js');
-require('./js/product.js');
-require('./js/theme.js');
-require('./js/chart.js');
-require('../js/customer.js');
-
-
-
-
-// require('../js/')
-Vue.component('example-component', require('../js/components/ExampleComponent.vue').default);
-Vue.component('meta-price', require('../js/components/MetaPrice.vue').default);
-Vue.component('currency', require('../js/components/CurrencyInput.vue').default);
-Vue.component('meta-element', require('../js/components/MetaElement.vue').default);
-Vue.component('meta-search', require('../js/components/MetaSearch').default);
-
-var app = new Vue({
-    el: '#app',
-    data: {
-        metaz: '123',
-        jdata: [],
-        def: [],
-    },
-    mounted() {
-
-    },
-    created() {
-        if (document.querySelector('#jDataSrc') !== undefined && document.querySelector('#jDataSrc') != null){
-            try {
-                this.jdata = JSON.parse(document.querySelector('#jDataSrc').value);
-                this.def = JSON.parse(document.querySelector('#jDef').value);
-            } catch {
-                console.log('json error: for meta product page');
-            }
-        }
-    },
-    methods: {
-    },
-    watch:{
-        jdata:{
-            handler: function(n) {
-                this.$refs.metaEl.updateJdata(n);
-                // this.$refs.metaPr.updateJdata(n);
-            },
-            deep: true
-        },
-    }
-});
-window.app = app;
-
-

resources/views/admin/props/propForm.blade.php

@@ -81,20 +81,33 @@
                 </select>
             </div>
             <div class="form-group">
-                            <label for="category">{{__("Category")}}</label>
+                <label>{{__("Category")}}</label>
-                            <select
+                {{--                            <select--}}
-                                multiple
+                {{--                                multiple--}}
-                                name="category[]"
+                {{--                                name="category[]"--}}
-                                id="category"
+                {{--                                id="category"--}}
-                                class="form-control"
+                {{--                                class="form-control"--}}
-                                data-placeholder="Select category"
+                {{--                                data-placeholder="Select category"--}}
-                                required>
+                {{--                                required>--}}
-                                <option value=""></option>
+                {{--                                <option value=""></option>--}}
-                                @foreach($allCategories as $cat)
+                {{--                                @foreach($allCategories as $cat)--}}
-                                    <option value="{{ $cat->id }}"
+                {{--                                    <option value="{{ $cat->id }}"--}}
-                                            @if(isset($cats) && in_array($cat->id,$cats)) selected @endif > {{$cat->name}} </option>
+                {{--                                            @if(isset($cats) && in_array($cat->id,$cats)) selected @endif > {{$cat->name}} </option>--}}
+                {{--                                @endforeach--}}
+                {{--                            </select>--}}
+                {{--                            --}}
+                <div class="cats-x3">
+                    @foreach($allCategories as $k => $cat)
+
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" value="{{ $cat->id }}"
+                                   @if(isset($cats) && in_array($cat->id,$cats)) checked @endif  name="category[]"
+                                   type="checkbox" id="c{{$k}}">
+                            <label class="form-check-label" for="c{{$k}}"> {{$cat->name}} </label>
+                        </div>
                     @endforeach
-                            </select>
+                </div>
+
             </div>
             <div>
             </div>
@@ -102,7 +115,8 @@
                 <label>
                     {{__("Is effective price?")}}
                 </label>
-                <input type="checkbox" @if( isset($p) && $p->priceable) checked @endif name="priceable" class="form-check">
+                <input type="checkbox" @if( isset($p) && $p->priceable) checked @endif name="priceable"
+                       class="form-check">
             </div>
             <div class="card-header">
                 {{__("Icon")}}
@@ -137,7 +151,9 @@
                 </h2>
                 <div class="content">
                 </div>
-                <div class="btn btn-success m-2" style="float: left" id="add-options"> <div class="fa fa-plus"></div></div>
+                <div class="btn btn-success m-2" style="float: left" id="add-options">
+                    <div class="fa fa-plus"></div>
+                </div>
             </div>
             <div class="clearfix"></div>
             <div class="form-group">