Tweaks to Spacing

rappasoft · Jul 16, 2024 · ca3bcb2 · ca3bcb2
1 parent 99eb9ad
commit ca3bcb2
Showing 1 changed file with 26 additions and 27 deletions.
diff --git a/resources/views/components/tools/filters/number-range.blade.php b/resources/views/components/tools/filters/number-range.blade.php
@@ -2,37 +2,36 @@
     $filterKey = $filter->getKey();
     $currentMin = $minRange = $filter->getConfig('minRange');
     $currentMax = $maxRange = $filter->getConfig('maxRange');
+    $suffix = $filter->getConfig('suffix');
 @endphp
 <div id="{{ $tableName }}-numberRange-{{ $filterKey }}" x-data="numberRangeFilter($wire,'{{ $filterKey }}', '{{ $tableName }}-numberRange-{{ $filterKey }}-wrapper', @js($filter->getConfigs()), '{{ $tableName }}-numberRange-{{ $filterKey }}')" x-on:mousedown.away.throttle.2000ms="updateWireable" x-on:touchstart.away.throttle.2000ms="updateWireable" x-on:mouseleave.throttle.2000ms="updateWireable">
     <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
-
-
-        <div @class([
+    <div
+        @class([
             'mt-4 h-22 pt-8 pb-4 grid gap-10' => $isTailwind,
             'mt-4 h-22 w-100 pb-4 pt-2 grid gap-10' => $isBootstrap,
-            ]) wire:ignore>
-            <div 
-                id="{{ $tableName }}-numberRange-{{ $filterKey }}-wrapper" data-ticks-position='bottom'
-                @class([
-                    'range-slider flat' => $isTailwind,
-                    'range-slider flat w-100' => $isBootstrap,
-                ])
-                style='--min:{{ $minRange }};
-                --max:{{ $maxRange }};
-                --suffix:"{{ $filter->getConfig('suffix') }}";
-                '>
-
-                <input type="range" min="{{ $minRange }}" max="{{ $maxRange }}" value="{{ $currentMin }}"
-                    id="{{ $tableName }}-numberRange-{{ $filterKey }}-min" x-model='filterMin' x-on:change="updateWire()"  
-                    oninput="this.parentNode.style.setProperty('--value-a',this.value); this.parentNode.style.setProperty('--text-value-a', JSON.stringify(this.value))"
-                    />
-                <output></output>
-                <input type="range" min="{{ $minRange }}" max="{{ $maxRange }}" value="{{ $currentMax }}"
-                    id="{{ $tableName }}-numberRange-{{ $filterKey }}-max" x-model='filterMax' x-on:change="updateWire(); "
-                    oninput="this.parentNode.style.setProperty('--value-b',this.value); this.parentNode.style.setProperty('--text-value-b', JSON.stringify(this.value))"
-                    />
-                <output></output>
-                <div class='range-slider__progress'></div>
-            </div>
+        ])
+        wire:ignore
+    >
+        <div 
+            id="{{ $tableName }}-numberRange-{{ $filterKey }}-wrapper" data-ticks-position='bottom'
+            @class([
+                'range-slider flat' => $isTailwind,
+                'range-slider flat w-100' => $isBootstrap,
+            ])
+            style=' --min:{{ $minRange }}; --max:{{ $maxRange }}; --suffix:"{{ $suffix }}";'
+        >
+            <input type="range" min="{{ $minRange }}" max="{{ $maxRange }}" value="{{ $currentMin }}"
+                id="{{ $tableName }}-numberRange-{{ $filterKey }}-min" x-model='filterMin' x-on:change="updateWire()"  
+                oninput="this.parentNode.style.setProperty('--value-a',this.value); this.parentNode.style.setProperty('--text-value-a', JSON.stringify(this.value))"
+            />
+            <output></output>
+            <input type="range" min="{{ $minRange }}" max="{{ $maxRange }}" value="{{ $currentMax }}"
+                id="{{ $tableName }}-numberRange-{{ $filterKey }}-max" x-model='filterMax' x-on:change="updateWire()"
+                oninput="this.parentNode.style.setProperty('--value-b',this.value); this.parentNode.style.setProperty('--text-value-b', JSON.stringify(this.value))"
+            />
+            <output></output>
+            <div class='range-slider__progress'></div>
         </div>
+    </div>
 </div>