Some improvements on the list view

qgis · Oct 11, 2024 · d323db9 · d323db9
1 parent 2e9d78f
commit d323db9
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 15 deletions.
diff --git a/qgis-app/static/style/scss/bulma/components/plugins-list.sass b/qgis-app/static/style/scss/bulma/components/plugins-list.sass
@@ -315,14 +315,33 @@ div
   border-right: 3px solid #4D6370
   border-top: 3px solid #4D6370
 
-.table-container
-  max-width: 100%
-  overflow: auto
-  max-height: 50dvh
-  thead
-    position: sticky
-    top: 0
-    background: white
-    padding-top: 3rem
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
-    z-index: 1
+// .table-container
+//   max-width: 100%
+//   overflow: auto
+//   max-height: 50dvh
+//   thead
+//     position: sticky
+//     top: 0
+//     background: white
+//     padding-top: 3rem
+//     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
+//     z-index: 1
+
+table
+  width: 100%
+  border-collapse: collapse
+
+thead th
+  background-color: #fff // Optional: Background color
+  transition: all 0.3s ease
+
+.sticky-header
+  position: fixed
+  z-index: 10
+
+.list-options
+  position: sticky
+  top: 112px
+  background-color: #fff // Optional: Background color
+  transition: all 0.3s ease
+  z-index: 10
diff --git a/qgis-app/templates/base/list_galery.html b/qgis-app/templates/base/list_galery.html
@@ -47,6 +47,7 @@
   .image-info {
     margin-left: 5px;
   }
+
 </style>
 {% endblock %}
 
@@ -74,7 +75,7 @@ <h2 class="title is-4">{% if title %}{{title}}{% else %}{% trans "All" %} {{ res
 	</div>
 
 	{% if object_list.count %}
-	<div class="mt-3 is-flex is-justify-content-space-between is-flex-wrap-wrap">
+	<div class="pt-3 is-flex is-justify-content-space-between is-flex-wrap-wrap list-options">
 		<div>
 			<div class="field has-addons">
 			<p class="control">
@@ -118,6 +119,43 @@ <h2 class="title is-4">{% if title %}{{title}}{% else %}{% trans "All" %} {{ res
     {% include 'base/list_pagination.html' %}
   </div>
 
+  <script>
+    function adjustHeaderWidth() {
+      const table = document.getElementById('myTable');
+      const header = table.querySelector('thead');
+      const headerCells = header.querySelectorAll('th');
+      const bodyCells = table.querySelectorAll('tbody tr:first-child td');
+      const offsetTop = table.offsetTop;
+      const listOptions = document.querySelector('.list-options');
+
+      // Check if we need to make the header sticky
+      if (window.scrollY >= offsetTop) {
+        header.classList.add('sticky-header');
+
+        // Set the width of each header cell to match the corresponding body cell
+        headerCells.forEach((th, index) => {
+          th.style.width = `${bodyCells[index].offsetWidth}px`;
+        });
+
+        // Set the top position of the sticky header based on the height of the list-options
+        header.style.top = `${listOptions.offsetHeight + 112}px`;
+      } else {
+        header.classList.remove('sticky-header');
+
+        // Reset header cell widths when sticky is removed
+        headerCells.forEach((th) => {
+          th.style.width = '';
+        });
+
+        // Reset the top position of the header
+        header.style.top = '';
+      }
+    }
+
+    window.addEventListener('scroll', adjustHeaderWidth);
+    window.addEventListener('load', adjustHeaderWidth);
+    window.addEventListener('resize', adjustHeaderWidth);
+  </script>
   <script>
 		$('#table-view-btn').on('click', function() {
 			$('#table-view').removeClass('is-hidden');

diff --git a/qgis-app/templates/base/list_table.html b/qgis-app/templates/base/list_table.html
@@ -1,11 +1,13 @@
 {% load i18n humanize static thumbnail %}
 
-<table class="table is-striped is-fullwidth">
+<table id="myTable" class="table is-striped is-fullwidth">
     <thead>
         <tr>
             <th></th>
             <th> Name </th>
-            <th> Type </th>
+            {%if resource_name == 'Style' %}
+                <th> Type </th>
+            {% endif %}
             <th>
                 <i class="fas fa-download" title="{% trans 'Download Count' %}"></i>
             </th>
@@ -27,7 +29,9 @@
                 {% endif %}
                 </td>
                 <td><a href="{% url url_detail pk=object.id %}">{{ object.name|title }}</a></td>
-                <td><span class="center-vertical">{{ object.object_type.name|title }}</span></td>
+                {% if object.style_type %}
+                    <td><span class="center-vertical">{{ object.style_type.name|title }}</span></td>
+                {% endif %}
                 <td>{{ object.download_count }}</td>
                 <td>{{ object.get_creator_name|title }}</td>
                 <td>{{ object.upload_date|date:"d F Y" }}</td>