Make windows flex-growable

Manos Pitsidianakis 2020-07-10 15:21:29 +03:00
parent c920769292
commit eaadd1d541
Signed by: Manos Pitsidianakis
GPG Key ID: 73627C2F690DF710
1 changed files with 131 additions and 20 deletions

View File

@ -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>