Mercurial > libervia-templates
view sat_templates/templates/bulma/photo/album.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 | 4e050f67c079 |
children |
line wrap: on
line source
{% set loading_screen = true %} {% extends 'base/base.html' %} {% import 'components/avatar.html' as avatar with context %} {% import 'input/textbox.html' as textbox with context %} {% import 'blog/macros.html' as blog with context %} {% block body %} {{ icon_defs('comment-empty', 'trash-empty', 'picture') }} {% if directory_affiliation == 'owner' %} <div class="content has-items-centered is-flex my-4"> {{ component.action_button("#", label=_("manage invitations"), icon="group", id="button_manage") }} </div> {% else %} <article id="hint" class="message is-info my-4"> <div class="message-header"> <p>{% trans %}hint{% endtrans %}</p> <button class="delete click_to_delete" aria-label="delete"></button> </div> <div class="message-body"> {% trans %}You can click on any picture to start a slideshow{% endtrans %} </div> </article> {% endif %} <div id="album_items" class="columns album is-multiline mt-4"> {% set ns_photos = namespace(empty=true) %} {% for file in files_data %} {% if file.type == C.FILE_TYPE_FILE %} {% set ns_photos.empty = false %} {% include 'photo/item.html' %} {% endif %} {% endfor %} </div> {% if directory_affiliation == 'owner' %} <div id="file_drop" class="box column has-border-dashed has-border-grey-light is-hidden-touch"> <div class="has-text-weight-bold has-text-centered has-text-grey-light is-size-3"> {% trans %} Drop photos here {% endtrans %} </div> </div> <h2 class="title is-4 has-text-centered is-hidden-touch">OR</h2> <div class="file is-large is-boxed is-centered"> <label class="file-label"> <input id="file_input" class="file-input" type="file" accept="image/*,video/*" name="photos_upload" multiple> <span class="file-cta"> <span class="file-icon is-marginless"> <i class="icon-upload"></i> </span> <span class="file-label"> {% trans %} Select photos to upload… {% endtrans %} </span> </span> </label> </div> <div id="list" class="column"></div> {% endif %} {% endblock body %}