Skip to content

Commit 65b2f04

Browse files
dotsamdotsam
authored
Responsive tweaks (#755)
* Change datatables markup to be responsive with BS5 * Responsive tweaks to single part info
1 parent 5e76451 commit 65b2f04

File tree

3 files changed

+248
-212
lines changed

3 files changed

+248
-212
lines changed

‎config/packages/datatables.yaml‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ datatables:
1010
options:
1111
lengthMenu : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
1212
pageLength: '%partdb.table.default_page_size%' # Set to -1 to disable pagination (i.e. show all rows) by default
13-
#dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pif>>"
14-
dom: " <'row'<'col mb-2 input-group' B l> <'col mb-2' <'pull-end' p>>>
15-
<'card'
16-
rt
17-
<'card-footer card-footer-table text-muted' i >
18-
>
19-
<'row'<'col mt-2 input-group' B l> <'col mt-2' <'pull-right' p>>>"
13+
dom: " <'row' <'col mb-2 input-group flex-nowrap' B l > <'col-auto mb-2' < p >>>
14+
<'card'
15+
rt
16+
<'card-footer card-footer-table text-muted' i >
17+
>
18+
<'row' <'col mt-2 input-group flex-nowrap' B l > <'col-auto mt-2' < p >>>"
2019
pagingType: 'simple_numbers'
2120
searching: true
2221
stateSave: true

‎templates/parts/info/_main_infos.html.twig‎

Lines changed: 110 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,130 @@
11
{% import "helper.twig" as helper %}
22

3-
<div class="row">
4-
<div class="col-md-3 col-lg-4 col-3 mt-auto mb-auto">
5-
{% include "parts/info/_picture.html.twig" %}
6-
</div>
7-
<div class="col-md-9 col-lg-8 col-7">
8-
<h5 class="text-muted pt-2" title="{% trans %}manufacturer.label{% endtrans %}">
9-
{% if part.manufacturer %}
10-
{% if part.manufacturer.id is not null %}
11-
<a href="{{ entity_url(part.manufacturer, 'list_parts') }}">{{ part.manufacturer.name}}</a>
3+
{% if part.manufacturer or part.manufacturerProductUrl or part.manufacturerProductNumber %}
4+
<h5 class="text-muted pt-2" title="{% trans %}manufacturer.label{% endtrans %}">
5+
{% if part.manufacturer %}
6+
{% if part.manufacturer.id is not null %}
7+
<a href="{{ entity_url(part.manufacturer, 'list_parts') }}">{{ part.manufacturer.name}}</a>
8+
{% else %}
9+
{{ part.manufacturer.name }}
10+
{% endif %}
11+
{% endif %}
12+
{% if part.manufacturerProductUrl %}
13+
<small>
14+
<a class="link-external" href="{{ part.manufacturerProductUrl }}" rel="noopener" target="_blank">
15+
{% if part.manufacturerProductNumber is not empty %}
16+
{{ part.manufacturerProductNumber }}
1217
{% else %}
13-
{{ part.manufacturer.name }}
18+
<i>{{ part.name }}</i>
1419
{% endif %}
15-
{% endif %}
16-
{% if part.manufacturerProductUrl %}
17-
<small>
18-
<a class="link-external" href="{{ part.manufacturerProductUrl }}" rel="noopener" target="_blank">
19-
{% if part.manufacturerProductNumber is not empty %}
20-
{{ part.manufacturerProductNumber }}
21-
{% else %}
22-
<i>{{ part.name }}</i>
23-
{% endif %}
24-
</a>
25-
</small>
26-
{% else %}
27-
<small>{{ part.manufacturerProductNumber }}</small>
28-
{% endif %}
29-
</h5>
30-
<h3 class="w-fit" title="{% trans %}name.label{% endtrans %}">{{ part.name }}
31-
{# You need edit permission to use the edit button #}
32-
{% if timeTravel is not null %}
33-
<a href="{{ entity_url(part, 'info') }}"><i title="{% trans %}part.back_to_info{% endtrans %}" class="fas fa-fw fa-arrow-circle-left"></i></a>
34-
{% elseif is_granted('edit', part) %}
35-
<a href="{{ entity_url(part, 'edit') }}"><i class="fas fa-fw fa-sm fa-edit"></i></a>
36-
{% endif %}
37-
</h3>
38-
<h6 class="text-muted w-fit" title="{% trans %}description.label{% endtrans %}"><span>{{ part.description|format_markdown(true) }}</span></h6>
39-
<h6 class="">
20+
</a>
21+
</small>
22+
{% elseif part.manufacturerProductNumber %}
23+
<small>{{ part.manufacturerProductNumber }}</small>
24+
{% endif %}
25+
</h5>
26+
{% endif %}
27+
28+
<h3 class="w-fit" title="{% trans %}name.label{% endtrans %}">
29+
{{ part.name }}
30+
{# You need edit permission to use the edit button #}
31+
{% if timeTravel is not null %}
32+
<a href="{{ entity_url(part, 'info') }}"><i title="{% trans %}part.back_to_info{% endtrans %}" class="fas fa-fw fa-arrow-circle-left"></i></a>
33+
{% elseif is_granted('edit', part) %}
34+
<a href="{{ entity_url(part, 'edit') }}"><i class="fas fa-fw fa-sm fa-edit"></i></a>
35+
{% endif %}
36+
</h3>
37+
38+
<dl>
39+
<div>
40+
<dt>
41+
<span class="visually-hidden">{% trans %}description.label{% endtrans %}</span>
42+
</dt>
43+
<dd class="d-inline">
44+
<span class="text-muted w-fit" title="{% trans %}description.label{% endtrans %}">{{ part.description|format_markdown(true) }}</span>
45+
</dd>
46+
</div>
47+
48+
<div>
49+
<dt class="d-inline-block">
50+
<span class="visually-hidden">{% trans %}category.label{% endtrans %}</span>
4051
<i class="fas fa-tag fa-fw" title="{% trans %}category.label{% endtrans %}"></i>
52+
</dt>
53+
<dd class="d-inline">
4154
<span class="text-muted">{{ helper.structural_entity_link(part.category) }}</span>
42-
</h6>
43-
<h6><i class="fas fa-shapes fa-fw"></i>
55+
</dd>
56+
</div>
57+
58+
<div>
59+
<dt class="d-inline-block">
60+
<span class="visually-hidden">{% trans %}part.part_lots.label{% endtrans %}</span>
61+
<i class="fas fa-shapes fa-fw"></i>
62+
</dt>
63+
<dd class="d-inline">
4464
<span class="{% if part.notEnoughInstock and not part.amountUnknown %}text-danger font-weight-bold{% else %}text-muted{% endif %}">
45-
{% if not part.amountUnknown %}
46-
{# For known instock we can just show the label as normal #}
47-
<span title="{% trans %}instock.label{% endtrans %}">{{ part.amountSum | format_amount(part.partUnit) }}</span>
65+
{% if not part.amountUnknown %}
66+
{# For known instock we can just show the label as normal #}
67+
<span title="{% trans %}instock.label{% endtrans %}">{{ part.amountSum | format_amount(part.partUnit) }}</span>
68+
{% else %}
69+
{% if part.amountSum == 0.0 %}
70+
<b title="{% trans %}part_lots.instock_unknown{% endtrans %}">?</b>
4871
{% else %}
49-
{% if part.amountSum == 0.0 %}
50-
<b title="{% trans %}part_lots.instock_unknown{% endtrans %}">?</b>
51-
{% else %}
52-
<span title="{% trans %}part_lots.instock_unknown{% endtrans %}">≥{{ part.amountSum | format_amount(part.partUnit) }}</span>
53-
{% endif %}
54-
{% endif %}
55-
{% if part.expiredAmountSum > 0 %}
56-
<span title="{% trans %}part_lots.is_expired{% endtrans %}" class="text-muted">(+{{ part.expiredAmountSum }})</span>
72+
<span title="{% trans %}part_lots.instock_unknown{% endtrans %}">≥{{ part.amountSum | format_amount(part.partUnit) }}</span>
5773
{% endif %}
58-
/
59-
<span title="{% trans %}mininstock.label{% endtrans %}">{{ part.minAmount | format_amount(part.partUnit) }}</span>
60-
</span>
61-
{% if part.notEnoughInstock %}
62-
<span class="badge badge-warning bg-warning rounded-pill"><i class="fa-solid fa-less-than-equal"></i>&nbsp;{% trans %}part.info.amount.less_than_desired{% endtrans %}</span>
6374
{% endif %}
64-
</h6>
65-
<h6 class="">
75+
{% if part.expiredAmountSum > 0 %}
76+
<span title="{% trans %}part_lots.is_expired{% endtrans %}" class="text-muted">(+{{ part.expiredAmountSum }})</span>
77+
{% endif %}
78+
/
79+
<span title="{% trans %}mininstock.label{% endtrans %}">{{ part.minAmount | format_amount(part.partUnit) }}</span>
80+
</span>
81+
{% if part.notEnoughInstock %}
82+
<span class="badge badge-warning bg-warning rounded-pill"><i class="fa-solid fa-less-than-equal"></i>&nbsp;{% trans %}part.info.amount.less_than_desired{% endtrans %}</span>
83+
{% endif %}
84+
</dd>
85+
</div>
86+
87+
<div>
88+
<dt class="d-inline-block">
89+
<span class="visually-hidden">{% trans %}footprint.label{% endtrans %}</span>
6690
<i class="fas fa-microchip fa-fw" title="{% trans %}footprint.label{% endtrans %}"></i>
91+
</dt>
92+
<dd class="d-inline">
6793
<span class="text-muted">{{ helper.structural_entity_link(part.footprint) }}</span>
68-
</h6>
94+
</dd>
95+
</div>
6996

70-
{% set min_order_amount = pricedetail_helper.minOrderAmount(part) %}
71-
{% set max_order_amount = pricedetail_helper.maxDiscountAmount(part) %}
72-
{% set max_order_price = pricedetail_helper.calculateAvgPrice(part, max_order_amount, app.user.currency ?? null) %}
73-
{% set min_order_price = pricedetail_helper.calculateAvgPrice(part, min_order_amount, app.user.currency ?? null ) %}
74-
{% if max_order_price is not null %}
75-
<h6>
97+
{% set min_order_amount = pricedetail_helper.minOrderAmount(part) %}
98+
{% set max_order_amount = pricedetail_helper.maxDiscountAmount(part) %}
99+
{% set max_order_price = pricedetail_helper.calculateAvgPrice(part, max_order_amount, app.user.currency ?? null) %}
100+
{% set min_order_price = pricedetail_helper.calculateAvgPrice(part, min_order_amount, app.user.currency ?? null ) %}
101+
{% if max_order_price is not null %}
102+
<div>
103+
<dt class="d-inline-block">
76104
<i class="fas fa-money-bill-alt fa-fw"></i>
105+
</dt>
106+
<dd class="d-inline">
77107
<span class="text-muted">
78108
<span title="{% trans %}part.avg_price.label{% endtrans %} {{ max_order_amount | format_amount(part.partUnit) }}">{{ max_order_price | format_money(app.user.currency ?? null) }}</span>
79109
{% if min_order_price is not null and min_order_amount < max_order_amount %}
80110
<span> - </span>
81111
<span title="{% trans %}part.avg_price.label{% endtrans %} {{ min_order_amount | format_amount(part.partUnit) }}">{% if max_order_price is not null %}{{ min_order_price | format_money(app.user.currency ?? null) }}{% else %}???{% endif %}</span>
82112
{% endif %}
83-
</span>
84-
</h6>
85-
{% endif %}
86-
{#
87-
{% if part.comment != "" %}
88-
<h6 title="{% trans %}comment.label{% endtrans %}">
89-
<i class="fas fa-comment-alt fa-fw"></i>
90-
<div class="d-inline-flex">
91-
<span class="text-muted">{{ part.comment|nl2br }}</span>
92-
</div>
93-
</h6>
94-
{% endif %} #}
95-
</div>
96-
</div>
113+
</span>
114+
</dd>
115+
</div>
116+
{% endif %}
117+
118+
{# {% if part.comment != "" %}
119+
<div>
120+
<dt class="d-inline-block">
121+
<span class="visually-hidden">{% trans %}comment.label{% endtrans %}</span>
122+
<i class="fas fa-comment-alt fa-fw" title="{% trans %}comment.label{% endtrans %}"></i>
123+
</dt>
124+
<dd class="d-inline">
125+
<span class="text-muted">>{{ part.comment|nl2br }}</span>
126+
</dd>
127+
</div>
128+
{% endif %} #}
129+
</dl>
130+

0 commit comments

Comments
 (0)