luci-app-opkg: rework markup and CSS classes for easier styling

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 17 insertions, 10 deletions

diff --git a/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js b/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js
index fcb7dc652c..b7a52d1d12 100644
--- a/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js
+++ b/applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js
@@ -683,8 +683,9 @@ function handleInstall(ev)
 		desc || '',
 		errs || inst || '',
 		E('div', { 'class': 'right' }, [
-			E('label', { 'class': 'cbi-checkbox', 'style': 'float:left; padding-top:.5em' }, [
-				E('input', { 'type': 'checkbox', 'name': 'overwrite' }), ' ',
+			E('label', { 'class': 'cbi-checkbox', 'style': 'float:left' }, [
+				E('input', { 'id': 'overwrite-cb', 'type': 'checkbox', 'name': 'overwrite' }), ' ',
+				E('label', { 'for': 'overwrite-cb' }), ' ',
 				_('Overwrite files from other package(s)')
 			]),
 			E('div', {
@@ -1015,21 +1016,27 @@ return L.view.extend({
 
 				E('div', {}, [
 					E('label', {}, _('Filter') + ':'),
-					E('input', { 'type': 'text', 'name': 'filter', 'placeholder': _('Type to filter…'), 'value': query, 'keyup': handleKeyUp }),
-					E('button', { 'class': 'btn cbi-button', 'click': handleReset }, [ _('Clear') ])
+					E('span', { 'class': 'control-group' }, [
+						E('input', { 'type': 'text', 'name': 'filter', 'placeholder': _('Type to filter…'), 'value': query, 'keyup': handleKeyUp }),
+						E('button', { 'class': 'btn cbi-button', 'click': handleReset }, [ _('Clear') ])
+					])
 				]),
 
 				E('div', {}, [
 					E('label', {}, _('Download and install package') + ':'),
-					E('input', { 'type': 'text', 'name': 'install', 'placeholder': _('Package name or URL…'), 'keydown': function(ev) { if (ev.keyCode === 13) handleManualInstall(ev) } }),
-					E('button', { 'class': 'btn cbi-button cbi-button-action', 'click': handleManualInstall }, [ _('OK') ])
+					E('span', { 'class': 'control-group' }, [
+						E('input', { 'type': 'text', 'name': 'install', 'placeholder': _('Package name or URL…'), 'keydown': function(ev) { if (ev.keyCode === 13) handleManualInstall(ev) } }),
+						E('button', { 'class': 'btn cbi-button cbi-button-action', 'click': handleManualInstall }, [ _('OK') ])
+					])
 				]),
 
 				E('div', {}, [
 					E('label', {}, _('Actions') + ':'), ' ',
-					E('button', { 'class': 'btn cbi-button-positive', 'data-command': 'update', 'click': handleOpkg }, [ _('Update lists…') ]), '\u00a0',
-					E('button', { 'class': 'btn cbi-button-action', 'click': handleUpload }, [ _('Upload Package…') ]), '\u00a0',
-					E('button', { 'class': 'btn cbi-button-neutral', 'click': handleConfig }, [ _('Configure opkg…') ])
+					E('span', { 'class': 'control-group' }, [
+						E('button', { 'class': 'btn cbi-button-positive', 'data-command': 'update', 'click': handleOpkg }, [ _('Update lists…') ]), ' ',
+						E('button', { 'class': 'btn cbi-button-action', 'click': handleUpload }, [ _('Upload Package…') ]), ' ',
+						E('button', { 'class': 'btn cbi-button-neutral', 'click': handleConfig }, [ _('Configure opkg…') ])
+					])
 				])
 			]),
 
@@ -1053,7 +1060,7 @@ return L.view.extend({
 					E('div', { 'class': 'th col-2 left version' }, [ _('Version') ]),
 					E('div', { 'class': 'th col-1 center size'}, [ _('Size (.ipk)') ]),
 					E('div', { 'class': 'th col-10 left' }, [ _('Description') ]),
-					E('div', { 'class': 'th right' }, [ '\u00a0' ])
+					E('div', { 'class': 'th right cbi-section-actions' }, [ '\u00a0' ])
 				])
 			])
 		]);