Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit 5b6f6f5

Browse files
anehxanehx
authored
Fix hidden form rows in firefox (#108)
* Fix hidden form rows in firefox * Use divs styled as table elements for form tables * Change all values on change not on input
1 parent 687050d commit 5b6f6f5

40 files changed

+1400
-1288
lines changed

‎.prettierrc

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
22
"singleQuote": true,
3-
"semi": false,
4-
"eslintIntegration": true
3+
"semi": false
54
}

‎app/analysis/template.hbs

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -18,62 +18,50 @@
1818
on-apply = (action 'applyFilter')
1919
}}
2020

21-
{{#paginated-table data-test-filter-results class='table--analysis-reschedule' as |t|}}
22-
{{#t.head}}
23-
<tr>
24-
{{#sort-header update=(action (mut ordering)) current=ordering by='user__username'}}User{{/sort-header}}
25-
{{#sort-header update=(action (mut ordering)) current=ordering by='date'}}Date{{/sort-header}}
26-
{{#sort-header update=(action (mut ordering)) current=ordering by='duration'}}Duration{{/sort-header}}
27-
{{#sort-header update=(action (mut ordering)) current=ordering by='task__project__customer__name'}}Customer{{/sort-header}}
28-
{{#sort-header update=(action (mut ordering)) current=ordering by='task__project__name'}}Project{{/sort-header}}
29-
{{#sort-header update=(action (mut ordering)) current=ordering by='task__name'}}Task{{/sort-header}}
30-
{{#sort-header update=(action (mut ordering)) current=ordering by='comment'}}Comment{{/sort-header}}
31-
{{#sort-header update=(action (mut ordering)) current=ordering by='verified_by__username'}}Verified by{{/sort-header}}
32-
<th>Needs review</th>
33-
<th>Not billable</th>
34-
</tr>
35-
{{/t.head}}
36-
{{#t.body}}
37-
{{#each model as |report|}}
21+
{{#if model.length}}
22+
{{#paginated-table data-test-filter-results class='table--analysis' as |t|}}
23+
{{#t.head}}
3824
<tr>
39-
<td>{{report.user.username}}</td>
40-
<td>{{moment-format report.date 'DD.MM.YYYY'}}</td>
41-
<td>{{format-duration report.duration false}}</td>
42-
<td>{{report.task.project.customer.name}}</td>
43-
<td>{{report.task.project.name}}</td>
44-
<td>{{report.task.name}}</td>
45-
<td>{{report.comment}}</td>
46-
<td>{{if report.verifiedBy report.verifiedBy.username}}</td>
47-
<td>{{sy-checkmark checked=report.review}}</td>
48-
<td>{{sy-checkmark checked=report.notBillable}}</td>
25+
{{#sort-header update=(action (mut ordering)) current=ordering by='user__username'}}User{{/sort-header}}
26+
{{#sort-header update=(action (mut ordering)) current=ordering by='date'}}Date{{/sort-header}}
27+
{{#sort-header update=(action (mut ordering)) current=ordering by='duration'}}Duration{{/sort-header}}
28+
{{#sort-header update=(action (mut ordering)) current=ordering by='task__project__customer__name'}}Customer{{/sort-header}}
29+
{{#sort-header update=(action (mut ordering)) current=ordering by='task__project__name'}}Project{{/sort-header}}
30+
{{#sort-header update=(action (mut ordering)) current=ordering by='task__name'}}Task{{/sort-header}}
31+
{{#sort-header update=(action (mut ordering)) current=ordering by='comment'}}Comment{{/sort-header}}
32+
{{#sort-header update=(action (mut ordering)) current=ordering by='verified_by__username'}}Verified by{{/sort-header}}
33+
<th>Needs review</th>
34+
<th>Not billable</th>
4935
</tr>
50-
{{^}}
51-
<tr>
52-
<td colspan="11" class="text-center">
53-
{{#if (is-array model)}}
54-
I didn't find any results - try loosening your filters!
55-
{{else}}
56-
Please specify some filter parameters.
57-
{{/if}}
58-
</td>
59-
</tr>
60-
{{/each}}
61-
{{/t.body}}
62-
{{#t.foot
63-
pages = model.meta.pagination.pages
64-
page = page
65-
page_size = page_size
66-
}}
67-
{{#if (is-array model)}}
36+
{{/t.head}}
37+
{{#t.body}}
38+
{{#each model as |report|}}
39+
<tr>
40+
<td>{{report.user.username}}</td>
41+
<td>{{moment-format report.date 'DD.MM.YYYY'}}</td>
42+
<td>{{format-duration report.duration false}}</td>
43+
<td>{{report.task.project.customer.name}}</td>
44+
<td>{{report.task.project.name}}</td>
45+
<td>{{report.task.name}}</td>
46+
<td>{{report.comment}}</td>
47+
<td>{{if report.verifiedBy report.verifiedBy.username}}</td>
48+
<td>{{sy-checkmark checked=report.review}}</td>
49+
<td>{{sy-checkmark checked=report.notBillable}}</td>
50+
</tr>
51+
{{/each}}
52+
{{/t.body}}
53+
{{#t.foot
54+
pages = model.meta.pagination.pages
55+
page = page
56+
page_size = page_size
57+
}}
6858
<tr>
6959
<td colspan="2"><strong>Total:</strong></td>
7060
<td colspan="9"><strong class="total">{{format-duration model.meta.totalTime false}}</strong></td>
7161
</tr>
72-
{{/if}}
73-
{{/t.foot}}
74-
{{/paginated-table}}
62+
{{/t.foot}}
63+
{{/paginated-table}}
7564

76-
{{#if model}}
7765
<p>
7866
{{#each exportLinks as |link index|}}
7967
<button {{action 'download' link.url}}
@@ -86,4 +74,14 @@
8674
More than 4000 rows were found. Please narrow down your search export results.
8775
{{/if}}
8876
</p>
89-
{{/if}}
77+
{{else}}
78+
<div class="text-center">
79+
<em>
80+
{{#if (is-array model)}}
81+
I didn't find any results - try loosening your filters!
82+
{{else}}
83+
Please specify some filter parameters.
84+
{{/if}}
85+
</em>
86+
</div>
87+
{{/if}}

‎app/components/paginated-table/foot/component.js

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,32 +14,5 @@ export default Component.extend({
1414
* @property {string} tagName
1515
* @public
1616
*/
17-
tagName: 'tfoot',
18-
19-
/**
20-
* The selectable page limits
21-
*
22-
* @property {Number[]} limits
23-
* @public
24-
*/
25-
limits: [10, 20, 50, 100],
26-
27-
actions: {
28-
/**
29-
* Set a page limit
30-
*
31-
* This needs to reset the page, since it could be that the current page
32-
* does not exist anymore
33-
*
34-
* @method setLimit
35-
* @param {Number} limit The new page limit
36-
* @public
37-
*/
38-
setLimit(limit) {
39-
this.setProperties({
40-
page: 1,
41-
page_size: limit // eslint-disable-line camelcase
42-
})
43-
}
44-
}
17+
tagName: 'tfoot'
4518
})

‎app/components/paginated-table/foot/styles.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
tr:last-child td {
2+
> .pagination-nav,
3+
> .pagination-limit {
4+
display: inline-flex;
5+
}
6+
7+
> .pagination-limit {
8+
float: right;
9+
margin-top: 5px;
10+
11+
span {
12+
margin-left: 5px;
13+
14+
&::after {
15+
margin-left: -2px;
16+
}
17+
}
18+
}
19+
}

‎app/components/paginated-table/foot/template.hbs

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,9 @@
22
<tr>
33
<td colspan="42">
44
{{#if (gt pages 1)}}
5-
{{pagination-pager current=page count=pages}}
5+
{{pagination-pager current=page count=pages class='pagination-nav'}}
66
{{/if}}
7-
<div class="limit pull-right">
8-
Per page:
9-
{{#each limits as |l i|}}
10-
<span>
11-
{{#if (eq page_size l)}}
12-
{{l}}
13-
{{else}}
14-
<a href="#" {{action 'setLimit' l}}>{{l}}</a>
15-
{{/if}}
16-
</span>
17-
{{/each}}
18-
</div>
7+
{{pagination-limit page=page page_size=page_size}}
198
</td>
209
</tr>
2110
{{yield to='inverse'}}

‎app/components/paginated-table/styles.scss

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎app/components/pagination-limit/component.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Component from '@ember/component'
2+
3+
export default Component.extend({
4+
/**
5+
* CSS class names
6+
*
7+
* @property {String[]} classNames
8+
* @public
9+
*/
10+
classNames: ['pagination-limit'],
11+
12+
/**
13+
* The selectable page limits
14+
*
15+
* @property {Number[]} limits
16+
* @public
17+
*/
18+
limits: [10, 20, 50, 100]
19+
})

‎app/components/pagination-limit/styles.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
span:not(:last-child)::after {
2+
content: ',';
3+
}

‎app/components/pagination-limit/template.hbs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Per page:
2+
{{#each limits as |l i|}}
3+
<span>
4+
{{#if (eq page_size l)}}
5+
{{l}}
6+
{{else}}
7+
<a href="#" {{action (queue (action (mut page) 1) (action (mut page_size) l))}}>{{l}}</a>
8+
{{/if}}
9+
</span>
10+
{{/each}}

‎app/components/report-reschedule-row/template.hbs

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
1-
<div class="form-group">{{changeset.user.username}}</div>
2-
<div class="form-group">{{moment-format changeset.date 'DD.MM.YYYY'}}</div>
3-
<div class="form-group">{{format-duration changeset.duration false}}</div>
1+
<div class="form-list-cell form-group">{{changeset.user.username}}</div>
2+
<div class="form-list-cell form-group">{{moment-format changeset.date 'DD.MM.YYYY'}}</div>
3+
<div class="form-list-cell form-group">{{format-duration changeset.duration false}}</div>
44
{{#task-selection
55
history = false
66
on-set-task = (action (mut changeset.task))
77
initial = (hash
88
task = changeset.task
99
)
1010
as |t|}}
11-
<div class="form-group {{if changeset.error.task 'has-error'}}">{{t.customer}}</div>
12-
<div class="form-group {{if changeset.error.task 'has-error'}}">{{t.project}}</div>
13-
<div class="form-group {{if changeset.error.task 'has-error'}}">{{t.task}}</div>
11+
<div class="form-list-cell form-group {{if changeset.error.task 'has-error'}}">{{t.customer}}</div>
12+
<div class="form-list-cell form-group {{if changeset.error.task 'has-error'}}">{{t.project}}</div>
13+
<div class="form-list-cell form-group {{if changeset.error.task 'has-error'}}">{{t.task}}</div>
1414
{{/task-selection}}
15-
<div class="form-group">
16-
{{input placeholder='Comment' class='form-control' value=changeset.comment}}
15+
<div class="form-list-cell form-group">
16+
<input
17+
type="text"
18+
class="form-control"
19+
placeholder="Comment"
20+
name="comment"
21+
value={{changeset.comment}}
22+
onchange={{action (mut changeset.comment) value='target.value'}}
23+
>
1724
</div>
18-
<div class="form-group">
25+
<div class="form-list-cell form-group">
1926
{{sy-checkbox checked=changeset.review on-change=(action (mut changeset.review))}}
2027
</div>
21-
<div class="form-group">
28+
<div class="form-list-cell form-group">
2229
{{sy-checkbox checked=changeset.notBillable on-change=(action (mut changeset.notBillable))}}
2330
</div>
24-
<div class="form-group">
31+
<div class="form-list-cell form-group">
2532
{{sy-checkbox title=(if changeset.verifiedBy.id (concat 'Verified by ' changeset.verifiedBy.username)) checked=changeset.verifiedBy.id on-change=(action 'setVerified')}}
2633
</div>
27-
<div class="form-group">
34+
<div class="form-list-cell form-group">
2835
<button
2936
type="submit"
3037
class="btn btn-primary"

‎app/components/report-row/component.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@ const ReportRowComponent = Component.extend({
2525
*/
2626
tagName: 'form',
2727

28+
/**
29+
* CSS class names
30+
*
31+
* @property {String[]} classNames
32+
* @public
33+
*/
34+
classNames: ['form-list-row'],
35+
2836
/**
2937
* The changeset to edit
3038
*

‎app/components/report-row/styles.scss

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎app/components/report-row/template.hbs

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
{{#task-selection task=changeset.task as |t|}}
2-
<div class="form-group {{if changeset.error.task 'has-error'}}">{{t.customer}}</div>
3-
<div class="form-group {{if changeset.error.task 'has-error'}}">{{t.project}}</div>
4-
<div class="form-group {{if changeset.error.task 'has-error'}}">{{t.task}}</div>
2+
<div class="form-list-cell form-group {{if changeset.error.task 'has-error'}}">{{t.customer}}</div>
3+
<div class="form-list-cell form-group {{if changeset.error.task 'has-error'}}">{{t.project}}</div>
4+
<div class="form-list-cell form-group {{if changeset.error.task 'has-error'}}">{{t.task}}</div>
55
{{/task-selection}}
6-
<div class="form-group">{{input data-test-report-comment name='comment' placeholder='Comment' class='form-control' value=changeset.comment}}</div>
7-
<div class="form-group">{{sy-durationpicker data-test-report-duration value=changeset.duration on-change=(action (mut changeset.duration))}}</div>
8-
<div class="form-group">
6+
<div class="form-list-cell form-group">
7+
<input
8+
type="text"
9+
class="form-control"
10+
placeholder="Comment"
11+
name="comment"
12+
value={{changeset.comment}}
13+
onchange={{action (mut changeset.comment) value='target.value'}}
14+
data-test-report-comment
15+
>
16+
</div>
17+
<div class="form-list-cell form-group">{{sy-durationpicker data-test-report-duration value=changeset.duration on-change=(action (mut changeset.duration))}}</div>
18+
<div class="form-list-cell form-group">
919
{{sy-checkbox data-test-report-review checked=changeset.review on-change=(action (mut changeset.review)) label='Needs review'}}
1020
</div>
11-
<div class="form-group">
21+
<div class="form-list-cell form-group">
1222
{{sy-checkbox data-test-report-not-billable checked=changeset.notBillable on-change=(action (mut changeset.notBillable)) label='Not billable'}}
1323
</div>
14-
<div class="form-group">
24+
<div class="form-list-cell form-group">
1525
<button type="button" data-test-delete-report class="btn btn-danger" {{action 'delete'}}>{{fa-icon 'trash'}}</button>
1626
<button type="submit" data-test-save-report class="btn btn-primary" disabled={{or (not changeset.isDirty) (not changeset.isValid)}} {{action 'save'}}>{{fa-icon 'save'}}</button>
1727
</div>

‎app/index/activities/edit/template.hbs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@
1010
<div class="form-group">{{t.task}}</div>
1111
{{/task-selection}}
1212
<div class="form-group">
13-
{{input class='form-control' name='comment' placeholder='Comment' value=activity.comment}}
13+
<input
14+
type="text"
15+
class="form-control"
16+
placeholder="Comment"
17+
name="comment"
18+
value={{activity.comment}}
19+
onchange={{action (mut activity.comment) value='target.value'}}
20+
>
1421
</div>
1522
<table class="table table--striped table--activity-blocks">
1623
<tbody>

0 commit comments

Comments
 (0)