forked from TFMM/silent-auction
feat: install and scaffold Tablar theme #6
@@ -1,24 +1,56 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
|
||||
@push('js')
|
||||
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.ts-control { background-color: #ffffff !important; border: 1px solid #ced4da !important; }
|
||||
/* Ensure visibility in both light and dark themes */
|
||||
.ts-wrapper .ts-control {
|
||||
background-color: #ffffff !important;
|
||||
color: #1d273b !important; /* Dark text for white background */
|
||||
border: 1px solid #ced4da !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.ts-dropdown {
|
||||
background-color: #ffffff !important;
|
||||
color: #1d273b !important;
|
||||
}
|
||||
.ts-dropdown .active {
|
||||
background-color: #f1f5f9 !important;
|
||||
}
|
||||
.ts-dropdown .option {
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
const init = () => {
|
||||
const initTomSelect = () => {
|
||||
document.querySelectorAll('select').forEach((el) => {
|
||||
if (el.tomselect) return;
|
||||
|
||||
// Skip if it's hidden or specifically excluded
|
||||
if (el.offsetWidth === 0 && el.offsetHeight === 0) return;
|
||||
|
||||
new TomSelect(el, {
|
||||
create: false,
|
||||
sortField: { field: 'text', direction: 'asc' }
|
||||
copyClassesToDropdown: false,
|
||||
dropdownParent: 'body',
|
||||
controlInput: '<input>',
|
||||
sortField: [{
|
||||
field: 'text',
|
||||
direction: 'asc',
|
||||
func: function(a, b) {
|
||||
// Natural sort for bidder/car numbers
|
||||
return a.text.localeCompare(b.text, undefined, {numeric: true, sensitivity: 'base'});
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
};
|
||||
// Use a single listener to prevent multiple triggers
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
document.addEventListener('DOMContentLoaded', initTomSelect);
|
||||
} else {
|
||||
init();
|
||||
initTomSelect();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -20,23 +20,27 @@
|
||||
{{ csrf_field() }}
|
||||
<div class="col-md-4">
|
||||
<label for="judge_id" class="form-label">Judge</label>
|
||||
<select name="judge_id" id="judge_id" class="form-select" required>
|
||||
<select name="judgenum" id="judge_id" class="form-select" required>
|
||||
<option value="">Select Judge</option>
|
||||
@foreach(\App\Models\Judges::all() as $judge)
|
||||
<option value="{{ $judge->idjudges }}">{{ $judge->judge_number }}</option>
|
||||
<option value="{{ $judge->id }}">{{ $judge->judge_number }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="vehicle_id" class="form-label">Vehicle</label>
|
||||
<select name="vehicle_id" id="vehicle_id" class="form-select" required>
|
||||
@foreach(\App\Models\Vehicles::all() as $vehicle)
|
||||
<option value="{{ $vehicle->idvehicles }}">{{ $vehicle->make }} {{ $vehicle->model }}</option>
|
||||
<select name="vehnum" id="vehicle_id" class="form-select" required>
|
||||
<option value="">Select Vehicle</option>
|
||||
@foreach(\App\Models\Vehicles::with('vehicleOwner')->get()->sortBy(function($v){ return (int)($v->vehicleOwner->bidder_assigned_number ?? 0); }) as $vehicle)
|
||||
<option value="{{ $vehicle->id }}">
|
||||
{{ $vehicle->vehicleOwner->bidder_assigned_number ?? '?' }} - {{ $vehicle->make }} {{ $vehicle->model }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="score" class="form-label">Score</label>
|
||||
<input type="number" name="score" id="score" class="form-control" required>
|
||||
<input type="number" name="vehscore" id="score" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary">Submit Score</button>
|
||||
@@ -48,17 +52,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.querySelectorAll('select').forEach(function(el) {
|
||||
new TomSelect(el, {
|
||||
dropdownParent: 'body',
|
||||
create: false,
|
||||
sortField: { field: 'text', direction: 'asc' }
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
@include('components.tomselect')
|
||||
|
||||
Reference in New Issue
Block a user