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" />
|
||||
<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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue