From d70ded18c218d75912e5260879cb394e57e59443 Mon Sep 17 00:00:00 2001
From: Matt Scott <matt@azorian.solutions>
Date: Sun, 19 Feb 2023 09:11:44 -0500
Subject: [PATCH] Added head_styles Jinja block to base view template head
 section to allow for page specific style injections.

Continuing work on the re-design and clean-up of the dashboard view.
---
 powerdnsadmin/templates/base.html      |  1 +
 powerdnsadmin/templates/dashboard.html | 39 +++++++++++++-------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/powerdnsadmin/templates/base.html b/powerdnsadmin/templates/base.html
index 4f050c9..08c1099 100644
--- a/powerdnsadmin/templates/base.html
+++ b/powerdnsadmin/templates/base.html
@@ -17,6 +17,7 @@
         {% if SETTING.get('custom_css') %}
             <link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
         {% endif %}
+        {% block head_styles %}{% endblock %}
     {% endblock %}
 </head>
 
diff --git a/powerdnsadmin/templates/dashboard.html b/powerdnsadmin/templates/dashboard.html
index 5242216..1409728 100755
--- a/powerdnsadmin/templates/dashboard.html
+++ b/powerdnsadmin/templates/dashboard.html
@@ -180,7 +180,8 @@
                                 </ul>
                             </div>
                         </div>
-                        <div class="card-body">
+                        <!-- /.card-header -->
+                        <div class="card-body p-0">
                             <div class="tab-content">
                                 {% for boxId in custom_boxes.order %}
                                     <div class="tab-pane fade show" id='tab_{{ boxId }}'>
@@ -195,6 +196,7 @@
                                                 </button>
                                             {% endif %}
                                         </div>
+                                        <!-- /.card-header -->
                                         <div class="card-body table-responsive p-0 pt-2">
                                             <table id='tbl_domain_list_{{ boxId }}'
                                                    class="table table-striped table-hover">
@@ -213,18 +215,33 @@
                                                 </tbody>
                                             </table>
                                         </div>
+                                        <!-- /.card-body -->
                                     </div>
+                                    <!-- /.tab-pane -->
                                 {% endfor %}
                             </div>
+                            <!-- /.tab-content -->
                         </div>
+                        <!-- /.card-body -->
                     </div>
-
+                    <!-- /.card -->
                 </div>
+                <!-- /.col -->
             </div>
+            <!-- /.row -->
         </div>
+        <!-- /.container-fluid -->
     </section>
 {% endblock %}
 
+{% block head_styles %}
+<style type="text/css">
+div.table-responsive > div.dataTables_wrapper > div.row:first-of-type { margin: 0 0.5em 0 0.5em; }
+div.table-responsive > div.dataTables_wrapper > div.row:last-of-type { margin: 0.4em 0.5em 0.4em 0.5em; }
+div.table-responsive > div.dataTables_wrapper table.dataTable { margin: 0!important; }
+</style>
+{% endblock %}
+
 {% block extrascripts %}
     <script>
         //SYBPATCH START//
@@ -266,24 +283,6 @@
         {% endfor %}
         //SYBPATCH END//
 
-        // set up history data table
-        $("#tbl_history").DataTable({
-            "paging": false,
-            "lengthChange": false,
-            "searching": false,
-            "ordering": false,
-            "info": false,
-            "autoWidth": true,
-            "columnDefs": [
-                {
-                    "render": function (data, type, row) {
-                        return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
-                    },
-                    "targets": 2
-                }
-            ]
-        });
-
         $(document.body).on('click', '.history-info-button', function () {
             var modal = $("#modal_history_info");
             var history_id = $(this).val();