WIP

views/_main.html

@@ -27,6 +27,8 @@
         <link href="{{ url_for('static',filename='css/bazarr.css') }}" id="theme" rel="stylesheet">
 
         <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='datatables/datatables.min.css') }}">
+        <link rel="stylesheet" type="text/css"
+              href="{{ url_for('static',filename='datatables/responsive.dataTables.min.css') }}">
         <link rel="stylesheet" type="text/css"
               href="{{ url_for('static',filename='plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
     {% endblock head_css %}
@@ -219,6 +221,7 @@
     <script src="{{ url_for('static',filename='plugins/sticky-kit-master/dist/sticky-kit.min.js') }}"></script>
     <!--Custom JavaScript -->
     <script src="{{ url_for('static',filename='datatables/jquery.dataTables.min.js') }}"></script>
+    <script src="{{ url_for('static',filename='datatables/dataTables.responsive.min.js') }}"></script>
     <script src="{{ url_for('static',filename='plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
     <script src="{{ url_for('static',filename='js/custom.js') }}"></script>
 

views/movies.html

@@ -51,6 +51,7 @@
                 "searching": false,
                 "ordering": false,
                 "lengthChange": false,
+                "responsive": true,
                 "ajax": "{{ url_for('api.movies') }}",
                 "columns": [
                     {
@@ -78,9 +79,9 @@
                         "className": "dt-center",
                         "render": function (data) {
                             if (data.exist === false) {
-                                return '<i class="far fa-square" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid: '+data.mapped_path+'"></i>';
+                                return '<i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid: '+data.mapped_path+'"></i>';
                             } else if (data.exist === true) {
-                                return '<i class="far fa-check-square" data-toggle="tooltip" data-placement="right" title="This path seems to be valid: '+data.mapped_path+'"></i>';
+                                return '<i class="fas fa-check" data-toggle="tooltip" data-placement="right" title="This path seems to be valid: '+data.mapped_path+'"></i>';
                             }
                         }
                     },

views/series.html

@@ -48,17 +48,19 @@
                 "searching": false,
                 "ordering": false,
                 "lengthChange": false,
+                "responsive": true,
                 "ajax": "{{ url_for('api.series') }}",
                 "columns": [
                     {"data": "title"},
                     {
                         "data": null,
                         "className": "dt-center",
+                        "responsivePriority": 1,
                         "render": function (data) {
                             if (data.exist === false) {
-                                return '<i class="far fa-square" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid: '+data.mapped_path+'"></i>';
+                                return '<i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid: '+data.mapped_path+'"></i>';
                             } else if (data.exist === true) {
-                                return '<i class="far fa-check-square" data-toggle="tooltip" data-placement="right" title="This path seems to be valid: '+data.mapped_path+'"></i>';
+                                return '<i class="fas fa-check" data-toggle="tooltip" data-placement="right" title="This path seems to be valid: '+data.mapped_path+'"></i>';
                             }
                         }
                     },
@@ -101,6 +103,7 @@
                     },
                     {
                         "data": null,
+                        "responsivePriority": 2,
                         "render": function (data) {
                             var total = data.episodeFileCount;
                             var completed = data.episodeFileCount - data.episodeMissingCount;