From 2d336a1bf2ef6cff31c62c36f59ff372417cf0fa Mon Sep 17 00:00:00 2001
From: Ron Holt <holt.ronald@gmail.com>
Date: Fri, 18 Oct 2019 01:11:04 -0700
Subject: [PATCH] Removed Inline Styles from form.twig; Added styles to
 respective theme _common.scss files; Partial fix of issue: #12262

Signed-off-by: Ron Holt <holt.ronald@gmail.com>
---
 .../database/multi_table_query/form.twig      | 34 +++++++++----------
 themes/bootstrap/scss/_common.scss            | 31 +++++++++++++++++
 themes/metro/scss/_common.scss                | 31 +++++++++++++++++
 themes/original/scss/_common.scss             | 32 ++++++++++++++++-
 themes/pmahomme/scss/_common.scss             | 31 +++++++++++++++++
 5 files changed, 140 insertions(+), 19 deletions(-)

diff --git a/templates/database/multi_table_query/form.twig b/templates/database/multi_table_query/form.twig
index dce6a71912..17b5ec497d 100644
--- a/templates/database/multi_table_query/form.twig
+++ b/templates/database/multi_table_query/form.twig
@@ -20,11 +20,11 @@
     'message': 'Query window'|trans,
     'initial_sliders_state': 'open',
 } only %}
-<form action="" id="query_form">
+<form action="" id="multi_table_query_form" class="multi_table_query_form query_form">
     <input type="hidden" id="db_name" value="{{ db }}">
     <fieldset>
         {% for table in tables %}
-            <div style="display:none" id="{{ table.hash }}">
+            <div class="query-form__div--hide" id="{{ table.hash }}">
                 <option value="*">*</option>
                 {% for column in table.columns %}
                     <option value="{{ column }}">{{ column }}</option>
@@ -33,16 +33,16 @@
         {% endfor %}
 
         {% for id in 0..default_no_of_columns %}
-            {% if id == 0 %}<div style="display:none" id="new_column_layout">{% endif %}
-            <fieldset style="display:inline" class="column_details">
-                <select style="display:inline" class="tableNameSelect">
+            {% if id == 0 %}<div class="query-form__div--hide" id="new_column_layout">{% endif %}
+            <fieldset class="column_details query-form__fieldset--inline">
+                <select class="tableNameSelect query-form__select--inline">
                     <option value="">{% trans 'select table' %}</option>
                     {% for table in tables|keys %}
                         <option value="{{ table }}">{{ table }}</option>
                     {% endfor %}
                 </select>
                 <span>.</span>
-                <select style="display:inline" class="columnNameSelect">
+                <select class="columnNameSelect query-form__select--inline">
                     <option value="">{% trans 'select column' %}</option>
                 </select>
                 <br>
@@ -63,13 +63,13 @@
                 <div>
                     <table>
 
-                        <tr class="sort_order" style="background:none">
+                        <tr class="sort_order query-form__tr--bg-none">
                             <td>{% trans 'Sort' %}</td>
                             <td><input type="radio" name="sort[{{ id }}]">{% trans 'Ascending' %}</td>
                             <td><input type="radio" name="sort[{{ id }}]">{% trans 'Descending' %}</td>
                         </tr>
 
-                        <tr class="logical_operator" style="background:none;display:none">
+                        <tr class="logical_operator query-form__tr--bg-none query-form__tr--hide">
                             <td>{% trans 'Add as' %}</td>
                             <td>
                                 <input type="radio"
@@ -88,7 +88,7 @@
                             </td>
                         </tr>
 
-                        <tr style="background:none">
+                        <tr class="query-form__tr--bg-none">
                             <td>Op </td>
                             <td>
                                 <select class="criteria_op">
@@ -120,7 +120,7 @@
                             </td>
                         </tr>
 
-                        <tr class="rhs_table" style="display:none;background:none">
+                        <tr class="rhs_table query-form__tr--hide query-form__tr--bg-none">
                             <td></td>
                             <td>
                                 <select  class="tableNameSelect">
@@ -131,18 +131,17 @@
                                 </select><span>.</span>
                             </td>
                             <td>
-                                <select style="display:inline" class="columnNameSelect">
+                                <select class="columnNameSelect query-form__select--inline">
                                     <option value="">{% trans 'select column' %}</option>
                                 </select>
                             </td>
                         </tr>
 
-                        <tr style="background:none" class="rhs_text">
+                        <tr class="rhs_text query-form__tr--bg-none">
                             <td></td>
                             <td colspan="2">
                                 <input type="text"
-                                    style="width:91%"
-                                    class="rhs_text_val"
+                                    class="rhs_text_val query-form__input--wide"
                                     placeholder="{% trans 'Enter criteria as free text' %}">
                             </td>
                         </tr>
@@ -152,24 +151,23 @@
                 </div>
                 <a href="#"
                     title="{% trans 'Remove this column' %}"
