💄 review templates

wlts/templates/collection.html

@@ -19,31 +19,35 @@
     <b>Unit:</b> {{collection.temporal_resolution['unit']}}
     <b>Value:</b> {{collection.temporal_resolution['value']}}
 </div>
-</br>
+<br>
 <b>Classification System:</b>
 <div>
     <b>Id:</b> {{collection.classification_system['id']}}
     <b>Title:</b> {{collection.classification_system['title']}}
     <b>Name:</b> {{collection.classification_system['name']}}
     <b>Version:</b> {{collection.classification_system['version']}}
 </div>
-</br>
+<br>
 <div>
     <b>Extent</b>
 </div>
 <div>
-    <table>
-        <tr>
-            <th>max_x</th>
-            <th>min_x</th>
-            <th>max_y</th>
-            <th>min_y</th>
-        </tr>
-        <tr>
-            <td>{{collection.spatial_extent['xmax']}}</td>
-            <td>{{collection.spatial_extent['xmin']}}</td>
-            <td>{{collection.spatial_extent['ymax']}}</td>
-            <td>{{collection.spatial_extent['ymin']}}</td>
-        </tr>
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                <th>max_x</th>
+                <th>min_x</th>
+                <th>max_y</th>
+                <th>min_y</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>{{collection.spatial_extent['xmax']}}</td>
+                <td>{{collection.spatial_extent['xmin']}}</td>
+                <td>{{collection.spatial_extent['ymax']}}</td>
+                <td>{{collection.spatial_extent['ymin']}}</td>
+            </tr>
+        </tbody>
     </table>
 </div>

wlts/templates/trajectory-item.html

@@ -19,57 +19,62 @@
 <div>
     <li><b>Collections:</b></li>
         <ul>
-        {% for cl in tj.query['collections'] -%}
+        {% for cl in tj.query['collections'] %}
             <li>{{ cl }}</li>
-        {%- endfor %}
+        {% endfor %}
         </ul>
 </div>
 {% endif %}
+
 {% if 'geometry' in tj.trajectory %}
 <div>
     <b>Geometry:</b> {{tj.trajectory['geometry']}}
 </div>
 <b>Trajectory</b>
 <div>
     <table>
+        <thead>
+            <tr>
+                <th>Class</th>
+                <th>Collection</th>
+                <th>Date</th>
+                <th>Geometry</th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for traj in tj.trajectory['trajectory'] %}
         <tr>
-        </tr>
-        <tr>
-            <th>Class</th>
-            <th>Collection</th>
-            <th>Date</th>
-            <th>Geometry</th>
-        </tr>
-        {% for tj in tj.trajectory['trajectory']%}
-        <tr>
-            <td>{{tj['class']}}</td>
-            <td>{{tj['collection']}}</td>
-            <td>{{tj['date']}}</td>
-            <td>{{tj['geometry']}}</td>
+            <td>{{ traj['class'] }}</td>
+            <td>{{ traj['collection'] }}</td>
+            <td>{{ traj['date'] }}</td>
+            <td>{{ traj['geometry'] }}</td>
         </tr>
         {% endfor %}
+        </tbody>
     </table>
 </div>
-</br>
+<br>
 {% else %}
 <b>Trajectory</b>
 <div>
    <table>
+        <thead>
+            <tr>
+                <th>Class</th>
+                <th>Collection</th>
+                <th>Date</th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for traj in tj.trajectory %}
         <tr>
-        </tr>
-        <tr>
-            <th>Class</th>
-            <th>Collection</th>
-            <th>Date</th>
-        </tr>
-        {% for tj in tj.trajectory%}
-        <tr>
-            <td>{{tj['class']}}</td>
-            <td>{{tj['collection']}}</td>
-            <td>{{tj['date']}}</td>
+            <td>{{ traj['class'] }}</td>
+            <td>{{ traj['collection'] }}</td>
+            <td>{{ traj['date'] }}</td>
         </tr>
         {% endfor %}
+        </tbody>
     </table>
 </div>
-</br>
+<br>
 {% endif %}

wlts/templates/trajectory.html

@@ -1,63 +1,53 @@
 <style>
- /* Style the button that is used to open and close the collapsible content */
- .collapsible {
-  background-color: #eee;
-  color: #444;
-  cursor: pointer;
-  padding: 18px;
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline: none;
-  font-size: 15px;
-}
-
-/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-.active, .collapsible:hover {
-  background-color: #ccc;
-}
-
-/* Style the collapsible content. Note: hidden by default */
-.content {
-  padding: 0 18px;
-  display: none;
-  overflow: hidden;
-  background-color: #ffffff;
-}
-
-.collapsible:after {
-  content: '+'; /* Unicode character for "plus" sign (+) */
-  font-size: 18px;
-  color: black;
-  float: right;
-  margin-left: 5px;
-}
-
-.active:after {
-  content: "-"; /* Unicode character for "minus" sign (-) */
-}
-</style>
-
-{% for tj in trajectories['trajectories'] %}
-<button type="button" class="collapsible"><b>Trajectory for Latitude {{tj['query']['latitude']}} Longitude {{tj['query']['longitude']}}</b></button>
-<div class="content">
-        {% include 'trajectory-item.html' %}
-</div>
-{% endfor %}
-
-<script>
-var coll = document.getElementsByClassName("collapsible");
-var i;
-
-for (i = 0; i < coll.length; i++) {
-  coll[i].addEventListener("click", function() {
-    this.classList.toggle("active");
-    var content = this.nextElementSibling;
-    if (content.style.display === "block") {
-      content.style.display = "none";
-    } else {
-      content.style.display = "block";
-    }
-  });
-}
-</script>
+  .collapsible {
+   background-color: #eee;
+   color: #444;
+   cursor: pointer;
+   padding: 18px;
+   width: 100%;
+   border: none;
+   text-align: left;
+   outline: none;
+   font-size: 15px;
+ }
+
+ .active, .collapsible:hover {
+   background-color: #ccc;
+ }
+
+ .content {
+   padding: 0 18px;
+   display: none;
+   overflow: hidden;
+   background-color: #ffffff;
+ }
+
+ .collapsible:after {
+   content: '+'; /* Unicode character for "plus" sign (+) */
+   font-size: 18px;
+   color: black;
+   float: right;
+   margin-left: 5px;
+ }
+
+ .active:after {
+   content: "-"; /* Unicode character for "minus" sign (-) */
+ }
+ </style>
+
+ {% for tj in trajectories['trajectories'] %}
+ <button type="button" class="collapsible"><b>Trajectory for Latitude {{tj['query']['latitude']}} Longitude {{tj['query']['longitude']}}</b></button>
+ <div class="content">
+         {% include 'trajectory-item.html' %}
+ </div>
+ {% endfor %}
+
+ <script>
+ document.querySelectorAll(".collapsible").forEach(button => {
+   button.addEventListener("click", function() {
+     this.classList.toggle("active");
+     let content = this.nextElementSibling;
+     content.style.display = content.style.display === "block" ? "none" : "block";
+   });
+ });
+ </script> 

wlts/templates/wlts.html

@@ -3,8 +3,8 @@
     <li><b>URL:</b> {{ url }}</li>
     <li><b>Collections:</b></li>
     <ul>
-    {% for cl in collections -%}
+    {% for cl in collections %}
         <li>{{ cl }}</li>
-    {%- endfor %}
+    {% endfor %}
     </ul>
 </ul>