Blockly review

2025-06-11 00:17:58 +02:00
parent 7516bd3d9d
commit b8a530254d
6 changed files with 644 additions and 241 deletions
@@ -0,0 +1,116 @@
+/* style.css */
+
+/* Global box-sizing für konsistente Größenberechnung */
+* {
+  box-sizing: border-box;
+}
+
+/* Allgemeine Styles für html und body, um den gesamten Viewport zu füllen */
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%; /* Stellt sicher, dass html und body die volle Viewport-Höhe einnehmen */
+  font-family: sans-serif;
+  overflow: hidden; /* Verhindert Scrollbalken auf der Hauptebene des Bodys */
+  background-color: #F8F8F8; /* Optionale Hintergrundfarbe für den gesamten Body, falls gewünscht */
+}
+
+/* Body als Flex-Container, um Inhalte vertikal zu stapeln */
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Optional: Style für die Überschrift im Output-Bereich und allgemeine Überschriften/Paragraphen */
+h1, h2, p {
+  margin: 0;
+  padding: 10px 0; /* Beispiel: Etwas vertikale Polsterung, keine horizontalen Ränder */
+  text-align: center; /* Überschriften zentrieren */
+}
+
+/* Styling für die Button-Leiste */
+.button-bar {
+  margin-bottom: 0; /* Rand unten entfernen */
+  padding: 10px 0 0 0; /* Polsterung anpassen, um oberen Rand zu entfernen */
+  text-align: center; /* Buttons zentrieren */
+}
+
+.button-bar button {
+  margin: 0 5px; /* Kleiner Abstand zwischen den Buttons */
+  padding: 8px 15px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #e0e0e0;
+  cursor: pointer;
+}
+
+.button-bar button:hover {
+  background-color: #d0d0d0;
+}
+
+/* Haupt-Container für Blockly-Workspace und Output-Bereich */
+#container {
+  display: flex; /* Machen Sie den Container zu einem Flex-Container, um die Kinder nebeneinander anzuordnen */
+  flex-grow: 1; /* Lässt den Container den restlichen vertikalen Platz füllen */
+  padding: 0; /* Polsterung um den Inhalt herum vollständig entfernen */
+  box-sizing: border-box; /* Stellt sicher, dass Padding in der Größe enthalten ist */
+}
+
+/* Blockly-Workspace Bereich */
+#blocklyDiv {
+  flex-grow: 1; /* Lässt BlocklyDiv den maximalen horizontalen Platz einnehmen */
+  min-width: 200px; /* Mindestbreite für Blockly, damit es nicht zu klein wird */
+  height: 100%; /* Füllt die Höhe des #container */
+  background-color: #FFF8E1; /* Sehr helles Beige für den Blockly-Hintergrund des Containers */
+  margin: 0; /* Rand entfernen */
+}
+
+/* WICHTIG: Regel für den Blockly SVG-Hintergrund */
+#blocklyDiv .blocklySvg {
+  background-color: #FFF8E1; /* Hintergrundfarbe für das von Blockly generierte SVG-Element */
+}
+
+/* Optional: Sicherstellen, dass Blockly-Scrollbalken über anderen Elementen liegen */
+#blocklyDiv .blocklyScrollbarHorizontal,
+#blocklyDiv .blocklyScrollbarVertical {
+    z-index: 100;
+}
+
+/* Flex-Container für Splitter und Output-Bereich */
+#outputContainer {
+  display: none; /* Standardmäßig ausgeblendet, wird bei Bedarf von JS eingeblendet */
+  flex-shrink: 0; /* Verhindert, dass dieser Container schrumpft, wenn nicht im WebView */
+  flex-basis: auto; /* Initial flexible Basis */
+}
+
+/* Splitter-Element */
+#splitter {
+  width: 8px; /* Breite des Splitters */
+  background-color: #ccc; /* Farbe des Splitters */
+  cursor: ew-resize; /* Zeigt den "Ost-West-Größenänderung"-Cursor */
+  flex-shrink: 0; /* Verhindert, dass der Splitter schrumpft */
+  margin-left: 0; /* Abstand zum Blockly-Bereich entfernen */
+  margin-right: 0; /* Abstand zum Output-Bereich entfernen */
+}
+
+/* Output-Bereich (mit Code-Textarea) */
+#outputArea {
+  display: flex;
+  flex-direction: column; /* Überschrift und Textarea vertikal stapeln */
+  min-width: 200px; /* Mindestbreite für die OutputArea */
+  width: 500px; /* Startbreite für den Output-Bereich, wird von JS überschrieben */
+  box-sizing: border-box;
+  margin: 0; /* Rand entfernen */
+}
+
+/* Textarea für den generierten Code */
+#codeOutput {
+  flex-grow: 1; /* Lässt die Textarea die verbleibende Höhe in outputArea füllen */
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 14px;
+  white-space: pre-wrap;
+  border: none; /* Deaktiviert den Rand der Textarea */
+  resize: none; /* Deaktiviert die eingebaute Resize-Funktion der Textarea */
+  overflow: auto; /* Notwendig, damit Scrollbalken erscheinen, wenn der Inhalt die Größe überschreitet */
+  padding: 10px; /* Optional: Innenabstand für den Text, damit er nicht direkt am Rand klebt */
+}