Skip to content
This repository was archived by the owner on Jun 21, 2022. It is now read-only.

Commit 3a041e7

Browse files
rico-hengstkuro610
rico-hengst
authored and
kuro610
committed
Update purchase list editor to BS5 fixes #133 
1 parent 074832b commit 3a041e7

File tree

7 files changed

+159
-105
lines changed

7 files changed

+159
-105
lines changed

‎lib/Coocook/Controller/PurchaseList.pm‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,17 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie
106106
$ingredient->{remove_url} =
107107
$c->project_uri( '/purchase_list/remove_ingredient', $ingredient->{id} );
108108
}
109+
110+
# TODO move business logic out of controller
111+
# 4 <- 5 -> 6
112+
# 5 <- 5.1 -> 6
113+
# 5 <- 5.9 -> 6
114+
# 5 <- 6 -> 7
115+
my $value = $item->{value} + $item->{offset};
116+
$item->{next_higher_value} = int($value) + 1;
117+
118+
$value == int($value) and $value--;
119+
$item->{next_lower_value} = int($value);
109120
}
110121
}
111122
}

‎root/static/css/local_bootstrap_modifications.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,18 @@ textarea {
1717
resize: vertical;
1818
}
1919

20+
.btn-sm.btn-quad {
21+
padding: .25rem;
22+
}
23+
24+
.btn-icon-1 {
25+
width: calc(24px + 1.5rem);
26+
}
27+
28+
.table colgroup + thead {
29+
border-top: none !important;
30+
}
31+
2032

