Hide image carousel on mobile if no image is set

2021-04-14 22:37:47 +02:00
parent e6c0b668f3
commit 67699929fb
2 changed files with 2 additions and 1 deletions
--- a/src/assets/static/style.css
+++ b/src/assets/static/style.css
@@ -147,6 +147,7 @@ a:hover .recipe-tile .hover { display: block; background: #0006 }
 */
 .recipe h2 { font-size: 0.8em; margin: 0 0 1em 0 }
 .recipe #img-carousel { padding: 0 50px; margin: 0 -30px }
+.recipe #img-carousel:empty { display: none; }
 .recipe #source { margin-left: -1em; margin-bottom: -1.5em }
 .recipe #metrics { float: right; margin: 0 0 15px 25px; max-width: 180px }
 .recipe #metrics > * { text-indent: -20px; margin-left: 20px; padding-top: 0.3em }
--- a/src/templates/recipe.html
+++ b/src/templates/recipe.html
@@ -6,7 +6,7 @@
  <section id="img-carousel" class="v-scroll center">
    {%- for img in this | sorted_images %}
    <img class="lozad" data-src="{{ img|url }}" height="400">
-    {%- endfor %}
+    {%- endfor -%}
  </section>

  {% if this.source -%}