diff sat_templates/templates/bulma/components/url_preview.html @ 364:095bd5b34080

chat: add templates for URL previews
author Goffi <goffi@goffi.org>
date Wed, 28 Jun 2023 10:40:53 +0200
parents
children 941e4006ab6e
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/url_preview.html	Wed Jun 28 10:40:53 2023 +0200
@@ -0,0 +1,46 @@
+
+{% if url_preview %}
+
+<div id="url-preview" class="box m-2 url-preview has-background-light">
+  <div class="has-text-right">
+    <span class="tag is-dark is-rounded is-fullwidth-mobile has-text-centered-mobile mb-2">
+      {% trans %}Preview{% endtrans %}
+    </span>
+  </div>
+  <article class="media">
+    {% if url_preview.image %}
+      <figure class="media-left is-hidden-touch">
+        <p class="image is-64x64">
+          <img src="{{ url_preview.image }}" alt="">
+        </p>
+      </figure>
+    {% endif %}
+    <div class="media-content">
+      <div class="content">
+        {% if url_preview.image %}
+          <p class="is-hidden-desktop">
+            <img src="{{ url_preview.image }}" alt="" class="image is-64x64 mb-2">
+          </p>
+        {% endif %}
+        <p>
+          <strong><a href="{{ url_preview.url }}" class="has-text-dark">{{ url_preview.title }}</a></strong> <br>
+          {% if url_preview.author_name %}
+            <small>{% trans %}By{% endtrans %} <a href="{{ url_preview.author_url }}">{{ url_preview.author_name }}</a></small> <br>
+          {% endif %}
+          {{ url_preview.description }}
+        </p>
+
+      </div>
+    </div>
+  </article>
+{% if url_preview.html %}
+  <div class="url-preview-iframe-container">
+      <iframe class="url-preview-iframe" srcdoc="{{url_preview.html}}" frameborder="0" sandbox="{{'allow-scripts allow-same-origin' if url_preview.html_known}}"></iframe>
+  </div>
+{% endif %}
+
+  <footer class="content has-text-right">
+    <a href="{{ url_preview.provider_url }}" class="has-text-grey">{% trans %}source:{% endtrans %} {{ url_preview.provider_name }}</a>
+  </footer>
+</div>
+{% endif %}