-                    style="float:right;color:red"
-                    class="removeColumn">
+                    class="removeColumn query-form__remove-column">
                     X
                 </a>
             </fieldset>
             {% if id == 0 %}</div>{% endif %}
         {% endfor %}
 
-        <fieldset style="display:inline">
+        <fieldset class="query-form__fieldset--inline">
             <input class="btn btn-secondary" type="button" value="{% trans '+ Add column' %}" id="add_column_button">
         </fieldset>
 
         <fieldset>
             {% spaceless %}
                 <textarea id="MultiSqlquery"
+                    class="query-form__multi-sql-query"
                     cols="80"
                     rows="4"
-                    style="float:left"
                     name="sql_query"
                     dir="ltr">
                 </textarea>
diff --git a/themes/bootstrap/scss/_common.scss b/themes/bootstrap/scss/_common.scss
index 2feb4a2cc3..1a3c8a474c 100644
--- a/themes/bootstrap/scss/_common.scss
+++ b/themes/bootstrap/scss/_common.scss
@@ -4094,6 +4094,37 @@ body .ui-dialog {
 }
 // end of styles for jQuery-ui to support rtl languages
 
+/* templates/database/multi_table_query */
+
+.multi_table_query_form {
+    .query-form__div--hide,
+    .query-form__tr--hide {
+        display: none;
+    }
+
+    .query-form__fieldset--inline,
+    .query-form__select--inline {
+        display: inline;
+    }
+
+    .query-form__tr--bg-none {
+        background: none;
+    }
+
+    .query-form__input--wide {
+        width: 91%;
+    }
+
+    .query-form__remove-column {
+        float: right;
+        color: red;
+    }
+
+    .query-form__multi-sql-query {
+        float: left;
+    }
+}
+
 // templates/database/designer
 // side menu
 #name-panel {
diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
index 8d2d995e89..95777716ce 100644
--- a/themes/metro/scss/_common.scss
+++ b/themes/metro/scss/_common.scss
@@ -4275,3 +4275,34 @@ body {
 #filter_query_text {
   vertical-align: baseline;
 }
+
+/* templates/database/multi_table_query */
+
+.multi_table_query_form {
+    .query-form__div--hide,
+    .query-form__tr--hide {
+        display: none;
+    }
+
+    .query-form__fieldset--inline,
+    .query-form__select--inline {
+        display: inline;
+    }
+
+    .query-form__tr--bg-none {
+        background: none;
+    }
+
+    .query-form__input--wide {
+        width: 91%;
+    }
+
+    .query-form__remove-column {
+        float: right;
+        color: red;
+    }
+
+    .query-form__multi-sql-query {
+        float: left;
+    }
+}
diff --git a/themes/original/scss/_common.scss b/themes/original/scss/_common.scss
index 624b181b05..57d9012238 100644
--- a/themes/original/scss/_common.scss
+++ b/themes/original/scss/_common.scss
@@ -808,7 +808,6 @@ form.login label {
 }
 
 /* specific elements */
-
 /* topmenu */
 
 ul {
@@ -3644,6 +3643,37 @@ body {
   display: none;
 }
 
+/* templates/database/multi_table_query */
+
+.multi_table_query_form {
+    .query-form__div--hide,
+    .query-form__tr--hide {
+        display: none;
+    }
+
+    .query-form__fieldset--inline,
+    .query-form__select--inline {
+        display: inline;
+    }
+
+    .query-form__tr--bg-none {
+        background: none;
+    }
+
+    .query-form__input--wide {
+        width: 91%;
+    }
+
+    .query-form__remove-column {
+        float: right;
+        color: red;
+    }
+
+    .query-form__multi-sql-query {
+        float: left;
+    }
+}
+
 /* templates/database/designer */
 
 /* side menu */
diff --git a/themes/pmahomme/scss/_common.scss b/themes/pmahomme/scss/_common.scss
index 1877e3797b..eb9256382f 100644
--- a/themes/pmahomme/scss/_common.scss
+++ b/themes/pmahomme/scss/_common.scss
@@ -4122,6 +4122,37 @@ body .ui-dialog {
 }
 // end of styles for jQuery-ui to support rtl languages
 
+/* templates/database/multi_table_query */
+
+.multi_table_query_form {
+    .query-form__div--hide,
+    .query-form__tr--hide {
+        display: none;
+    }
+
+    .query-form__fieldset--inline,
+    .query-form__select--inline {
+        display: inline;
+    }
+
+    .query-form__tr--bg-none {
+        background: none;
+    }
+
+    .query-form__input--wide {
+        width: 91%;
+    }
+
+    .query-form__remove-column {
+        float: right;
+        color: red;
+    }
+
+    .query-form__multi-sql-query {
+        float: left;
+    }
+}
+
 // templates/database/designer
 // side menu
 #name-panel {