refactoring

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>
@@ -1190,22 +1191,25 @@
             <div class="tabs">
                   <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 id="about-tab-meta-content">
+                  <div class="tab">
-                <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>

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

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,18 +21,11 @@
 						tr #[td(colspan="2" class="copyright") Copyright © 2018 Pi-KVM Developers Team]
 		br
 		div(class="tabs")
-			each tab, index in ["Meta", "Hardware", "Version", "Thanks"]
+			+about_tab("meta", "Meta", true)
-				- tab_id = `about-tab-${tab != "Hardware" ? tab.toLowerCase() : "hw"}-button`
+			+about_tab("hw", "Hardware")
-				if index == 0
+			+about_tab("version", "Version")
-					input(checked type="radio" name="about-tab-button" id=tab_id)
+
-				else
+			+about_tab("thanks", "Thanks")
-					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]

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;
-}

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 {
+div.tabs label {
-	display: inline-block;
+	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;
+}