1
0
mirror of https://github.com/RSS-Bridge/rss-bridge.git synced 2025-07-30 21:30:14 +02:00

CSS adjustments to improve readability for bridge parameters (#763)

* Group common selectors
* Fix indentation using tabs
* Use same styles for number and text inputs
* Use grid layout for parameters

Introduces the grid layout for bridge parameters. All parameters are
arranged in a grid to improve readability. Read more on grid layouts
at

- https://www.w3schools.com/css/css_grid.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Notice:

Grid layouts are not supported in very old browser versions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

This is why @supports checks for browser support (not supported in IE)
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#Browser_compatibility

In case grid layout is not supported, the displayed form is usable
but not very pretty due to <br> being removed by this commit for
cosmetic reasons (breaks grid layout).

Unfortunately it doesn't seem possible to insert line breaks manually
via '::after { content: '\A' }' in cases where grid layout isn't
supported.

* Add padding to card parameters

Adds padding to parameters to improve readability. For bridges without
parameters (count($parameters) === 0), the parameter 'div' is no longer
created.

* Add colon ':' after label via CSS
* Capitalize first letter of label for readability
* Fix checkbox isn't aligned left

Sets the size of the checkbox to 20x20 px for good measure.

* Harmonize formatting
* Add new style to number and select boxes

References #797

* Add fallback solution for browsers without grid support
This commit is contained in:
LogMANOriginal
2018-09-15 16:39:50 +02:00
committed by GitHub
parent ec60752650
commit bf9946d1fc
2 changed files with 172 additions and 79 deletions

View File

@@ -39,36 +39,44 @@ This bridge is not fetching its content through a secure connection</div>';
$parameters = array()) {
$form = BridgeCard::getFormHeader($bridgeName, $isHttps);
foreach($parameters as $id => $inputEntry) {
if(!isset($inputEntry['exampleValue']))
$inputEntry['exampleValue'] = '';
if(count($parameters) > 0) {
if(!isset($inputEntry['defaultValue']))
$inputEntry['defaultValue'] = '';
$form .= '<div class="parameters">';
$idArg = 'arg-'
. urlencode($bridgeName)
. '-'
. urlencode($parameterName)
. '-'
. urlencode($id);
foreach($parameters as $id => $inputEntry) {
if(!isset($inputEntry['exampleValue']))
$inputEntry['exampleValue'] = '';
$form .= '<label for="'
. $idArg
. '">'
. filter_var($inputEntry['name'], FILTER_SANITIZE_STRING)
. ' : </label>'
. PHP_EOL;
if(!isset($inputEntry['defaultValue']))
$inputEntry['defaultValue'] = '';
if(!isset($inputEntry['type']) || $inputEntry['type'] === 'text') {
$form .= BridgeCard::getTextInput($inputEntry, $idArg, $id);
} elseif($inputEntry['type'] === 'number') {
$form .= BridgeCard::getNumberInput($inputEntry, $idArg, $id);
} else if($inputEntry['type'] === 'list') {
$form .= BridgeCard::getListInput($inputEntry, $idArg, $id);
} elseif($inputEntry['type'] === 'checkbox') {
$form .= BridgeCard::getCheckboxInput($inputEntry, $idArg, $id);
$idArg = 'arg-'
. urlencode($bridgeName)
. '-'
. urlencode($parameterName)
. '-'
. urlencode($id);
$form .= '<label for="'
. $idArg
. '">'
. filter_var($inputEntry['name'], FILTER_SANITIZE_STRING)
. '</label>'
. PHP_EOL;
if(!isset($inputEntry['type']) || $inputEntry['type'] === 'text') {
$form .= BridgeCard::getTextInput($inputEntry, $idArg, $id);
} elseif($inputEntry['type'] === 'number') {
$form .= BridgeCard::getNumberInput($inputEntry, $idArg, $id);
} else if($inputEntry['type'] === 'list') {
$form .= BridgeCard::getListInput($inputEntry, $idArg, $id);
} elseif($inputEntry['type'] === 'checkbox') {
$form .= BridgeCard::getCheckboxInput($inputEntry, $idArg, $id);
}
}
$form .= '</div>';
}
if($isActive) {
@@ -106,7 +114,7 @@ This bridge is not fetching its content through a secure connection</div>';
. filter_var($entry['exampleValue'], FILTER_SANITIZE_STRING)
. '" name="'
. $name
. '" /><br>'
. '" />'
. PHP_EOL;
}
@@ -121,7 +129,7 @@ This bridge is not fetching its content through a secure connection</div>';
. filter_var($entry['exampleValue'], FILTER_SANITIZE_NUMBER_INT)
. '" name="'
. $name
. '" /><br>'
. '" />'
. PHP_EOL;
}
@@ -172,7 +180,7 @@ This bridge is not fetching its content through a secure connection</div>';
}
}
$list .= '</select><br>';
$list .= '</select>';
return $list;
}
@@ -186,7 +194,7 @@ This bridge is not fetching its content through a secure connection</div>';
. $name
. '" '
. ($entry['defaultValue'] === 'checked' ?: '')
. ' /><br>'
. ' />'
. PHP_EOL;
}