refactoring

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 @@
       <li class="right"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="hid-recorder-led" src="/share/svg/led-gear.svg">Macro &#8628;</a>
         <div class="menu" data-dont-hide-menu>
           <div class="text"><b>Record and play keyboard &amp; mouse actions<br></b><sub>For security reasons, the record will not saved on Pi-KVM</sub></div>
+          <hr>
           <div class="buttons buttons-row">
             <button class="row25" disabled data-force-hide-menu id="hid-recorder-record">&bull; Rec</button>
             <button class="row25" disabled id="hid-recorder-stop">Stop</button>
@@ -1188,56 +1189,59 @@
               </tr>
             </table><br>
             <div class="tabs">
-              <input checked type="radio" name="about-tab-button" id="about-tab-meta-button">
-              <label for="about-tab-meta-button">Meta</label>
-              <input type="radio" name="about-tab-button" id="about-tab-hw-button">
-              <label for="about-tab-hw-button">Hardware</label>
-              <input type="radio" name="about-tab-button" id="about-tab-version-button">
-              <label for="about-tab-version-button">Version</label>
-              <input type="radio" name="about-tab-button" id="about-tab-thanks-button">
-              <label for="about-tab-thanks-button">Thanks</label>
-              <div id="about-tab-meta-content">
-                <div class="code" id="about-meta"><span class="code-comment">No data</span></div>
-              </div>
-              <div id="about-tab-hw-content">
-                <div class="code" id="about-hw"><span class="code-comment">No data</span></div>
-              </div>
-              <div id="about-tab-version-content">
-                <div class="code" id="about-version"><span class="code-comment">No data</span></div>
-              </div>
-              <div id="about-tab-thanks-content">
-                <div class="code" id="about-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</a>
-                    or <a target="_blank" href="https://www.paypal.me/mdevaev">PayPal</a>.</span>
-                  <ul>
-                    <li>Aleksei Brusianskii</li>
-                    <li>Arthur Woimbée</li>
-                    <li>Ben Gordon</li>
-                    <li>Branden Shaulis</li>
-                    <li>Christof Maluck</li>
-                    <li>Corey Lista</li>
-                    <li>David Howell</li>
-                    <li>Denis Yatsenko</li>
-                    <li>Ge Men</li>
-                    <li>Grey Cynic</li>
-                    <li>Jason Toland</li>
-                    <li>Jeff Bowman</li>
-                    <li>John McGovern</li>
-                    <li>Mark Gilbert</li>
-                    <li>Mark Robinson</li>
-                    <li>Mauricio Allende</li>
-                    <li>Michael Lynch</li>
-                    <li>Samed Ozoglu</li>
-                    <li>Truman Kilen</li>
-                    <li>Walter_Ego</li>
-                  </ul>
-                </div>
-              </div>
+                  <input checked type="radio" name="about-tab-button" id="about-tab-meta-button">
+                  <label for="about-tab-meta-button">Meta</label>
+                  <div class="tab">
+                    <div class="code" id="about-meta"><span class="code-comment">No data</span>
+                    </div>
+                  </div>
+                  <input type="radio" name="about-tab-button" id="about-tab-hw-button">
+                  <label for="about-tab-hw-button">Hardware</label>
+                  <div class="tab">
+                    <div class="code" id="about-hw"><span class="code-comment">No data</span>
+                    </div>
+                  </div>
+                  <input type="radio" name="about-tab-button" id="about-tab-version-button">
+                  <label for="about-tab-version-button">Version</label>
+                  <div class="tab">
+                    <div class="code" id="about-version"><span class="code-comment">No data</span>
+                    </div>
+                  </div>
+                  <input type="radio" name="about-tab-button" id="about-tab-thanks-button">
+                  <label for="about-tab-thanks-button">Thanks</label>
+                  <div class="tab">
+                    <div class="code" id="about-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</a>
+                        or <a target="_blank" href="https://www.paypal.me/mdevaev">PayPal</a>.</span>
+                      <ul>
+                        <li>Aleksei Brusianskii</li>
+                        <li>Arthur Woimbée</li>
+                        <li>Ben Gordon</li>
+                        <li>Branden Shaulis</li>
+                        <li>Christof Maluck</li>
+                        <li>Corey Lista</li>
+                        <li>David Howell</li>
+                        <li>Denis Yatsenko</li>
+                        <li>Ge Men</li>
+                        <li>Grey Cynic</li>
+                        <li>Jason Toland</li>
+                        <li>Jeff Bowman</li>
+                        <li>John McGovern</li>
+                        <li>Mark Gilbert</li>
+                        <li>Mark Robinson</li>
+                        <li>Mauricio Allende</li>
+                        <li>Michael Lynch</li>
+                        <li>Samed Ozoglu</li>
+                        <li>Truman Kilen</li>
+                        <li>Walter_Ego</li>
+                      </ul>
+                    </div>
+                  </div>
             </div><br>
             <p class="text">
               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 &amp; 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") &bull; 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 &copy; 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;
+}