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:
@@ -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;
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user