Anzeige von Formeleditor auf kleinen Bildschirmen optimiert

This commit is contained in:
Matthias Grief
2025-01-06 22:29:31 +01:00
parent 2f27ec1094
commit f1bdf8acda
2 changed files with 5 additions and 5 deletions

View File

@@ -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();

View File

@@ -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;