Mercurial > libervia-templates

comparison sat_templates/templates/bulma/call/group_peer.html @ 400:140690a18b63

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 9847e6dbeefa
children
comparison
equal deleted inserted replaced
399:e7152fc8a81f 400:140690a18b63
1 <div class="column peer_video_container is-flex-grow-1"> 1 <div class="column is-3-widescreen is-4-desktop is-6-tablet peer_video_container" data-pinned="false">
2 <div class="box group-peer-avatar is-hidden"> 2 <div class="card">
3 <div class="card"> 3 <div class="card-content p-0 position-relative">
4 <div class="card-content"> 4 <video class="peer_video_stream" autoplay playsinline tabindex="0" style="width: 100%; height: auto; object-fit: cover; border-radius: 6px;">
5 <figure class="image is-128x128 is-rounded" style="margin: auto;"> 5 </video>
6 <div class="is-overlay is-flex is-align-items-end is-justify-content-space-between p-3">
7 <div class="is-flex is-align-items-center">
6 {%- if identities is defined -%} 8 {%- if identities is defined -%}
7 {% set identity = identities.get(entity) %} 9 {% set identity = identities.get(entity) %}
8 {% set nick = identity.nicknames[0] if identity.nicknames else jid %} 10 {% set nick = identity.nicknames[0] if identity.nicknames else jid %}
9 {%- if identity.avatar.filename %} 11 <figure class="image is-48x48 mr-2">
10 <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}" alt="{{ nick }}" style="height: 100%; width: 100%;"> 12 {%- if identity.avatar.filename %}
11 {% else %} 13 <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}" alt="{{ nick }}">
12 <span class="is-avatar is-128x128 image has-background-light is-flex has-items-centered has-text-weight-bold is-size-1">{{nick|first|upper}}</span> 14 {% else %}
13 {%- endif -%} 15 <span class="is-avatar is-48x48 is-flex is-justify-content-center is-align-items-center has-background-light has-text-dark has-text-weight-bold is-size-5 is-rounded">{{nick|first|upper}}</span>
16 {%- endif -%}
17 </figure>
18 <span class="tag is-medium is-rounded is-info has-text-weight-semibold">
19 {{ nick }}
20 </span>
14 {%- endif -%} 21 {%- endif -%}
15 </figure> 22 </div>
16 </div> 23 <div class="dropdown is-right is-hoverable">
17 <div class="card-content has-text-centered"> 24 <div class="dropdown-trigger">
18 {%- if identities is defined -%} 25 <button class="button is-small is-rounded is-light" aria-haspopup="true" aria-controls="dropdown-menu">
19 <div class="tag is-rounded is-info has-text-weight-semibold" style="display: inline-block;"> 26 <span class="icon is-small">
20 {{ nick }} 27 <i class="icon-dot-3-vert"></i>
28 </span>
29 </button>
21 </div> 30 </div>
22 {%- endif -%} 31 <div class="dropdown-menu" id="dropdown-menu" role="menu">
32 <div class="dropdown-content">
33 <a href="#" class="dropdown-item action_pin">
34 {% trans %}Pin{% endtrans %}
35 </a>
36 </div>
37 </div>
38 </div>
23 </div> 39 </div>
24 </div> 40 </div>
25 </div> 41 </div>
26 <video class="peer_video_stream" autoplay playsinline tabindex="0" style="width: 100%; height: auto; object-fit: cover;"></video>
27 </div> 42 </div>