luci-app-banip: responsive design fixes

fix responsive design, esp. on mobile devices

Signed-off-by: Dirk Brenken <dev@brenken.org>

3 files changed, 53 insertions, 50 deletions

diff --git a/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/feeds.js b/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/feeds.js
index 2dc085932d..731ef9beb6 100644
--- a/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/feeds.js
+++ b/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/feeds.js
@@ -258,7 +258,7 @@ return view.extend({
 						return handleEdit('download');
 					})
 				}, [_('Download Custom Feeds')]),
-				'\xa0\xa0\xa0',
+				'\xa0',
 				E('button', {
 					'class': 'btn cbi-button cbi-button-action',
 					'id': 'btnUpload',
@@ -267,7 +267,7 @@ return view.extend({
 						return handleEdit('upload');
 					})
 				}, [_('Upload Custom Feeds')]),
-				'\xa0\xa0\xa0\xa0\xa0\xa0',
+				'\xa0',
 				E('button', {
 					'class': 'btn cbi-button cbi-button-action important',
 					'id': 'btnCreate',
@@ -276,7 +276,7 @@ return view.extend({
 						return handleEdit('create');
 					})
 				}, [_('Fill Custom Feeds')]),
-				'\xa0\xa0\xa0',
+				'\xa0',
 				E('button', {
 					'class': 'btn cbi-button cbi-button-negative important',
 					'id': 'btnClear',
@@ -285,7 +285,7 @@ return view.extend({
 						return handleEdit('clear');
 					})
 				}, [_('Clear Custom Feeds')]),
-				'\xa0\xa0\xa0',
+				'\xa0',
 				E('button', {
 					'class': 'btn cbi-button cbi-button-positive important',
 					'id': 'btnSave',
@@ -293,7 +293,8 @@ return view.extend({
 					'click': ui.createHandlerFn(this, function () {
 						return handleEdit('save');
 					})
-				}, [_('Save Custom Feeds')])
+				}, [_('Save Custom Feeds')]),
+				'\xa0'
 			])
 		});
 		return m.render();
diff --git a/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/overview.js b/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/overview.js
index 81543ca732..021fc10d90 100644
--- a/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/overview.js
+++ b/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/overview.js
@@ -162,48 +162,48 @@ return view.extend({
 			return E('div', { 'class': 'cbi-section' }, [
 				E('h3', _('Information')),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Status')),
-					E('div', { 'class': 'cbi-value-field spinning', 'id': 'status', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '\xa0')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Status')),
+					E('div', { 'class': 'cbi-value-field spinning', 'id': 'status', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '\xa0')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Version')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'version', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Version')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'version', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Element Count')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'elements', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Element Count')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'elements', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Active Feeds')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'feeds', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Active Feeds')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'feeds', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Active Devices')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'devices', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Active Devices')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'devices', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Active Uplink')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'uplink', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Active Uplink')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'uplink', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('NFT Information')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'nft', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('NFT Information')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'nft', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Run Information')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'run', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Run Information')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'run', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Run Flags')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'flags', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Run Flags')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'flags', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('Last Run')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'last', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('Last Run')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'last', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;font-weight:bold;padding-top:0rem;' }, _('System Information')),
-					E('div', { 'class': 'cbi-value-field', 'id': 'system', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, '-')
+					E('label', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;font-weight:bold;padding-top:0rem;' }, _('System Information')),
+					E('div', { 'class': 'cbi-value-field', 'id': 'system', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, '-')
 				]),
 				E('div', { class: 'right' }, [
 					E('button', {
@@ -212,27 +212,28 @@ return view.extend({
 							return handleAction('lookup');
 						})
 					}, [_('Domain Lookup')]),
-					'\xa0\xa0\xa0',
+					'\xa0',
 					E('button', {
 						'class': 'btn cbi-button cbi-button-negative',
 						'click': ui.createHandlerFn(this, function () {
 							return handleAction('stop');
 						})
 					}, [_('Stop')]),
-					'\xa0\xa0\xa0',
+					'\xa0',
 					E('button', {
 						'class': 'btn cbi-button cbi-button-positive',
 						'click': ui.createHandlerFn(this, function () {
 							return handleAction('reload');
 						})
 					}, [_('Reload')]),
-					'\xa0\xa0\xa0',
+					'\xa0',
 					E('button', {
 						'class': 'btn cbi-button cbi-button-positive',
 						'click': ui.createHandlerFn(this, function () {
 							return handleAction('restart');
 						})
-					}, [_('Restart')])
+					}, [_('Restart')]),
+					'\xa0'
 				])
 			]);
 		}, o, this);
