Skip to content

Commit 25e4fef

Browse files
cmeerwcmeerw
committed
reworked edit form in jinja2 template to make is responsive and
hightlight required fields
1 parent 7aff8e8 commit 25e4fef

File tree

8 files changed

+116
-112
lines changed

8 files changed

+116
-112
lines changed

‎share/roundup/templates/jinja2/html/issue.item.edit.html‎

Lines changed: 18 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,28 @@
1+
{% import 'layout/edit.tmpl' as edit with context %}
12
<form method="POST"
2-
{% if context.id %}
3-
action='issue{{ context.id }}'
4-
{% else %}
5-
action='issue'
6-
{% endif %}
3+
{% if context.id -%}
4+
action="issue{{ context.id }}"
5+
{% else -%}
6+
action="issue"
7+
{% endif -%}
78
name="itemSynopsis"
89
enctype="multipart/form-data"
910
class="col-xl-6"
1011
>
1112
<fieldset>
12-
<!-- title -->
13-
<div class='form-group row'>
14-
<label class='col-3 col-form-label' for='title'>{% trans %}Title{% endtrans %}</label>
15-
<div class='col-9'>
16-
<input class="form-control" name='title' id='title' type='text' class='input-lg' value='{{ context.title.plain()|u }}' required>
17-
</div>
18-
</div> <!-- form-group row -->
19-
20-
<!-- priority & Status -->
21-
<div class='form-group row'>
22-
<label class='col-3 col-form-label' for='priority'>{% trans %}Priority{% endtrans %}</label>
23-
<div class='col-3'>
24-
{{ context.priority.menu(html_kwargs={"class": "custom-select"})|u|safe }}
25-
</div>
26-
<label class='col-3 col-form-label' for='status'>{% trans %}Status{% endtrans %}</label>
27-
<div class='col-3'>
28-
{{ context.status.menu(html_kwargs={"class": "custom-select"})|u|safe }}
29-
</div>
30-
</div> <!-- form-group row -->
31-
32-
<!-- Superseder & nosy list -->
33-
<div class='form-group row'>
34-
<label class='col-3 col-form-label' for='superseder'>{% trans %}Superseder{% endtrans %}</label>
35-
<div class='col-3'>
36-
<input class="form-control" type='text' name='superseder' id='superseder' value='{{ context.superseder.plain()|u }}'>
37-
</div>
38-
<label class='col-3 col-form-label' for='nosylist'>{% trans %}Nosy list{% endtrans %}</label>
39-
<div class='col-3'>
40-
<input class="form-control" type='text' name='nosy' id='nosylist' value='{{ context.nosy.plain()|u }}'>
41-
</div>
42-
</div> <!-- form-group row -->
43-
44-
<!-- Assigned to & keywords -->
45-
<div class='form-group row'>
46-
<label class='col-3 col-form-label' for='assignedto'>{% trans %}Assigned to{% endtrans %}</label>
47-
<div class='col-3'>
48-
{{ context.assignedto.menu(html_kwargs={"class": "custom-select"})|u|safe }}
49-
</div>
50-
<label class='col-3 col-form-label' for='keyword'>{% trans %}Keywords{% endtrans %}</label>
51-
<div class='col-3'>
52-
<input class="form-control" type='text' name='keyword' id='keyword' value='{{ context.keyword.plain()|u }}'>
53-
</div>
54-
</div> <!-- form-group row -->
55-
56-
<!-- Note -->
57-
<div class='form-group row'>
58-
<label class='col-3 col-form-label' for='change_note'>{% trans %}Change note{% endtrans %}</label>
59-
<div class='col-9'>
60-
<textarea class="form-control" name="@note" rows="5" class='input-lg' id='change_note'></textarea>
61-
</div>
62-
</div> <!-- form-group row -->
63-
64-
<!-- File upload -->
65-
<div class='form-group row'>
66-
<label class='col-3 col-form-label' for='file_upload'>{% trans %}File{% endtrans %}</label>
67-
<div class='col-3'>
68-
<input class="form-control-file" type="file" name="@file" id='file_upload'>
69-
</div>
70-
</div> <!-- form-group row -->
13+
<dl class="row row-cols-1 row-cols-lg-2 no-gutters">
14+
{{ edit.input_text_large('Title', 'title', 'title', required=True) }}
15+
{{ edit.input_option('Priority', 'priority', required=True) }}
16+
{{ edit.input_option('Status', 'status') }}
17+
{{ edit.input_text_small('Superseder', 'superseder', 'superseder') }}
18+
{{ edit.input_text_small('Nosy list', 'nosylist', 'nosy') }}
19+
{{ edit.input_option('Assigned to', 'assignedto') }}
20+
{{ edit.input_text_small('Keywords', 'keyword', 'keyword') }}
21+
{{ edit.input_textarea('Change note', 'change_note', '@note') }}
22+
{{ edit.input_file('File', 'file_upload', '@file') }}
23+
</dl>
7124
</fieldset>
72-
<div class='form-actions'>
25+
<div class="form-actions">
7326
{{ context.submit(html_kwargs={"class": "btn btn-primary"})|u|safe }}
7427
{% if context.id %}
7528
<a href='{{ context.copy_url() }}'>{% trans %}Make a copy{% endtrans %}</a>

