Improved mobile view for part edit and sidebar.

templates/Form/extendedBootstrap4_layout.html.twig

@@ -7,11 +7,11 @@
 
 
 {% block form_label_class -%}
-    col-3
+    col-sm-3
 {%- endblock form_label_class %}
 
 {% block form_group_class -%}
-    col-9
+    col-sm-9
 {%- endblock form_group_class %}
 
 {%- block choice_widget_options -%}

templates/Parts/edit/_orderdetails.html.twig

@@ -1,6 +1,6 @@
 {% form_theme form with ['Parts/edit/edit_form_styles.html.twig', "bootstrap_4_layout.html.twig"] %}
 
-<table class="table table-striped table-sm" id="orderdetails_table" data-prototype="{% if form.orderdetails.vars.prototype is defined %}{{ form_widget(form.orderdetails.vars.prototype)|e('html_attr') }}{% endif %}">
+<table class="table table-striped table-sm table-responsive-md" id="orderdetails_table" data-prototype="{% if form.orderdetails.vars.prototype is defined %}{{ form_widget(form.orderdetails.vars.prototype)|e('html_attr') }}{% endif %}">
     <tbody>
     {% for detail in form.orderdetails %}
         {{ form_widget(detail, {'disable_delete' : not is_granted('orderdetails.delete', part)}) }}

templates/Parts/info/_attachments_info.html.twig

@@ -1,6 +1,6 @@
 {% import "helper.twig" as helper %}
 
-<table class="table table-striped table-hover">
+<table class="table table-striped table-hover table-responsive-sm">
     <thead>
     <tr>
         <th></th>

templates/Parts/info/_extended_infos.html.twig

@@ -1,6 +1,6 @@
 {% import "helper.twig" as helper %}
 
-<table class="table table-striped table-hover table-sm w-100">
+<table class="table table-striped table-hover table-sm w-100 table-responsive-sm">
     <tbody>
     <tr> {# Creation date #}
         <td>{% trans %}createdAt{% endtrans %}</td>

templates/Parts/info/_main_infos.html.twig

@@ -1,10 +1,10 @@
 {% import "helper.twig" as helper %}
 
 <div class="row">
-    <div class="col-md-3 col-lg-4">
+    <div class="col-md-3 col-lg-4 col-3 mt-auto mb-auto">
         {% include "Parts/info/_picture.html.twig" %}
     </div>
-    <div class="col-md-9 col-lg-8">
+    <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 %}

templates/Parts/info/_order_infos.html.twig

@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="table table-striped table-header table-hover">
+    <table class="table table-striped table-header table-hover table-responsive-sm">
         <thead>
         <tr>
             <th>{% trans %}part.supplier.name{% endtrans %}</th>

templates/Parts/info/_part_lots.html.twig

@@ -1,13 +1,12 @@
 {% import "helper.twig" as helper %}
 
