[PRAC/cont] Add "hash" for output-title

Adding #/span for future resetting of clients tbl sorting.

Worth noting:
  - "tabindex" selections.

core: B-3 / JS-BL

Author: matowdev

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

@@ -7,12 +7,30 @@
   padding-left: 90px;
 }
 
+.crm__output-title-wrap {
+  display: flex;
+  align-items: center;
+  column-gap: 2px;
+  margin-bottom: 12px;
+}
+
 .crm__output-title {
-  margin-bottom: 15px;
   font-weight: var(--semi-bold);
   font-size: 28px;
 }
 
+.crm__output-title-hash {
+  font-weight: var(--semi-bold);
+  font-size: 32px;
+  line-height: 44px;
+  color: var(--main-purple);
+  cursor: pointer;
+}
+
+.crm__output-title-hash:focus-visible {
+  outline: solid rgba(152, 115, 255, 0.5);
+}
+
 .crm__output-table {
   margin-bottom: 0;
   min-height: 400px;
@@ -38,11 +56,11 @@
 }
 
 .crm__output-table .crm__o-table-head-cell {
-  padding-top: 5px;
-  padding-left: 20px;
+  padding: 8px 10px;
 }
 
 .crm__output-table #table-th-id {
+  padding-left: 20px;
   width: 70px;
   font-weight: var(--semi-bold);
   color: var(--main-purple);
@@ -53,22 +71,17 @@
 }
 
 .crm__output-table #table-th-dt {
-  width: 190px;
+  width: 195px;
 }
 
 .crm__output-table #table-th-change {
   width: 195px;
 }
 
 .crm__output-table #table-th-contact {
-  padding-right: 30px;
   width: 145px;
 }
 
-.crm__output-table #table-th-action {
-  /* padding-right: 20px; */
-}
-
 .crm__o-table-head-cell:focus-visible {
   outline: solid rgba(152, 115, 255, 0.5);
 }
@@ -105,7 +118,7 @@
 /* media queries, any-hover */
 
 @media (max-width: 992px) {
-  .crm__output-title {
+  .crm__output-title-wrap {
     margin-bottom: 7px;
   }
 
@@ -128,8 +141,4 @@
   .crm__output-table #table-th-contact {
     width: 190px;
   }
-
-  .crm__output-table #table-th-action {
-    padding-right: 20px;
-  }
 }

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

@@ -55,6 +55,8 @@
   crmSearchContainer.append(searchLogoWrap, searchFormInputWrap);
 
   // организация таблицы данных о клиентах (структура, заголовки колонок, иконки)
+  const outputTitleWrap = document.createElement('div');
+  const outputTitleHash = document.createElement('span');
   const outputTitle = document.createElement('h2');
   const outputTable = document.createElement('table');
   const outTableHead = document.createElement('thead');
@@ -84,6 +86,8 @@
   const outTblHeadThActionWrap = document.createElement('div');
   const outTblHeadThActionText = document.createElement('span');
 
+  outputTitleWrap.classList.add('crm__output-title-wrap');
+  outputTitleHash.classList.add('crm__output-title-hash');
   outputTitle.classList.add('crm__output-title');
   outputTable.classList.add('crm__output-table', 'table', 'table-hover');
   outTableHead.classList.add('crm__output-table-head');
@@ -163,6 +167,8 @@
     'head-cell__text-action'
   );
 
+  outputTitleHash.setAttribute('id', 'hash-tag-title');
+  outputTitleHash.setAttribute('tabindex', '0');
   outTblHeadThId.setAttribute('id', 'table-th-id');
   outTblHeadThId.setAttribute('tabindex', '0');
   outTblHeadThFIO.setAttribute('id', 'table-th-fio');
@@ -176,6 +182,7 @@
   outTblHeadThActions.setAttribute('id', 'table-th-action');
   outTblHeadThActions.setAttribute('tabindex', '0');
 
+  outputTitleHash.textContent = '#';
   outputTitle.textContent = 'Клиенты';
   outTblHeadThIdText.textContent = 'ID';
   outTblHeadThFIOText.textContent = 'Фамилия Имя Отчество';
@@ -185,6 +192,7 @@
   outTblHeadThContactText.textContent = 'Контакты';
   outTblHeadThActionText.textContent = 'Действия';
 
+  outputTitleWrap.append(outputTitleHash, outputTitle);
   outTblHeadThIdWrap.append(outTblHeadThIdText, outTblHeadThIdIcon);
   outTblHeadThFIOWrap.append(
     outTblHeadThFIOText,
@@ -211,7 +219,7 @@
   );
   outTableHead.append(outTblHeadTr);
   outputTable.append(outTableHead, outTableBody);
-  crmOutputContainer.append(outputTitle, outputTable);
+  crmOutputContainer.append(outputTitleWrap, outputTable);
 
   // основные блоки/составляющие элементы приложения
   crm.append(crmSearch, crmOutput, crmAdd);