‎share/roundup/templates/jinja2/html/issue.item.readonly.html‎

Lines changed: 10 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,14 @@
1-
{% set dt_class_full = 'col col-4 col-md-3 col-lg-2' -%}
2-
{% set dd_class_full = 'col col-8 col-md-9 col-lg-10' -%}
3-
{% set dt_class_half = 'col col-4 col-md-3 col-lg-4' -%}
4-
{% set dd_class_half = 'col col-8 col-md-9 col-lg-8' -%}
1+
{% import 'layout/view.tmpl' as view with context -%}
52
<dl class="row row-cols-1 row-cols-lg-2 no-gutters">
6-
<div class="col col-lg-12 row">
7-
<dt class="{{ dt_class_full }}">{% trans %}Title{% endtrans %}</dt>
8-
<dd class="{{ dd_class_full }}">{{ context.title.plain()|u }}</dd>
9-
</div>
10-
<div class="col row">
11-
<dt class="{{ dt_class_half }}">{% trans %}Priority{% endtrans %}</dt>
12-
<dd class="{{ dd_class_half }}">{{ context.priority.plain()|u }}</dd>
13-
</div>
14-
<div class="col row">
15-
<dt class="{{ dt_class_half }}">{% trans %}Status{% endtrans %}</dt>
16-
<dd class="{{ dd_class_half }}">{{ context.status.plain()|u }}</dd>
17-
</div>
3+
{{ view.field_large('Title', 'title') }}
4+
{{ view.field_small('Priority', 'priority') }}
5+
{{ view.field_small('Status', 'status') }}
186
{% if context.superseder %}
19-
<div class="col col-lg-12 row">
20-
<dt class="{{ dt_class_full }}">{% trans %}Superseder{% endtrans %}</dt>
21-
<dd class="{{ dd_class_full }}">{{ context.superseder.plain()|u }}</dd>
22-
</div>
7+
{{ view.field_large('Superseder', 'superseder') }}
238
{% endif %}
24-
<div class="col col-lg-12 row">
25-
<dt class="{{ dt_class_full }}">{% trans %}Nosy list{% endtrans %}</dt>
26-
<dd class="{{ dd_class_full }}">{{ context.nosy.plain()|u }}</dd>
27-
</div>
28-
<div class="col row">
29-
<dt class="{{ dt_class_half }}">{% trans %}Assigned to{% endtrans %}</dt>
30-
<dd class="{{ dd_class_half }}">{{ context.assignedto.plain()|u }}</dd>
31-
</div>
32-
<div class="col row">
33-
<dt class="{{ dt_class_half }}">{% trans %}Keywords{% endtrans %}</dt>
34-
<dd class="{{ dd_class_half }}">{{ context.keyword.plain()|u }}</dd>
35-
</div>
9+
{% if context.nosy %}
10+
{{ view.field_large('Nosy list', 'nosy') }}
11+
{% endif %}
12+
{{ view.field_small('Assigned to', 'assignedto') }}
13+
{{ view.field_large('Keywords', 'keyword') }}
3614
</dl>

