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 %}