diff --git a/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/setreport.js b/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/setreport.js
index b938cbc46e..845e081e88 100644
--- a/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/setreport.js
+++ b/applications/luci-app-banip/htdocs/luci-static/resources/view/banip/setreport.js
@@ -196,38 +196,38 @@ return view.extend({
 				E('p', _('This tab shows the last generated Set Report, press the \'Refresh\' button to get a new one.')),
 				E('p', '\xa0'),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;float:left;width:230px;font-weight:bold;' }, _('Timestamp')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-bottom:-5px;float:left;color:#37c;font-weight:bold;' }, content.timestamp || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-bottom:-5px;width:230px;font-weight:bold;' }, _('Timestamp')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-bottom:-5px;color:#37c;font-weight:bold;' }, content.timestamp || '-')
 				]),
 				E('hr'),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;float:left;width:230px;font-weight:bold;' }, _('blocked syn-flood packets')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;float:left;color:#37c;font-weight:bold;' }, content.sum_synflood || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;width:230px;font-weight:bold;' }, _('blocked syn-flood packets')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;color:#37c;font-weight:bold;' }, content.sum_synflood || '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;float:left;width:230px;font-weight:bold;' }, _('blocked udp-flood packets')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;float:left;color:#37c;font-weight:bold;' }, content.sum_udpflood || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;width:230px;font-weight:bold;' }, _('blocked udp-flood packets')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;color:#37c;font-weight:bold;' }, content.sum_udpflood || '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;float:left;width:230px;font-weight:bold;' }, _('blocked icmp-flood packets')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;float:left;color:#37c;font-weight:bold;' }, content.sum_icmpflood || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;width:230px;font-weight:bold;' }, _('blocked icmp-flood packets')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;color:#37c;font-weight:bold;' }, content.sum_icmpflood || '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;float:left;width:230px;font-weight:bold;' }, _('blocked invalid ct packets')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;float:left;color:#37c;font-weight:bold;' }, content.sum_ctinvalid || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;width:230px;font-weight:bold;' }, _('blocked invalid ct packets')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;color:#37c;font-weight:bold;' }, content.sum_ctinvalid || '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;float:left;width:230px;font-weight:bold;' }, _('blocked invalid tcp packets')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;float:left;color:#37c;font-weight:bold;' }, content.sum_tcpinvalid || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;width:230px;font-weight:bold;' }, _('blocked invalid tcp packets')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;color:#37c;font-weight:bold;' }, content.sum_tcpinvalid || '-')
 				]),
 				E('hr'),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;float:left;width:230px;font-weight:bold;' }, _('auto-added IPs to allowlist')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;float:left;color:#37c;font-weight:bold;' }, content.autoadd_allow || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;width:230px;font-weight:bold;' }, _('auto-added IPs to allowlist')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;color:#37c;font-weight:bold;' }, content.autoadd_allow || '-')
 				]),
 				E('div', { 'class': 'cbi-value' }, [
-					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;float:left;width:230px;font-weight:bold;' }, _('auto-added IPs to blocklist')),
-					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;float:left;color:#37c;font-weight:bold;' }, content.autoadd_block || '-')
+					E('div', { 'class': 'cbi-value-title', 'style': 'margin-top:-5px;width:230px;font-weight:bold;' }, _('auto-added IPs to blocklist')),
+					E('div', { 'class': 'cbi-value-title', 'id': 'start', 'style': 'margin-top:-5px;color:#37c;font-weight:bold;' }, content.autoadd_block || '-')
 				]),
 				E('div', { 'class': 'right' }, [
 					E('button', {
@@ -236,20 +236,21 @@ return view.extend({
 							return handleAction(report, 'survey');
 						})
 					}, [_('Set Survey...')]),
-					'\xa0\xa0\xa0',
+					'\xa0',
 					E('button', {
 						'class': 'btn cbi-button cbi-button-apply',
 						'click': ui.createHandlerFn(this, function () {
 							return handleAction(report, 'search');
 						})
 					}, [_('IP Search...')]),
-					'\xa0\xa0\xa0',
+					'\xa0',
 					E('button', {
 						'class': 'btn cbi-button cbi-button-positive',
 						'click': ui.createHandlerFn(this, function () {
 							location.reload();
 						})
-					}, [_('Refresh')])
+					}, [_('Refresh')]),
+					'\xa0'
 				]),
 			])
 			,