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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 172 additions and 79 deletions

View file

@ -39,6 +39,10 @@ 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);
if(count($parameters) > 0) {
$form .= '<div class="parameters">';
foreach($parameters as $id => $inputEntry) { foreach($parameters as $id => $inputEntry) {
if(!isset($inputEntry['exampleValue'])) if(!isset($inputEntry['exampleValue']))
$inputEntry['exampleValue'] = ''; $inputEntry['exampleValue'] = '';
@ -57,7 +61,7 @@ This bridge is not fetching its content through a secure connection</div>';
. $idArg . $idArg
. '">' . '">'
. filter_var($inputEntry['name'], FILTER_SANITIZE_STRING) . filter_var($inputEntry['name'], FILTER_SANITIZE_STRING)
. ' : </label>' . '</label>'
. PHP_EOL; . PHP_EOL;
if(!isset($inputEntry['type']) || $inputEntry['type'] === 'text') { if(!isset($inputEntry['type']) || $inputEntry['type'] === 'text') {
@ -71,6 +75,10 @@ This bridge is not fetching its content through a secure connection</div>';
} }
} }
$form .= '</div>';
}
if($isActive) { if($isActive) {
$form .= BridgeCard::buildFormatButtons($formats); $form .= BridgeCard::buildFormatButtons($formats);
} else { } else {
@ -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;
} }

View file

@ -7,10 +7,19 @@ 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;
@ -27,24 +36,29 @@ a:hover {
} }
/* 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 { header > section.critical-warning {
width: 40%; width: 40%;
background-color: #cf3e3e; background-color: #cf3e3e;
@ -52,8 +66,9 @@ a:hover {
color: white; color: white;
} }
/* Input boxes */ select,
input[type="text"] { 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,14 +76,19 @@ 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;
@ -76,13 +96,17 @@ input[type="text"]:focus {
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::-webkit-input-placeholder,
.searchbar input[type="text"]:focus:-moz-placeholder { opacity: 0; } .searchbar input[type="text"]:focus::-moz-placeholder,
.searchbar input[type="text"]:focus:-ms-input-placeholder { opacity: 0; } .searchbar input[type="text"]:focus:-moz-placeholder,
.searchbar input[type="text"]:focus:-ms-input-placeholder {
opacity: 0;
}
.searchbar > h3 { .searchbar > h3 {
font-size: 200%; font-size: 200%;
@ -101,18 +125,24 @@ 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.footer .version {
font-size: 80%;
}
section > h2 { 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;
@ -127,10 +157,12 @@ 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 { button:hover {
background: #49afff; background: #49afff;
} }
@ -138,18 +170,64 @@ input[type="text"]:focus {
.description { .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;
} }
.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 { .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;
@ -160,6 +238,7 @@ input[type="text"]:focus {
margin: auto; margin: auto;
margin-bottom: 6px; margin-bottom: 6px;
} }
form { form {
display: none; display: none;
} }
@ -177,6 +256,7 @@ select {
.showmore-box { .showmore-box {
display: none; display: none;
} }
.showmore, .showless { .showmore, .showless {
color: #888888; color: #888888;
cursor: pointer; cursor: pointer;
@ -185,12 +265,15 @@ 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;
} }
@ -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;
} }