Skip to content

Commit 7640489

Browse files
matowdevmatowdev
committed
[PRAC/cont] Add icons for tbl "head" cells
Organiz svg-arrows to further demonstrate the direction of data sorting. Worth noting: - using "common" css styles. core: B-3 / JS-BL
1 parent ebf8bd0 commit 7640489

File tree

2 files changed

+122
-13
lines changed

2 files changed

+122
-13
lines changed

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

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434

3535
.crm__output-table #table-th-id {
3636
width: 75px;
37+
font-weight: var(--semi-bold);
3738
color: var(--main-purple);
3839
}
3940

@@ -62,7 +63,36 @@
6263
outline: solid rgba(152, 115, 255, 0.5);
6364
}
6465

65-
.head-cell__icon-id {
66+
.head-cell__text {
67+
margin-right: 2px;
68+
}
69+
70+
.head-cell__icon {
6671
padding-right: 16px;
72+
background: url(../images/cell-arrow-down.svg) no-repeat 0px 1px / 17px;
73+
}
74+
75+
.head-cell__text-id {
76+
margin-right: 1px;
77+
}
78+
79+
.head-cell__icon-id {
6780
background: url(../images/cell-arrow-up.svg) no-repeat 0px 1px / 17px;
6881
}
82+
83+
.head-cell__icon-fio {
84+
margin-right: 2px;
85+
}
86+
87+
.head-cell__sort-fio {
88+
font-weight: var(--semi-bold);
89+
color: var(--main-purple);
90+
}
91+
92+
.icon-up {
93+
transform: rotate(0deg);
94+
}
95+
96+
.icon-down {
97+
transform: rotate(180deg);
98+
}

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

Lines changed: 91 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,25 +60,90 @@
6060
const outTblHeadThIdText = document.createElement('span');
6161
const outTblHeadThIdIcon = document.createElement('span');
6262
const outTblHeadThFIO = document.createElement('th');
63+
const outTblHeadThFIOWrap = document.createElement('div');
64+
const outTblHeadThFIOText = document.createElement('span');
65+
const outTblHeadThFIOIcon = document.createElement('span');
66+
const outTblHeadThFIOSort = document.createElement('span');
6367
const outTblHeadThCreationDT = document.createElement('th');
68+
const outTblHeadThDTWrap = document.createElement('div');
69+
const outTblHeadThDTText = document.createElement('span');
70+
const outTblHeadThDTIcon = document.createElement('span');
6471
const outTblHeadThChanges = document.createElement('th');
72+
const outTblHeadThChangeWrap = document.createElement('div');
73+
const outTblHeadThChangeText = document.createElement('span');
74+
const outTblHeadThChangeIcon = document.createElement('span');
6575
const outTblHeadThContacts = document.createElement('th');
76+
const outTblHeadThContactWrap = document.createElement('div');
77+
const outTblHeadThContactText = document.createElement('span');
6678
const outTblHeadThActions = document.createElement('th');
79+
const outTblHeadThActionWrap = document.createElement('div');
80+
const outTblHeadThActionText = document.createElement('span');
6781

6882
outputTitle.classList.add('crm__output-title');
6983
outputTable.classList.add('crm__output-table', 'table', 'table-hover');
7084
outTableHead.classList.add('crm__output-table-head');
7185
outTableBody.classList.add('crm__output-table-body');
7286
outTblHeadTr.classList.add('crm__o-table-head-row');
73-
outTblHeadThId.classList.add('head-cell', 'crm__o-table-head-cell');
87+
outTblHeadThId.classList.add(
88+
'head-cell',
89+
'head-cell-icon',
90+
'crm__o-table-head-cell'
91+
);
7492
outTblHeadThIdWrap.classList.add('head-cell__wrap', 'head-cell__wrap-id');
7593
outTblHeadThIdText.classList.add('head-cell__text', 'head-cell__text-id');
7694
outTblHeadThIdIcon.classList.add('head-cell__icon', 'head-cell__icon-id');
77-
outTblHeadThFIO.classList.add('crm__o-table-head-cell');
78-
outTblHeadThCreationDT.classList.add('crm__o-table-head-cell');
79-
outTblHeadThChanges.classList.add('crm__o-table-head-cell');
80-
outTblHeadThContacts.classList.add('crm__o-table-head-cell');
81-
outTblHeadThActions.classList.add('crm__o-table-head-cell');
95+
outTblHeadThFIO.classList.add(
96+
'head-cell',
97+
'head-cell-icon',
98+
'crm__o-table-head-cell'
99+
);
100+
outTblHeadThFIOWrap.classList.add('head-cell__wrap', 'head-cell__wrap-fio');
101+
outTblHeadThFIOText.classList.add('head-cell__text', 'head-cell__text-fio');
102+
outTblHeadThFIOIcon.classList.add('head-cell__icon', 'head-cell__icon-fio');
103+
outTblHeadThFIOSort.classList.add('head-cell__sort', 'head-cell__sort-fio');
104+
outTblHeadThCreationDT.classList.add(
105+
'head-cell',
106+
'head-cell-icon',
107+
'crm__o-table-head-cell'
108+
);
109+
outTblHeadThDTWrap.classList.add('head-cell__wrap', 'head-cell__wrap-dt');
110+
outTblHeadThDTText.classList.add('head-cell__text', 'head-cell__text-dt');
111+
outTblHeadThDTIcon.classList.add('head-cell__icon', 'head-cell__icon-dt');
112+
outTblHeadThChanges.classList.add(
113+
'head-cell',
114+
'head-cell-icon',
115+
'crm__o-table-head-cell'
116+
);
117+
outTblHeadThChangeWrap.classList.add(
118+
'head-cell__wrap',
119+
'head-cell__wrap-change'
120+
);
121+
outTblHeadThChangeText.classList.add(
122+
'head-cell__text',
123+
'head-cell__text-change'
124+
);
125+
outTblHeadThChangeIcon.classList.add(
126+
'head-cell__icon',
127+
'head-cell__icon-change'
128+
);
129+
outTblHeadThContacts.classList.add('head-cell', 'crm__o-table-head-cell');
130+
outTblHeadThContactWrap.classList.add(
131+
'head-cell__wrap',
132+
'head-cell__wrap-contact'
133+
);
134+
outTblHeadThContactText.classList.add(
135+
'head-cell__text',
136+
'head-cell__text-contact'
137+
);
138+
outTblHeadThActions.classList.add('head-cell', 'crm__o-table-head-cell');
139+
outTblHeadThActionWrap.classList.add(
140+
'head-cell__wrap',
141+
'head-cell__wrap-action'
142+
);
143+
outTblHeadThActionText.classList.add(
144+
'head-cell__text',
145+
'head-cell__text-action'
146+
);
82147

83148
outTblHeadThId.setAttribute('id', 'table-th-id');
84149
outTblHeadThId.setAttribute('tabindex', '0');
@@ -95,15 +160,29 @@
95160

96161
outputTitle.textContent = 'Клиенты';
97162
outTblHeadThIdText.textContent = 'ID';
98-
// outTblHeadThIdIcon.textContent = '+';
99-
outTblHeadThFIO.textContent = 'Фамилия Имя Отчество';
100-
outTblHeadThCreationDT.textContent = 'Дата и время создания';
101-
outTblHeadThChanges.textContent = 'Последние изменения';
102-
outTblHeadThContacts.textContent = 'Контакты';
103-
outTblHeadThActions.textContent = 'Действия';
163+
outTblHeadThFIOText.textContent = 'Фамилия Имя Отчество';
164+
outTblHeadThFIOSort.textContent = 'А-Я';
165+
outTblHeadThDTText.textContent = 'Дата и время создания';
166+
outTblHeadThChangeText.textContent = 'Последние изменения';
167+
outTblHeadThContactText.textContent = 'Контакты';
168+
outTblHeadThActionText.textContent = 'Действия';
104169

105170
outTblHeadThIdWrap.append(outTblHeadThIdText, outTblHeadThIdIcon);
171+
outTblHeadThFIOWrap.append(
172+
outTblHeadThFIOText,
173+
outTblHeadThFIOIcon,
174+
outTblHeadThFIOSort
175+
);
176+
outTblHeadThDTWrap.append(outTblHeadThDTText, outTblHeadThDTIcon);
177+
outTblHeadThChangeWrap.append(outTblHeadThChangeText, outTblHeadThChangeIcon);
178+
outTblHeadThContactWrap.append(outTblHeadThContactText);
179+
outTblHeadThActionWrap.append(outTblHeadThActionText);
106180
outTblHeadThId.append(outTblHeadThIdWrap);
181+
outTblHeadThFIO.append(outTblHeadThFIOWrap);
182+
outTblHeadThCreationDT.append(outTblHeadThDTWrap);
183+
outTblHeadThChanges.append(outTblHeadThChangeWrap);
184+
outTblHeadThContacts.append(outTblHeadThContactWrap);
185+
outTblHeadThActions.append(outTblHeadThActionWrap);
107186
outTblHeadTr.append(
108187
outTblHeadThId,
109188
outTblHeadThFIO,

0 commit comments

Comments
 (0)