adaptive layout for mobiles

resources/views/products/index.blade.php

@@ -6,10 +6,13 @@
             <div class="col-xl-5 col-md-12">
                 <div class="mb-1">Всего найдено: {{ $products->total() }}</div>
                 Выбрано: <span id="count_selected">0</span>
-                <button class="btn btn-sm btn-primary mx-3 disabled" id="export-button" onclick="select_export()">Экспорт</button>
+                <button class="btn btn-sm btn-primary mx-2 disabled" id="export-button" onclick="select_export()">Экспорт</button>
                 <button class="btn btn-sm btn-primary" onclick="reset_selected()">Сбросить выбор</button>
+                <button class="d-md-none btn btn-sm ms-2 btn-light" type="button" data-bs-target="#searchForm" data-bs-toggle="collapse"
+                        aria-expanded="false" aria-controls="searchForm"
+                >Фильтр</button>
             </div>
-            <div class="col-xl-7 col-md-12">
+            <div class="col-xl-7 col-md-12 collapse d-md-block" id="searchForm">
                 <form class="" action="" method="get">
                     <div class="row my-2 justify-content-center">
                         <div class="col-6 col-sm-6 col-md-auto">
@@ -27,19 +30,19 @@
                                 @endforeach
                             </select>
                         </div>
-                        <div class="col-6 col-sm-6 col-md-auto mt-3 mt-md-0"">
+                        <div class="d-none d-md-block col-md-auto mt-3 mt-md-0">
                             <label class="form-label " for="price_min">Цена от</label>
                             <input class="form-control form-control-sm"
                                    value="{{ $s_price_min ?? '' }}"
                                    type="number" id="price_min" name="s_price_min">
                         </div>
-                        <div class="col-6 col-sm-6 col-md-auto mt-3 mt-md-0">
+                        <div class="d-none d-md-block col-md-auto mt-3 mt-md-0">
                             <label class="form-label" for="price_max">Цена до</label>
                             <input class="form-control form-control-sm"
                                    value="{{ $s_price_max ?? '' }}"
                                    type="number" id="price_max" name="s_price_max">
                         </div>
-                        <div class="col-6 col-sm-6 col-md-auto mt-3 mt-md-0"">
+                        <div class="d-none d-md-block col-md-auto -md-0">
                             <label class="form-label" for="perpage">На странице</label>
                             <select class="form-select form-select-sm" id="perpage" name="perpage">
                                 <option {{ (isset($perpage) && ($perpage == 20)) ? 'selected' : '' }} value="20">20
@@ -51,9 +54,9 @@
                                 </option>
                             </select>
                         </div>
-                        <div class="col-6 col-sm-6 col-md-auto mt-3 mt-md-0"">
-                            <button id="sb" class="btn btn-primary mt-4" type="submit">Поиск</button>
-                            <a href="{{ route('index') }}" class="btn btn-light mt-4 ms-1">Сброс</a>
+                        <div class="col-12 col-md-auto  mt-md-0 text-center">
+                            <button id="sb" class="btn btn-sm btn-primary mt-4" type="submit">Поиск</button>
+                            <a href="{{ route('index') }}" class="btn btn-sm btn-light mt-4 ms-1">Сброс</a>
                         </div>
                     </div>
                 </form>
@@ -82,19 +85,15 @@
                         <tr class="align-middle prod-tr">
                             <td class="text-center"><input type="checkbox" onchange="select_product({{ $product->id }}, this)" class="form-check-inline me-0 prd-chk" name="ids" value="{{ $product->id }}"></td>
                             <td class="text-center">
-                                <label>
+                                <a href="{{ route('view_product', $product->id) }}">
                                     {{ $product->article }}<br>
                                     {{ $product->series }}
 
-                                </label>
+                                </a>
                             </td>
 
                             <td class="d-none d-md-table-cell">{!! number_format($product->price, 2, ',', '&nbsp') !!}</td>
-                            <td class="d-none d-md-table-cell">
-                                <a href="{{ route('view_product', $product->id) }}">
-                                    {!! nl2br($product->characteristics) !!}
-                                </a>
-                            </td>
+                            <td class="d-none d-md-table-cell">{!! nl2br($product->characteristics) !!}</td>
                             <td class="d-none d-md-table-cell" title="{{ $product->tech_description }}" style="font-size: small">{!! Str::words(nl2br($product->tech_description), 22) !!}</td>
                             <td class="text-center align-middle">
                                 @empty($product->image_path)
@@ -125,7 +124,6 @@
     <form action="{{ route('select_export') }}" method="post" class="visually-hidden" id="select_export">
         @csrf
         <textarea name="ids" id="ids"></textarea>
-
     </form>
 
     <script>

resources/views/products/product.blade.php

@@ -121,17 +121,15 @@
                     </div>
                 </form>
             </div>
-
+            <hr class="my-4 d-sm-block d-md-none">
             <div class="col-sm-12 col-md-6">
-                <div class="col-12 text-end">
+                <div class="col-12 text-center text-md-end">
                     <button {{ $disabled }} class="btn btn-primary" onclick="document.getElementById('upload-image-form').click()">
                         Загрузить
                     </button>
-                    <br>
+                    <br><br>
                     <span class="notice">Изображение сохраниться в папку с изображениями товаров: stroyprofit.com/{{ env('IMAGES_PATH', 'fill-path') }}/<br>
                     Имя файла будет сформировано уникальное, в начале имени до точки будет артикул товара.</span>
-
-
                     <form action="{{ route('upload_image') }}" method="post" enctype="multipart/form-data"
                           class="visually-hidden" onchange="this.submit()">
                         @csrf
@@ -148,8 +146,8 @@
                         <img src="{{ '/' . env('IMAGES_PATH', '/fill_images_path_in_env') . '/' . $product->image_path }}"
                              alt="{{ $product->article }}" class="img-fluid" style="max-height: 40vh;">
                     </div>
-
                 @endempty
+
                 @if(count($images) > 1)
                     <div class="col-12 mt-3">
                         <div class="fs-5 mb-4">Найдены изображения с таким артикулом:</div>
@@ -171,8 +169,6 @@
                         </div>
                     </div>
                 @endif
-
-
             </div>
         </div>
     </div>