Make windows flex-growable
parent
2099bff384
commit
a6b2de5e57
151
pkg/index.html
151
pkg/index.html
|
@ -6,7 +6,7 @@
|
||||||
<link rel="stylesheet" href="https://unpkg.com/98.css@0.1.4/build/98.css" />
|
<link rel="stylesheet" href="https://unpkg.com/98.css@0.1.4/build/98.css" />
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--terminal-font: 'Terminus', 'IBM Plex Mono', 'Courier', monospace;
|
--terminal-font: 'IBM Plex Mono', 'Courier', monospace;
|
||||||
--colorOffWhite: white;
|
--colorOffWhite: white;
|
||||||
--kbdbaseBorderRadius: 1px;
|
--kbdbaseBorderRadius: 1px;
|
||||||
--color-dark-escape-keycap: darkgray;
|
--color-dark-escape-keycap: darkgray;
|
||||||
|
@ -74,16 +74,38 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.window {
|
.window {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
box-sizing: border-box;
|
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 {
|
#terminal_win.window {
|
||||||
width: 802px;
|
width: 802px;
|
||||||
height: 593px;
|
height: 593px;
|
||||||
transform: translate(5vw, 15vh);
|
transform: translate(5vw, 15vh);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#manpages.window {
|
||||||
|
}
|
||||||
#keyboard.window {
|
#keyboard.window {
|
||||||
width: calc(60* 8px + 59 * var(--gridGap) + 5px);
|
width: calc(60* 8px + 59 * var(--gridGap) + 5px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -308,12 +330,88 @@ input:checked + label {
|
||||||
}
|
}
|
||||||
input ~ .tab {
|
input ~ .tab {
|
||||||
border-top: 1px solid #999;
|
border-top: 1px solid #999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
input ~ .tab pre {
|
input ~ .tab pre {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: #c0c0c0;
|
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;
|
overflow: scroll;
|
||||||
border-left: 1px solid white;
|
border-left: 1px solid white;
|
||||||
border-bottom: 1px solid white;
|
border-bottom: 1px solid white;
|
||||||
|
@ -396,7 +494,7 @@ input ~ .tab pre {
|
||||||
interact.modifiers.restrictSize({
|
interact.modifiers.restrictSize({
|
||||||
min: {
|
min: {
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 50
|
height: 150
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
@ -863,18 +961,28 @@ input ~ .tab pre {
|
||||||
<button aria-label="Close" disabled></button>
|
<button aria-label="Close" disabled></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="window-body" style=" width: min-content;margin: 0;">
|
<div class="window-body" style="display: flex; flex-direction: column; margin: 0;">
|
||||||
<input type="radio" name="tabs" id="tab1" checked="checked">
|
<input checked="checked" id="tab1" type="radio" name="tabs">
|
||||||
<label for="tab1">meli(1)</label>
|
<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">
|
<section class="grow grow-flex">
|
||||||
<label for="tab2">meli.conf(5)</label>
|
<div class="tab tab1 grow grow-flex">
|
||||||
|
<pre class="grow">MELI(1) General Commands Manual MELI(1)
|
||||||
<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)
|
|
||||||
|
|
||||||
<b>NAME</b>
|
<b>NAME</b>
|
||||||
<b>meli</b> – Meli Mail User Agent. meli is the Greek word for honey
|
<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
|
Debian July 29, 2019 Debian
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab content2"><pre>MELI.CONF(5) File Formats Manual MELI.CONF(5)
|
<div class="tab tab2 grow grow-flex">
|
||||||
|
<pre class="grow">MELI.CONF(5) File Formats Manual MELI.CONF(5)
|
||||||
|
|
||||||
<b>NAME</b>
|
<b>NAME</b>
|
||||||
<b>meli.conf</b> – configuration file for the Meli Mail User Agent
|
<b>meli.conf</b> – configuration file for the Meli Mail User Agent
|
||||||
|
@ -1887,8 +1996,10 @@ Debian July 29, 2019 Debian
|
||||||
⟨https://meli.delivery⟩
|
⟨https://meli.delivery⟩
|
||||||
|
|
||||||
Debian September 16, 2019 Debian
|
Debian September 16, 2019 Debian
|
||||||
</pre></div>
|
</pre>
|
||||||
<div class="tab content3"><pre>MELI-THEMES(5) File Formats Manual MELI-THEMES(5)
|
</div>
|
||||||
|
<div class="tab tab3 grow grow-flex">
|
||||||
|
<pre class="grow">MELI-THEMES(5) File Formats Manual MELI-THEMES(5)
|
||||||
|
|
||||||
<b>NAME</b>
|
<b>NAME</b>
|
||||||
<b>meli-themes</b> – themes for the <b>meli</b> mail client
|
<b>meli-themes</b> – themes for the <b>meli</b> mail client
|
||||||
|
@ -2366,9 +2477,9 @@ Debian September 16, 2019 Debian
|
||||||
⟨https://meli.delivery⟩
|
⟨https://meli.delivery⟩
|
||||||
|
|
||||||
Debian January 23, 2020 Debian
|
Debian January 23, 2020 Debian
|
||||||
</pre></div>
|
</pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue