[PRAC/cont] Add @media for "crm-search" element

Organizing adaptability on 992px and 320px, correcting positioning.

Worth noting:
  - logic (adding a class) for displaying/hiding data/input field (on 320px).

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-search.css

@@ -1,17 +1,16 @@
 .crm__search-data {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   row-gap: 20px;
   margin-bottom: 40px;
-  padding: 20px;
+  padding: 25px;
   background-color: var(--white);
   box-shadow: 0px 9.03px 27.09px 0px rgba(176, 190, 197, 0.32), 0px 3.386px 5.644px 0px rgba(176, 190, 197, 0.32);
 }
 
 .crm__search-logo-wrap {
   flex-shrink: 0;
-  margin-right: 53px;
+  margin-right: 55px;
 }
 
 .crm__search-form-input-wrap {
@@ -24,3 +23,37 @@
   min-height: 44px;
   caret-color: var(--main-purple);
 }
+
+/* media queries, any-hover */
+
+@media (max-width: 992px) {
+  .crm__search-logo-wrap {
+    margin-right: 25px;
+  }
+}
+
+@media (max-width: 320px) {
+  .crm__search-data {
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 10px;
+    padding: 10px;
+  }
+
+  .crm__search-logo-wrap {
+    margin-right: 0;
+  }
+
+  .crm__search-logo-img {
+    padding: 5px;
+    cursor: pointer;
+  }
+
+  .crm__search-form-input-wrap {
+    display: none;
+  }
+
+  .show-search-input .crm__search-form-input-wrap {
+    display: block;
+  }
+}

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -46,4 +46,13 @@
   searchForm.append(searchInputWrap);
   searchFormInputWrap.append(searchForm);
   crmSearch.append(searchLogoWrap, searchFormInputWrap);
+
+  // организация появления/скрытия поля для ввода данных/фильтрационного инпута (по нажатию на logo, на 320px)
+  document
+    .querySelector('.crm__search-logo-img')
+    .addEventListener('click', () => {
+      document
+        .querySelector('.crm__search-data')
+        .classList.toggle('show-search-input');
+    });
 })();