From 7a4e40f10d6b03bbb4c5c65cf4cc643600288dd1 Mon Sep 17 00:00:00 2001 From: Dirk Brenken Date: Tue, 31 Mar 2020 18:41:13 +0200 Subject: [PATCH] luci-app-adblock: small visual tweaks for OpenWrt 2020 * minor style fixes Signed-off-by: Dirk Brenken --- .../resources/view/adblock/dnsreport.js | 47 ++++++++++--------- .../resources/view/adblock/overview.js | 14 +++--- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/dnsreport.js b/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/dnsreport.js index 370a6906cd..58a6dbe1a9 100644 --- a/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/dnsreport.js +++ b/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/dnsreport.js @@ -8,9 +8,9 @@ function handleAction(ev) { if (ev.target && ev.target.getAttribute('name') === 'blacklist') { L.ui.showModal(_('Add Blacklist Domain'), [ - E('p', {}, _('Add this (sub-)domain to your local blacklist.')), - E('div', { 'class': 'left' }, [ - E('label', { 'class': 'cbi-input-text', 'style': 'float:left; padding-top:.5em' }, [ + E('p', _('Add this (sub-)domain to your local blacklist.')), + E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [ + E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [ E('input', { 'class': 'cbi-input-text', 'style': 'width:300px', 'id': 'blacklist', 'value': ev.target.getAttribute('value') }, []) ]) ]), @@ -43,9 +43,9 @@ function handleAction(ev) { if (ev.target && ev.target.getAttribute('name') === 'whitelist') { L.ui.showModal(_('Add Whitelist Domain'), [ - E('p', {}, _('Add this (sub-)domain to your local whitelist.')), - E('div', { 'class': 'left' }, [ - E('label', { 'class': 'cbi-input-text', 'style': 'float:left; padding-top:.5em' }, [ + E('p', _('Add this (sub-)domain to your local whitelist.')), + E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [ + E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [ E('input', { 'class': 'cbi-input-text', 'style': 'width:300px', 'id': 'whitelist', 'value': ev.target.getAttribute('value') }, []) ]) ]), @@ -78,9 +78,9 @@ function handleAction(ev) { if (ev === 'query') { L.ui.showModal(_('Blocklist Query'), [ - E('p', {}, _('Query active blocklists and backups for a specific domain.')), - E('div', { 'class': 'left' }, [ - E('label', { 'style': 'float:left; padding-top:.5em', 'id': 'run' }, [ + E('p', _('Query active blocklists and backups for a specific domain.')), + E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [ + E('label', { 'style': 'padding-top:.5em', 'id': 'run' }, [ E('input', { 'class': 'cbi-input-text', 'placeholder': 'google.com', @@ -89,7 +89,8 @@ function handleAction(ev) { }) ]) ]), - E('div', { 'class': 'left' }, [ + E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [ + '\xa0', E('h5', _('Result')), E('textarea', { 'id': 'result', @@ -134,18 +135,20 @@ function handleAction(ev) { if (ev === 'refresh') { L.ui.showModal(_('Refresh DNS Report'), [ - E('div', { 'class': 'left' }, [ - E('select', { 'class': 'cbi-input-select', 'id': 'count' }, [ - E('option', { 'value': '50' }, '50'), - E('option', { 'value': '100' }, '100'), - E('option', { 'value': '150' }, '150'), - E('option', { 'value': '250' }, '250'), - E('option', { 'value': '500' }, '500') - ]), - '\xa0\xa0\xa0', - _('max. result set size') + E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [ + E('label', { 'class': 'cbi-input-select', 'style': 'padding-top:.5em' }, [ + E('select', { 'class': 'cbi-input-select', 'id': 'count' }, [ + E('option', { 'value': '50' }, '50'), + E('option', { 'value': '100' }, '100'), + E('option', { 'value': '150' }, '150'), + E('option', { 'value': '250' }, '250'), + E('option', { 'value': '500' }, '500') + ]), + '\xa0\xa0\xa0', + _('max. result set size') + ]) ]), - E('label', { 'class': 'cbi-input-text', 'style': 'float:left; padding-top:.5em' }, [ + E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [ E('input', { 'class': 'cbi-input-text', 'id': 'search' }, [ ]), '\xa0\xa0\xa0', @@ -161,7 +164,7 @@ function handleAction(ev) { 'class': 'btn cbi-button-action', 'id': 'refresh', 'click': ui.createHandlerFn(this, async function(ev) { - var count = document.getElementById('count').value + var count = document.getElementById('count').value; var search = document.getElementById('search').value.trim().replace(/[^a-z0-9\.\-]/g,'') || '+'; L.resolveDefault(fs.exec_direct('/etc/init.d/adblock', ['report', search, count, 'true', 'json']),''); var running = 1; diff --git a/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/overview.js b/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/overview.js index f5b7319cdf..bd997a49cf 100644 --- a/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/overview.js +++ b/applications/luci-app-adblock/htdocs/luci-static/resources/view/adblock/overview.js @@ -11,8 +11,8 @@ async function handleAction(ev) { if (ev === 'timer') { L.ui.showModal(_('Refresh Timer'), [ - E('p', {}, _('To keep your adblock lists up-to-date, you should setup an automatic update job for these lists.')), - E('div', { 'class': 'left' }, [ + E('p', _('To keep your adblock lists up-to-date, you should setup an automatic update job for these lists.')), + E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [ E('h5', _('Existing job(s)')), E('textarea', { 'id': 'cronView', @@ -22,8 +22,8 @@ async function handleAction(ev) { 'rows': 5 }) ]), - E('div', { 'class': 'left' }, [ - E('label', { 'class': 'cbi-input-select', 'style': 'float:left; padding-top:.5em' }, [ + E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [ + E('label', { 'class': 'cbi-input-select', 'style': 'padding-top:.5em' }, [ E('h5', _('Set/Replace a new adblock job')), E('select', { 'class': 'cbi-input-select', 'id': 'timerA' }, [ E('option', { 'value': 'start' }, 'Start'), @@ -33,18 +33,18 @@ async function handleAction(ev) { '\xa0\xa0\xa0', _('Adblock action') ]), - E('label', { 'class': 'cbi-input-text', 'style': 'float:left; padding-top:.5em' }, [ + E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [ E('input', { 'class': 'cbi-input-text', 'id': 'timerH', 'maxlength': '2' }, [ ]), '\xa0\xa0\xa0', _('The hours portition (req., range: 0-23)') ]), - E('label', { 'class': 'cbi-input-text', 'style': 'float:left; padding-top:.5em' }, [ + E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [ E('input', { 'class': 'cbi-input-text', 'id': 'timerM', 'maxlength': '2' }), '\xa0\xa0\xa0', _('The minutes portion (opt., range: 0-59)') ]), - E('label', { 'class': 'cbi-input-text', 'style': 'float:left; padding-top:.5em' }, [ + E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [ E('input', { 'class': 'cbi-input-text', 'id': 'timerD', 'maxlength': '13' }), '\xa0\xa0\xa0', _('The day of the week (opt., values: 1-7 possibly sep. by , or -)') -- 2.30.2