2133
/*
2234
redefined list -> non-indended
@@ -109,4 +121,4 @@ login logout header color
109121

110122
.bg-header {
111123
background-color: var(--cc-green);
112-
}
124+
}

‎root/static/css/style.css‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,6 @@ button.alert-link {
117117
padding: 0;
118118
}
119119

120-
.inline,
121-
.inline * {
122-
display: inline;
123-
}
124-
125120
/* <li>s with checkbox inside should not have any bullet point */
126121
li.checkbox {
127122
list-style-type: none;
@@ -198,30 +193,17 @@ ul {
198193
* see https://stackoverflow.com/a/710264/498634 */
199194
}
200195

201-
/* incognito text input fields that don't clutter the page until they are focused
202-
* see https://webapphuddle.com/inline-edit-design/ */
203-
.editable-content {
204-
text-align: right;
205-
}
206-
.editable-content:not(:focus) {
207-
border: 1px solid grey;
208-
border-radius: 0.25em;
209-
background-color: inherit;
210-
box-shadow: none;
196+
#pl-editor {
197+
min-width: 1150px;
211198
}
212199

213-
input[type=number].editable-content:not(:focus)::-webkit-inner-spin-button,
214-
input[type=number].editable-content:not(:focus)::-webkit-outer-spin-button {
215-
-webkit-appearance: none;
216-
}
217200

218-
input[type=number].editable-content:not(:focus) {
219-
-moz-appearance: textfield;
201+
/* unstyled list without a specific type */
202+
ul.list-style-type-none {
203+
list-style-type:none;
204+
padding-left: 0;
220205
}
221206

222-
.hidden {
223-
display: none;
224-
}
225207

226208
/******** footer part ********/
227209
footer a {

‎root/templates/dish/edit.tt‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
[% END %]
99
</div>
1010

11-
<form class="col-sm-3 offset-sm-3 col-lg-2 offset-lg-4 mt-3 mt-sm-0 btn-group" method="post" action="[% delete_url %]">
12-
<button type="button" class="btn btn-danger" title="Delete dish" aria-expanded="false">
13-
<i class="material-icons">delete_forever</i> Delete
14-
</button>
15-
</form>
11+
<div class="offset-sm-1 col-sm-5 text-left">
12+
<div class="d-flex justify-content-end">
13+
<form method="post" action="[% delete_url %]">
14+
<button type="button" class="btn btn-danger" title="Delete dish" aria-expanded="false">
15+
<i class="material-icons">delete_forever</i> Delete
16+
</button>
17+
</form>
18+
</div>
19+
20+
</div>
1621
</div>
1722

1823
<form action="[% dish.update_url %]" method="post">

‎root/templates/purchase_list/edit.tt‎

Lines changed: 94 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,100 @@
11
[% escape_title( 'Purchase list', list.name );
22

3-
title = title _ ' on ' _ display_date(list.date, {short=>1});
4-
html_title = html_title _ ' on ' _ display_date(list.date, {html=>1});
3+
title = title _ ' for ' _ display_date(list.date, {short=>1});
4+
html_title = html_title _ ' for ' _ display_date(list.date, {html=>1});
55
%]
66

77
[% FOREACH section IN sections %]
8-
<h3>[% section.name || "No shop section" | html %]</h3>
9-
10-
<table class="purchase-items">
11-
<thead>
12-
<tr>
13-
<th>Amount</th>
14-
<th>Article</th>
15-
<th>Dishes</th>
16-
<th>Comment</th>
17-
<th>Convert to &hellip;</th>
18-
</tr>
19-
</thead>
20-
[% FOREACH item IN section.items %]
21-
<tr>
22-
<td>
23-
<form name="total" class="inline" method="post" action="[% item.update_offset_url %]">
24-
[% IF item.offset %]
25-
<label for="item_value">ca.</label>
26-
[% END %]
27-
<input type="number" min="0" step="any" class="editable-content" id="total" name="total" value="[% item.value + item.offset %]">
28-
<input type="submit" class="hidden" value="submit" title="Submit new value for item">
29-
</form>
30-
[% '&nbsp' IF item.unit.space;
31-
display_unit( item.unit, {html=>1} ) %]
32-
</td>
33-
<td>[% item.article.name | html %]</td>
34-
<td class="small-font"><ul>
35-
[% FOREACH ingredient IN item.ingredients %]
36-
<li>
37-
[% display_value_unit( ingredient.value, ingredient.unit, {html=>1} ) %]
38-
–
39-
[% ingredient.dish.meal.date.strftime('%a, %F') %]
40-
[% ingredient.dish.meal.name | html %]:
41-
[% ingredient.dish.name | html %]
42-
[% IF ingredient.comment; '('; ingredient.comment | html; ')'; END %]
43-
[% IF ingredient.remove_url %]
44-
<form class="inline" method="post" action="[% ingredient.remove_url %]"><input type="submit" value="Remove"></form>
45-
[% END %]
46-
</li>
47-
[% END %]
48-
[% IF item.offset %]
49-
<li>[% display_value_unit( item.offset, ingredient.unit, {html=>1, force_sign=>1} ) %] – <em>rounding difference</em>
50-
<form name="remove-offset" class="inline" method="post" action="[% item.update_offset_url %]">
51-
<input type="hidden" name="offset" value="0">
52-
<input type="submit" value="Remove">
53-
</form>
54-
</li>
55-
[% END %]
56-
</ul></td>
57-
<td>[% item.comment %]</td>
58-
<td>
59-
[% FOREACH unit IN item.convertible_into;
60-
IF item.convert_url %]
61-
<form class="inline" method="post" action="[% item.convert_url %]">
62-
<input type="hidden" name="unit" value="[% unit.id %]">
63-
<input type="submit" value="[% unit.short_name | html %]" title="[% unit.long_name | html %]">
64-
</form>
65-
[% END;
66-
END %]
67-
</td>
68-
<tr>
69-
[% END %]
70-
</table>
8+
<div class="row my-3">
9+
<div class="col-12 mb-2">
10+
<h3 class="text-success">[% section.name || "No shop section" | html FILTER ucfirst %]</h3>
11+
</div>
12+
13+
<div class="col-12 mb-2 table-responsive">
14+
<table id="pl-editor" class="table align-middle">
15+
<colgroup>
16+
<col style="width:25%">
17+
<col style="width:10%">
18+
<col style="width:5%">
19+
<col style="width:15%">
20+
<col style="width:10%">
21+
<col style="width:10%">
22+
<col class="btn-icon-1">
23+
<col>
24+
</colgroup>
25+
<thead>
26+
<tr>
27+
<th>Amount</th>
28+
<th>Article</th>
29+
<th colspan="5">Dishes</th>
30+
<th>Comment</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
[% FOREACH item IN section.items %]
35+
<tr>
36+
[% rowspan = item.ingredients.size;
37+
IF item.offset;
38+
rowspan = rowspan + 1;
39+
END;
40+
%]
41+
<td rowspan="[% rowspan %]">
42+
<datalist id="values-[% loop.count %]">
43+
<option value="[% item.value + item.offset %]">
44+
<option value="[% item.next_higher_value %]">
45+
<option value="[% item.next_lower_value%]">
46+
</datalist>
47+
<form id="total-[% loop.count %]" name="total" method="post" action="[% item.update_offset_url %]"></form>
48+
<form id="units-[% loop.count %]" method="post" action="[% item.convert_url %]"></form>
49+
<div class="d-flex justify-content-between">
50+
<div class="input-group flex-nowrap">
51+
[% IF item.offset %]<span class="input-group-text px-1">ca.</span>[% END %]
52+
<input id="total" class="form-control" form="total-[% loop.count %]" type="number" min="0" step="any" name="total" list="values-[% loop.count %]" value="[% item.value + item.offset %]">
53+
<span class="input-group-text">[% display_unit( item.unit, {html=>1} ) %]</span>
54+
</div>
55+
<button class="btn btn-outline-primary ms-1 material-icons" form="total-[% loop.count %]" type="submit" title="Update amount">sync</button>
56+
</div>
57+
[% IF item.convert_url %]
58+
<div class="d-flex flex-wrap border rounded my-1 w-100">
59+
[% idx = loop.count;
60+
FOREACH unit IN item.convertible_into %]
61+
<button class="btn btn-outline-secondary btn-sm m-1" form="units-[% idx %]" type="submit" name="unit" value="[% unit.id %]">[% unit.short_name | html %]</button>
62+
[% END;
63+
END %]
64+
</div>
65+
</td>
66+
<td rowspan="[% rowspan %]">[% item.article.name | html %]</td>
67+
68+
[% FOREACH ingredient IN item.ingredients %]
69+
[% IF loop.index == 0 %]
70+
[% INCLUDE purchase_list/snippet_dish.tt %]
71+
</tr>
72+
73+
[% ELSE %]
74+
<tr>
75+
[% INCLUDE purchase_list/snippet_dish.tt %]
76+
</tr>
77+
[% END;
78+
END;
79+
80+
IF item.offset %]
81+
<tr>
82+
<td colspan="4" class="text-end">
83+
<small>[% display_value_unit( item.offset, ingredient.unit, {html=>1, force_sign=>1} ) %] – <em>rounding difference</em></small>
84+
</td>
85+
<td>
86+
<form name="remove-offset" method="post" action="[% item.update_offset_url %]">
87+
<button type="submit" class="btn btn-danger btn-sm btn-quad mb-1 material-icons" title="Reset rounding" name="offset" value="0">undo</button>
88+
</form>
89+
</td>
90+
<td></td>
91+
</tr>
92+
[% END;
93+
94+
END %]
95+
</tbody>
96+
</table>
97+
98+
</div>
99+
</div>
71100
[% END %]
72-
73-
<style>
74-
table.purchase-items {
75-
width: 100%; /* there are several tables with many columns and they should have identical width */
76-
}
77-
</style>

‎root/templates/purchase_list/snippet_dish.tt‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
3+
<td style="text-align:right;">[% display_value_unit( ingredient.value, ingredient.unit, {html=>1} ) %]</td>
4+
<td style="text-align:center;">[% ingredient.dish.meal.date.strftime('%a, %F') %]</td>
5+
<td>[% ingredient.dish.meal.name | html %]</td>
6+
<td>[% ingredient.dish.name | html %]</td>
7+
<td>
8+
<form method="post" action="[% ingredient.remove_url %]">
9+
<button type="submit" class="btn btn-danger btn-sm btn-quad" title="Remove from purchase list">
10+
<i class="material-icons">delete_forever</i>
11+
</button>
12+
</form>
13+
</td>
14+
<td>[% IF ingredient.comment; '('; ingredient.comment | html; ')'; END %]</td>

‎root/templates/wrapper.tt‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@
22
<html lang="en">
33
<head>
44
<title>
5-
[% title _ ' · ' | html IF title %]
6-
[% project.name _ ' · ' | html IF project %]
7-
[% name | html %]
5+
[% IF window_title;
6+
window_title _ ' · ' | html;
7+
ELSIF title;
8+
title _ ' · ' | html;
9+
END;
10+
11+
IF project;
12+
project.name _ ' · ' | html;
13+
END;
14+
15+
name | html %]
816
</title>
917

1018
<meta charset="UTF-8">
@@ -110,7 +118,6 @@
110118
</nav>
111119
</header>
112120

113-
114121
<main class="container-md mb-2">
115122
<div class="row my-3">
116123
<div class="col-12">

0 commit comments

Comments
 (0)