itube-specs 0.0.931 → 0.0.934
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.
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
<!-- Ряд
|
|
2
|
-
|
|
1
|
+
<!-- Ряд микро-плашек-ссылок для карточек. Мобила — боковой скролл с затемнением того края, за
|
|
2
|
+
которым осталось неувиденное. Десктоп — перенос, обрезанный по первой строке, и кнопка «+N»,
|
|
3
|
+
открывающая панель с непоместившимися; скрытые плашки остаются в разметке для краулера.
|
|
4
|
+
Переполнение считает JS после отрисовки: CSS такого признака не даёт, если ряд не прокручивается,
|
|
5
|
+
поэтому «+N» появляется не сразу, а вместе с гидрацией карточки — это осознанная плата.
|
|
3
6
|
Не путать с UiExpandRow — тот про любые размеры чипсов и разворачивается вниз на месте. -->
|
|
4
7
|
<template>
|
|
5
8
|
<div
|
|
@@ -29,7 +32,7 @@
|
|
|
29
32
|
class="ui-chips-micro__more"
|
|
30
33
|
type="button"
|
|
31
34
|
@click="open = !open"
|
|
32
|
-
|
|
35
|
+
>+{{ hiddenTags.length }}</button>
|
|
33
36
|
<div
|
|
34
37
|
v-if="open"
|
|
35
38
|
class="ui-chips-micro__popover"
|
|
@@ -151,7 +154,9 @@ onClickOutside(rootRef, () => {
|
|
|
151
154
|
|
|
152
155
|
<style lang="scss">
|
|
153
156
|
$fade-width: 40px;
|
|
154
|
-
|
|
157
|
+
|
|
158
|
+
// Ширина кнопки «+N» под ограничитель позиции: 20px паддингов плюс место на «+» и две цифры
|
|
159
|
+
$more-width: 44px;
|
|
155
160
|
|
|
156
161
|
@property --ui-chips-micro-fade-start {
|
|
157
162
|
syntax: '<length>';
|
|
@@ -203,12 +208,12 @@ $more-width: 32px;
|
|
|
203
208
|
scrollbar-width: none;
|
|
204
209
|
|
|
205
210
|
/* Десктоп: не скролл, а перенос, обрезанный по первой строке. Обрезка через overflow: hidden —
|
|
206
|
-
контейнер не прокручиваемый, колесо мыши не перехватывает.
|
|
211
|
+
контейнер не прокручиваемый, колесо мыши не перехватывает. Места под «+N» не резервируем:
|
|
212
|
+
паддинг сужал бы строку и сам гнал бы на перенос плашку, которая иначе влезала. */
|
|
207
213
|
@include from-br(sm) {
|
|
208
214
|
flex-wrap: wrap;
|
|
209
215
|
align-content: flex-start;
|
|
210
216
|
max-height: var(--chips-height-micro);
|
|
211
|
-
padding-right: $more-width;
|
|
212
217
|
overflow: hidden;
|
|
213
218
|
}
|
|
214
219
|
|
|
@@ -226,7 +231,10 @@ $more-width: 32px;
|
|
|
226
231
|
|
|
227
232
|
position: absolute;
|
|
228
233
|
inset-block: 0;
|
|
229
|
-
|
|
234
|
+
|
|
235
|
+
/* Кнопка встаёт в зазор после последней влезшей плашки. Зазор бывает уже кнопки — тогда
|
|
236
|
+
упираем её в правый край, край последней плашки уходит под неё. */
|
|
237
|
+
left: min(var(--ui-chips-micro-more-left, 0px), 100% - #{$more-width});
|
|
230
238
|
z-index: $z-index-dropdown;
|
|
231
239
|
display: grid;
|
|
232
240
|
place-content: center;
|