-<table class="table table-striped table-hover">
+<table class="table table-striped table-hover table-responsive-sm">
     <thead>
     <tr>
         <th>{% trans %}part_lots.description{% endtrans %}</th>
         <th>{% trans %}part_lots.storage_location{% endtrans %}</th>
         <th>{% trans %}part_lots.amount{% endtrans %}</th>
         <th></th> {# Tags row #}
-        <th></th>
     </tr>
     </thead>
 

templates/Parts/info/show_part_info.html.twig

@@ -19,7 +19,7 @@
             {% include "Parts/info/_main_infos.html.twig" %}
         </div>
 
-        <div class="col-md-3">
+        <div class="col-md-3 offset-3 offset-md-0">
             {% include "Parts/info/_sidebar.html.twig" %}
         </div>
 

templates/Users/_2fa_settings.html.twig

@@ -35,15 +35,15 @@
 
                 {{ form_start(google_form, { 'attr': google_form_attr}) }}
                 {% if not tfa_google.enabled %}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_google.disabled_message{% endtrans %}</h6>
                     </div>
 
-                    <div class="offset-3 row">
-                        <div class="col-3">
+                    <div class="offset-sm-3 row">
+                        <div class="col-sm-3">
                             <canvas class="qrcode" data-content="{{ tfa_google.qrContent }}"></canvas>
                         </div>
-                        <div class="col-9 my-auto">
+                        <div class="col-sm-9 my-auto">
                             <ol class="">
                                 <li>{% trans %}tfa_google.step.download{% endtrans %}</li>
                                 <li>{% trans %}tfa_google.step.scan{% endtrans %}</li>
@@ -53,7 +53,7 @@
                         </div>
                     </div>
 
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#manualSetupCollapse" aria-expanded="false" aria-controls="manualSetupCollapse">
                             {% trans %}tfa_google.manual_setup{% endtrans %}
                         </button>
@@ -70,7 +70,7 @@
 
                     {{ form_row(google_form.google_confirmation) }}
                 {% else %}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_google.enabled_message{% endtrans %}</h6>
                     </div>
                 {% endif %}
@@ -79,7 +79,7 @@
             </div>
             <div class="tab-pane fade" id="tfa-backup" role="tabpanel" aria-labelledby="backup-tab">
                 {% if user.backupCodes is empty %}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_backup.disabled{% endtrans %}</h6>
                         <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                     </div>
@@ -87,19 +87,19 @@
                     {% set backup_form_attr = { 'data-delete-form': true,
                         'data-title': 'tfa_backup.reset_codes.confirm_title' | trans, 'data-message': 'tfa_backup.reset_codes.confirm_message' | trans} %}
                     {{ form_start(backup_form, { 'attr': backup_form_attr}) }}
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <h6>{% trans %}tfa_backup.enabled{% endtrans %}</h6>
                         <span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
                     </div>
-                    <div class="offset-3 mt-2">
+                    <div class="offset-sm-3 mt-2">
                         <p class="mb-0"><b>{% trans %}tfa_backup.remaining_tokens{% endtrans %}:</b> {{ user.backupCodes | length }}</p>
                         <p><b>{% trans %}tfa_backup.generation_date{% endtrans %}:</b> {{ user.backupCodesGenerationDate | format_datetime }}</p>
                     </div>
-                    <div class="offset-3">
+                    <div class="offset-sm-3">
                         <a href="{{ url('show_backup_codes') }}" target="_blank" data-no-ajax class="btn btn-primary">{% trans %}tfa_backup.show_codes{% endtrans %}</a>
                     </div>
 
-                    <div class="offset-3 mt-2">
+                    <div class="offset-sm-3 mt-2">
                         {{ form_widget(backup_form.reset_codes) }}
                     </div>
                     {{ form_end(backup_form) }}

templates/Users/user_info.html.twig

@@ -8,8 +8,8 @@
 {% block card_content %}
     <div class="card-body row">
         <div class="col-md-2">
-            <div class="img-thumbnail">
-                <img class="img-fluid img-rounded" alt="User avatar" src="{{ avatar }}">
+            <div class="mx-auto">
+                <img class="img-fluid img-thumbnail img-rounded " alt="User avatar" src="{{ avatar }}">
             </div>
         </div>
         <div class="col-md-5">

templates/_sidebar.html.twig

@@ -29,7 +29,7 @@
 
         <div id="tree-categories" data-tree-search="#tree-category-search"></div>
     </li>
-    <li id="treeBox-devices">
+    <li id="treeBox-devices" class="d-sm-none d-md-block">
         <div class="input-group input-group-sm mb-2 mt-2">
             <div class="input-group-prepend">
                 <button class="btn btn-light dropdown-toggle" type="button"

templates/security/login.html.twig

@@ -61,6 +61,6 @@
     </form>
 
     {% if allow_email_pw_reset %}
-        <a class="offset-2" href="{{ url('pw_reset_request') }}">{% trans %}pw_reset.password_forget{% endtrans %}</a>
+        <a class="offset-sm-2" href="{{ url('pw_reset_request') }}">{% trans %}pw_reset.password_forget{% endtrans %}</a>
     {% endif %}
 {% endblock %}