Issue #3861: cleaned up responsive styles for agentticketphone

RotherOSS · Nov 7, 2024 · 285483f · 285483f
1 parent 1f5843b
commit 285483f
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 7 deletions.
diff --git a/Kernel/Output/HTML/Templates/Standard/AgentTicketPhone.tt b/Kernel/Output/HTML/Templates/Standard/AgentTicketPhone.tt
@@ -302,7 +302,7 @@
                     <div class="Row">
                         <div class="FieldCell">
                             <label class="Mandatory" for="RichText"><span class="Marker">*</span> [% Translate("Text") | html %]:</label>
-                            <div id="RichTextField" class="RichTextField">
+                            <div id="RichTextField" class="Field RichTextField">
                                 <textarea id="RichText" class="RichText Validate_Required [% Data.RichTextInvalid | html %]" name="Body" title="[% Translate("Message body") | html %]" rows="15" cols="[% Config("Ticket::Frontend::TextAreaNote") | html %]">[% Data.Body | html %]</textarea>
                                 <div id="RichTextError" class="TooltipErrorMessage">
                                     <p>[% Translate("This field is required.") | html %]</p>

diff --git a/var/httpd/htdocs/js/Core.UI.RichTextEditor.js b/var/httpd/htdocs/js/Core.UI.RichTextEditor.js
@@ -284,8 +284,6 @@ Core.UI.RichTextEditor = (function (TargetNS) {
                     adjustEditorSize();
                 });
 
-                let count = 0;
-
                 // Adjust Editor Size to match (resizable) container size
                 var adjustEditorSize = function() {
                     let toolbarHeight = $domEditableElement.find('.ck-editor__top').outerHeight();

diff --git a/var/httpd/htdocs/skins/Agent/default/css/Core.Form.css b/var/httpd/htdocs/skins/Agent/default/css/Core.Form.css
@@ -1095,12 +1095,14 @@ input[type=text].ArticleFreeKey {
 fieldset.ModularForm {
     --max-field-width: 620px;
     --multivalue-buttons-width: 40px;
+    --column-gap-width: 5px;
 
     position: relative;
     width: 100%;
     box-sizing: border-box;
     display: grid;
     row-gap: 4px;
+    line-height: 1.5;
 }
 
     fieldset.ModularForm .AJAXLoader {
@@ -1126,11 +1128,14 @@ fieldset.ModularForm {
         grid-column: label;
         text-align: right;
         padding: 4px;
+        text-wrap: wrap;
+        line-height: 1.3;
     }
 
     fieldset.ModularForm input[type=text] {
         border-radius: 4px;
-        width: 100%
+        width: 100%;
+        line-height: inherit;
     }
 
     fieldset.ModularForm textarea {
@@ -1180,6 +1185,7 @@ fieldset.ModularForm {
 
     fieldset.ModularForm .InputField_InputContainer {
         width: 100%;
+        line-height: inherit;
     }
 
     fieldset.ModularForm .Field:not(.Hidden) {
@@ -1198,8 +1204,8 @@ fieldset.ModularForm {
         fieldset.ModularForm div.Row > div.FieldCell {
             display: grid;
             position: relative;
-            grid-template-areas:    "label  field                                                                               multivaluebuttons";
-            grid-template-columns:  30%     min( calc( 70% - var( --multivalue-buttons-width ) ), var( --max-field-width ) )    var( --multivalue-buttons-width );
+            grid-template-areas:   "label                                       field                                                                               multivaluebuttons";
+            grid-template-columns:  calc( 30% - var(--column-gap-width)*2 )     min( calc( 70% - var( --multivalue-buttons-width ) ), var( --max-field-width ) )    var( --multivalue-buttons-width );
             grid-column-gap: 5px;
             overflow: hidden;
         }

diff --git a/var/httpd/htdocs/skins/Agent/default/css/Core.Responsive.css b/var/httpd/htdocs/skins/Agent/default/css/Core.Responsive.css
@@ -629,7 +629,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
         margin-right: 2px;
     }
 
-    .RichTextField > .cke {
+    fieldset.TableLike .RichTextField > .cke {
         width: auto !important;
         max-width: 100% !important;
     }
@@ -653,6 +653,64 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
         width: 20px;
     }
 
+    /* New Form Styling */
+    /* fieldset.ModularForm */
+
+    fieldset.ModularForm div.Row {
+        position: relative;
+    }
+
+        fieldset.ModularForm div.Row > div.FieldCell {
+            grid-template-areas:
+                                    "label                                                                      ."
+                                    "field                                                                      multivaluebuttons";
+            grid-template-columns:  calc(100% - (var(--multivalue-buttons-width) + var(--column-gap-width)))    var(--multivalue-buttons-width);
+            grid-template-rows: min-content 1fr;
+            /*padding-left: calc(var(--multivalue-buttons-width) + var(--column-gap-width));*/
+        }
+
+            fieldset.ModularForm label {
+                text-align: left;
+                grid-area: label;
+            }
+
+            fieldset.ModularForm .Field {
+                grid-area: field;
+            }
+
+                fieldset.ModularForm input[type=text],
+                fieldset.ModularForm .DynamicFieldDate * {
+                    font-size: 0.9em;
+                }
+
+                fieldset.ModularForm div.InputField_Container {
+                    margin-right: 0px;
+                }
+
+                fieldset.ModularForm .DatepickerIcon {
+                    margin: 0px;
+                }
+
+                fieldset.ModularForm .DnDUpload {
+                    max-width: unset;
+                }
+
+                /*fieldset.ModularForm fieldset.DynamicFieldSet div.FieldCell {
+                    padding-left: 0px;
+                }*/
+
+            fieldset.ModularForm .MultiValueButtons {
+                grid-area: multivaluebuttons;
+            }
+
+            fieldset.ModularForm .fa {
+                color: var(--colTextDark);
+            }
+
+    fieldset.ModularForm > div.Row.MultiColumn {
+        --left-margin: 0px;
+    }
+
     /* Widget Actions */
 
     .OverviewActions, .DashboardActions {