Mercurial > libervia-templates
comparison sat_templates/templates/bulma/components/block.html @ 230:0e69b5843c2f
theme: bulma theme first draft:
This theme uses the Bulma CSS framework, Brython to handle the menu on touch devices, and
Sass to customize Bulma. CSS default fallbacks are disabled as Bulma uses its own naming
conventions, and default fallbacks would lead to hard to debug conflicts.
`common.js` has been slightly improved to handle custom classed in `tab_select`
The theme is not complete yet, but it is functional.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Tue, 19 May 2020 00:02:34 +0200 |
| parents | |
| children | 10278ba367a2 |
comparison
equal
deleted
inserted
replaced
| 229:739c3e6999fa | 230:0e69b5843c2f |
|---|---|
| 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 %} | |
| 53 <div class="column is-4"> | |
| 54 <div class="card x-is-hoverable"> | |
| 55 <a href="{{interest.url}}"> | |
| 56 <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light"> | |
| 57 {% if interest.thumb_url %} | |
| 58 <img class="is-photo-thumbnail" src="{{interest.thumb_url}}"> | |
| 59 {% else %} | |
| 60 <div class="is-photo-thumbnail"> | |
| 61 {{ icon(default_icon_name, "image is-128x128") }} | |
| 62 </div> | |
| 63 {% endif %} | |
| 64 </div> | |
| 65 <div class="card-content has-text-centered"> | |
| 66 <span><em>{{ interest.name|default(_("unnamed")) }}</em></span> | |
| 67 </div> | |
| 68 </a> | |
| 69 </div> | |
| 70 </div> | |
| 71 {% endfor %} | |
| 72 </div> | |
| 73 {% endmacro %} |