Bootstrap lokal einbetten und Stil der AG anlegen (#27)
- werkzeuge/bootstrap/: Bootstrap 5.3.8 (CSS, JS-Bundle) und Bootstrap Icons 1.13.1 (CSS, woff2/woff) byte-gleich aus den npm-Paketen, Integrität geprüft; README mit Version, Quelle, Integrität, Lizenz und Aktualisierung; Lizenzen (MIT) daneben; .gitattributes: binary, die README bleibt Text mit Diff. - werkzeuge/stil/ag_prozesse.css: eigene kleine Stilschicht (ag-*): Seite in voller Höhe, dunkle Navigationsleiste, hellgrauer Hintergrund, Karten mit farbigem Rand, Tabellenziffern, Druck. Vorbild VLN_SN/EA-Bilanz, nichts übernommen. - Vorschau: Kopfzeile als dunkle Navigationsleiste mit Icon-Knöpfen; JavaScript, IDs und Zeichenfläche (Wasserzeichen) unverändert. - scripts/vorschau.py bettet Bootstrap, Icons und Stil ein und setzt die Icon-Schrift als data:-URI ein (_schriften_einbetten); ein nicht einbettbarer Schriftverweis bricht laut ab. - Tests: drei neue in test_vorschau.py; der Aufbau von test_bibliothek_mit_script_ende_wird_abgelehnt kopiert jetzt ganz werkzeuge/ (Erwartung unverändert). - AGENTS.md: eingebettete Fremdbibliotheken sind bpmn-js und Bootstrap. - Tests: python -m pytest -q -> 256 bestanden, 1 übersprungen. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2011-2025 The Bootstrap Authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
@@ -0,0 +1,37 @@
|
||||
# Bootstrap und Bootstrap Icons (lokal eingebettet)
|
||||
|
||||
Grundlage für das Aussehen der HTML-Seiten der AG, zuerst der BPMN-Vorschau (`werkzeuge/vorschau/`). Vorbild ist die
|
||||
Anmutung der Anwendungen in VLN_SN (`docs/wissen/vln_sn.md`). Die Bibliotheken liegen lokal, weil unsere Werkzeuge
|
||||
offline arbeiten. Die eigenen Regeln stehen in `werkzeuge/stil/ag_prozesse.css`, nicht hier.
|
||||
|
||||
## Eingebettete Dateien
|
||||
|
||||
| | Bootstrap | Bootstrap Icons |
|
||||
|---|---|---|
|
||||
| Paket (npm) | `bootstrap` 5.3.8 | `bootstrap-icons` 1.13.1 |
|
||||
| Quelle | `https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz` | `https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz` |
|
||||
| Integrität (npm) | `sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==` | `sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==` |
|
||||
| Dateien | `dist/css/bootstrap.min.css` → `bootstrap.min.css`, `dist/js/bootstrap.bundle.min.js` → `bootstrap.bundle.min.js` | `font/bootstrap-icons.min.css` → `icons/bootstrap-icons.min.css`, `font/fonts/bootstrap-icons.woff2` und `.woff` → `icons/fonts/` |
|
||||
| Lizenz | MIT, `LICENSE` | MIT, `icons/LICENSE` |
|
||||
|
||||
Die Dateien sind **byte-gleich** mit dem Paket (`.gitattributes`: `binary`). Nicht von Hand ändern.
|
||||
|
||||
## Hinweise
|
||||
|
||||
- **Nichts aus dem Netz.** Die CSS verweist nur auf eingebettete `data:`-Grafiken bzw. auf `icons/fonts/`.
|
||||
Die `sourceMappingURL`-Kommentare zeigen auf Dateien, die bewusst fehlen. Browser fragen sie höchstens bei
|
||||
geöffneten Entwicklerwerkzeugen an.
|
||||
- **Einzeldatei der Vorschau.** `scripts/vorschau.py` bettet die Stylesheets in die erzeugte Seite ein und setzt
|
||||
dabei die woff2-Schrift der Icons als `data:`-URI ein. Der woff-Rückfall entfällt dort, er wird nur beim direkten
|
||||
Öffnen von `vorschau.html` in sehr alten Browsern gebraucht.
|
||||
- **JavaScript-Bundle** (mit Popper) liegt für Bedienelemente wie Modal oder Tooltip bereit. Die Vorschau braucht
|
||||
es derzeit nicht und bindet es nicht ein.
|
||||
|
||||
## Aktualisieren
|
||||
|
||||
1. In der npm-Registry die neue Version nachsehen (`https://registry.npmjs.org/bootstrap/latest`, entsprechend
|
||||
`bootstrap-icons`) und das Paket (`dist.tarball`) herunterladen.
|
||||
2. Integrität prüfen: `sha512-` + Base64 der SHA-512 des Pakets muss `dist.integrity` entsprechen.
|
||||
3. Die Dateien aus der Tabelle unverändert übernehmen, Tabelle (Version, Quelle, Integrität) nachziehen.
|
||||
4. `python -m pytest -q` (prüft u. a., dass die Vorschau nichts nachlädt) und die Vorschau im Browser ansehen.
|
||||
5. Pull Request mit Verweis auf die Release-Hinweise der neuen Version.
|
||||
+7
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019-2024 The Bootstrap Authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,34 @@
|
||||
/* Gemeinsamer Stil der HTML-Seiten der AG Prozesse, aufbauend auf Bootstrap 5 (werkzeuge/bootstrap/).
|
||||
Anmutung wie die Anwendungen in VLN_SN (Vorbild EA-Bilanz, siehe docs/wissen/vln_sn.md) – eigene Regeln,
|
||||
nichts übernommen. Klassen beginnen mit "ag-", damit sie sich nicht mit Bootstrap überschneiden. */
|
||||
|
||||
:root {
|
||||
--ag-akzent: var(--bs-primary, #0d6efd);
|
||||
--ag-schrift: .9rem;
|
||||
}
|
||||
|
||||
/* Seite in voller Höhe: dunkle Navigationsleiste oben, Arbeitsbereich darunter */
|
||||
html.ag-seite, html.ag-seite body { height: 100%; }
|
||||
.ag-app {
|
||||
display: flex; flex-direction: column; height: 100vh; overflow: hidden;
|
||||
font-size: var(--ag-schrift);
|
||||
background: var(--bs-tertiary-bg, #f4f5f7);
|
||||
}
|
||||
.ag-nav { flex: 0 0 auto; }
|
||||
.ag-nav .navbar-brand { font-size: 1rem; }
|
||||
.ag-nav .btn-group { flex-wrap: nowrap; }
|
||||
.ag-inhalt { flex: 1 1 auto; min-height: 0; position: relative; background: var(--bs-body-bg, #fff); }
|
||||
|
||||
/* Karten mit farbigem linken Rand je Kategorie */
|
||||
.ag-karte { border-left: 4px solid var(--ag-akzent); }
|
||||
.ag-karte-erfolg { border-left-color: var(--bs-success, #198754); }
|
||||
.ag-karte-warnung { border-left-color: var(--bs-warning, #ffc107); }
|
||||
.ag-karte-fehler { border-left-color: var(--bs-danger, #dc3545); }
|
||||
|
||||
/* Zahlen in Tabellenziffern, rechtsbündig */
|
||||
.ag-zahl { font-variant-numeric: tabular-nums; text-align: right; }
|
||||
|
||||
@media print {
|
||||
.ag-nav { display: none !important; }
|
||||
.ag-app { height: auto; overflow: visible; background: #fff; }
|
||||
}
|
||||
@@ -24,6 +24,12 @@ berechnet hat. Damit eignet sie sich, um Entwürfe vor der Freigabe und Modellä
|
||||
PICTURE kann dieselbe Datei anders darstellen (eigene Schriften, eigene Behandlung von Anschlusspunkten). Der Import
|
||||
in PICTURE bleibt deshalb der letzte Nachweis.
|
||||
|
||||
## Aussehen
|
||||
|
||||
Die Seite nutzt Bootstrap mit Bootstrap Icons (`werkzeuge/bootstrap/`, eigene README) und den gemeinsamen Stil der
|
||||
AG (`werkzeuge/stil/ag_prozesse.css`): dunkle Navigationsleiste mit Knopfgruppe wie in den Anwendungen von VLN_SN.
|
||||
`scripts/vorschau.py` bettet alles in die erzeugte Einzeldatei ein, auch die Icon-Schrift.
|
||||
|
||||
## Eingebettete Bibliothek
|
||||
|
||||
| | |
|
||||
|
||||
@@ -1,70 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<html lang="de" class="ag-seite">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BPMN-Vorschau</title>
|
||||
<!-- bpmn-js (bpmn.io), lokal eingebettet – siehe README.md. Nichts wird aus dem Netz geladen. -->
|
||||
<!-- Bootstrap, Bootstrap Icons und bpmn-js (bpmn.io), lokal eingebettet – siehe README.md und
|
||||
werkzeuge/bootstrap/README.md. Nichts wird aus dem Netz geladen. -->
|
||||
<link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../bootstrap/icons/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="../stil/ag_prozesse.css">
|
||||
<link rel="stylesheet" href="bpmn-js/diagram-js.css">
|
||||
<link rel="stylesheet" href="bpmn-js/bpmn-js.css">
|
||||
<style>
|
||||
:root {
|
||||
--hintergrund: #ffffff;
|
||||
--leiste: #f3f5f7;
|
||||
--rand: #d0d7de;
|
||||
--text: #1f2328;
|
||||
--gedaempft: #59636e;
|
||||
--akzent: #0b6bcb;
|
||||
--fehler: #b42318;
|
||||
--warnung: #9a6700;
|
||||
}
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
display: flex; flex-direction: column;
|
||||
font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px;
|
||||
color: var(--text); background: var(--hintergrund);
|
||||
}
|
||||
header {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
|
||||
padding: 8px 16px; background: var(--leiste); border-bottom: 1px solid var(--rand);
|
||||
}
|
||||
header h1 { font-size: 15px; font-weight: 600; margin: 0 12px 0 0; }
|
||||
button, label.knopf {
|
||||
font: inherit; padding: 4px 10px; border: 1px solid var(--rand); border-radius: 6px;
|
||||
background: #fff; color: var(--text); cursor: pointer;
|
||||
}
|
||||
button:hover, label.knopf:hover { border-color: var(--akzent); }
|
||||
button:disabled { opacity: .5; cursor: default; }
|
||||
#datei { display: none; }
|
||||
#dateiname { color: var(--gedaempft); overflow-wrap: anywhere; }
|
||||
#meldung { flex-basis: 100%; margin: 0; }
|
||||
#meldung { margin: 0; padding: .25rem 1rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
|
||||
#meldung:empty { display: none; }
|
||||
#meldung.fehler { color: var(--fehler); }
|
||||
#meldung.warnung { color: var(--warnung); }
|
||||
#meldung.fehler { color: var(--bs-danger); }
|
||||
#meldung.warnung { color: var(--bs-warning-text-emphasis); }
|
||||
/* Zeichenfläche: das bpmn.io-Wasserzeichen unten rechts muss laut Lizenz sichtbar und unverdeckt bleiben. */
|
||||
main { position: relative; flex: 1; min-height: 0; }
|
||||
#flaeche { position: absolute; inset: 0; }
|
||||
#hinweis {
|
||||
position: absolute; inset: 24px 24px 64px 24px; display: flex; align-items: center; justify-content: center;
|
||||
text-align: center; color: var(--gedaempft); border: 2px dashed var(--rand); border-radius: 12px;
|
||||
padding: 16px; pointer-events: none;
|
||||
text-align: center; color: var(--bs-secondary-color); border: 2px dashed var(--bs-border-color);
|
||||
border-radius: .75rem; padding: 1rem; pointer-events: none;
|
||||
}
|
||||
main.ziehen #hinweis { border-color: var(--akzent); color: var(--akzent); }
|
||||
main.ziehen #hinweis { border-color: var(--ag-akzent); color: var(--ag-akzent); }
|
||||
main.geladen #hinweis { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>BPMN-Vorschau</h1>
|
||||
<label class="knopf" for="datei">Datei öffnen …</label>
|
||||
<input type="file" id="datei" accept=".bpmn,.xml">
|
||||
<button type="button" id="einpassen" disabled>Einpassen</button>
|
||||
<button type="button" id="groesser" disabled title="Vergrößern">+</button>
|
||||
<button type="button" id="kleiner" disabled title="Verkleinern">−</button>
|
||||
<span id="dateiname"></span>
|
||||
<p id="meldung" role="status"></p>
|
||||
</header>
|
||||
<main id="bereich">
|
||||
<body class="ag-app">
|
||||
<nav class="navbar navbar-dark bg-dark navbar-expand px-3 py-1 ag-nav">
|
||||
<span class="navbar-brand mb-0"><i class="bi bi-diagram-3 me-1"></i>BPMN-Vorschau</span>
|
||||
<span id="dateiname" class="text-secondary small text-truncate me-auto"></span>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<label class="btn btn-outline-light" for="datei" title="Datei öffnen"><i class="bi bi-folder2-open"></i><span class="d-none d-md-inline"> Datei öffnen …</span></label>
|
||||
<button type="button" class="btn btn-outline-light" id="einpassen" disabled title="Einpassen"><i class="bi bi-arrows-angle-contract"></i><span class="d-none d-md-inline"> Einpassen</span></button>
|
||||
<button type="button" class="btn btn-outline-light" id="groesser" disabled title="Vergrößern"><i class="bi bi-zoom-in"></i></button>
|
||||
<button type="button" class="btn btn-outline-light" id="kleiner" disabled title="Verkleinern"><i class="bi bi-zoom-out"></i></button>
|
||||
</div>
|
||||
<input type="file" id="datei" accept=".bpmn,.xml" hidden>
|
||||
</nav>
|
||||
<p id="meldung" role="status"></p>
|
||||
<main id="bereich" class="ag-inhalt">
|
||||
<div id="flaeche"></div>
|
||||
<div id="hinweis">.bpmn-Datei hierher ziehen oder über „Datei öffnen …“ wählen.<br>
|
||||
Die Datei wird nur in diesem Browser angezeigt und nirgendwohin übertragen.</div>
|
||||
|
||||
Reference in New Issue
Block a user