‎share/roundup/templates/jinja2/html/layout/edit.tmpl‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{% macro input_text_large(text, id, name, required=False) %}
2+
<div class="col col-lg-12 row">
3+
<dt class="col col-4 col-md-3 col-lg-2">
4+
<label class="col-form-label" for="{{ id }}">{{ i18n.gettext(text)|u|safe }}</label>
5+
</dt>
6+
<dd class="col col-8 col-md-9 col-lg-10">
7+
<input class="input form-control" name="{{ name }}" id="{{ id }}" type="text" value="{{ context[name].plain()|u }}" {%- if required %}required="required"{% endif %} />
8+
</dd>
9+
</div>
10+
{% endmacro -%}
11+
{% macro input_text_small(text, id, name, required=False) %}
12+
<div class="col row mr-1">
13+
<dt class="col col-4 col-md-3 col-lg-4">
14+
<label class="col-form-label" for="{{ id }}">{{ i18n.gettext(text)|u|safe }}</label>
15+
</dt>
16+
<dd class="col col-8 col-md-9 col-lg-8">
17+
<input class="input form-control" name="{{ name }}" id="{{ id }}" type="text" value="{{ context[name].plain()|u }}" {%- if required %}required="required"{% endif %} />
18+
</dd>
19+
</div>
20+
{% endmacro -%}
21+
{% macro input_file(text, id, name) %}
22+
<div class="col row mr-1">
23+
<dt class="col col-4 col-md-3 col-lg-4">
24+
<label class="col-form-label" for="{{ id }}">{{ i18n.gettext(text)|u|safe }}</label>
25+
</dt>
26+
<dd class="col col-8 col-md-9 col-lg-8">
27+
<input class="input form-control" name="{{ name }}" id="{{ id }}" type="file" {%- if required %}required="required"{% endif %} />
28+
</dd>
29+
</div>
30+
{% endmacro -%}
31+
{% macro input_option(text, id, required=False) %}
32+
<div class="col row mr-1">
33+
<dt class="col col-4 col-md-3 col-lg-4">
34+
<label class="col-form-label" for="{{ id }}">{{ i18n.gettext(text)|u|safe }}</label>
35+
</dt>
36+
<dd class="col col-8 col-md-9 col-lg-8">
37+
{% set kwargs = { 'required' : 'required' } %}
38+
{{ context[id].menu(html_kwargs=dict([('class', 'input custom-select form-control')] + ([('required', 'required')] if required else [])))|u|safe }}
39+
</dd>
40+
</div>
41+
{% endmacro -%}
42+
{% macro input_textarea(text, id, name, required=False) %}
43+
<div class="col col-lg-12 row">
44+
<dt class="col col-4 col-md-3 col-lg-2">
45+
<label class="col-form-label" for="{{ name }}">{{ i18n.gettext(text)|u|safe }}</label>
46+
</dt>
47+
<dd class="col col-8 col-md-9 col-lg-10">
48+
<textarea class="input form-control" name="{{ name }}" id="{{ name }}" rows="5"></textarea>
49+
</dd>
50+
</div>
51+
{% endmacro -%}

‎share/roundup/templates/jinja2/html/layout/navigation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
'status': status_notresolved,
2929
'assignedto': '-1',
3030
'@dispname': i18n.gettext('Show Unassigned'),
31-
})|u|safe }}">{% trans %}Show Unassigned{% endtrans %}</a>
31+
})|u }}">{% trans %}Show Unassigned{% endtrans %}</a>
3232
</li>
3333
<li class="nav-item">
3434
<a href="{{ request.indexargs_url('issue', {
@@ -39,7 +39,7 @@
3939
'@search_text': '',
4040
'status': status_notresolved,
4141
'@dispname': i18n.gettext('Show All'),
42-
})|u|safe }}">{% trans %}Show All{% endtrans %}</a>
42+
})|u }}">{% trans %}Show All{% endtrans %}</a>
4343
</li>
4444
<li>
4545
<a href="issue?@template=search">{% trans %}Search{% endtrans %}</a>

‎share/roundup/templates/jinja2/html/layout/view.tmpl‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{% macro field_large(text, name) %}
2+
<div class="col col-lg-12 row">
3+
<dt class="col col-4 col-md-3 col-lg-2">{{ i18n.gettext(text)|u|safe }}</dt>
4+
<dd class="col col-8 col-md-9 col-lg-10">{{ context[name].plain()|u }}</dd>
5+
</div>
6+
{% endmacro -%}
7+
{% macro field_small(text, name) %}
8+
<div class="col row mr-1">
9+
<dt class="col col-4 col-md-3 col-lg-4">{{ i18n.gettext(text)|u|safe }}</dt>
10+
<dd class="col col-8 col-md-9 col-lg-8">{{ context[name].plain()|u }}</dd>
11+
</div>
12+
{% endmacro -%}

