refactoring

3 files changed, 101 insertions, 92 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