Skip to content

Commit 95a68b9

Browse files
luispabonluispabon
authored
Replace jQuery/bootstrap-multiselect with custom vanilla JS multiselect (#390)
Removes jQuery and bootstrap-multiselect dependencies entirely, replacing them with a lightweight custom PHPDockerMultiSelect class. Consolidates the four per-version PHP extension form fields into a single dynamic field that swaps its options via a JSON data blob embedded in the page.
1 parent fdc325c commit 95a68b9

13 files changed

Lines changed: 269 additions & 419 deletions

File tree

‎assets/css/app.css‎

Lines changed: 5 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -133,99 +133,8 @@
133133
}
134134
}
135135

136-
/* bootstrap-multiselect overrides */
137-
button.multiselect.dropdown-toggle {
138-
display: block;
139-
width: 100%;
140-
background: #080d19;
141-
border: 1px solid #1c3050;
142-
border-radius: .375rem;
143-
color: #e2e8f0;
144-
padding: .5rem .75rem;
145-
font-family: 'JetBrains Mono', monospace;
146-
font-size: .875rem;
147-
text-align: left;
148-
cursor: pointer;
149-
transition: border-color .15s, box-shadow .15s;
150-
}
151-
152-
button.multiselect.dropdown-toggle:hover,
153-
button.multiselect.dropdown-toggle:focus {
154-
border-color: #38bdf8;
155-
box-shadow: 0 0 0 3px rgba(56, 189, 248, .2);
156-
outline: none;
157-
}
158-
159-
.multiselect-container.dropdown-menu {
160-
display: block;
161-
position: relative;
162-
z-index: 10;
163-
width: 100%;
164-
background: #080d19;
165-
border: 1px solid #1c3050;
166-
border-radius: .375rem;
167-
margin-top: 2px;
168-
padding: 4px 0;
169-
list-style: none;
170-
max-height: 200px;
171-
overflow-y: auto;
172-
}
173-
174-
.multiselect-container > li > a {
175-
display: block;
176-
padding: 0;
177-
color: #e2e8f0;
178-
text-decoration: none;
179-
}
180-
181-
.multiselect-container > li > a > label {
182-
display: block;
183-
padding: 5px 12px 5px 36px;
184-
cursor: pointer;
185-
color: #e2e8f0;
186-
font-size: .875rem;
187-
font-family: 'DM Sans', sans-serif;
188-
margin: 0;
189-
}
190-
191-
.multiselect-container > li > a > label:hover {
192-
background: #1c3050;
193-
color: #38bdf8;
194-
}
195-
196-
.multiselect-container > li > a > label > input[type=checkbox] {
197-
margin-right: 8px;
198-
accent-color: #34d399;
199-
}
200-
201-
.input-group-addon {
202-
background: #0d1628;
203-
border: 1px solid #1c3050;
204-
color: #94a3b8;
205-
padding: .375rem .5rem;
206-
font-size: .875rem;
207-
}
208-
209-
.multiselect-container .input-group input.form-control {
210-
background: #080d19;
211-
border: 1px solid #1c3050;
212-
border-left: 0;
213-
color: #e2e8f0;
214-
padding: .375rem .5rem;
215-
font-size: .875rem;
216-
}
217-
218-
button.btn.btn-default.multiselect-clear-filter {
219-
background: #0d1628;
220-
border: 1px solid #1c3050;
221-
color: #94a3b8;
222-
padding: .25rem .5rem;
223-
border-radius: .25rem;
224-
cursor: pointer;
225-
}
226-
227-
/* Pure CSS toggles — replaces bootstrap-toggle entirely */
228-
#generator input[type=checkbox] {
136+
/* Pure CSS toggles */
137+
#generator input[type=checkbox]:not(.ms-check) {
229138
appearance: none;
230139
-webkit-appearance: none;
231140
position: relative;
@@ -241,7 +150,7 @@ button.btn.btn-default.multiselect-clear-filter {
241150
transition: background .2s, border-color .2s;
242151
}
243152

244-
#generator input[type=checkbox]::after {
153+
#generator input[type=checkbox]:not(.ms-check)::after {
245154
content: '';
246155
position: absolute;
247156
width: 18px;
@@ -253,12 +162,12 @@ button.btn.btn-default.multiselect-clear-filter {
253162
transition: left .2s, background .2s;
254163
}
255164

256-
#generator input[type=checkbox]:checked {
165+
#generator input[type=checkbox]:not(.ms-check):checked {
257166
background: #34d399;
258167
border-color: #34d399;
259168
}
260169

261-
#generator input[type=checkbox]:checked::after {
170+
#generator input[type=checkbox]:not(.ms-check):checked::after {
262171
left: 22px;
263172
background: #fff;
264173
}