‎share/roundup/templates/jinja2/html/msg.item.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
{% elif not context.id and context.is_edit_ok() %}
1515
{% trans %}New Message Editing{% endtrans %}
1616
{% elif context.id and not context.is_edit_ok() %}
17-
{% trans %}Message{% endtrans %}{{ context.id }}
17+
{% trans %}Message{% endtrans %} {{ context.id }}
1818
{% elif context.id and context.is_edit_ok() %}
19-
{% trans %}Message{% endtrans %}{{ context.id }} {% trans %}editing{% endtrans %}
19+
{% trans %}Message{% endtrans %} {{ context.id }} {% trans %}editing{% endtrans %}
2020
{% endif %}
2121
{% endblock %}
2222

‎share/roundup/templates/jinja2/html/user.item.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
{% elif not context.id and context.is_edit_ok() %}
1515
{% trans %}New User Editing{% endtrans %}
1616
{% elif context.id and not context.is_edit_ok() %}
17-
{% trans %}User{% endtrans %}{{ context.id }}
17+
{% trans %}User{% endtrans %} {{ context.id }}
1818
{% elif context.id and context.is_edit_ok() %}
19-
{% trans %}User{% endtrans %}{{ context.id }} {% trans %}editing{% endtrans %}
19+
{% trans %}User{% endtrans %} {{ context.id }} {% trans %}editing{% endtrans %}
2020
{% endif %}
2121
{% endblock %}
2222

@@ -26,9 +26,9 @@
2626

2727
{% if context.is_view_ok() %}
2828
<form class="pb-5" method="POST"
29-
name ="itemSynopsis"
30-
enctype ="multipart/form-data"
31-
action ='{{ context.designator() }}'>
29+
name="itemSynopsis"
30+
enctype="multipart/form-data"
31+
action="{{ context.designator() }}">
3232
<table>
3333
<tr>
3434
<th>{% trans %}Name{% endtrans %}</th>
@@ -39,28 +39,28 @@
3939
<tr>
4040
<th>{% trans %}Login Name{% endtrans %}</th>
4141
<td>
42-
<input class="form-control" type='text' name='username' value='{{ context.username.plain()|u }}'>
42+
<input class="form-control" type='text' name='username' value='{{ context.username.plain()|u }}'>
4343
</td>
4444
</tr>
4545
{% if context.is_edit_ok() %}
4646
<tr>
4747
<th>{% trans %}Login Password{% endtrans %}</th>
4848
<td>
49-
<input class="form-control" type='password' name='password'>
49+
<input class="form-control" type='password' name='password'>
5050
</td>
5151
</tr>
5252
<tr>
5353
<th>{% trans %}Confirm Password{% endtrans %}</th>
5454
<td>
55-
<input class="form-control" type='password' name='@confirm@password'>
55+
<input class="form-control" type='password' name='@confirm@password'>
5656
</td>
5757
</tr>
5858
{% endif %}
5959
{% if request.user.hasPermission('Web Roles') %}
6060
<tr>
6161
<th>{% trans %}Roles <br>(comma separated){% endtrans %}</th>
6262
<td>
63-
<input class="form-control" type='text' name='roles' value='{{ context.roles.plain()|u }}'>
63+
<input class="form-control" type='text' name='roles' value='{{ context.roles.plain()|u }}'>
6464
</td>
6565
</tr>
6666
{% endif %}
@@ -97,10 +97,10 @@
9797
</td>
9898
</tr>
9999
{% if context.is_edit_ok() %}
100-
<tr class='form-actions'>
100+
<tr class="form-actions">
101101
<td>
102102
<input type="hidden" name="@template" value="item">
103-
{{ context.submit(html_kwargs={ "class": "btn btn-success" })|u|safe }}
103+
{{ context.submit(html_kwargs={ 'class': 'btn btn-success' })|u|safe }}
104104
</td>
105105
</tr>
106106
{% endif %}

‎share/roundup/templates/jinja2/static/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,13 @@ footer {
6060
.table-condensed td, .table-condensed th {
6161
padding:.3rem;
6262
}
63+
64+
input:required {
65+
border-width: 1.5px;
66+
border-color: #6e747a;
67+
}
68+
69+
select:required {
70+
border-width: 1.5px;
71+
border-color: #6e747a;
72+
}

0 commit comments

Comments
 (0)