Use flickity to display panoramas (#334)

* Flickity * style carousel * Update src/meshapi/templates/widgets/panorama_viewer.html Co-authored-by: james-otten <[email protected]> * Delete virtualbox address * pin flickity to 3.0.0 * Revert "pin flickity to 3.0.0" This reverts commit 52124a0. * Update panorama_viewer.html --------- Co-authored-by: james-otten <[email protected]>
nycmeshnet · Apr 7, 2024 · b59a662 · b59a662
1 parent 3f36769
commit b59a662
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/src/meshapi/static/widgets/panorama_viewer.css b/src/meshapi/static/widgets/panorama_viewer.css
@@ -0,0 +1,26 @@
+.main-carousel {
+  width:100%;
+  min-height:fit-content;
+  max-height:300px;
+}
+.carousel-cell {
+  width: 100%; /* full width */
+  height: 200px;
+  /* center images in cells with flexbox */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.carousel-cell img {
+  display: block;
+}
+
+.no-panos {
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+
diff --git a/src/meshapi/templates/widgets/panorama_viewer.html b/src/meshapi/templates/widgets/panorama_viewer.html
@@ -1,5 +1,17 @@
-<div style='display:flex; flex-direction: row; width:100%; overflow-x:auto; max-height:300px; padding-left: 10px;'>
-	{% for panorama in widget.value %}
-		<a href="{{ panorama }}" target="_blank"><img src="{{ panorama }}" style="margin-right:10px"/></a>
-	{% endfor %}
+<!--https://flickity.metafizzy.co/-->
+<!--integrity generated with https://www.srihash.org/-->
+<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js" integrity="sha384-6ma6pGRLjeu6PkX+yOaR0dUGt6OQl9evbv3H2kdLWwIXtUztaQrWUlbRBPVpDH4B" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
+
+<div class="main-carousel" data-flickity='{ "wrapAround": true }'>
+  {% if widget.value|length == 0 %}
+  <div class="no-panos">
+  	<p>There are no panoramas.</p>
+  </div>
+  {% endif %}
+  {% for panorama in widget.value %}
+  <div class="carousel-cell">
+  	<a href="{{ panorama }}" target="_blank"><img src="{{ panorama }}"/></a>
+  </div>
+  {% endfor %}
 </div>
diff --git a/src/meshapi/widgets.py b/src/meshapi/widgets.py
@@ -36,6 +36,11 @@ def render(self, name, value, attrs=None, renderer=None):
         template = super_template + pano_template
         return mark_safe(template)
 
+    class Media:
+        css = {
+            "all": ("widgets/panorama_viewer.css",),
+        }
+
 
 class DeviceIPAddressWidget(widgets.TextInput):
     template_name = "widgets/ip_address.html"