‎package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
{
22
"dependencies": {
3-
"@bower_components/bootstrap-multiselect": "davidstutz/bootstrap-multiselect#0.9.13",
4-
"@bower_components/font-awesome": "FortAwesome/Font-Awesome#^4.5.0",
5-
"@bower_components/jquery": "jquery/jquery-dist#^2.2.2",
6-
"@bower_components/jquery-ui": "components/jqueryui#^1.11.4"
3+
"@bower_components/font-awesome": "FortAwesome/Font-Awesome#^4.5.0"
74
},
85
"devDependencies": {
96
"tailwindcss": "^3.4",

‎public/css/app.css‎

Lines changed: 17 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -643,15 +643,27 @@ video {
643643
.block {
644644
display: block;
645645
}
646+
.inline-block {
647+
display: inline-block;
648+
}
646649
.flex {
647650
display: flex;
648651
}
649652
.grid {
650653
display: grid;
651654
}
655+
.h-10 {
656+
height: 2.5rem;
657+
}
658+
.w-auto {
659+
width: auto;
660+
}
652661
.max-w-screen-xl {
653662
max-width: 1280px;
654663
}
664+
.cursor-pointer {
665+
cursor: pointer;
666+
}
655667
.list-inside {
656668
list-style-position: inside;
657669
}
@@ -714,10 +726,6 @@ video {
714726
padding-left: 1rem;
715727
padding-right: 1rem;
716728
}
717-
.px-6 {
718-
padding-left: 1.5rem;
719-
padding-right: 1.5rem;
720-
}
721729
.py-4 {
722730
padding-top: 1rem;
723731
padding-bottom: 1rem;
@@ -730,130 +738,25 @@ video {
730738
padding-top: 2rem;
731739
padding-bottom: 2rem;
732740
}
733-
.text-3xl {
734-
font-size: 1.875rem;
735-
line-height: 2.25rem;
736-
}
737741
.text-sm {
738742
font-size: 0.875rem;
739743
line-height: 1.25rem;
740744
}
741-
.font-extrabold {
742-
font-weight: 800;
743-
}
744745
.font-normal {
745746
font-weight: 400;
746747
}
747-
.tracking-tight {
748-
letter-spacing: -0.025em;
749-
}
750748
.text-\[\#94a3b8\] {
751749
--tw-text-opacity: 1;
752750
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
753751
}
754-
.text-white {
755-
--tw-text-opacity: 1;
756-
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
757-
}
758752
.no-underline {
759753
text-decoration-line: none;
760754
}
761755

762756
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');
763757

764-
/* bootstrap-multiselect overrides */
765-
button.multiselect.dropdown-toggle {
766-
display: block;
767-
width: 100%;
768-
background: #080d19;
769-
border: 1px solid #1c3050;
770-
border-radius: .375rem;
771-
color: #e2e8f0;
772-
padding: .5rem .75rem;
773-
font-family: 'JetBrains Mono', monospace;
774-
font-size: .875rem;
775-
text-align: left;
776-
cursor: pointer;
777-
transition: border-color .15s, box-shadow .15s;
778-
}
779-
780-
button.multiselect.dropdown-toggle:hover,
781-
button.multiselect.dropdown-toggle:focus {
782-
border-color: #38bdf8;
783-
box-shadow: 0 0 0 3px rgba(56, 189, 248, .2);
784-
outline: none;
785-
}
786-
787-
.multiselect-container.dropdown-menu {
788-
display: block;
789-
position: relative;
790-
z-index: 10;
791-
width: 100%;
792-
background: #080d19;
793-
border: 1px solid #1c3050;
794-
border-radius: .375rem;
795-
margin-top: 2px;
796-
padding: 4px 0;
797-
list-style: none;
798-
max-height: 200px;
799-
overflow-y: auto;
800-
}
801-
802-
.multiselect-container > li > a {
803-
display: block;
804-
padding: 0;
805-
color: #e2e8f0;
806-
text-decoration: none;
807-
}
808-
809-
.multiselect-container > li > a > label {
810-
display: block;
811-
padding: 5px 12px 5px 36px;
812-
cursor: pointer;
813-
color: #e2e8f0;
814-
font-size: .875rem;
815-
font-family: 'DM Sans', sans-serif;
816-
margin: 0;
817-
}
818-
819-
.multiselect-container > li > a > label:hover {
820-
background: #1c3050;
821-
color: #38bdf8;
822-
}
823-
824-
.multiselect-container > li > a > label > input[type=checkbox] {
825-
margin-right: 8px;
826-
accent-color: #34d399;
827-
}
828-
829-
.input-group-addon {
830-
background: #0d1628;
831-
border: 1px solid #1c3050;
832-
color: #94a3b8;
833-
padding: .375rem .5rem;
834-
font-size: .875rem;
835-
}
836-
837-
.multiselect-container .input-group input.form-control {
838-
background: #080d19;
839-
border: 1px solid #1c3050;
840-
border-left: 0;
841-
color: #e2e8f0;
842-
padding: .375rem .5rem;
843-
font-size: .875rem;
844-
}
845-
846-
button.btn.btn-default.multiselect-clear-filter {
847-
background: #0d1628;
848-
border: 1px solid #1c3050;
849-
color: #94a3b8;
850-
padding: .25rem .5rem;
851-
border-radius: .25rem;
852-
cursor: pointer;
853-
}
854-
855-
/* Pure CSS toggles — replaces bootstrap-toggle entirely */
856-
#generator input[type=checkbox] {
758+
/* Pure CSS toggles */
759+
#generator input[type=checkbox]:not(.ms-check) {
857760
-moz-appearance: none;
858761
appearance: none;
859762
-webkit-appearance: none;
@@ -870,7 +773,7 @@ button.btn.btn-default.multiselect-clear-filter {
870773
transition: background .2s, border-color .2s;
871774
}
872775

873-
#generator input[type=checkbox]::after {
776+
#generator input[type=checkbox]:not(.ms-check)::after {
874777
content: '';
875778
position: absolute;
876779
width: 18px;
@@ -882,12 +785,12 @@ button.btn.btn-default.multiselect-clear-filter {
882785
transition: left .2s, background .2s;
883786
}
884787

885-
#generator input[type=checkbox]:checked {
788+
#generator input[type=checkbox]:not(.ms-check):checked {
886789
background: #34d399;
887790
border-color: #34d399;
888791
}
889792

890-
#generator input[type=checkbox]:checked::after {
793+
#generator input[type=checkbox]:not(.ms-check):checked::after {
891794
left: 22px;
892795
background: #fff;
893796
}

0 commit comments

Comments
 (0)