riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

netcanv: organise commands in UI demo

Browse source
This commit is contained in:
りき萌 2025-08-31 14:33:31 +02:00
parent 431c3cd6a7
commit 0577d72707
2 changed files with 39 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

55
content/netcanv.dj
View file

@ -228,6 +228,9 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
position: relative; position: relative;
&>svg { &>svg {
max-width: 100%;
object-fit: contain;
& g.stack { & g.stack {
--ease: var(--ease-out-quintic); --ease: var(--ease-out-quintic);
@ -253,14 +256,25 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
} }
&>.controls { &>.controls {
display: flex; display: grid;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem; gap: 0.8rem;
grid-template-columns: auto auto;
align-items: center;
&>p {
padding: 0;
padding-right: 0.8rem;
text-align: right;
}
&>.category {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.8rem;
}
& hr { & hr {
display: block;
margin: 0; margin: 0;
width: 0; width: 0;
align-self: stretch; align-self: stretch;
@ -292,21 +306,28 @@ Here is an interactive visualisation of how the immediate-mode layout system wor
</noscript> </noscript>
<div id="netcanv:ui-example"> <div id="netcanv:ui-example">
<svg width="320" height="240" xmlns="http://www.w3.org/2000/svg"> <svg width="320" height="240" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg">
</svg> </svg>
<div class="controls"> <div class="controls">
<button name="reset">Reset</button> <p>Stack</p>
<hr> <div class="category">
<button name="push-h">Push Horizontal</button> <button name="push-h">Push Horizontal</button>
<button name="push-v">Push Vertical</button> <button name="push-v">Push Vertical</button>
<button name="pop">Pop</button> <button name="pop">Pop</button>
<hr> <hr>
<button name="space">Space</button> <button name="reset">Reset</button>
<button name="pad">Pad</button> </div>
<button name="fit">Fit</button> <p>Rectangle</p>
<hr> <div class="category">
<button name="fill">Fill</button> <button name="space">Space</button>
<button name="pad">Pad</button>
<button name="fit">Fit</button>
</div>
<p>Drawing</p>
<div class="category">
<button name="fill">Fill</button>
</div>
</div> </div>
<div class="no-script"> <div class="no-script">

2
static/css/main.css
View file

@ -425,7 +425,7 @@ button {
color: var(--text-color); color: var(--text-color);
box-shadow: 0 1px 2px var(--border-1); box-shadow: 0 1px 2px var(--border-1);
border-radius: 100px; border-radius: 0.75lh;
transition: transition:
background-color var(--transition-duration) var(--ease-out-quintic), background-color var(--transition-duration) var(--ease-out-quintic),