descripcion reportes

reports/static/reports/js/Reports_scripts.js

@@ -60,27 +60,13 @@ $(function () {
 });
 
 
-$(document).ready(function () {
-    $('#example').DataTable
-    ({
-
-        responsive:
-            {
-                details:
-                    {
-                        type: 'column',
-                        target: 'tr'
-                    }
-            },
-        columnDefs:
-            [{
-                className: 'control',
-                orderable: false,
-                targets: 0
-            }],
-        order: [1, 'asc']
+ $(document).ready(function () {
+            var table = $('#example').DataTable({
+                responsive: true
+            });
+
+
         });
-});
 
 
 $(function () {

reports/templates/Reports.html

@@ -2,9 +2,7 @@
 {% load staticfiles %}
 {% block headMedia %}
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
-    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
           type="text/css">
@@ -13,6 +11,24 @@
     <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
     <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
+
+    <!-- nose-->
+    <link rel="stylesheet" type="text/css"
+          href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">
+
+
+    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script type="text/javascript" language="javascript"
+            src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" language="javascript"
+            src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
+    <script type="text/javascript">
+
+
+
+
+
+    </script>
 {% endblock %}
 {% block messages %}
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -155,15 +171,15 @@
                     <table data-toggle="table" id="example" class="table table-striped table-bordered"
                            style="width:100%">
                         <thead>
-                        <th>Title</th>
-                        <th>Process</th>
-                        <th>Purchase date</th>
-                        <th>Start Date</th>
-                        <th>End Date</th>
+                        <th width="12%">Title</th>
+                        <th width="12%">Process</th>
+                        <th width="12%">Purchase date</th>
+                        <th width="12%">Start Date</th>
+                        <th width="12%">End Date</th>
                         <!--th>Clouds %</th-->
-                        <th>Estimated Size</th>
-                        <th>Public</th>
-                        <th>Actions</th>
+                        <th width="12%">Estimated Size</th>
+                        <th width="12%">Public</th>
+                        <th width="12%" class="all">Actions</th>
                         </thead>
                         <tbody id="table_body">
                         {% for product in productList %}
@@ -204,20 +220,20 @@
                                             </p>
                                         </div>
                                     </div>
-                                    <div id="action_buttons{{ product.purchase_id }}" {% if product.progress != 100 %}
+                                    <div id="action_buttons{{ product.purchase_id }}" class="row col-md-12" {% if product.progress != 100 %}
                                          class="hidden" {% endif %}>
                                         <a title="View Report"
                                                 {% if product.initial_folder %}
                                            href="../reports/{{ product.purchase_id }}"
                                                 {% endif %}
-                                           class="btn btn-success">
+                                           class="btn btn-success btn-sm col-md-6 col-xs-6 col-sm-6 col-lg-6 col-xl-6">
                                             <i class="fa fa-eye"></i>
                                         </a>
                                         <a title="Download zip" {% if product.progress == 100 %}
                                            href="../../static/reports/tmpImages/repsat_test_dev/{{ request.user.email }}/{{ product.purchase_id }}/myzip.zip"
                                         {% else %}
                                            href="#"
-                                        {% endif %} class="btn btn-warning">
+                                        {% endif %} class="btn btn-warning btn-sm col-md-6 col-xs-6 col-sm-6 col-lg-6 col-xl-6">
                                             <i class="fa fa-file-zip-o"></i>
                                         </a>
                                         <!--a title="View Log" href="#" class="btn btn-info"
@@ -236,7 +252,7 @@
         <!-- /.content -->
     </div>
     <!-- Footer -->
-    <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
+    <footer class=" page-footer font-small special-color-dark pt-5" >
         <!-- Footer Elements -->
         <div class="container">
         </div>