333/civ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance UI layout with history sidebar and state graph; update styles for improved responsiveness

Browse source
This commit is contained in:
33333-33333 2026-05-12 15:46:07 +09:00
commit 9f49359384
3 changed files with 500 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

72
styles.css
View file

@ -37,7 +37,7 @@ select {
.app {
display: grid;
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 340px);
width: 100%;
height: 100%;
}
@ -53,6 +53,54 @@ select {
background: #16191b;
}
.history-sidebar {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 14px;
overflow: hidden;
border-left: 1px solid var(--line);
background: #16191b;
}
.history-panel {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
.history-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.history-header h2 {
margin: 0;
font-size: 14px;
}
.history-header span {
color: var(--muted);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
#stateGraph {
display: block;
width: 100%;
flex: 1;
min-height: 420px;
border: 1px solid var(--line);
border-radius: 6px;
background: #101315;
image-rendering: auto;
}
.brand h1 {
margin: 0 0 6px;
font-size: 24px;
@ -191,12 +239,13 @@ select {
background: #101214;
}
canvas {
canvas#world {
display: block;
width: min(calc(100vh - 32px), calc(100vw - 380px));
height: min(calc(100vh - 32px), calc(100vw - 380px));
width: min(calc(100vh - 32px), 100%);
height: min(calc(100vh - 32px), 100%);
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
border: 1px solid #293035;
background: #0b0d0f;
image-rendering: pixelated;
@ -260,7 +309,7 @@ canvas {
color: var(--muted);
}
@media (max-width: 820px) {
@media (max-width: 1100px) {
body {
overflow: auto;
}
@ -276,13 +325,24 @@ canvas {
border-bottom: 1px solid var(--line);
}
.history-sidebar {
border-left: 0;
border-top: 1px solid var(--line);
overflow: visible;
}
.sim {
min-height: 70vh;
padding: 10px;
}
canvas {
canvas#world {
width: min(calc(100vw - 20px), 92vh);
height: min(calc(100vw - 20px), 92vh);
}
#stateGraph {
height: 420px;
flex: none;
}
}