From a6b2de5e573ff32ff149499dc5663aca0528347f Mon Sep 17 00:00:00 2001
From: Manos Pitsidianakis <el13635@mail.ntua.gr>
Date: Fri, 10 Jul 2020 15:21:29 +0300
Subject: [PATCH] Make windows flex-growable

---
 pkg/index.html | 151 ++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 131 insertions(+), 20 deletions(-)

diff --git a/pkg/index.html b/pkg/index.html
index 33f7dc00..bea17476 100644
--- a/pkg/index.html
+++ b/pkg/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="https://unpkg.com/98.css@0.1.4/build/98.css" />
     <style>
         :root {
-            --terminal-font: 'Terminus', 'IBM Plex Mono', 'Courier', monospace;
+            --terminal-font: 'IBM Plex Mono', 'Courier', monospace;
             --colorOffWhite: white;
             --kbdbaseBorderRadius: 1px;
             --color-dark-escape-keycap: darkgray;
@@ -74,16 +74,38 @@
         }
 
         .window {
+            display: flex;
+            flex-direction: column;
             touch-action: none;
             box-sizing: border-box;
         }
 
+        .title-bar {
+          height: initial;
+          max-height: min-content;
+          flex: initial;
+        }
+
+        .window-body {
+          flex:1;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+        }
+        .window-body section {
+          flex 1;
+        }
+.window-body section div.tab pre {
+  height:200px;
+}
         #terminal_win.window {
             width: 802px;
             height: 593px;
             transform: translate(5vw, 15vh);
         }
 
+        #manpages.window {
+        }
         #keyboard.window {
             width: calc(60* 8px + 59 * var(--gridGap) + 5px);
             position: absolute;
@@ -308,12 +330,88 @@ input:checked + label {
 }
 input ~ .tab {
   border-top: 1px solid #999;
+  display: flex;
+  flex-direction: column;
 }
 input ~ .tab pre {
   cursor: default;
   box-shadow: none;
   background: #c0c0c0;
-  height:calc(300px - 23px);
+  overflow: scroll;
+  border-left: 1px solid white;
+  border-bottom: 1px solid white;
+  border-right: 1px solid white;
+}
+
+
+#manpages .window-body > input,
+#manpages .window-body section > div {
+  display: none;
+}
+
+.grow {
+flex-grow: 1;
+height: 100%;
+}
+
+.grow-flex {
+flex-direction: column;
+display: flex;
+}
+
+#tab1:checked ~ section .tab1,
+#tab2:checked ~ section .tab2,
+#tab3:checked ~ section .tab3,
+#tab4:checked ~ section .tab4 {
+  display: flex;
+}
+#manpages .window-body {
+  width: 100%;
+  margin: 0 auto;
+}
+#manpages .window-body ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#manpages .window-body ul li label {
+  float: left;
+  margin-right: 2px;
+  border-top: 1px outset #fff;
+  border-left: 1px outset #fff;
+  border-right: 1px outset #444;
+  background: none;
+  padding: 4px 12px;
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  top: 1px;
+}
+#manpages .window-body section {
+  border-top: 1px solid #999;
+  clear: both;
+}
+#manpages .window-body section > div> pre {
+  cursor: default;
+  box-shadow: none;
+  background: #c0c0c0;
+  overflow: scroll;
+  border-left: 1px solid white;
+  border-bottom: 1px solid white;
+  border-right: 1px solid white;
+}
+
+#tab1:checked ~ nav .tab1 label:after,
+#tab2:checked ~ nav .tab2 label:after,
+#tab3:checked ~ nav .tab3 label:after,
+#tab4:checked ~ nav .tab4 label:after {
+  background: none;
+  border-bottom: 1px solid #c0c0c0;
+}
+
+.tab:checked > pre {
+  cursor: default;
+  box-shadow: none;
+  background: #c0c0c0;
   overflow: scroll;
   border-left: 1px solid white;
   border-bottom: 1px solid white;
@@ -396,7 +494,7 @@ input ~ .tab pre {
                         interact.modifiers.restrictSize({
                             min: {
                                 width: 100,
-                                height: 50
+                                height: 150
                             }
                         })
                     ],
@@ -863,18 +961,28 @@ input ~ .tab pre {
                 <button aria-label="Close" disabled></button>
             </div>
         </div>
-        <div class="window-body" style=" width: min-content;margin: 0;">
-          <input type="radio" name="tabs" id="tab1" checked="checked">
-<label for="tab1">meli(1)</label>
+        <div class="window-body" style="display: flex; flex-direction: column; margin: 0;">
+        <input checked="checked" id="tab1" type="radio" name="tabs">
+        <input id="tab2" type="radio" name="tabs">
+        <input id="tab3" type="radio" name="tabs">
+        <input id="tab4" type="radio" name="tabs">
+        <nav>
+          <ul>
+            <li class="tab1">
+              <label for="tab1">meli(1)</label>
+            </li>
+            <li class="tab2">
+              <label for="tab2">meli.conf(5)</label>
+            </li>
+            <li class="tab3">
+              <label for="tab3">meli-themes(5)</label>
+            </li>
+          </ul>
+        </nav>
 
-<input type="radio" name="tabs" id="tab2">
-<label for="tab2">meli.conf(5)</label>
-
-<input type="radio" name="tabs" id="tab3">
-<label for="tab3">meli-themes(5)</label>
-
-<div class="tab content1">
-<pre style="">MELI(1)                     General Commands Manual                    MELI(1)
+        <section class="grow grow-flex">
+        <div class="tab tab1 grow grow-flex">
+<pre class="grow">MELI(1)                     General Commands Manual                    MELI(1)
 
 <b>NAME</b>
      <b>meli</b> – Meli Mail User Agent. meli is the Greek word for honey
@@ -1300,8 +1408,9 @@ input ~ .tab pre {
 
 Debian                           July 29, 2019                          Debian
 </pre>
-</div>
-<div class="tab content2"><pre>MELI.CONF(5)                  File Formats Manual                 MELI.CONF(5)
+        </div>
+        <div class="tab tab2 grow grow-flex">
+<pre class="grow">MELI.CONF(5)                  File Formats Manual                 MELI.CONF(5)
 
 <b>NAME</b>
      <b>meli.conf</b> – configuration file for the Meli Mail User Agent
@@ -1887,8 +1996,10 @@ Debian                           July 29, 2019                          Debian
      ⟨https://meli.delivery⟩
 
 Debian                        September 16, 2019                        Debian
-</pre></div>
-<div class="tab content3"><pre>MELI-THEMES(5)                File Formats Manual               MELI-THEMES(5)
+</pre>
+        </div>
+        <div class="tab tab3 grow grow-flex">
+<pre class="grow">MELI-THEMES(5)                File Formats Manual               MELI-THEMES(5)
 
 <b>NAME</b>
      <b>meli-themes</b> – themes for the <b>meli</b> mail client
@@ -2366,9 +2477,9 @@ Debian                        September 16, 2019                        Debian
      ⟨https://meli.delivery⟩
 
 Debian                         January 23, 2020                         Debian
-</pre></div>
-
+</pre>
         </div>
+        </section>
     </div>
 </body>