itube-specs 0.0.965 → 0.0.967
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,11 +1,14 @@
|
|
|
1
1
|
<!-- Боковая колонка справа от плеера: реклама и блоки моделей ролика.
|
|
2
2
|
|
|
3
3
|
У каждой модели своя шапка со ссылкой и сетка её роликов 2×2 (см. PlayerAsideModels
|
|
4
|
-
и useFetchAsideModels). Реклама, если она включена на сайте, стоит
|
|
4
|
+
и useFetchAsideModels). Реклама, если она включена на сайте, стоит ПОД ними — в
|
|
5
5
|
макете её нет, но формат живёт именно в этой колонке.
|
|
6
6
|
|
|
7
7
|
Если моделей у ролика нет (и рекламы тоже), колонка не пустует: показываем пару
|
|
8
|
-
рекомендаций, как было до макета.
|
|
8
|
+
рекомендаций, как было до макета.
|
|
9
|
+
|
|
10
|
+
Высота колонки ограничена высотой плеера, лишнее уходит в прокрутку внутри неё —
|
|
11
|
+
см. комментарий к стилям. -->
|
|
9
12
|
<template>
|
|
10
13
|
<div
|
|
11
14
|
:class="[
|
|
@@ -13,26 +16,28 @@
|
|
|
13
16
|
]"
|
|
14
17
|
class="player-aside-videos _from-sd"
|
|
15
18
|
>
|
|
16
|
-
<
|
|
19
|
+
<div class="player-aside-videos__inner">
|
|
20
|
+
<PlayerAsideModels
|
|
21
|
+
v-for="item in models || []"
|
|
22
|
+
:key="`aside-model-${item.slug}`"
|
|
23
|
+
:title="item.title"
|
|
24
|
+
:slug="item.slug"
|
|
25
|
+
:info="item.info"
|
|
26
|
+
:videos="item.videos?.items"
|
|
27
|
+
class="player-aside-videos__model"
|
|
28
|
+
/>
|
|
17
29
|
|
|
18
|
-
|
|
19
|
-
v-for="item in models || []"
|
|
20
|
-
:key="`aside-model-${item.slug}`"
|
|
21
|
-
:title="item.title"
|
|
22
|
-
:slug="item.slug"
|
|
23
|
-
:info="item.info"
|
|
24
|
-
:videos="item.videos?.items"
|
|
25
|
-
class="player-aside-videos__model"
|
|
26
|
-
/>
|
|
30
|
+
<AdvNtv v-if="featureFlags.AdsNTVEnabled" />
|
|
27
31
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
<template v-if="!models?.length && !featureFlags.AdsNTVEnabled">
|
|
33
|
+
<CardVideo
|
|
34
|
+
v-for="item in asideVideos?.items?.slice(0, 2)"
|
|
35
|
+
:key="`aside-video-${item.guid}`"
|
|
36
|
+
:card="item"
|
|
37
|
+
mini
|
|
38
|
+
/>
|
|
39
|
+
</template>
|
|
40
|
+
</div>
|
|
36
41
|
</div>
|
|
37
42
|
</template>
|
|
38
43
|
|
|
@@ -56,16 +61,36 @@ defineProps<{
|
|
|
56
61
|
</script>
|
|
57
62
|
|
|
58
63
|
<style lang="scss">
|
|
64
|
+
/**
|
|
65
|
+
* Высоту колонке задаёт плеер, а не её содержимое: блоков моделей может быть
|
|
66
|
+
* больше, чем помещается рядом с роликом, и тогда колонка растягивала строку
|
|
67
|
+
* сетки — плеер с описанием уезжали вверх от остальной страницы. Поэтому сама
|
|
68
|
+
* колонка держит только рамку (её собственная высота для сетки — ноль), а всё
|
|
69
|
+
* содержимое лежит абсолютным слоем поверх и прокручивается внутри. Скроллбар
|
|
70
|
+
* общий, из base/_global.scss.
|
|
71
|
+
*/
|
|
59
72
|
.player-aside-videos {
|
|
60
73
|
@include from-br(sd) {
|
|
61
|
-
|
|
62
|
-
gap: 32px;
|
|
63
|
-
grid-template-columns: 1fr;
|
|
74
|
+
position: relative;
|
|
64
75
|
width: 288px;
|
|
65
|
-
height: 100%;
|
|
66
76
|
grid-column: 2;
|
|
67
77
|
grid-row: 1;
|
|
68
|
-
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.player-aside-videos__inner {
|
|
82
|
+
display: grid;
|
|
83
|
+
gap: 32px;
|
|
84
|
+
grid-template-columns: 1fr;
|
|
85
|
+
align-content: start;
|
|
86
|
+
|
|
87
|
+
@include from-br(sd) {
|
|
88
|
+
position: absolute;
|
|
89
|
+
inset: 0;
|
|
90
|
+
overflow-y: auto;
|
|
91
|
+
|
|
92
|
+
// полоса прокрутки не должна наезжать на карточки
|
|
93
|
+
padding-right: 4px;
|
|
69
94
|
}
|
|
70
95
|
}
|
|
71
96
|
</style>
|