Mercurial > libervia-templates
annotate sat_templates/templates/bulma/components/block.html @ 295:1de599c5a68f
bulma (base): loading screen:
when the `loading_screen` variable is set before extending `base/base.html`, a loading
modal is shown (and must be removed via JavaScript). This avoids the user to try to use an
interface which is not reactive or working normally because JS is not fully loaded yet.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 27 Nov 2020 12:24:03 +0100 |
| parents | 10278ba367a2 |
| children | 75f1cd6da46e |
| rev | line source |
|---|---|
| 230 | 1 {% macro separator(label, align='center') %} |
| 2 {# display a bloc separator | |
| 3 @param label(unicode): label to show | |
| 4 @param align(unicode): one of "left", "center", "right" | |
| 5 #} | |
| 6 <div class="block_separator"> | |
| 7 {% if align in ('center', 'right') %} | |
| 8 <div class="block_separator__line"></div> | |
| 9 {% endif %} | |
| 10 <div class="block_separator__label"> | |
| 11 {{label}} | |
| 12 </div> | |
| 13 {% if align in ('center', 'left') %} | |
| 14 <div class="block_separator__line"></div> | |
| 15 {% endif %} | |
| 16 </div> | |
| 17 {% endmacro %} | |
| 18 | |
| 19 {% macro icon_item(icon_name, label, url, class="") %} | |
| 20 <div class="column is-2-desktop is-4-touch"> | |
| 21 <div class="card {{class}}"> | |
| 22 <a href="{{url}}"> | |
| 23 <div class="card-image has-text-centered"> | |
| 24 {{ icon(icon_name, cls='image is-64x64 is-inline-block') }} | |
| 25 </div> | |
| 26 <div class='card-content has-text-centered has-text-shortenable is-paddingless'> | |
| 27 <span>{{label}}</span> | |
| 28 </div> | |
| 29 </a> | |
| 30 </div> | |
| 31 </div> | |
| 32 {% endmacro %} | |
| 33 | |
| 34 {% macro disco_icon_grid(disco_entities, icon_name) %} | |
| 35 {# display discovered entities in a grid | |
| 36 @param disco_entities: entities which mush have a name and url key or attribute | |
| 37 @param icon_name: name of a defined icon | |
| 38 #} | |
| 39 <div class="columns"> | |
| 40 {% for disco_entity in disco_entities %} | |
| 41 {{ icon_item(icon_name, disco_entity.name, disco_entity.url) }} | |
| 42 {% endfor %} | |
| 43 </div> | |
| 44 {% endmacro %} | |
| 45 | |
| 46 {% macro interests_grid(interests, default_icon_name) %} | |
| 47 {# display list of interests | |
| 48 @param interests: list of interests | |
| 49 @param default_icon_name: name of a defined icon to use when no thumb_url is available | |
| 50 #} | |
| 51 <div class="columns is-multiline"> | |
| 52 {% for interest in interests %} | |
|
245
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
53 <div class="column is-4 item" data-item='{{interest|tojson}}'> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
54 <div class="card"> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
55 <div class="card-header"> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
56 <div class="card-header-title"></div> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
57 <div class="card-header-icon"><button class="delete action_delete"></button></div> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
58 </div> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
59 <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light"> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
60 <a href="{{interest.url}}"> |
| 230 | 61 {% if interest.thumb_url %} |
| 62 <img class="is-photo-thumbnail" src="{{interest.thumb_url}}"> | |
| 63 {% else %} | |
| 64 <div class="is-photo-thumbnail"> | |
| 65 {{ icon(default_icon_name, "image is-128x128") }} | |
| 66 </div> | |
| 67 {% endif %} | |
|
245
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
68 </a> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
69 </div> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
70 <div class="card-content has-text-centered x-is-hoverable"> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
71 <a href="{{interest.url}}"> |
| 230 | 72 <span><em>{{ interest.name|default(_("unnamed")) }}</em></span> |
|
245
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
73 </a> |
|
10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
74 </div> |
| 230 | 75 </div> |
| 76 </div> | |
| 77 {% endfor %} | |
| 78 </div> | |
| 79 {% endmacro %} |