bbs/clrghouz
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Updates to bootstrap/select2

Browse Source
This commit is contained in:
Deon George 2024-12-04 15:19:44 +11:00
parent c69cbe8746
commit b239f52719
5 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/Helpers/PageAssets.php
View File

@ -109,10 +109,11 @@ class PageAssets
'select2' => [
'base' => [
'css' => [
'//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css',
'//cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css',
'//cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css',
],
'js' => [
'//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js',
'//cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js',
'/plugin/select2/fix-autofocus.js',
],
],

34
public/css/fixes.css vendored
View File

@ -1,15 +1,27 @@
/* Fixes for select 2 and our theme */
/*
.select2 .select2-container .select2-container--classic { width: 80% !important;}
*/
.select2-container .select2-selection--single { border-radius: 0 4px 4px 0; height: inherit;}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--classic .select2-selection--single .select2-selection__arrow { line-height: 36px; }
.select2-results { color: #000; }
/*
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
*/
.select2-container--default .select2-results__option--selected { background-color: #024cc4; color: #eeeeee;}
/* The opened input box */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
line-height: 1.0;
border: 1px solid #aaa;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
line-height: 1.2;
padding: 0.3rem 0.2rem 0.3rem 0.4rem;
font-size: 85%;
}
select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear
{
width: 0.5rem;
height: 0.5rem;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder
{
line-height: 1.0;
font-size: 90%;
}
/* Bootstrap 5 fixes */
/* select import, round the right side */

8
resources/views/components/form/select.blade.php
View File

@ -1,6 +1,6 @@
<x-form.base {{ $attributes }}>
<input type="hidden" id="{{ $name }}_disabled" name="{{ $name }}" value="" disabled>
<select style="width: 80%;" class="form-select @error((! empty($old)) ? $old : $name) is-invalid @enderror" id="{{ $id ?? $name }}" name="{{ $name }}" @required(isset($required)) @disabled(isset($disabled))>
<select class="form-select @error((! empty($old)) ? $old : $name) is-invalid @enderror" id="{{ $id ?? $name }}" name="{{ $name }}" @required(isset($required)) @disabled(isset($disabled))>
@if(empty($value) || isset($addnew) || isset($choose))
<option value=""></option>
@isset($addnew)
@ -47,14 +47,16 @@
$(document).ready(function() {
$('#{{ $id ?? $name }}').select2({
theme: 'bootstrap-5',
dropdownAutoWidth: true,
width: 'style',
allowClear: true,
placeholder: '',
@isset($addvalues)
tags: true,
@isset($placeholder)
placeholder: '{{ $placeholder ?? '' }}',
placeholder: '{{ $placeholder }}',
@endisset
allowClear: true,
@endisset
});
});

2
resources/views/layouts/partials/htmlheader.blade.php
View File

@ -10,7 +10,7 @@
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS only -->
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link type="text/css" rel="stylesheet" href="{{ url('oldschool/css/main.css') }}" media="screen">

2
resources/views/layouts/partials/scripts.blade.php
View File

@ -3,7 +3,7 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Additional Utilities -->
<script src="{{ asset('plugin/bootstrap3-typeahead/bootstrap3-typeahead.min.js') }}"></script>