From f1bdf8acdaa2bb3a76f84ca6c59b4eec1a7132bd Mon Sep 17 00:00:00 2001
From: Matthias Grief <matthias.grief@alumni.fh-aachen.de>
Date: Mon, 6 Jan 2025 22:29:31 +0100
Subject: [PATCH] Anzeige von Formeleditor auf kleinen Bildschirmen optimiert

---
 webseite/assets/js/formula.js | 8 ++++----
 webseite/topicEditor.php      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/webseite/assets/js/formula.js b/webseite/assets/js/formula.js
index 14f74a8..bcb3e30 100644
--- a/webseite/assets/js/formula.js
+++ b/webseite/assets/js/formula.js
@@ -35,7 +35,7 @@ function createFormula(text = "") {
     const addVariableButton = document.createElement('button');
     addVariableButton.type = "button";
     addVariableButton.innerText = "+";
-    addVariableButton.classList.add("w-1/12", "float-right", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
+    addVariableButton.classList.add("w-2/12", "md:w-1/12", "float-right", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
     addVariableButton.onclick = () => {
         createVariable(formulaElement.id);
     };
@@ -57,7 +57,7 @@ function createVariable(formulaUID, variableText = "", valueText = "") {
     const variableElement = document.createElement('input');
     variableElement.type = 'text';
     variableElement.classList.add('input-variable');
-    variableElement.classList.add("w-6/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400")
+    variableElement.classList.add("w-5/12", "md:w-6/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400")
     variableElement.value = variableText;
     variableElement.placeholder = "Variable";
     variableElement.onchange = updateFormulaText;
@@ -66,7 +66,7 @@ function createVariable(formulaUID, variableText = "", valueText = "") {
     const valueElement = document.createElement('input');
     valueElement.type = 'text';
     valueElement.classList.add('input-value');
-    valueElement.classList.add("w-5/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400")
+    valueElement.classList.add("w-5/12", "md:w-5/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400")
     valueElement.value = valueText;
     valueElement.placeholder = "Richtiger Wert";
     valueElement.onchange = updateFormulaText;
@@ -75,7 +75,7 @@ function createVariable(formulaUID, variableText = "", valueText = "") {
     const removeButton = document.createElement('button');
     removeButton.type = "button";
     removeButton.innerText = "-"
-    removeButton.classList.add("w-1/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
+    removeButton.classList.add("w-2/12", "md:w-1/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
     removeButton.onclick = () => {
         variableValueElement.remove();
         updateFormulaText();
diff --git a/webseite/topicEditor.php b/webseite/topicEditor.php
index 16de02e..c5092f4 100644
--- a/webseite/topicEditor.php
+++ b/webseite/topicEditor.php
@@ -415,7 +415,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                         </div>
                     </div>
 
-                    <div id="quillEditor" style="height: 600px;" class="bg-white border rounded-lg"><?php
+                    <div id="quillEditor" class="h-[600px] xl:h-auto bg-white border rounded-lg"><?php
                         $article = $defaultValues['article'];
 
                         echo $article;