Skip to content

Commit 8a52477

Browse files
matowdevmatowdev
committed
[PRAC/cont] Correct Html/DOM structure
Excluding one "main" container for app, adding for each crm element. Worth noting: - adjusting the styles according to the "container" changes. core: B-3 / JS-BL
1 parent c250d7b commit 8a52477

File tree

7 files changed

+57
-29
lines changed

7 files changed

+57
-29
lines changed

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
.crm__output-data {
2-
padding-right: var(--output-padding);
3-
padding-left: var(--output-padding);
2+
margin-bottom: 40px;
3+
}
4+
5+
.crm__output-container {
6+
padding-right: 90px;
7+
padding-left: 90px;
48
}
59

610
.crm__output-title {
7-
margin-bottom: 25px;
11+
margin-bottom: 15px;
812
font-weight: var(--semi-bold);
913
font-size: 28px;
1014
}
1115

1216
.crm__output-table {
17+
margin-bottom: 0;
1318
min-height: 400px;
1419
font-family: var(--open-sans), sans-serif;
1520
font-weight: var(--regular);
@@ -38,26 +43,26 @@
3843
}
3944

4045
.crm__output-table #table-th-id {
41-
width: 85px;
46+
width: 70px;
4247
font-weight: var(--semi-bold);
4348
color: var(--main-purple);
4449
}
4550

4651
.crm__output-table #table-th-fio {
47-
width: 400px;
52+
width: 355px;
4853
}
4954

5055
.crm__output-table #table-th-dt {
51-
width: 220px;
56+
width: 190px;
5257
}
5358

5459
.crm__output-table #table-th-change {
55-
width: 200px;
60+
width: 195px;
5661
}
5762

5863
.crm__output-table #table-th-contact {
5964
padding-right: 30px;
60-
/* width: 190px; */
65+
width: 145px;
6166
}
6267

6368
.crm__output-table #table-th-action {

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
.crm__search-data {
2-
display: flex;
3-
row-gap: 20px;
4-
margin-bottom: 40px;
5-
padding: 25px 25px 10px 25px;
2+
margin-bottom: 30px;
3+
padding-top: 25px;
4+
padding-bottom: 5px;
65
min-height: 105px;
76
background-color: var(--white);
87
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);
98
}
109

10+
.crm__search-container {
11+
display: flex;
12+
row-gap: 20px;
13+
padding-right: var(--container-padding);
14+
padding-left: var(--container-padding);
15+
}
16+
1117
.crm__search-logo-wrap {
1218
flex-shrink: 0;
1319
margin-right: 55px;
@@ -35,12 +41,18 @@
3541

3642
@media (max-width: 320px) {
3743
.crm__search-data {
44+
margin-bottom: 20px;
45+
padding-top: 10px;
46+
padding-bottom: 12px;
47+
min-height: auto;
48+
}
49+
50+
.crm__search-container {
3851
flex-wrap: wrap;
3952
justify-content: center;
4053
row-gap: 5px;
41-
margin-bottom: 20px;
42-
padding: 10px 10px 12px 10px;
43-
min-height: auto;
54+
padding-right: 10px;
55+
padding-left: 10px;
4456
}
4557

4658
.crm__search-logo-wrap {

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
.crm__title {
2+
margin-bottom: 16px;
3+
margin-left: 20px;
4+
padding-top: 10px;
5+
}
6+
17
.crm__search-form,
28
.crm__search-form input,
39
.crm__search-form input[type="text"] {

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,6 @@ svg {
6161
max-width: var(--page-max-width);
6262
}
6363

64-
.page__title {
65-
margin-bottom: 16px;
66-
padding-top: 10px;
67-
}
68-
6964
.visually-hidden {
7065
position: absolute;
7166
margin: -1px;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* sizes */
33
--page-min-width: 320px;
44
--page-max-width: 1366px;
5-
--output-padding: 90px;
5+
--container-padding: 25px;
66

77
/* fonts */
88
--open-sans: "Open Sans";

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,16 @@
2020
</head>
2121

2222
<body class="page">
23-
<div class="container page__container">
24-
<h1 class="page__title visually-hidden">Skillbus-CRM</h1>
25-
<div class="crm page__crm" id="crm">
26-
<div class="crm__search-data" id="crm-search"></div>
27-
<div class="crm__output-data" id="crm-output"></div>
28-
<div class="crm__add-data" id="crm-add"></div>
23+
<div class="crm page__crm" id="crm">
24+
<h1 class="crm__title visually-hidden">Skillbus-CRM</h1>
25+
<div class="crm__search-data" id="crm-search">
26+
<div class="crm__search-container container page__container"></div>
27+
</div>
28+
<div class="crm__output-data" id="crm-output">
29+
<div class="crm__output-container container page__container"></div>
30+
</div>
31+
<div class="crm__add-data" id="crm-add">
32+
<div class="crm__add-container container page__container"></div>
2933
</div>
3034
</div>
3135
</body>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
const crmSearch = document.getElementById('crm-search');
55
const crmOutput = document.getElementById('crm-output');
66
const crmAdd = document.getElementById('crm-add');
7+
const crmSearchContainer = document.querySelector('.crm__search-container');
8+
const crmOutputContainer = document.querySelector('.crm__output-container');
9+
const crmAddContainer = document.querySelector('.crm__add-container');
710

811
// организация поля для поиска клиентов (фильтрация данных)
912
const searchLogoWrap = document.createElement('div');
@@ -49,7 +52,7 @@
4952
searchInputWrap.append(searchInput, searchInputFeedback);
5053
searchForm.append(searchInputWrap);
5154
searchFormInputWrap.append(searchForm);
52-
crmSearch.append(searchLogoWrap, searchFormInputWrap);
55+
crmSearchContainer.append(searchLogoWrap, searchFormInputWrap);
5356

5457
// организация таблицы данных о клиентах (структура, заголовки колонок, иконки)
5558
const outputTitle = document.createElement('h2');
@@ -208,7 +211,10 @@
208211
);
209212
outTableHead.append(outTblHeadTr);
210213
outputTable.append(outTableHead, outTableBody);
211-
crmOutput.append(outputTitle, outputTable);
214+
crmOutputContainer.append(outputTitle, outputTable);
215+
216+
// основные блоки/составляющие элементы приложения
217+
crm.append(crmSearch, crmOutput, crmAdd);
212218

213219
// ** организация появления/скрытия поля для ввода данных/фильтрационного инпута (по нажатию на logo, на 320px)
214220
document

0 commit comments

Comments
 (0)