annotate sat_templates/templates/bulma/input/field.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 60bf3e45d7b2
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
230
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
1 {# macros to create form fields #}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
2
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
3 {% macro field(type, name, label="", help="", required=false, icon_left=none, icon_right=none) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
4 {# generic field
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
5 "class" keyword can be used to add classes
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
6 additional kwargs will be passed as attributes #}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
7
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
8 <div class="field form_input {{kwargs.pop('class', '')}}">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
9 {% set cur_id = name|next_gidx %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
10 {% if label %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
11 <label for="{{cur_id}}" class="label">{{label}}</label>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
12 {% endif %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
13 <div class="control{% if icon_left %} has-icons-left{% endif %}{% if icon_right %} has-icons-right{% endif %}">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
14 <input id="{{cur_id}}" class="input" type="{{type}}" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
15 {% if icon_left %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
16 <span class="icon is-left">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
17 {# we use <i> with font from CSS instead of SVG, because using directly SVG doesn't play way with Bulma's control #}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18 <i class="icon-{{icon_left}}"></i>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
19 </span>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
20 {% endif %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
21 {% if icon_right %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
22 <span class="icon is-right">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
23 <i class="icon-{{icon_right}}"></i>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
24 </span>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
25 {% endif %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
26 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
27 {% if help %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
28 <p class="help">{{help}}</p>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
29 {% endif %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
30 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
31 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
32
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
33 {% macro select(name, options_list, selected=none, required=false, multiple=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
34 {# selection of elements with <select>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
35
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
36 @param name: name of the field
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
37 @param options_list(list[str, str]): list of name, label of options
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
38 @param selected(none, list): list of select elements
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
39 @param required(bool): true this field is required
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
40 @param multiple(bool): true is multiple selection is possible
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
41 #}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
42 <select name="{{name}}" class="form_input {{kwargs.pop('class', '')}}" {{"required" if required}}>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
43 {% for value, label in options_list %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
44 <option value="{{value}}" {{'selected' if selected and value in selected}}>{{label}}</option>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
45 {% endfor %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
46 </select>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
47 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
48
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
49 {% macro choices(name, choices_list, checked=none) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
50 <div class="control {{kwargs.pop('class', '')}}">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
51 {% for choice, label in choices_list %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
52 <label class="radio" for="{{name|cur_gidx}}">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
53 <input id="{{name|next_gidx}}" type="radio" name="{{name}}" value="{{choice}}"{{" checked" if checked==choice}}>{{label}}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
54 </label>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
55 {% endfor %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
56 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
57 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
58
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
59 {% macro int(name, label="", init=0) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
60 {{ field("number", name=name, label=label, value=init, step=1, min=0, **kwargs) }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
61 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
62
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
63 {% macro checkbox(name, label="", checked=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
64 {% set cur_id = name|next_gidx %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
65 <label for="{{cur_id}}" class="label checkbox">{{label}}</label>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
66 <input id="{{cur_id}}" type="checkbox" {% if checked %}checked=checked{% endif %}>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
67 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
68
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
69 {% macro text(name, label="", placeholder="", required=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
70 {{ field("text", name=name, label=label, required=required, placeholder=placeholder, **kwargs) }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
71 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
72
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
73 {% macro password(name, label="", required=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
74 {{ field("password", name=name, label=label, required=required, **kwargs) }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
75 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
76
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
77 {% macro email(name, label="", required=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
78 {{ field("email", name=name, label=label, required=required, **kwargs) }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
79 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
80
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
81 {% macro date(name, label="", required=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
82 {{ field("date", name=name, label=label, required=required, **kwargs) }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
83 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
84
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
85 {% macro url(name, label="", required=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
86 {{ field("url", name=name, label=label, required=required, **kwargs) }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
87 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
88
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
89 {% macro file(name, label="", required=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
90 {{ field("file", name=name, label=label, required=required, **kwargs) }}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
91 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
92
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
93 {% macro textarea(name, label="", rows=none, cols=50, placeholder='', help='', required=false) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
94 <div class="field form_input">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
95 {% set cur_id = name|next_gidx %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
96 {% if label %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
97 <label for="{{cur_id}}" class="label">{{label}}</label>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
98 {% endif %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
99 <textarea id="{{cur_id}}" name="{{name}}" {{ {"rows": rows, "cols": cols}|xmlattr }} placeholder="{{placeholder}}" {{"required" if required}} class="textarea"></textarea>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
100 {% if help %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
101 <p class="help">{{help}}</p>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
102 {% endif %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
103 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
104 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
105
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
106 {% macro meta(name, value) %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
107 <input type="hidden" name="{{name}}" value="{{value}}">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
108 {% endmacro %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
109
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
110 {% macro submit(text=_("Send"), id=none, class='') %}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
111 {# submit button
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
112
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
113 @param text(str): label of the button
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
114 @param id(none, str): id of the element
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
115 #}
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
116 <div class="control {{class}}">
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
117 <button {{ 'id="{id}"'.format(id=id)|safe if id }} class="button is-primary form_submit {{kwargs.pop('class', '')}}" type="submit">{{text}}</button>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
118 </div>
0e69b5843c2f theme: bulma theme first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
119 {% endmacro %}