tweak headings

This commit is contained in:
Ladd 2025-12-28 21:27:51 -06:00
parent 69b1413771
commit 8458a3e948
5 changed files with 24 additions and 10 deletions

View File

@ -6,7 +6,10 @@
<link rel="stylesheet" href="./style.css" />
<script type="module">
import { Sim } from './simulator.js';
const sim = new Sim('simulator');
// Wait for document load
document.addEventListener('DOMContentLoaded', () => {
new Sim('simulator');
});
</script>
</head>
<body>

View File

@ -17,7 +17,7 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
font-size: 16pt;
font-size: 14pt;
}
div[id=simulator] {
@ -77,10 +77,15 @@ div.lhg-tool button:active {
div.lhg-toolbar-header:hover button {
background-color: #444;
}
div.lhg-toolbar-header:active button {
background-color: #252;
}
div.lhg-toolbar-header > * {
display: inline-block;
}
div.lhg-tool button.lhg-tool-info {
background-color: #111;
border-color: #282;

2
sync
View File

@ -8,7 +8,7 @@ fi
set -eo pipefail
do_rsync() {
rsync -ru \
rsync -vru \
--exclude='.git' \
--exclude='node_modules' \
--exclude='.*.sw*' \

View File

@ -6,22 +6,20 @@ export class Header extends Tool {
constructor(toolbar, title = 'Tools') {
super(toolbar);
this.title = document.createElement('h1');
this.title.innerHTML = title;
this.toggleButton = document.createElement('button');
this.updateButton();
this.div.addEventListener('click', () => this.toggle());
this.updateButton();
this.div.appendChild(this.title);
this.div.appendChild(this.toggleButton);
this.title.style.verticalAlign = 'center';
this.toggleButton.style.width = '3EM';
this.div.style.display = 'flex';
this.div.style.justifyContent = 'space-around';
this.title.style.width = '9EM';
this.toggleButton.style.width = '3EM';
this.div.classList.add(TOOLBAR_HEADER_CLASSNAME);
}

View File

@ -7,6 +7,14 @@ import {
} from '../config.js';
export class Zoom extends Tool {
get displayScale() {
return this.sim.getScaleDisplay();
}
get displayScaleText() {
return `Scale: ${this.displayScale}`;
}
constructor(toolbar) {
super(toolbar);
@ -27,10 +35,10 @@ export class Zoom extends Tool {
zoomOut.innerHTML = 'Zoom<br>Out';
zoomIn.innerHTML = 'Zoom<br>In';
zoomAll.innerHTML = 'Zoom to Fit';
currentScale.innerHTML = `Scale: ${this.sim.getScaleDisplay()}`;
currentScale.innerHTML = this.displayScaleText;
this.sim.onZoom(() => {
currentScale.innerHTML = `Scale: ${this.sim.getScaleDisplay()}`;
currentScale.innerHTML = this.displayScaleText;
});
zoomOut.addEventListener('click', () => {