inifinite scroll

sumandari · Jan 22, 2022 · f35670e · f35670e
1 parent 9c84388
commit f35670e
Showing 1 changed file with 65 additions and 29 deletions.
diff --git a/django_project/certification/templates/certifying_organisation/pending-list.html b/django_project/certification/templates/certifying_organisation/pending-list.html
@@ -6,13 +6,31 @@
 
 {% block extra_head %}
     <style>
-        table td {
-            background-color: white;
-        }
-        .sort-header {
+        .organisation-header {
+            padding: 10px 5px;
+            margin: 10px 0 5px;
             background-color: #EEEEEE;
         }
+        .organisation-header a {
+            font-size: 1.15em;
+            font-weight: bold ;
+            color: inherit;
+        }
+        .organisation-item {
+            padding: 5px;
+            margin: 2px 0;
+            background-color: #fafafa;
+        }
+        .organisation-item:hover {
+            background-color: #d7e5f0;
+        }
+        .organisation-item div{
+            text-decoration: none;
+            color: #333;
+        }
     </style>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
+	  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/infinite.min.js"></script>
 {% endblock %}
 
 {% block page_title %}
@@ -65,38 +83,56 @@ <h3>No certifying organisations are defined, but you can <a
         {% endif %}
     {% endifequal %}
 
-    <div class="form-group  pull-right">
+
+      <div class="form-group pull-right">
         <form method="GET" action="" id="searchform">
-            <span class="glyphicon glyphicon-search form-control-feedback"></span>
             <input class="searchfield form-control" id="searchbox" name="q" type="text"
                    value="{{ request.GET.q }}" placeholder="Search Organisation..."/>
         </form>
     </div>
+      <br/>
 
+      <h5 class="text-muted">{{ num_certifyingorganisations }} records found</h5>
+      <div class="row organisation-header">
+          <div class="col-xs-6">{% sort_th "Organisation Name" "name" %}</div>
+          <div class="col-xs-3">{% sort_th "Application Date" "submit_date" %}</div>
+          <div class="col-xs-3">{% sort_th "Status" "status" %}</div>
+      </div>
 
 
-    <table class="table table-striped">
-        <thead>
-            <tr>
-                <th class="sort-header">{% sort_link "Organisation Name" "name" %}</th>
-                <th class="sort-header">{% sort_link "Application Date" "submit_date" %}</th>
-                <th class="sort-header">{% sort_link "Status" "status" %}</th>
-            </tr>
-        </thead>
-        <tbody>
-        {% for certifyingorganisation in certifyingorganisations %}
-            <tr>
-                <td>
-                    <a href="{% url 'certifyingorganisation-detail' project_slug=certifyingorganisation.project.slug slug=certifyingorganisation.slug %}">
-                {{ certifyingorganisation.name }}
-                </a>
-                </td>
-                <td>{{ certifyingorganisation.submit_date }}</td>
-                <td>{% if certifyingorganisation.status %}{{ certifyingorganisation.status }}{% else %}-{% endif %}</td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
 
-    {% include "_pagination.html" %}
+  <div class="infinite-container">
+    {% for certifyingorganisation in certifyingorganisations %}
+      <div class="infinite-item" >
+          <div class="row organisation-item">
+            <a href="{% url 'certifyingorganisation-detail' project_slug=certifyingorganisation.project.slug slug=certifyingorganisation.slug %}">
+              <div class="col-xs-6">{{ certifyingorganisation.name }}</div>
+              <div class="col-xs-3">{{ certifyingorganisation.submit_date }} </div>
+              <div class="col-xs-3">{{ certifyingorganisation.status }}</div>
+            </a>
+          </div>
+      </div>
+    {% endfor %}
+  </div>
+
+  <div class="loading" style="display: none;">
+    Loading...
+  </div>
+
+  {% if page_obj.has_next %}
+    <a class="infinite-more-link" href="?page={{ articles.next_page_number }}">More</a>
+  {% endif %}
+
+  <script>
+    var infinite = new Waypoint.Infinite({
+      element: $('.infinite-container')[0],
+      onBeforePageLoad: function () {
+        $('.loading').show();
+      },
+      onAfterPageLoad: function ($items) {
+        $('.loading').hide();
+      }
+    });
+
+  </script>
 {% endblock %}