Responsive tweaks (#755)

* Change datatables markup to be responsive with BS5

* Responsive tweaks to single part info

config/packages/datatables.yaml

@@ -10,13 +10,12 @@ datatables:
     options:
         lengthMenu : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
         pageLength: '%partdb.table.default_page_size%'   # Set to -1 to disable pagination (i.e. show all rows) by default
-        #dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pif>>"
+        dom: "  <'row' <'col mb-2 input-group flex-nowrap' B l > <'col-auto mb-2' < p >>>
-        dom: "  <'row'<'col mb-2 input-group' B l> <'col mb-2' <'pull-end' p>>>
                     <'card'
                         rt
                         <'card-footer card-footer-table text-muted' i >
                     >
-                        <'row'<'col mt-2 input-group' B l> <'col mt-2' <'pull-right' p>>>"
+                <'row' <'col mt-2 input-group flex-nowrap' B l > <'col-auto mt-2' < p >>>"
         pagingType: 'simple_numbers'
         searching: true
         stateSave: true

templates/parts/info/_main_infos.html.twig

@@ -1,11 +1,7 @@
 {% import "helper.twig" as helper %}
 
-<div class="row">
+{% if part.manufacturer or part.manufacturerProductUrl or part.manufacturerProductNumber %}
-    <div class="col-md-3 col-lg-4 col-3 mt-auto mb-auto">
+<h5 class="text-muted pt-2" title="{% trans %}manufacturer.label{% endtrans %}">
-        {% include "parts/info/_picture.html.twig" %}
-    </div>
-    <div class="col-md-9 col-lg-8 col-7">
-        <h5 class="text-muted pt-2" title="{% trans %}manufacturer.label{% endtrans %}">
     {% if part.manufacturer %}
         {% if part.manufacturer.id is not null %}
             <a href="{{ entity_url(part.manufacturer, 'list_parts') }}">{{ part.manufacturer.name}}</a>
@@ -23,24 +19,48 @@
                 {% endif %}
             </a>
         </small>
-            {% else %}
+    {% elseif part.manufacturerProductNumber %}
         <small>{{ part.manufacturerProductNumber }}</small>
     {% endif %}
-        </h5>
+</h5>
-        <h3 class="w-fit" title="{% trans %}name.label{% endtrans %}">{{ part.name }}
+{% endif %}
+
+<h3 class="w-fit" title="{% trans %}name.label{% endtrans %}">
+    {{ part.name }}
     {# You need edit permission to use the edit button #}
     {% if timeTravel is not null %}
         <a href="{{ entity_url(part, 'info') }}"><i title="{% trans %}part.back_to_info{% endtrans %}" class="fas fa-fw fa-arrow-circle-left"></i></a>
     {% elseif is_granted('edit', part) %}
         <a href="{{ entity_url(part, 'edit') }}"><i class="fas fa-fw fa-sm fa-edit"></i></a>
     {% endif %}
-        </h3>
+</h3>
-        <h6 class="text-muted w-fit" title="{% trans %}description.label{% endtrans %}"><span>{{ part.description|format_markdown(true) }}</span></h6>
+
-        <h6 class="">
+<dl>
+    <div>
+        <dt>
+            <span class="visually-hidden">{% trans %}description.label{% endtrans %}</span>
+        </dt>
+        <dd class="d-inline">
+            <span class="text-muted w-fit" title="{% trans %}description.label{% endtrans %}">{{ part.description|format_markdown(true) }}</span>
+        </dd>
+    </div>
+
+    <div>
+        <dt class="d-inline-block">
+            <span class="visually-hidden">{% trans %}category.label{% endtrans %}</span>
             <i class="fas fa-tag fa-fw" title="{% trans %}category.label{% endtrans %}"></i>
+        </dt>
+        <dd class="d-inline">
             <span class="text-muted">{{ helper.structural_entity_link(part.category) }}</span>
-        </h6>
+        </dd>
-        <h6><i class="fas fa-shapes fa-fw"></i>
+    </div>
+
+    <div>
+        <dt class="d-inline-block">
+            <span class="visually-hidden">{% trans %}part.part_lots.label{% endtrans %}</span>
+            <i class="fas fa-shapes fa-fw"></i>
+        </dt>
+        <dd class="d-inline">
             <span class="{% if part.notEnoughInstock and not part.amountUnknown %}text-danger font-weight-bold{% else %}text-muted{% endif %}">
             {% if not part.amountUnknown %}
                 {# For known instock we can just show the label as normal #}
@@ -61,19 +81,29 @@
         {% if part.notEnoughInstock %}
             <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>
         {% endif %}
-        </h6>
+        </dd>
-        <h6 class="">
+    </div>
+
+    <div>
+        <dt class="d-inline-block">
+            <span class="visually-hidden">{% trans %}footprint.label{% endtrans %}</span>
             <i class="fas fa-microchip fa-fw" title="{% trans %}footprint.label{% endtrans %}"></i>
+        </dt>
+        <dd class="d-inline">
             <span class="text-muted">{{ helper.structural_entity_link(part.footprint) }}</span>
-        </h6>
+        </dd>
+    </div>
 
     {% set min_order_amount = pricedetail_helper.minOrderAmount(part) %}
     {% set max_order_amount = pricedetail_helper.maxDiscountAmount(part) %}
     {% set max_order_price = pricedetail_helper.calculateAvgPrice(part, max_order_amount, app.user.currency ?? null) %}
     {% set min_order_price = pricedetail_helper.calculateAvgPrice(part, min_order_amount, app.user.currency ?? null ) %}
     {% if max_order_price is not null %}
-            <h6>
+        <div>
+            <dt class="d-inline-block">
                 <i class="fas fa-money-bill-alt fa-fw"></i>
+            </dt>
+            <dd class="d-inline">
                 <span class="text-muted">
                     <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>
                     {% if min_order_price is not null and min_order_amount < max_order_amount %}
@@ -81,16 +111,20 @@
                         <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>
                     {% endif %}
                 </span>
-            </h6>
+            </dd>
+        </div>
     {% endif %}
-        {#
+
-        {% if part.comment != "" %}
+    {# {% if part.comment != "" %}
-            <h6 title="{% trans %}comment.label{% endtrans %}">
+        <div>
-                <i class="fas fa-comment-alt fa-fw"></i>
+            <dt class="d-inline-block">
-                <div class="d-inline-flex">
+                <span class="visually-hidden">{% trans %}comment.label{% endtrans %}</span>
-                    <span class="text-muted">{{ part.comment|nl2br }}</span>
+                <i class="fas fa-comment-alt fa-fw" title="{% trans %}comment.label{% endtrans %}"></i>
+            </dt>
+            <dd class="d-inline">
+                <span class="text-muted">>{{ part.comment|nl2br }}</span>
+            </dd>
         </div>
-            </h6>
     {% endif %} #}
-    </div>
+</dl>
-</div>
+

templates/parts/info/show_part_info.html.twig

@@ -15,6 +15,7 @@
 {% endblock %}
 
 {% block card_title %}
+    <span>
         <i class="fa {{ part.favorite ? 'fa-star' : 'fa-info-circle'}} fa-fw" aria-hidden="true"></i>
         {% trans %}part.info.title{% endtrans %} <b>"{{ part.name }}"</b>
         {% if timeTravel != null %}
@@ -23,24 +24,27 @@
         {% if part.projectBuildPart %}
             (<i>{{ entity_type_label(part.builtProject) }}</i>: <a class="text-white" href="{{ entity_url(part.builtProject) }}">{{ part.builtProject.name }}</a>)
         {% endif %}
-    <div class="float-end">
+    </span>
+    <span class="float-end">
         {% trans %}id.label{% endtrans %}: {{ part.id }} {% if part.ipn is not empty %}(<i>{{ part.ipn }}</i>){% endif %}
-    </div>
+    </span>
 {% endblock %}
 
 {% block card_content %}
     <div class="row">
-        <div class="col-md-9">
+        <div class="col col-md-3 mt-auto mb-auto">
+            {% include "parts/info/_picture.html.twig" %}
+        </div>
+
+        <div class="col-12 col-md-9 col-lg-6">
             {% include "parts/info/_main_infos.html.twig" %}
         </div>
 
-        <div class="col-md-3 offset-md-0 col-9 offset-3">
+        <div class="col offset-md-3 offset-lg-0">
             {% include "parts/info/_sidebar.html.twig" %}
         </div>
-
     </div>
 
-    <div class="">
     <div class="">
         <ul class="nav nav-tabs" id="partTab" role="tablist">
             <li class="nav-item">
@@ -184,5 +188,4 @@
             </div>
         </div>
     </div>
-    </div>
 {% endblock %}