applied grid structure to variables page

Signed-off-by: Nupur Agrawal <nupur202000@gmail.com>

2 files changed, 65 insertions, 56 deletions

diff --git a/templates/filter.twig b/templates/filter.twig
index eee885074f..ce80221ad1 100644
--- a/templates/filter.twig
+++ b/templates/filter.twig
@@ -1,8 +1,12 @@
-<fieldset id="tableFilter">
-    <legend>{% trans "Filters" %}</legend>
-    <div class="formelement">
-        <label for="filterText">{% trans "Containing the word:" %}</label>
-        <input name="filterText" type="text" id="filterText"
-               value="{{ filter_value }}">
-    </div>
-</fieldset>
+<div class="row">
+	<div class="col-12">
+		<fieldset id="tableFilter">
+		    <legend>{% trans "Filters" %}</legend>
+		    <div class="formelement">
+		        <label for="filterText">{% trans "Containing the word:" %}</label>
+		        <input name="filterText" type="text" id="filterText"
+		               value="{{ filter_value }}">
+		    </div>
+		</fieldset>
+	</div>
+</div>
diff --git a/templates/server/variables/index.twig b/templates/server/variables/index.twig
index 75020cb852..3465e7f010 100644
--- a/templates/server/variables/index.twig
+++ b/templates/server/variables/index.twig
@@ -1,3 +1,4 @@
+<div class="container">
 <h2>
   {{ get_image('s_vars') }}
   {% trans 'Server variables and settings' %}
@@ -20,59 +21,63 @@
     'filter_value': filter_value
   } only %}
 
-  <div class="responsivetable">
-    <table id="serverVariables" class="width100 data filteredData noclick">
-      <thead>
-        <tr class="var-header var-row">
-          <td class="var-action">{% trans 'Action' %}</td>
-          <td class="var-name">{% trans 'Variable' %}</td>
-          <td class="var-value">{% trans 'Value' %}</td>
-        </tr>
-      </thead>
-
-      <tbody>
-        {% for variable in variables %}
-          <tr class="var-row{{ variable.has_session_value ? ' diffSession' }}" data-filter-row="{{ variable.name|upper }}">
-            <td class="var-action">
-              {% if variable.is_editable %}
-                <a href="#" data-variable="{{ variable.name }}" class="editLink">{{ get_icon('b_edit', 'Edit'|trans) }}</a>
-              {% else %}
-                <span title="{% trans 'This is a read-only variable and can not be edited' %}" class="read_only_var">
-                  {{ get_icon('bd_edit', 'Edit'|trans) }}
-                </span>
-              {% endif %}
-            </td>
-            <td class="var-name">
-              {% if variable.doc_link != null %}
-                <span title="{{ variable.name|replace({'_': ' '}) }}">
-                  {{ variable.doc_link|raw }}
-                </span>
-              {% else %}
-                {{ variable.name|replace({'_': ' '}) }}
-              {% endif %}
-            </td>
-            <td class="var-value value{{ is_superuser ? ' editable' }}">
-              {% if variable.is_escaped %}
-                {{ variable.value|raw }}
-              {% else %}
-                {{ variable.value|e|replace({',': ',&#8203;'})|raw }}
-              {% endif %}
-            </td>
+  <div class="responsivetable row">
+    <div class="col-12">
+      <table id="serverVariables" class="width100 data filteredData noclick">
+        <thead>
+          <tr class="var-header var-row">
+            <td class="var-action">{% trans 'Action' %}</td>
+            <td class="var-name">{% trans 'Variable' %}</td>
+            <td class="var-value">{% trans 'Value' %}</td>
           </tr>
+        </thead>
 
-          {% if variable.has_session_value %}
-            <tr class="var-row diffSession" data-filter-row="{{ variable.name|upper }}">
-              <td class="var-action"></td>
-              <td class="var-name session">({% trans 'Session value' %})</td>
-              <td class="var-value value">{{ variable.session_value }}</td>
+        <tbody>
+          {% for variable in variables %}
+            <tr class="var-row{{ variable.has_session_value ? ' diffSession' }}" data-filter-row="{{ variable.name|upper }}">
+              <td class="var-action">
+                {% if variable.is_editable %}
+                  <a href="#" data-variable="{{ variable.name }}" class="editLink">{{ get_icon('b_edit', 'Edit'|trans) }}</a>
+                {% else %}
+                  <span title="{% trans 'This is a read-only variable and can not be edited' %}" class="read_only_var">
+                    {{ get_icon('bd_edit', 'Edit'|trans) }}
+                  </span>
+                {% endif %}
+              </td>
+              <td class="var-name">
+                {% if variable.doc_link != null %}
+                  <span title="{{ variable.name|replace({'_': ' '}) }}">
+                    {{ variable.doc_link|raw }}
+                  </span>
+                {% else %}
+                  {{ variable.name|replace({'_': ' '}) }}
+                {% endif %}
+              </td>
+              <td class="var-value value{{ is_superuser ? ' editable' }}">
+                {% if variable.is_escaped %}
+                  {{ variable.value|raw }}
+                {% else %}
+                  {{ variable.value|e|replace({',': ',&#8203;'})|raw }}
+                {% endif %}
+              </td>
             </tr>
-          {% endif %}
-        {% endfor %}
-      </tbody>
-    </table>
+
+            {% if variable.has_session_value %}
+              <tr class="var-row diffSession" data-filter-row="{{ variable.name|upper }}">
+                <td class="var-action"></td>
+                <td class="var-name session">({% trans 'Session value' %})</td>
+                <td class="var-value value">{{ variable.session_value }}</td>
+              </tr>
+            {% endif %}
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </div>
+</div>
+
 {% else %}
   {{ 'Not enough privilege to view server variables and settings. %s'|trans|format(
     link_to_var_documentation('show_compatibility_56', is_mariadb)
   )|error }}
-{% endif %}
+{% endif %}
\ No newline at end of file