@formixru/b2b-ui 4.6.0 → 4.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/sidebar/index.js +16 -17
  3. package/src/components/sidebar/index.scss +60 -62
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formixru/b2b-ui",
3
- "version": "4.6.0",
3
+ "version": "4.6.1",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/sidebar/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { cssVar } from '@advdominion/css-var';
2
2
 
3
- import { mm } from '../../utils/mm.js';
4
3
  import { hide as hideLoader } from '../loader/index.js';
5
4
  import { disableScroll, enableScroll } from '../overlay/index.js';
6
5
  import { initRequestContent, request } from '../request/index.js';
@@ -16,6 +15,18 @@ for (const $b of $sidebars) {
16
15
  }
17
16
  }
18
17
 
18
+ const getSidebarWidth = ($b) => {
19
+ const width = $b.querySelector('.sidebar__wrapper').offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth;
20
+ return $b.classList.contains('sidebar_left') ? width * -1 : width;
21
+ };
22
+
23
+ const slideSidebar = ($b, frames, options) =>
24
+ Promise.all(
25
+ ['aside', 'wrapper'].map(
26
+ (elementName) => $b.querySelector(`.sidebar__${elementName}`).animate(frames, options).finished,
27
+ ),
28
+ );
29
+
19
30
  export const show = async ($b, showBackdrop = 'before') => {
20
31
  if (!$b?.hidden) {
21
32
  return;
@@ -32,16 +43,10 @@ export const show = async ($b, showBackdrop = 'before') => {
32
43
  }
33
44
  $b.hidden = false;
34
45
 
35
- let width = mm('tablet-landscape-up')
36
- ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
37
- : $b.offsetWidth;
38
- if ($b.classList.contains('sidebar_left')) {
39
- width = width * -1;
40
- }
41
- await $b.animate([{ transform: `translateX(${width}px)` }, { transform: 'translateX(0px)' }], {
46
+ await slideSidebar($b, [{ transform: `translateX(${getSidebarWidth($b)}px)` }, { transform: 'translateX(0px)' }], {
42
47
  duration: cssVar('--duration-enter-m'),
43
48
  easing: cssVar('--easing-deceleration'),
44
- }).finished;
49
+ });
45
50
 
46
51
  if (showBackdrop === 'after') {
47
52
  $b.classList.add('sidebar_backdrop');
@@ -62,16 +67,10 @@ export const hide = async ($b) => {
62
67
 
63
68
  $b.classList.remove('sidebar_backdrop');
64
69
 
65
- let width = mm('tablet-landscape-up')
66
- ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
67
- : $b.offsetWidth;
68
- if ($b.classList.contains('sidebar_left')) {
69
- width = width * -1;
70
- }
71
- await $b.animate([{ transform: 'translateX(0px)' }, { transform: `translateX(${width}px)` }], {
70
+ await slideSidebar($b, [{ transform: 'translateX(0px)' }, { transform: `translateX(${getSidebarWidth($b)}px)` }], {
72
71
  duration: cssVar('--duration-leave-m'),
73
72
  easing: cssVar('--easing-acceleration'),
74
- }).finished;
73
+ });
75
74
 
76
75
  $b.hidden = true;
77
76
  if ($b.id !== 'settings-generator') {
package/src/components/sidebar/index.scss CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  $b: '.sidebar';
4
4
 
5
+ $sidebarButtonSize: 56px;
6
+
5
7
  #{$b} {
6
8
  display: flex;
7
9
  height: calc(100% - var(--tab-bar-height));
@@ -27,17 +29,13 @@ $b: '.sidebar';
27
29
  }
28
30
 
29
31
  &_backdrop {
30
- @media (--tablet-landscape-up) {
31
- background-color: $sidebar-backdrop-color;
32
- }
32
+ background-color: $sidebar-backdrop-color;
33
33
 
34
34
  // Т. к. .loader исчезает постепенно, с таким же эффектом показываем оверлей, чтобы не было мерцания
35
35
  body:has(.loader_active) & {
36
- @media (--tablet-landscape-up) {
37
- transition-duration: var(--duration-leave-m);
38
- transition-property: background-color;
39
- transition-timing-function: var(--easing-standard);
40
- }
36
+ transition-duration: var(--duration-leave-m);
37
+ transition-property: background-color;
38
+ transition-timing-function: var(--easing-standard);
41
39
  }
42
40
  }
43
41
 
@@ -46,7 +44,7 @@ $b: '.sidebar';
46
44
  display: flex;
47
45
  flex-direction: column;
48
46
  position: absolute;
49
- right: 100%;
47
+ right: calc(100% - $sidebarButtonSize);
50
48
  top: 0;
51
49
 
52
50
  @media (--tablet-landscape-up) {
@@ -67,7 +65,7 @@ $b: '.sidebar';
67
65
 
68
66
  #{$b}_left & {
69
67
  align-items: flex-start;
70
- left: 100%;
68
+ left: calc(100% - $sidebarButtonSize);
71
69
  right: auto;
72
70
 
73
71
  @media (--tablet-landscape-up) {
@@ -93,12 +91,12 @@ $b: '.sidebar';
93
91
  background-color: $sidebar-disabled-button-bg;
94
92
  color: $sidebar-disabled-button-color;
95
93
  display: flex;
96
- height: 4px * 14;
94
+ height: $sidebarButtonSize;
97
95
  justify-content: center;
98
96
  transition-duration: var(--duration-micro-s);
99
97
  transition-property: background-color, color;
100
98
  transition-timing-function: var(--easing-standard);
101
- width: 4px * 14;
99
+ width: $sidebarButtonSize;
102
100
 
103
101
  #{$b}_catalog & {
104
102
  @media (--tablet-landscape-up) {
@@ -136,9 +134,9 @@ $b: '.sidebar';
136
134
  color: $sidebar-disabled-button-label-color;
137
135
  height: auto;
138
136
  justify-content: flex-start;
139
- min-height: 4px * 14;
140
- min-width: 4px * 28;
141
- padding: 4px * 4;
137
+ min-height: $sidebarButtonSize;
138
+ min-width: 112px;
139
+ padding: 16px;
142
140
  width: 100%;
143
141
 
144
142
  @include font($sidebar-button-label-font);
@@ -155,7 +153,7 @@ $b: '.sidebar';
155
153
 
156
154
  #{$b}_catalog & {
157
155
  @media (--tablet-landscape-up) {
158
- min-width: 4px * 56;
156
+ min-width: 224px;
159
157
  }
160
158
  }
161
159
  }
@@ -163,12 +161,12 @@ $b: '.sidebar';
163
161
 
164
162
  &__button-icon {
165
163
  fill: currentcolor;
166
- height: 4px * 6;
167
- width: 4px * 6;
164
+ height: 24px;
165
+ width: 24px;
168
166
 
169
167
  [data-sidebar-close] & {
170
- height: 4px * 5;
171
- width: 4px * 5;
168
+ height: 20px;
169
+ width: 20px;
172
170
  }
173
171
  }
174
172
 
@@ -185,7 +183,7 @@ $b: '.sidebar';
185
183
  height: 100%;
186
184
  overflow: auto;
187
185
  -webkit-overflow-scrolling: touch;
188
- width: calc(100% - 56px);
186
+ width: calc(100% - $sidebarButtonSize);
189
187
 
190
188
  @media (--tablet-landscape-up) {
191
189
  width: 320px;
@@ -205,7 +203,7 @@ $b: '.sidebar';
205
203
 
206
204
  #{$b}_catalog & {
207
205
  @media (--tablet-landscape-up) {
208
- height: calc(100% - (4px * 14 + 1px));
206
+ height: calc(100% - (56px + 1px));
209
207
  }
210
208
  }
211
209
  }
@@ -223,21 +221,21 @@ $b: '.sidebar';
223
221
  flex-direction: column;
224
222
  flex-shrink: 0;
225
223
  justify-content: center;
226
- margin-bottom: 4px * 4;
227
- min-height: 4px * 14;
228
- padding-bottom: 4px * 4;
229
- padding-left: 4px * 4;
230
- padding-right: 4px * 4;
231
- padding-top: 4px * 4 + 1px;
224
+ margin-bottom: 16px;
225
+ min-height: 56px;
226
+ padding-bottom: 16px;
227
+ padding-left: 16px;
228
+ padding-right: 16px;
229
+ padding-top: 16px + 1px;
232
230
 
233
231
  #{$b}_catalog & {
234
232
  @media (--tablet-landscape-up) {
235
233
  background-color: $sidebar-catalog-header-bg;
236
- left: -4px * 56;
234
+ left: -224px;
237
235
  margin-bottom: 0;
238
- padding-left: 4px * 2;
236
+ padding-left: 8px;
239
237
  position: relative;
240
- width: calc(100% + 4px * 56);
238
+ width: calc(100% + 224px);
241
239
  z-index: 1;
242
240
  }
243
241
  }
@@ -248,27 +246,27 @@ $b: '.sidebar';
248
246
  border: $sidebar-header-icon-border-width solid $sidebar-header-icon-border-color;
249
247
  border-radius: 50%;
250
248
  display: flex;
251
- height: 4px * 6;
249
+ height: 24px;
252
250
  justify-content: center;
253
251
  position: relative;
254
- width: 4px * 6;
252
+ width: 24px;
255
253
 
256
254
  @media (--tablet-landscape-up) {
257
255
  background-color: $sidebar-header-icon-bg;
258
256
  border-style: none;
259
- height: 4px * 12;
260
- width: 4px * 12;
257
+ height: 48px;
258
+ width: 48px;
261
259
  }
262
260
  }
263
261
 
264
262
  &__header-icon {
265
263
  fill: $sidebar-header-icon-color;
266
- height: 4px * 4;
267
- width: 4px * 4;
264
+ height: 16px;
265
+ width: 16px;
268
266
 
269
267
  @media (--tablet-landscape-up) {
270
- height: 4px * 6;
271
- width: 4px * 6;
268
+ height: 24px;
269
+ width: 24px;
272
270
  }
273
271
  }
274
272
 
@@ -279,7 +277,7 @@ $b: '.sidebar';
279
277
  @include font($sidebar-header-title-font);
280
278
 
281
279
  @media (--tablet-landscape-up) {
282
- margin-top: 4px * 2;
280
+ margin-top: 8px;
283
281
  }
284
282
  }
285
283
 
@@ -295,7 +293,7 @@ $b: '.sidebar';
295
293
  }
