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
GitHub
parent
ec60752650
commit
bf9946d1fc
2 changed files with 172 additions and 79 deletions
|
|
@ -39,36 +39,44 @@ This bridge is not fetching its content through a secure connection</div>';
|
||||||
$parameters = array()) {
|
$parameters = array()) {
|
||||||
$form = BridgeCard::getFormHeader($bridgeName, $isHttps);
|
$form = BridgeCard::getFormHeader($bridgeName, $isHttps);
|
||||||
|
|
||||||
foreach($parameters as $id => $inputEntry) {
|
if(count($parameters) > 0) {
|
||||||
if(!isset($inputEntry['exampleValue']))
|
|
||||||
$inputEntry['exampleValue'] = '';
|
|
||||||
|
|
||||||
if(!isset($inputEntry['defaultValue']))
|
$form .= '<div class="parameters">';
|
||||||
$inputEntry['defaultValue'] = '';
|
|
||||||
|
|
||||||
$idArg = 'arg-'
|
foreach($parameters as $id => $inputEntry) {
|
||||||
. urlencode($bridgeName)
|
if(!isset($inputEntry['exampleValue']))
|
||||||
. '-'
|
$inputEntry['exampleValue'] = '';
|
||||||
. urlencode($parameterName)
|
|
||||||
. '-'
|
|
||||||
. urlencode($id);
|
|
||||||
|
|
||||||
$form .= '<label for="'
|
if(!isset($inputEntry['defaultValue']))
|
||||||
. $idArg
|
$inputEntry['defaultValue'] = '';
|
||||||
. '">'
|
|
||||||
. filter_var($inputEntry['name'], FILTER_SANITIZE_STRING)
|
|
||||||
. ' : </label>'
|
|
||||||
. PHP_EOL;
|
|
||||||
|
|
||||||
if(!isset($inputEntry['type']) || $inputEntry['type'] === 'text') {
|
$idArg = 'arg-'
|
||||||
$form .= BridgeCard::getTextInput($inputEntry, $idArg, $id);
|
. urlencode($bridgeName)
|
||||||
} elseif($inputEntry['type'] === 'number') {
|
. '-'
|
||||||
$form .= BridgeCard::getNumberInput($inputEntry, $idArg, $id);
|
. urlencode($parameterName)
|
||||||
} else if($inputEntry['type'] === 'list') {
|
. '-'
|
||||||
$form .= BridgeCard::getListInput($inputEntry, $idArg, $id);
|
. urlencode($id);
|
||||||
} elseif($inputEntry['type'] === 'checkbox') {
|
|
||||||
$form .= BridgeCard::getCheckboxInput($inputEntry, $idArg, $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) {
|
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)
|
. filter_var($entry['exampleValue'], FILTER_SANITIZE_STRING)
|
||||||
. '" name="'
|
. '" name="'
|
||||||
. $name
|
. $name
|
||||||
. '" /><br>'
|
. '" />'
|
||||||
. PHP_EOL;
|
. 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)
|
. filter_var($entry['exampleValue'], FILTER_SANITIZE_NUMBER_INT)
|
||||||
. '" name="'
|
. '" name="'
|
||||||
. $name
|
. $name
|
||||||
. '" /><br>'
|
. '" />'
|
||||||
. PHP_EOL;
|
. 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;
|
return $list;
|
||||||
}
|
}
|
||||||
|
|
@ -186,7 +194,7 @@ This bridge is not fetching its content through a secure connection</div>';
|
||||||
. $name
|
. $name
|
||||||
. '" '
|
. '" '
|
||||||
. ($entry['defaultValue'] === 'checked' ?: '')
|
. ($entry['defaultValue'] === 'checked' ?: '')
|
||||||
. ' /><br>'
|
. ' />'
|
||||||
. PHP_EOL;
|
. PHP_EOL;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
185
static/style.css
185
static/style.css
|
|
@ -7,12 +7,21 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
|
||||||
font: inherit;
|
font: inherit;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
/* HTML5 display-role reset for older browsers */
|
||||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Adjust parameters for browsers that don't support the grid layout */
|
||||||
|
|
||||||
|
.parameters label:before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
/* Let's go for the actual style */
|
/* Let's go for the actual style */
|
||||||
body {
|
body {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||||
}
|
}
|
||||||
|
|
@ -23,37 +32,43 @@ a, a:link, a:visited {
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
header {
|
|
||||||
|
header {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #1182DB;
|
color: #1182DB;
|
||||||
}
|
}
|
||||||
header > h1 {
|
|
||||||
|
header > h1 {
|
||||||
font-size: 500%;
|
font-size: 500%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
header > h2 {
|
|
||||||
|
header > h2 {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
}
|
}
|
||||||
header > section.warning {
|
|
||||||
|
header > section.warning {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
background-color: #ffc600;
|
background-color: #ffc600;
|
||||||
color: #5f5f5f;
|
color: #5f5f5f;
|
||||||
}
|
}
|
||||||
header > section.critical-warning {
|
|
||||||
width: 40%;
|
|
||||||
background-color: #cf3e3e;
|
|
||||||
font-weight: bold;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input boxes */
|
header > section.critical-warning {
|
||||||
input[type="text"] {
|
width: 40%;
|
||||||
|
background-color: #cf3e3e;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
input[type="text"],
|
||||||
|
input[type="number"] {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
color: #404552;
|
color: #404552;
|
||||||
border: 1px solid #dedede;
|
border: 1px solid #dedede;
|
||||||
|
|
@ -61,30 +76,39 @@ a:hover {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
input[type="text"]:focus {
|
|
||||||
|
select:focus,
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="number"]:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #888;
|
border-color: #888;
|
||||||
}
|
}
|
||||||
.searchbar {
|
|
||||||
|
.searchbar {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
margin: 40px auto 100px;
|
margin: 40px auto 100px;
|
||||||
}
|
}
|
||||||
.searchbar input[type="text"] {
|
|
||||||
|
.searchbar input[type="text"] {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.searchbar input[type="text"]::placeholder {
|
|
||||||
|
.searchbar input[type="text"]::placeholder {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.searchbar input[type="text"]:focus::-webkit-input-placeholder { opacity: 0; }
|
|
||||||
.searchbar input[type="text"]:focus::-moz-placeholder { opacity: 0; }
|
|
||||||
.searchbar input[type="text"]:focus:-moz-placeholder { opacity: 0; }
|
|
||||||
.searchbar input[type="text"]:focus:-ms-input-placeholder { opacity: 0; }
|
|
||||||
|
|
||||||
.searchbar > h3 {
|
.searchbar input[type="text"]:focus::-webkit-input-placeholder,
|
||||||
|
.searchbar input[type="text"]:focus::-moz-placeholder,
|
||||||
|
.searchbar input[type="text"]:focus:-moz-placeholder,
|
||||||
|
.searchbar input[type="text"]:focus:-ms-input-placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar > h3 {
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #1182DB;
|
color: #1182DB;
|
||||||
|
|
@ -92,7 +116,7 @@ input[type="text"]:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Section */
|
/* Section */
|
||||||
section {
|
section {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
|
|
@ -101,20 +125,26 @@ input[type="text"]:focus {
|
||||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09);
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
section.footer {
|
|
||||||
|
section.footer {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
section.footer:hover {
|
|
||||||
|
section.footer:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
section > h2 {
|
|
||||||
|
section.footer .version {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section > h2 {
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
button {
|
button {
|
||||||
line-height: 1.9em;
|
line-height: 1.9em;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -127,30 +157,78 @@ input[type="text"]:focus {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: calc(20% - 4px);
|
width: calc(20% - 4px);
|
||||||
}
|
}
|
||||||
button.small {
|
|
||||||
|
button.small {
|
||||||
width: auto;
|
width: auto;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
}
|
}
|
||||||
button:hover {
|
|
||||||
background: #49afff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
button:hover {
|
||||||
|
background: #49afff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
h5 {
|
|
||||||
|
h5 {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
form {
|
|
||||||
|
form {
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.maintainer {
|
|
||||||
|
.parameters label::first-letter {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameters label::after {
|
||||||
|
content: ' :';
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (display: grid) {
|
||||||
|
|
||||||
|
.parameters {
|
||||||
|
display: grid;
|
||||||
|
padding: 12px 0;
|
||||||
|
grid-template-columns: 40% max-content;
|
||||||
|
grid-column-gap: 10px;
|
||||||
|
grid-row-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameters label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameters input[type="text"],
|
||||||
|
.parameters input[type="number"],
|
||||||
|
.parameters input[type="checkbox"],
|
||||||
|
.parameters select {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameters input[type="text"],
|
||||||
|
.parameters input[type="number"] {
|
||||||
|
width: auto;
|
||||||
|
color: #404552;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameters input[type="checkbox"] {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
} /* @supports (display: grid) */
|
||||||
|
|
||||||
|
.maintainer {
|
||||||
color: #888888;
|
color: #888888;
|
||||||
font-size: 70%;
|
font-size: 70%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.secure-warning {
|
|
||||||
|
.secure-warning {
|
||||||
background-color: #ffc600;
|
background-color: #ffc600;
|
||||||
color: #5f5f5f;
|
color: #5f5f5f;
|
||||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
|
|
@ -160,7 +238,8 @@ input[type="text"]:focus {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
form {
|
|
||||||
|
form {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -169,15 +248,16 @@ select {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show more / less */
|
/* Show more / less */
|
||||||
.showmore-box {
|
.showmore-box {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.showmore, .showless {
|
|
||||||
|
.showmore, .showless {
|
||||||
color: #888888;
|
color: #888888;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -185,18 +265,21 @@ select {
|
||||||
color: #000;
|
color: #000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.showmore-box:checked ~ .showmore {
|
|
||||||
|
.showmore-box:checked ~ .showmore {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.showmore-box:not(:checked) ~ .showless {
|
|
||||||
|
.showmore-box:not(:checked) ~ .showless {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.showmore-box:checked ~ form, .showmore-box:checked ~ h5 {
|
|
||||||
|
.showmore-box:checked ~ form, .showmore-box:checked ~ h5 {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Additional styles for error pages */
|
/* Additional styles for error pages */
|
||||||
.exception-message {
|
.exception-message {
|
||||||
background-color: #c00000;
|
background-color: #c00000;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -207,11 +290,13 @@ select {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.advice {
|
|
||||||
|
.advice {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
.advice > li {
|
|
||||||
|
.advice > li {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue