From 6bd4fc769fb72a19ef7b7b035ffcbd3b97959ccc Mon Sep 17 00:00:00 2001 From: Devaev Maxim Date: Sat, 18 Jul 2020 10:51:20 +0300 Subject: [PATCH] refactoring --- web/kvm/index.html | 104 +++++++++++++++++++----------------- web/kvm/navbar-macro.pug | 1 + web/kvm/window-about.pug | 88 +++++++++++++++--------------- web/share/css/kvm/about.css | 9 +--- web/share/css/tabs.css | 29 +++++++--- 5 files changed, 125 insertions(+), 106 deletions(-) diff --git a/web/kvm/index.html b/web/kvm/index.html index caecddf0..e74087e4 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -328,6 +328,7 @@
  • Macro ↴
    Record and play keyboard & mouse actions
    For security reasons, the record will not saved on Pi-KVM
    +
    @@ -1188,56 +1189,59 @@
    - - - - - - - - -
    -
    No data
    -
    -
    -
    No data
    -
    -
    -
    No data
    -
    -
    -
    // These kind people donated money to the Pi-KVM project
    - // and supported the work on it. We are very grateful
    - // for their help, and memorializing their names
    - // is the least we can do in gratitude.
    - // If you also want to support this project,
    - // you can use one of these services: - Patreon - or PayPal.     -
      -
    • Aleksei Brusianskii
      • -
    • Arthur Woimbée
      • -
    • Ben Gordon
      • -
    • Branden Shaulis
      • -
    • Christof Maluck
      • -
    • Corey Lista
      • -
    • David Howell
      • -
    • Denis Yatsenko
      • -
    • Ge Men
      • -
    • Grey Cynic
      • -
    • Jason Toland
      • -
    • Jeff Bowman
      • -
    • John McGovern
      • -
    • Mark Gilbert
      • -
    • Mark Robinson
      • -
    • Mauricio Allende
      • -
    • Michael Lynch
      • -
    • Samed Ozoglu
      • -
    • Truman Kilen
      • -
    • Walter_Ego
      • -
    -
    -
    + + +
    +
    No data +
    +
    + + +
    +
    No data +
    +
    + + +
    +
    No data +
    +
    + + +
    +
    // These kind people donated money to the Pi-KVM project
    + // and supported the work on it. We are very grateful
    + // for their help, and memorializing their names
    + // is the least we can do in gratitude.
    + // If you also want to support this project,
    + // you can use one of these services: + Patreon + or PayPal.     +
      +
    • Aleksei Brusianskii
      • +
    • Arthur Woimbée
      • +
    • Ben Gordon
      • +
    • Branden Shaulis
      • +
    • Christof Maluck
      • +
    • Corey Lista
      • +
    • David Howell
      • +
    • Denis Yatsenko
      • +
    • Ge Men
      • +
    • Grey Cynic
      • +
    • Jason Toland
      • +
    • Jeff Bowman
      • +
    • John McGovern
      • +
    • Mark Gilbert
      • +
    • Mark Robinson
      • +
    • Mauricio Allende
      • +
    • Michael Lynch
      • +
    • Samed Ozoglu
      • +
    • Truman Kilen
      • +
    • Walter_Ego
      • +
    +
    +

    Full documentation, source code, hardware schematics and legal information diff --git a/web/kvm/navbar-macro.pug b/web/kvm/navbar-macro.pug index 9fd981d4..2a0e00d1 100644 --- a/web/kvm/navbar-macro.pug +++ b/web/kvm/navbar-macro.pug @@ -6,6 +6,7 @@ li(class="right") div(class="text") b Record and play keyboard & mouse actions#[br] sub For security reasons, the record will not saved on Pi-KVM + hr div(class="buttons buttons-row") button(disabled data-force-hide-menu id="hid-recorder-record" class="row25") • Rec button(disabled id="hid-recorder-stop" class="row25") Stop diff --git a/web/kvm/window-about.pug b/web/kvm/window-about.pug index 92873ede..90b61ce0 100644 --- a/web/kvm/window-about.pug +++ b/web/kvm/window-about.pug @@ -1,3 +1,14 @@ +mixin about_tab(name, title, checked=false) + - let button_id = `about-tab-${name}-button` + input(checked=checked type="radio" name="about-tab-button", id=button_id) + label(for=button_id) #{title} + div(class="tab") + div(id=`about-${name}` class="code") + if block + block + else + span(class="code-comment") No data + +window("about-window", "About", true, false) div(id="about") table @@ -10,48 +21,41 @@ tr #[td(colspan="2" class="copyright") Copyright © 2018 Pi-KVM Developers Team] br div(class="tabs") - each tab, index in ["Meta", "Hardware", "Version", "Thanks"] - - tab_id = `about-tab-${tab != "Hardware" ? tab.toLowerCase() : "hw"}-button` - if index == 0 - input(checked type="radio" name="about-tab-button" id=tab_id) - else - input(type="radio" name="about-tab-button" id=tab_id) - label(for=tab_id) #{tab} - each tab in ["meta", "hw", "version"] - div(id=`about-tab-${tab}-content`) - div(id=`about-${tab}` class="code") #[span(class="code-comment") No data] - div(id="about-tab-thanks-content") - div(id="about-thanks" class="code") - span(class="code-comment") - | // These kind people donated money to the Pi-KVM project#[br] - | // and supported the work on it. We are very grateful#[br] - | // for their help, and memorializing their names#[br] - | // is the least we can do in gratitude.#[br] - | // If you also want to support this project,#[br] - | // you can use one of these services: - | #[a(target="_blank" href="https://www.patreon.com/pikvm") Patreon] - | or #[a(target="_blank" href="https://www.paypal.me/mdevaev") PayPal]. - ul - li Aleksei Brusianskii - li Arthur Woimbée - li Ben Gordon - li Branden Shaulis - li Christof Maluck - li Corey Lista - li David Howell - li Denis Yatsenko - li Ge Men - li Grey Cynic - li Jason Toland - li Jeff Bowman - li John McGovern - li Mark Gilbert - li Mark Robinson - li Mauricio Allende - li Michael Lynch - li Samed Ozoglu - li Truman Kilen - li Walter_Ego + +about_tab("meta", "Meta", true) + +about_tab("hw", "Hardware") + +about_tab("version", "Version") + + +about_tab("thanks", "Thanks") + span(class="code-comment") + | // These kind people donated money to the Pi-KVM project#[br] + | // and supported the work on it. We are very grateful#[br] + | // for their help, and memorializing their names#[br] + | // is the least we can do in gratitude.#[br] + | // If you also want to support this project,#[br] + | // you can use one of these services: + | #[a(target="_blank" href="https://www.patreon.com/pikvm") Patreon] + | or #[a(target="_blank" href="https://www.paypal.me/mdevaev") PayPal]. + ul + li Aleksei Brusianskii + li Arthur Woimbée + li Ben Gordon + li Branden Shaulis + li Christof Maluck + li Corey Lista + li David Howell + li Denis Yatsenko + li Ge Men + li Grey Cynic + li Jason Toland + li Jeff Bowman + li John McGovern + li Mark Gilbert + li Mark Robinson + li Mauricio Allende + li Michael Lynch + li Samed Ozoglu + li Truman Kilen + li Walter_Ego br p(class="text") | Full documentation, source code, hardware schematics and legal information diff --git a/web/share/css/kvm/about.css b/web/share/css/kvm/about.css index 1b586bb6..22fb6abc 100644 --- a/web/share/css/kvm/about.css +++ b/web/share/css/kvm/about.css @@ -41,13 +41,6 @@ div#about td.copyright { font-size: 0.8em; } -div#about div#about-meta, div#about-hw, div#about-version, div#about-thanks { +div#about div.tabs div.tab div.code { height: 250px; } - -#about-tab-meta-button:checked~#about-tab-meta-content, -#about-tab-hw-button:checked~#about-tab-hw-content, -#about-tab-version-button:checked~#about-tab-version-content, -#about-tab-thanks-button:checked~#about-tab-thanks-content { - display: block; -} diff --git a/web/share/css/tabs.css b/web/share/css/tabs.css index 46c46b4b..fcd6f9b8 100644 --- a/web/share/css/tabs.css +++ b/web/share/css/tabs.css @@ -20,28 +20,45 @@ *****************************************************************************/ -div.tabs>input[type="radio"] { +div.tabs { + display: flex; + flex-wrap: wrap; +} + +div.tabs input[type="radio"] { display: none; } -div.tabs>div { +div.tabs div.tab { + order: 99; display: none; border: var(--border-default-thin); padding: 10px 10px; + width: 100%; } -div.tabs>label { - display: inline-block; +div.tabs label { + order: 1; + display: block; text-align: center; vertical-align: middle; user-select: none; - border: var(--border-default-thin); + border-top: var(--border-default-thin); + border-left: var(--border-default-thin); padding: 4px 8px; cursor: pointer; position: relative; top: 1px; } -div.tabs>input[type="radio"]:checked+label { +div.tabs label:last-of-type { + border-right: var(--border-default-thin); +} + +div.tabs input[type="radio"]:checked+label { background-color: var(--cs-control-default-bg); } + +div.tabs input[type="radio"]:checked+label+.tab { + display: block; +}