gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Use SecuBox cyber-checkbox class for collection checkboxes (v0.6.0-r8)

Browse Source 
Fix invisible checkboxes using SecuBox theme structure:
- Wrap checkbox inputs with .cyber-checkbox label class
- Update wizard.css to style .cyber-checkbox properly
- Use theme's native checkbox styling from forms.css
- Add !important to override theme defaults where needed

Issue: Checkboxes still not visible after inline styles
Root Cause: SecuBox theme requires .cyber-checkbox wrapper class
Solution: Restructure HTML to match theme's checkbox pattern

Structure Change:
OLD: <label><input><div class="collection-info">
NEW: <label class="cyber-checkbox"><input><div class="collection-info">

CSS Updates:
- .collection-item .cyber-checkbox (flex layout with gap)
- .collection-item .cyber-checkbox input[type="checkbox"] (18x18px, flex-shrink: 0)
- Added !important to override theme padding

Theme Pattern:
.cyber-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; }
.cyber-checkbox input[type="checkbox"] { width: 18px; height: 18px; }

Version: 0.6.0-8

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-01-07 09:17:25 +01:00
parent 439bab6361
commit 09694b64a1
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/secubox/luci-app-crowdsec-dashboard/Makefile
View File

@ -9,7 +9,7 @@ include $(TOPDIR)/rules.mk
PKG_NAME:=luci-app-crowdsec-dashboard PKG_NAME:=luci-app-crowdsec-dashboard
PKG_VERSION:=0.6.0 PKG_VERSION:=0.6.0
PKG_RELEASE:=7 PKG_RELEASE:=8
PKG_ARCH:=all PKG_ARCH:=all
PKG_LICENSE:=Apache-2.0 PKG_LICENSE:=Apache-2.0

8
package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/wizard.css
View File

@ -198,18 +198,20 @@
background: rgba(15, 23, 42, 0.7); background: rgba(15, 23, 42, 0.7);
} }
.collection-item label { .collection-item .cyber-checkbox {
display: flex; display: flex !important;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: 0 !important;
} }
.collection-item input[type="checkbox"] { .collection-item .cyber-checkbox input[type="checkbox"] {
cursor: pointer; cursor: pointer;
width: 18px; width: 18px;
height: 18px; height: 18px;
flex-shrink: 0;
} }
.collection-info { .collection-info {

16
package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js
View File

@ -250,17 +250,15 @@ return view.extend({
E('div', { 'class': 'collections-list' }, E('div', { 'class': 'collections-list' },
recommendedCollections.map(L.bind(function(collection) { recommendedCollections.map(L.bind(function(collection) {
var checkboxId = 'collection-' + collection.name.replace('/', '-'); var checkboxId = 'collection-' + collection.name.replace('/', '-');
var checkbox = E('input', {
'type': 'checkbox',
'id': checkboxId,
'checked': collection.preselected ? 'checked' : null,
'data-collection': collection.name,
'style': 'width: 18px; height: 18px; cursor: pointer; margin: 0;'
});
return E('div', { 'class': 'collection-item' }, [ return E('div', { 'class': 'collection-item' }, [
E('label', { 'for': checkboxId, 'style': 'display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0;' }, [ E('label', { 'class': 'cyber-checkbox', 'for': checkboxId }, [
checkbox, E('input', {
'type': 'checkbox',
'id': checkboxId,
'checked': collection.preselected ? 'checked' : null,
'data-collection': collection.name
}),
E('div', { 'class': 'collection-info' }, [ E('div', { 'class': 'collection-info' }, [
E('strong', {}, collection.name), E('strong', {}, collection.name),
E('div', { 'class': 'collection-desc' }, collection.description) E('div', { 'class': 'collection-desc' }, collection.description)