Mercurial > libervia-templates
annotate sat_templates/templates/bulma/components/url_preview.html @ 400:140690a18b63
call: group call design:
Design for group call (which is used for both group call and A/V conferences) has been
improved to:
- have a working fullscreen button;
- have a better display of peer users in grid, with responsive design;
- have a nicer design for peer user, and adding avatar/nickname as overlay on the bottom
of the video stream;
- add a way to (un)pin a peer user, which make is appear on the whole width on top of the
grid.
rel 448
HG<S-Insert>: changed sat_templates/templates/bulma/call/group_peer.html
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Tue, 06 Aug 2024 23:50:17 +0200 |
| parents | 941e4006ab6e |
| children |
| rev | line source |
|---|---|
| 364 | 1 |
| 2 {% if url_preview %} | |
| 3 | |
|
385
941e4006ab6e
bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents:
364
diff
changeset
|
4 <div id="url-preview" class="box my-2 url-preview has-background-light"> |
| 364 | 5 <div class="has-text-right"> |
| 6 <span class="tag is-dark is-rounded is-fullwidth-mobile has-text-centered-mobile mb-2"> | |
| 7 {% trans %}Preview{% endtrans %} | |
| 8 </span> | |
| 9 </div> | |
| 10 <article class="media"> | |
| 11 {% if url_preview.image %} | |
| 12 <figure class="media-left is-hidden-touch"> | |
| 13 <p class="image is-64x64"> | |
| 14 <img src="{{ url_preview.image }}" alt=""> | |
| 15 </p> | |
| 16 </figure> | |
| 17 {% endif %} | |
| 18 <div class="media-content"> | |
| 19 <div class="content"> | |
| 20 {% if url_preview.image %} | |
| 21 <p class="is-hidden-desktop"> | |
| 22 <img src="{{ url_preview.image }}" alt="" class="image is-64x64 mb-2"> | |
| 23 </p> | |
| 24 {% endif %} | |
| 25 <p> | |
| 26 <strong><a href="{{ url_preview.url }}" class="has-text-dark">{{ url_preview.title }}</a></strong> <br> | |
| 27 {% if url_preview.author_name %} | |
| 28 <small>{% trans %}By{% endtrans %} <a href="{{ url_preview.author_url }}">{{ url_preview.author_name }}</a></small> <br> | |
| 29 {% endif %} | |
| 30 {{ url_preview.description }} | |
| 31 </p> | |
| 32 | |
| 33 </div> | |
| 34 </div> | |
| 35 </article> | |
| 36 {% if url_preview.html %} | |
| 37 <div class="url-preview-iframe-container"> | |
| 38 <iframe class="url-preview-iframe" srcdoc="{{url_preview.html}}" frameborder="0" sandbox="{{'allow-scripts allow-same-origin' if url_preview.html_known}}"></iframe> | |
| 39 </div> | |
| 40 {% endif %} | |
| 41 | |
| 42 <footer class="content has-text-right"> | |
| 43 <a href="{{ url_preview.provider_url }}" class="has-text-grey">{% trans %}source:{% endtrans %} {{ url_preview.provider_name }}</a> | |
| 44 </footer> | |
| 45 </div> | |
| 46 {% endif %} |