296
294
 
297
295
  &:not(:first-child) {
298
- margin-top: 4px * 2;
296
+ margin-top: 8px;
299
297
  }
300
298
 
301
299
  &:first-child:last-child {
@@ -315,7 +313,7 @@ $b: '.sidebar';
315
313
  }
316
314
 
317
315
  &:not(:first-child) {
318
- margin-top: 4px * 2;
316
+ margin-top: 8px;
319
317
  }
320
318
 
321
319
  &:first-child:last-child {
@@ -327,18 +325,18 @@ $b: '.sidebar';
327
325
  text-align: left;
328
326
 
329
327
  @media (--tablet-landscape-up) {
330
- margin-left: 4px * 2;
331
- margin-right: 4px * 2;
328
+ margin-left: 8px;
329
+ margin-right: 8px;
332
330
  }
333
331
  }
334
332
  }
335
333
 
336
334
  &__header-link {
337
- margin-top: 4px * 2;
335
+ margin-top: 8px;
338
336
 
339
337
  @media (--tablet-landscape-up) {
340
338
  flex-shrink: 0;
341
- margin-left: 4px * 2;
339
+ margin-left: 8px;
342
340
  margin-top: 0;
343
341
  }
344
342
  }
@@ -346,33 +344,33 @@ $b: '.sidebar';
346
344
  &__sub-title {
347
345
  background-color: $sidebar-sub-title-bg;
348
346
  color: $sidebar-sub-title-color;
349
- margin-bottom: 4px * 4;
350
- padding: 4px * 2 4px * 4;
347
+ margin-bottom: 16px;
348
+ padding: 8px 16px;
351
349
  text-align: center;
352
350
 
353
351
  @include font($sidebar-sub-title-font);
354
352
 
355
353
  #{$b}__header + & {
356
- margin-top: -4px * 4;
354
+ margin-top: -16px;
357
355
 
358
356
  @media (--tablet-landscape-up) {
359
- margin-top: -4px * 8;
357
+ margin-top: -32px;
360
358
  }
361
359
  }
