From bf9946d1fcdcbc4160a6f1fa9181c14421ddcfa9 Mon Sep 17 00:00:00 2001 From: LogMANOriginal Date: Sat, 15 Sep 2018 16:39:50 +0200 Subject: [PATCH] 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
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 --- lib/BridgeCard.php | 66 +++++++++------- static/style.css | 185 +++++++++++++++++++++++++++++++++------------ 2 files changed, 172 insertions(+), 79 deletions(-) diff --git a/lib/BridgeCard.php b/lib/BridgeCard.php index 884b2345..0233f075 100644 --- a/lib/BridgeCard.php +++ b/lib/BridgeCard.php @@ -39,36 +39,44 @@ This bridge is not fetching its content through a secure connection'; $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 .= '
'; - $idArg = 'arg-' - . urlencode($bridgeName) - . '-' - . urlencode($parameterName) - . '-' - . urlencode($id); + foreach($parameters as $id => $inputEntry) { + if(!isset($inputEntry['exampleValue'])) + $inputEntry['exampleValue'] = ''; - $form .= '' - . 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 .= '' + . 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 .= '
'; + } if($isActive) { @@ -106,7 +114,7 @@ This bridge is not fetching its content through a secure connection'; . filter_var($entry['exampleValue'], FILTER_SANITIZE_STRING) . '" name="' . $name - . '" />
' + . '" />' . PHP_EOL; } @@ -121,7 +129,7 @@ This bridge is not fetching its content through a secure connection'; . filter_var($entry['exampleValue'], FILTER_SANITIZE_NUMBER_INT) . '" name="' . $name - . '" />
' + . '" />' . PHP_EOL; } @@ -172,7 +180,7 @@ This bridge is not fetching its content through a secure connection'; } } - $list .= '
'; + $list .= ''; return $list; } @@ -186,7 +194,7 @@ This bridge is not fetching its content through a secure connection'; . $name . '" ' . ($entry['defaultValue'] === 'checked' ?: '') - . ' />
' + . ' />' . PHP_EOL; } diff --git a/static/style.css b/static/style.css index 585b20a0..659f80ea 100644 --- a/static/style.css +++ b/static/style.css @@ -7,12 +7,21 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq font: inherit; vertical-align: baseline; } + /* 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; } + +/* Adjust parameters for browsers that don't support the grid layout */ + +.parameters label:before { + content: " "; + display: block; +} + /* Let's go for the actual style */ - body { +body { background-color: #f0f0f0; 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 { - text-decoration: underline; + text-decoration: underline; } /* Header */ - header { + +header { margin-top: 40px; text-align: center; color: #1182DB; } - header > h1 { + +header > h1 { font-size: 500%; font-weight: bold; } - header > h2 { + +header > h2 { margin-left: 1em; font-size: 200%; } - header > section.warning { + +header > section.warning { width: 40%; background-color: #ffc600; color: #5f5f5f; } - header > section.critical-warning { - width: 40%; - background-color: #cf3e3e; - font-weight: bold; - color: white; - } -/* Input boxes */ - input[type="text"] { +header > section.critical-warning { + width: 40%; + background-color: #cf3e3e; + font-weight: bold; + color: white; +} + +select, +input[type="text"], +input[type="number"] { background-color: white; color: #404552; border: 1px solid #dedede; @@ -61,30 +76,39 @@ a:hover { margin-bottom: 10px; padding: 5px 10px; } -input[type="text"]:focus { + +select:focus, +input[type="text"]:focus, +input[type="number"]:focus { outline: none; border-color: #888; } - .searchbar { + +.searchbar { width: 40%; margin: 40px auto 100px; } - .searchbar input[type="text"] { + +.searchbar input[type="text"] { width: 90%; margin: auto; font-size: 1.1em; text-align: center; margin-bottom: 10px; } - .searchbar input[type="text"]::placeholder { + +.searchbar input[type="text"]::placeholder { 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-weight: bold; color: #1182DB; @@ -92,7 +116,7 @@ input[type="text"]:focus { } /* Section */ - section { +section { background-color: #FFFFFF; width: 60%; margin: 30px auto; @@ -101,20 +125,26 @@ input[type="text"]:focus { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09); border-radius: 4px; } - section.footer { + +section.footer { opacity: 0.5; } - section.footer:hover { + +section.footer:hover { opacity: 1; } - section > h2 { + +section.footer .version { + font-size: 80%; +} + +section > h2 { font-size: 200%; font-weight: bold; } - /* Buttons */ - button { +button { line-height: 1.9em; color: #FFF; font-weight: bold; @@ -127,30 +157,78 @@ input[type="text"]:focus { cursor: pointer; width: calc(20% - 4px); } - button.small { + +button.small { width: auto; line-height: 1.2em; } - button:hover { - background: #49afff; - } - .description { +button:hover { + background: #49afff; +} + +.description { margin: 10px; } - h5 { + +h5 { margin: 20px; font-weight: bold; } - form { + +form { 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; font-size: 70%; text-align: right; } - .secure-warning { + +.secure-warning { background-color: #ffc600; color: #5f5f5f; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); @@ -160,7 +238,8 @@ input[type="text"]:focus { margin: auto; margin-bottom: 6px; } - form { + +form { display: none; } @@ -169,15 +248,16 @@ select { margin-left: 8px; } - h5 { +h5 { display: none; } /* Show more / less */ - .showmore-box { +.showmore-box { display: none; } - .showmore, .showless { + +.showmore, .showless { color: #888888; cursor: pointer; } @@ -185,18 +265,21 @@ select { color: #000; cursor: pointer; } - .showmore-box:checked ~ .showmore { + +.showmore-box:checked ~ .showmore { display: none; } - .showmore-box:not(:checked) ~ .showless { + +.showmore-box:not(:checked) ~ .showless { display: none; } - .showmore-box:checked ~ form, .showmore-box:checked ~ h5 { + +.showmore-box:checked ~ form, .showmore-box:checked ~ h5 { display: block; } /* Additional styles for error pages */ - .exception-message { +.exception-message { background-color: #c00000; color: #FFFFFF; font-weight: bold; @@ -207,11 +290,13 @@ select { margin: auto; margin-bottom: 6px; } - .advice { + +.advice { margin-left: auto; margin-right: auto; display: table; } - .advice > li { + +.advice > li { text-align: left; -} \ No newline at end of file +}