Mercurial > libervia-templates
annotate sat_templates/templates/bulma/components/block.html @ 245:10278ba367a2
bulma (photo/discover): design for the new theme + create button + delete button
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 19 Jun 2020 17:57:13 +0200 |
| parents | 0e69b5843c2f |
| 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 %} |