[PRAC/cont] Add "scroll" for clients/tbl

Organiz horizontal "scroll" at lower resolutions (not for full page).

Worth noting:
  - correction table styles, adaptation for @media queries.

core: B-3 / JS-BL

Author: matowdev

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

@@ -54,6 +54,21 @@
 
 /* media queries, any-hover */
 
+@media (max-width: 320px) {
+  .crm__add-btn {
+    padding: 8px 20px;
+    padding-left: 40px;
+    min-width: 150px;
+    font-size: 13px;
+  }
+
+  .crm__add-btn-icon {
+    top: 6px;
+    left: 18px;
+    font-size: 16px;
+  }
+}
+
 @media (any-hover: hover) {
   .crm__add-btn:hover:not(:active) {
     color: var(--white);

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

@@ -37,6 +37,10 @@
   color: var(--gray);
 }
 
+.crm__output-table-wrap {
+  padding: 3px;
+}
+
 .crm__output-table {
   margin-bottom: 0;
   border-collapse: collapse;
@@ -45,37 +49,12 @@
   font-family: var(--open-sans), sans-serif;
   font-weight: var(--regular);
   background-color: var(--white);
-}
-
-.crm__output-table thead {
-  display: table;
-  width: 100%;
   table-layout: fixed;
 }
 
-.crm__output-table thead tr {
-  display: table-row;
-  width: 100%;
-}
-
-.crm__output-table thead th {
-  text-align: left;
-}
-
 .crm__output-table tbody {
   display: table;
-  width: 100%;
-}
-
-.crm__output-table tbody tr {
-  display: table-row;
-  width: 100%;
-  table-layout: fixed;
-}
-
-.crm__output-table tbody td {
-  width: auto;
-  text-align: left;
+  width: 1180px;
 }
 
 .crm__output-table tr th {
@@ -137,7 +116,7 @@
 }
 
 .crm__output-table #table-th-contact,
-.crm__output-table .crm__output-table #table-th-contact {
+.crm__output-table .crm__output-table-body-cell_contacts {
   width: 130px;
 }
 
@@ -319,7 +298,6 @@
 .crm__output-table-body-cell_actions-btn-edit,
 .crm__output-table-body-cell_actions-btn-delete {
   display: flex;
-  /* justify-content: flex-end; */
   align-items: center;
   position: relative;
   padding: 2px 2px 0;
@@ -379,29 +357,64 @@
 
 /* media queries, any-hover */
 
-@media (max-width: 992px) {
+@media (max-width: 1024px) {
+  .crm__output-container {
+    padding-right: 45px;
+    padding-left: 45px;
+  }
+}
+
+@media (max-width: 768px) {
+  .crm__output-container {
+    padding-right: 25px;
+    padding-left: 25px;
+  }
+}
+
+@media (max-width: 320px) {
+  .crm__output-data {
+    margin-bottom: 25px;
+  }
+
+  .crm__output-container {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+
   .crm__output-title-wrap {
-    margin-bottom: 7px;
+    margin-bottom: 2px;
+    justify-content: center;
+  }
+
+  .crm__output-title {
+    font-size: 22px;
+  }
+
+  .crm__output-title-hash {
+    font-size: 28px;
+    line-height: 40px;
   }
 
-  .crm__output-table #table-th-id {
-    width: 75px;
+  .crm__output-table {
+    height: 354px;
   }
 
-  .crm__output-table #table-th-fio {
-    width: 280px;
+  .crm__output-table-head {
+    font-size: 11px;
+    line-height: 12px;
   }
 
-  .crm__output-table #table-th-dt {
-    width: 180px;
+  .crm__output-table-body {
+    font-size: 13px;
   }
 
-  .crm__output-table #table-th-change {
-    width: 180px;
+  .crm__output-table-body-cell_id {
+    font-size: 13px;
   }
 
-  .crm__output-table #table-th-contact {
-    width: 190px;
+  .crm__output-table-body-cell_actions-btn-edit,
+  .crm__output-table-body-cell_actions-btn-delete {
+    font-size: 13px;
   }
 }
 

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

@@ -31,7 +31,7 @@
       const searchLogo = document.querySelector('#search-logo');
 
       if (isSmallWidth && searchLogo && !searchLogo._tippy) {
-        initTippy('#search-logo', 'Показать/скрыть..!?', 'top', {
+        initTippy('#search-logo', 'Показать/скрыть', 'top', {
           offset: [0, 8],
         });
       } else if (!isSmallWidth && searchLogo && searchLogo._tippy) {

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

@@ -54,6 +54,7 @@
   const outputTitleWrap = document.createElement('div');
   const outputTitleHash = document.createElement('span');
   const outputTitle = document.createElement('h2');
+  const outputTableWrap = document.createElement('div');
   const outputTable = document.createElement('table');
   const outTableHead = document.createElement('thead');
   const outTableBody = document.createElement('tbody');
@@ -85,6 +86,7 @@
   outputTitleWrap.classList.add('crm__output-title-wrap');
   outputTitleHash.classList.add('crm__output-title-hash');
   outputTitle.classList.add('crm__output-title');
+  outputTableWrap.classList.add('crm__output-table-wrap', 'table-responsive');
   outputTable.classList.add('crm__output-table', 'table', 'table-hover');
   outTableHead.classList.add('crm__output-table-head');
   outTableBody.classList.add('crm__output-table-body');
@@ -225,7 +227,8 @@
   );
   outTableHead.append(outTblHeadTr);
   outputTable.append(outTableHead, outTableBody);
-  crmOutputContainer.append(outputTitleWrap, outputTable);
+  outputTableWrap.append(outputTable);
+  crmOutputContainer.append(outputTitleWrap, outputTableWrap);
 
   // ** появление/скрытие поля для ввода данных/фильтрационного инпута (по нажатию на logo, на 320px)
   searchLogoImg.addEventListener('click', () => {