diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/kvm/index.html | 61 | ||||
| -rw-r--r-- | web/kvm/navbar.pug | 49 |
2 files changed, 57 insertions, 53 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html index 7ddd7659..caecddf0 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -62,9 +62,12 @@ <div class="text"> <table> <tr> - <td><img class="sign " src="/share/svg/warning.svg"></td> - <td><b>Raspberry Pi's health is at risk</b> <br> <br><sup>This is not a drill! A red icon indicates a current issue,<br> - a yellow one that was observed since the device booted up.</sup></td> + <td rowspan="2"><img class="sign " src="/share/svg/warning.svg"></td> + <td style="line-height:1.5"><b>Raspberry Pi's health is at risk</b></td> + </tr> + <tr> + <td><sup style="line-height:1">This is not a drill! A red icon indicates a current issue,<br> + a yellow one that was observed since the device booted up</sup></td> </tr> </table> </div> @@ -73,9 +76,12 @@ <div class="text"> <table> <tr> - <td><img class="sign led-gray" src="/share/svg/led-undervoltage.svg"></td> - <td><b>Undervoltage detected</b> <br> <br><sup>Make sure your power supply and cabling are providing<br> - enough power to the Raspberry Pi (3A minimum).</sup></td> + <td rowspan="2"><img class="sign led-gray" src="/share/svg/led-undervoltage.svg"></td> + <td style="line-height:1.5"><b>Undervoltage detected</b></td> + </tr> + <tr> + <td><sup style="line-height:1">Make sure your power supply and cabling are providing<br> + enough power to the Raspberry Pi (3A minimum)</sup></td> </tr> </table> </div> @@ -85,9 +91,12 @@ <div class="text"> <table> <tr> - <td><img class="sign led-gray" src="/share/svg/led-overheating.svg"></td> - <td><b>Overheating detected</b> <br> <br><sup>Frequency capping due to overheating.<br> - Improve cooling of the Raspberry Pi.</sup></td> + <td rowspan="2"><img class="sign led-gray" src="/share/svg/led-overheating.svg"></td> + <td style="line-height:1.5"><b>Overheating detected</b></td> + </tr> + <tr> + <td><sup style="line-height:1">Frequency capping due to overheating,<br> + improve cooling of the Raspberry Pi</sup></td> </tr> </table> </div> @@ -176,9 +185,8 @@ <div class="text"> <table> <tr> - <td><img class="sign" src="/share/svg/warning.svg"></td> - <td><b>Mass Storage Device is offline</b> - </td> + <td rowspan="2"><img class="sign " src="/share/svg/warning.svg"></td> + <td style="line-height:1.5"><b>Mass Storage Device is offline</b></td> </tr> </table> </div> @@ -188,9 +196,11 @@ <div class="text"> <table> <tr> - <td><img class="sign" src="/share/svg/warning.svg"></td> - <td><b>Current image is broken!</b><br><sup>Perhaps uploading was interrupted</sup> - </td> + <td rowspan="2"><img class="sign " src="/share/svg/warning.svg"></td> + <td style="line-height:1.5"><b>Current image is broken!</b></td> + </tr> + <tr> + <td><sup style="line-height:1">Perhaps uploading was interrupted<br></sup></td> </tr> </table> </div> @@ -200,9 +210,11 @@ <div class="text"> <table> <tr> - <td><img class="sign" src="/share/svg/warning.svg"></td> - <td><b>Current image is too big for CD-ROM!</b><br><sup>The device filesystem will be truncated to 2.2GiB</sup> - </td> + <td rowspan="2"><img class="sign " src="/share/svg/warning.svg"></td> + <td style="line-height:1.5"><b>Current image is too big for CD-ROM!</b></td> + </tr> + <tr> + <td><sup style="line-height:1">The device filesystem will be truncated to 2.2GiB</sup></td> </tr> </table> </div> @@ -212,9 +224,11 @@ <div class="text"> <table> <tr> - <td><img class="sign" src="/share/svg/warning.svg"></td> - <td><b>Current image is out of storag</b><br><sup>This image was connected manually using <b>kvmd-otgmsd</b></sup> - </td> + <td rowspan="2"><img class="sign " src="/share/svg/warning.svg"></td> + <td style="line-height:1.5"><b>Current image is out of storag</b></td> + </tr> + <tr> + <td><sup style="line-height:1">This image was connected manually using <b>kvmd-otgmsd</b></sup></td> </tr> </table> </div> @@ -224,9 +238,8 @@ <div class="text"> <table> <tr> - <td><img class="sign" src="/share/svg/info.svg"></td> - <td><b>Another user uploads an image</b> - </td> + <td rowspan="2"><img class="sign " src="/share/svg/info.svg"></td> + <td style="line-height:1.5"><b>Another user uploads an image</b></td> </tr> </table> </div> diff --git a/web/kvm/navbar.pug b/web/kvm/navbar.pug index d7b5c0cc..33fb4d4f 100644 --- a/web/kvm/navbar.pug +++ b/web/kvm/navbar.pug @@ -1,28 +1,19 @@ mixin navbar_led(id, icon) img(data-dont-hide-menu id=id, class="led-gray" src=`${svg_dir}/${icon}.svg`) -mixin navbar_message(icon, short) +mixin menu_message(icon, short, classes="") div(class="text") table tr - td #[img(class="sign" src=`${svg_dir}/${icon}.svg`)] - td + td(rowspan="2") #[img(class=`sign ${classes}` src=`${svg_dir}/${icon}.svg`)] + td(style="line-height:1.5") | #[b #{short}] - if block - br - sup + if block + tr + td + sup(style="line-height:1") block -mixin navbar_health_message(icon, short, gray) - div(class="text") - table - tr - td #[img(class=`sign ${gray ? " led-gray" : ""}` src=`${svg_dir}/${icon}.svg`)] - td - | #[b #{short}] #[br] #[br] - sup - block - mixin switch(id) div(class="switch-box") input(checked type="checkbox" id=id class="switch-checkbox") @@ -42,19 +33,19 @@ ul(id="navbar") img(data-dont-hide-menu id="hw-health-overheating-led" class="hidden" src=`${svg_dir}/led-overheating.svg`) | ↴ div(data-dont-hide-menu class="menu") - +navbar_health_message("warning", "Raspberry Pi's health is at risk", false) + +menu_message("warning", "Raspberry Pi's health is at risk") | This is not a drill! A red icon indicates a current issue,#[br] - | a yellow one that was observed since the device booted up. + | a yellow one that was observed since the device booted up div(id="hw-health-message-undervoltage" class="hidden") hr - +navbar_health_message("led-undervoltage", "Undervoltage detected", true) + +menu_message("led-undervoltage", "Undervoltage detected", "led-gray") | Make sure your power supply and cabling are providing#[br] - | enough power to the Raspberry Pi (3A minimum). + | enough power to the Raspberry Pi (3A minimum) div(id="hw-health-message-overheating" class="hidden") hr - +navbar_health_message("led-overheating", "Overheating detected", true) - | Frequency capping due to overheating.#[br] - | Improve cooling of the Raspberry Pi. + +menu_message("led-overheating", "Overheating detected", "led-gray") + | Frequency capping due to overheating,#[br] + | improve cooling of the Raspberry Pi li(class="right") a(class="menu-button" href="#") @@ -128,22 +119,22 @@ ul(id="navbar") | Mass Storage ↴ div(data-dont-hide-menu id="msd-menu" class="menu") div(id="msd-message-offline" class="hidden") - +navbar_message("warning", "Mass Storage Device is offline") + +menu_message("warning", "Mass Storage Device is offline") hr div(id="msd-message-image-broken" class="hidden") - +navbar_message("warning", "Current image is broken!") - | Perhaps uploading was interrupted + +menu_message("warning", "Current image is broken!") + | Perhaps uploading was interrupted#[br] hr div(id="msd-message-too-big-for-cdrom" class="hidden") - +navbar_message("warning", "Current image is too big for CD-ROM!") + +menu_message("warning", "Current image is too big for CD-ROM!") | The device filesystem will be truncated to 2.2GiB hr div(id="msd-message-out-of-storage" class="hidden") - +navbar_message("warning", "Current image is out of storag") + +menu_message("warning", "Current image is out of storag") | This image was connected manually using #[b kvmd-otgmsd] hr div(id="msd-message-another-user-uploads" class="hidden") - +navbar_message("info", "Another user uploads an image") + +menu_message("info", "Another user uploads an image") hr table(class="kv") tr |