Fixed adaptability on the solutions page. Issues Hexlet#1584

artengin · Jan 10, 2025 · 23dcb68 · 23dcb68
1 parent 2adcb0c
commit 23dcb68
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
@@ -36,6 +36,18 @@
     }
 }
 
+@media (max-width: 768px) {
+    .input-group .input-group-text {
+        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
+        width: 100%;
+    }
+    .input-group .form-control {
+        border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
+        margin: 0 !important;
+        width: 100%;
+    }
+}
+
 @media (max-width: 576px) {
     main.flex-grow-1 {
       margin-left: 16px;

diff --git a/resources/views/solution/index.blade.php b/resources/views/solution/index.blade.php
@@ -12,28 +12,28 @@
 
       <h1 class="h3">{{ __('views.solution.index.header.h1') }}</h1>
 
-      {{ html()->form('GET', route('solutions.index'))->class('my-3 row row-cols-lg-auto g-3 align-items-center')->open() }}
-        <div class="col">
+      {{ html()->form('GET', route('solutions.index'))->class('my-3 row g-3 align-items-center')->open() }}
+        <div class="col-6 col-sm-6 col-md-4 col-lg-4">
           <div class="input-group">
             <div class="input-group-text">{{ __('views.solution.index.filter.user') }}</div>
             {{ html()->text('filter[user.name]')
                      ->value(array_get($filter, 'user.name', null))
                      ->placeholder(__('views.solution.index.filter.user'))->class('form-control') }}
           </div>
         </div>
-        <div class="col">
+        <div class="col-6 col-sm-6 col-md-4 col-lg-4">
           <div class="input-group">
             <div class="input-group-text">{{ __('views.solution.index.filter.exercise') }}</div>
             {{ html()->select('filter[exercise_id]', $exerciseTitles)
                      ->value(array_get($filter, 'exercise_id', null))
                      ->placeholder(__('views.solution.index.filter.exercise'))->class('form-control') }}
           </div>
         </div>
-        <div class="col">
+        <div class="col-6 col-sm-3 col-md-2 col-lg-2 d-flex justify-content-center">
           {{ html()->submit(__('views.solution.index.filter.apply_button'))
                    ->class('btn btn-outline-primary') }}
         </div>
-        <div class="col">
+        <div class="col-6 col-sm-3 col-md-2 col-lg-2 d-flex justify-content-center">
           {{ html()->a(route('solutions.index'), __('views.solution.index.filter.reset_button'))
                    ->class('btn btn-outline-secondary ml-3') }}
         </div>