From 3184b64bbc6794de251beb3258d4e9d16d645d90 Mon Sep 17 00:00:00 2001
From: Christian Fries <christian.fries@lst.team>
Date: Sun, 27 Oct 2024 15:01:00 +0100
Subject: [PATCH] [TASK] Adjust form style for new TYPO3 versions

---
 Resources/Private/Templates/Core/List.html    |  5 ++--
 .../Private/Templates/Extension/List.html     | 22 ++++++++++--------
 .../Private/Templates/Statistic/Index.html    | 23 ++++++++++---------
 Resources/Public/Css/t3monitoring.css         | 12 ++++++++--
 4 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/Resources/Private/Templates/Core/List.html b/Resources/Private/Templates/Core/List.html
index ca8b6d5..c429ba5 100644
--- a/Resources/Private/Templates/Core/List.html
+++ b/Resources/Private/Templates/Core/List.html
@@ -10,10 +10,11 @@ <h1>{f:translate(key:'view.core')}</h1>
 
     <f:form action="list" name="filter" object="{filter}" class="form-inline mb-3">
         <div class="form-group">
-            <label>{f:translate(key:'coreFilter.usage')}</label>
+            <label for="form-usage" class="form-label">{f:translate(key:'coreFilter.usage')}</label>
             <f:form.select property="usage"
                            options="{1:'{f:translate(key:\'coreFilter.usage.1\')}',0:'{f:translate(key:\'coreFilter.usage.0\')}'}"
-                           class="form-control"/>
+                           id="form-usage"
+                           class="form-select"/>
         </div>
 
         <button class="btn btn-default">
diff --git a/Resources/Private/Templates/Extension/List.html b/Resources/Private/Templates/Extension/List.html
index 343e838..c75f0d4 100644
--- a/Resources/Private/Templates/Extension/List.html
+++ b/Resources/Private/Templates/Extension/List.html
@@ -9,17 +9,19 @@ <h1>{f:translate(key:'view.usedExtensions')}</h1>
 
 	<f:form action="list" name="filter" object="{filter}" class="form-inline mb-3">
 
-		<div class="form-group">
-			<label>{f:translate(key:'extensionFilter.name')}</label>
-			<f:form.textfield property="name" class="form-control" />
-		</div>
+        <div class="row">
+            <div class="col form-group">
+                <label for="form-name" class="form-label">{f:translate(key:'extensionFilter.name')}</label>
+                <f:form.textfield property="name" id="form-name" class="form-control" />
+            </div>
 
-		<div class="form-group">
-			<label>{f:translate(key:'extensionFilter.exactSearch')}</label>
-			<div class="checkbox">
-				<f:form.checkbox property="exactSearch" value="1" />
-			</div>
-		</div>
+            <div class="col form-group">
+                <label for="form-exactSearch" class="form-label">{f:translate(key:'extensionFilter.exactSearch')}</label>
+                <div class="form-check">
+                    <f:form.checkbox property="exactSearch" id="form-exactSearch" class="form-check-input" value="1" />
+                </div>
+            </div>
+        </div>
 		<button class="btn btn-default">
 			{core:icon(identifier:'actions-search')} {f:translate(key:'search')}
 		</button>
diff --git a/Resources/Private/Templates/Statistic/Index.html b/Resources/Private/Templates/Statistic/Index.html
index df18443..861fddb 100644
--- a/Resources/Private/Templates/Statistic/Index.html
+++ b/Resources/Private/Templates/Statistic/Index.html
@@ -237,40 +237,41 @@ <h3>{f:translate(key:'lastImport.header')}</h3>
 
 <f:section name="searchfilter">
     <div class="form-group">
-        <label for="form-client">{f:translate(key:'tx_t3monitoring_domain_model_client')}</label>
+        <label for="form-client" class="form-label">{f:translate(key:'tx_t3monitoring_domain_model_client')}</label>
         <f:form.textfield property="searchWord" id="form-client" class="form-control"/>
     </div>
 
     <div class="form-group">
-        <label for="form-core">Core</label>
+        <label for="form-core" class="form-label">Core</label>
         <f:form.select property="version" id="form-core" options="{coreVersions}"
-                       class="form-control" prependOptionLabel="" prependOptionValue=""/>
+                       class="form-select" prependOptionLabel="" prependOptionValue=""/>
     </div>
 
     <f:if condition="{slaVersions}">
         <div class="form-group">
-            <label for="form-sla">{f:translate(key:'tx_t3monitoring_domain_model_sla')}</label>
+            <label for="form-sla" class="form-label">{f:translate(key:'tx_t3monitoring_domain_model_sla')}</label>
             <f:form.select property="sla" id="form-sla" options="{slaVersions}"
-                           optionValueField="uid" optionLabelField="title" class="form-control"
+                           optionValueField="uid" optionLabelField="title" class="form-select"
                            prependOptionLabel="" prependOptionValue=""/>
         </div>
     </f:if>
 
     <f:if condition="{tagVersions}">
         <div class="form-group">
-            <label for="form-tag">{f:translate(key:'tag')}</label>
+            <label for="form-tag" class="form-label">{f:translate(key:'tag')}</label>
             <f:form.select property="tag" id="form-tag" options="{tagVersions}"
-                           optionValueField="uid" optionLabelField="title" class="form-control"
+                           optionValueField="uid" optionLabelField="title" class="form-select"
                            prependOptionLabel="" prependOptionValue=""/>
         </div>
     </f:if>
 
     <fieldset>
-        <legend class="legend">{f:translate(key:'filter.fieldset.core')}</legend>
+        <legend class="form-legend">{f:translate(key:'filter.fieldset.core')}</legend>
         <div class="checkbox">
             <label>
                 <f:form.checkbox property="withInsecureCore" value="1"/>
-                {f:translate(key:'tx_t3monitoring_domain_model_client.insecure_core')}</label>
+                {f:translate(key:'tx_t3monitoring_domain_model_client.insecure_core')}
+            </label>
         </div>
 
         <div class="checkbox">
@@ -280,7 +281,7 @@ <h3>{f:translate(key:'lastImport.header')}</h3>
         </div>
     </fieldset>
     <fieldset>
-        <legend class="legend">{f:translate(key:'filter.fieldset.extensions')}</legend>
+        <legend class="form-legend">{f:translate(key:'filter.fieldset.extensions')}</legend>
         <div class="checkbox">
             <label>
                 <f:form.checkbox property="withOutdatedExtensions" value="1"/>
@@ -294,7 +295,7 @@ <h3>{f:translate(key:'lastImport.header')}</h3>
         </div>
     </fieldset>
     <fieldset>
-        <legend class="legend">{f:translate(key:'filter.fieldset.misc')}</legend>
+        <legend class="form-legend">{f:translate(key:'filter.fieldset.misc')}</legend>
         <div class="checkbox">
             <label>
                 <f:form.checkbox property="withErrorMessage" value="1"/>
diff --git a/Resources/Public/Css/t3monitoring.css b/Resources/Public/Css/t3monitoring.css
index 2b254ce..53b1f73 100644
--- a/Resources/Public/Css/t3monitoring.css
+++ b/Resources/Public/Css/t3monitoring.css
@@ -1,6 +1,10 @@
+.filter fieldset {
+    margin: 0 0 1rem;
+}
+
 .filter legend {
-    margin: 0;
-    font-size: 14px;
+    margin: 0 0 0.5rem;
+    font-size: 12px;
 }
 
 .client-list th,
@@ -19,3 +23,7 @@
     border: 0;
     margin: 0;
 }
+
+.dt-info {
+    padding: 0.5rem 1rem;
+}