diff options
Diffstat (limited to 'client/src/app/+videos/video-list')
-rw-r--r-- | client/src/app/+videos/video-list/overview/video-overview.component.html | 6 | ||||
-rw-r--r-- | client/src/app/+videos/video-list/overview/video-overview.component.scss | 61 |
2 files changed, 14 insertions, 53 deletions
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html index 1d5131092..20cbb239b 100644 --- a/client/src/app/+videos/video-list/overview/video-overview.component.html +++ b/client/src/app/+videos/video-list/overview/video-overview.component.html | |||
@@ -10,7 +10,7 @@ | |||
10 | 10 | ||
11 | <div class="section videos" *ngFor="let object of overview.categories"> | 11 | <div class="section videos" *ngFor="let object of overview.categories"> |
12 | <h1 class="section-title"> | 12 | <h1 class="section-title"> |
13 | <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> | 13 | <a class="link-orange" routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> |
14 | </h1> | 14 | </h1> |
15 | 15 | ||
16 | <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> | 16 | <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> |
@@ -21,7 +21,7 @@ | |||
21 | 21 | ||
22 | <div class="section videos" *ngFor="let object of overview.tags"> | 22 | <div class="section videos" *ngFor="let object of overview.tags"> |
23 | <h2 class="section-title"> | 23 | <h2 class="section-title"> |
24 | <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> | 24 | <a class="link-orange" routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> |
25 | </h2> | 25 | </h2> |
26 | 26 | ||
27 | <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> | 27 | <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> |
@@ -32,7 +32,7 @@ | |||
32 | 32 | ||
33 | <div class="section channel videos" *ngFor="let object of overview.channels"> | 33 | <div class="section channel videos" *ngFor="let object of overview.channels"> |
34 | <div class="section-title"> | 34 | <div class="section-title"> |
35 | <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]"> | 35 | <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]"> |
36 | <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar> | 36 | <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar> |
37 | 37 | ||
38 | <h2 class="section-title">{{ object.channel.displayName }}</h2> | 38 | <h2 class="section-title">{{ object.channel.displayName }}</h2> |
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss index 8b2aa88f2..5a789b66d 100644 --- a/client/src/app/+videos/video-list/overview/video-overview.component.scss +++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss | |||
@@ -13,7 +13,7 @@ | |||
13 | 13 | ||
14 | .section { | 14 | .section { |
15 | &:first-child { | 15 | &:first-child { |
16 | padding-top: 30px; | 16 | padding-top: 15px; |
17 | 17 | ||
18 | .section-title { | 18 | .section-title { |
19 | border-top: 0 !important; | 19 | border-top: 0 !important; |
@@ -22,66 +22,27 @@ | |||
22 | 22 | ||
23 | .section-title { | 23 | .section-title { |
24 | font-size: 24px; | 24 | font-size: 24px; |
25 | font-weight: $font-semibold; | 25 | padding-top: 20px; |
26 | padding-top: 15px; | 26 | margin-bottom: 30px; |
27 | margin-bottom: 15px; | ||
28 | display: flex; | ||
29 | justify-content: space-between; | ||
30 | 27 | ||
31 | &:not(h2) { | 28 | &:not(h2) { |
32 | border-top: 1px solid $separator-border-color; | 29 | border-top: 1px solid $separator-border-color; |
33 | } | 30 | } |
34 | 31 | ||
35 | a { | 32 | a > h2 { |
36 | color: pvar(--mainForegroundColor); | 33 | margin-bottom: 0; |
37 | 34 | display: inline-block; | |
38 | &:hover, | 35 | font-weight: $font-bold; |
39 | &:focus:not(.focus-visible), | ||
40 | &:active { | ||
41 | text-decoration: none; | ||
42 | outline: none; | ||
43 | } | ||
44 | } | 36 | } |
45 | } | ||
46 | |||
47 | &.channel { | ||
48 | .section-title { | ||
49 | a { | ||
50 | display: flex; | ||
51 | width: fit-content; | ||
52 | align-items: center; | ||
53 | |||
54 | my-actor-avatar { | ||
55 | @include margin-right(8px); | ||
56 | |||
57 | font-size: initial; | ||
58 | } | ||
59 | } | ||
60 | 37 | ||
61 | .followers { | 38 | my-actor-avatar { |
62 | @include margin-left(10px); | 39 | @include margin-right(8px); |
63 | 40 | ||
64 | color: pvar(--greyForegroundColor); | 41 | position: relative; |
65 | font-weight: normal; | 42 | top: -2px; |
66 | font-size: 14px; | ||
67 | position: relative; | ||
68 | top: 2px; | ||
69 | } | ||
70 | } | 43 | } |
71 | } | 44 | } |
72 | 45 | ||
73 | .show-more { | ||
74 | position: relative; | ||
75 | top: -5px; | ||
76 | display: inline-block; | ||
77 | font-size: 16px; | ||
78 | text-transform: uppercase; | ||
79 | color: pvar(--greyForegroundColor); | ||
80 | margin-bottom: 10px; | ||
81 | font-weight: $font-semibold; | ||
82 | text-decoration: none; | ||
83 | } | ||
84 | |||
85 | @media screen and (max-width: $mobile-view) { | 46 | @media screen and (max-width: $mobile-view) { |
86 | max-height: initial; | 47 | max-height: initial; |
87 | overflow: initial; | 48 | overflow: initial; |