362
360
  }
363
361
 
364
362
  &__specs {
365
363
  &:last-child {
366
- margin-bottom: 4px * 6;
364
+ margin-bottom: 24px;
367
365
  }
368
366
  }
369
367
 
370
368
  &__action-list {
371
- margin-top: 4px * 6;
372
- padding: 0 4px * 4;
369
+ margin-top: 24px;
370
+ padding: 0 16px;
373
371
 
374
372
  &:last-child {
375
- margin-bottom: 4px * 6;
373
+ margin-bottom: 24px;
376
374
  }
377
375
  }
378
376
 
@@ -380,13 +378,13 @@ $b: '.sidebar';
380
378
  width: 100%;
381
379
 
382
380
  &:not(:first-child) {
383
- margin-top: 4px * 4;
381
+ margin-top: 16px;
384
382
  }
385
383
  }
386
384
 
387
385
  &__descr {
388
386
  color: $sidebar-descr-color;
389
- margin-top: 4px * 2;
387
+ margin-top: 8px;
390
388
  width: 100%;
391
389
 
392
390
  @include font($sidebar-descr-font);
@@ -401,8 +399,8 @@ $b: '.sidebar';
401
399
  > svg {
402
400
  display: block;
403
401
  fill: $sidebar-descr-icon-color;
404
- height: 4px * 4;
405
- width: 4px * 4;
402
+ height: 16px;
403
+ width: 16px;
406
404
  }
407
405
  }
408
406
 
@@ -412,7 +410,7 @@ $b: '.sidebar';
412
410
 
413
411
  &__footer {
414
412
  flex-shrink: 0;
415
- margin-top: 4px * 4;
413
+ margin-top: 16px;
416
414
  }
417
415
 
418
416
  &__toggle-wrapper {
@@ -423,13 +421,13 @@ $b: '.sidebar';
423
421
  }
424
422
 
425
423
  &__toggle {
426
- margin-bottom: 4px * 2;
427
- margin-top: 4px * 4;
424
+ margin-bottom: 8px;
425
+ margin-top: 16px;
428
426
 
429
427
  @media (--tablet-landscape-up) {
430
428
  flex-shrink: 0;
431
429
  margin-bottom: 0;
432
- margin-left: 4px * 4;
430
+ margin-left: 16px;
433
431
  margin-top: 0;
434
432
  }
435
433
  }