diff options
Diffstat (limited to 'client/src/app/+my-library/my-subscriptions')
-rw-r--r-- | client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html | 2 | ||||
-rw-r--r-- | client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss | 86 |
2 files changed, 39 insertions, 49 deletions
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html index 510b400c0..ff448ad87 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html | |||
@@ -6,7 +6,7 @@ | |||
6 | </span> | 6 | </span> |
7 | </h1> | 7 | </h1> |
8 | 8 | ||
9 | <div class="video-subscriptions-header d-flex justify-content-between"> | 9 | <div class="video-subscriptions-header"> |
10 | <div class="has-feedback has-clear"> | 10 | <div class="has-feedback has-clear"> |
11 | <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch" | 11 | <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch" |
12 | (ngModelChange)="onSubscriptionsSearchChanged()" /> | 12 | (ngModelChange)="onSubscriptionsSearchChanged()" /> |
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss index 9fc8be86c..3c1a4d2ad 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss | |||
@@ -13,36 +13,36 @@ input[type=text] { | |||
13 | 13 | ||
14 | margin-right: 10px; | 14 | margin-right: 10px; |
15 | } | 15 | } |
16 | } | ||
16 | 17 | ||
17 | .video-channel-info { | 18 | .video-channel-info { |
18 | flex-grow: 1; | 19 | flex-grow: 1; |
19 | 20 | ||
20 | a.video-channel-names { | 21 | a.video-channel-names { |
21 | @include disable-default-a-behaviour; | 22 | @include disable-default-a-behaviour; |
22 | 23 | ||
23 | width: fit-content; | 24 | width: fit-content; |
24 | display: flex; | 25 | display: flex; |
25 | align-items: baseline; | 26 | align-items: baseline; |
26 | color: pvar(--mainForegroundColor); | 27 | color: pvar(--mainForegroundColor); |
27 | 28 | ||
28 | .video-channel-display-name { | 29 | .video-channel-display-name { |
29 | font-weight: $font-semibold; | 30 | font-weight: $font-semibold; |
30 | font-size: 18px; | 31 | font-size: 18px; |
31 | } | 32 | } |
32 | 33 | ||
33 | .video-channel-name { | 34 | .video-channel-name { |
34 | font-size: 14px; | 35 | font-size: 14px; |
35 | color: $grey-actor-name; | 36 | color: $grey-actor-name; |
36 | margin-left: 5px; | 37 | margin-left: 5px; |
37 | } | ||
38 | } | 38 | } |
39 | } | 39 | } |
40 | } | ||
40 | 41 | ||
41 | .actor-owner { | 42 | .actor-owner { |
42 | @include actor-owner; | 43 | @include actor-owner; |
43 | 44 | ||
44 | margin-top: 0; | 45 | margin-top: 0; |
45 | } | ||
46 | } | 46 | } |
47 | 47 | ||
48 | .video-subscriptions-header { | 48 | .video-subscriptions-header { |
@@ -50,32 +50,22 @@ input[type=text] { | |||
50 | } | 50 | } |
51 | 51 | ||
52 | @media screen and (max-width: $small-view) { | 52 | @media screen and (max-width: $small-view) { |
53 | .video-channel { | 53 | .video-subscriptions-header input[type=text] { |
54 | .video-channel-info { | 54 | width: 100% !important; |
55 | padding-bottom: 10px; | ||
56 | text-align: center; | ||
57 | |||
58 | .video-channel-names { | ||
59 | flex-direction: column; | ||
60 | align-items: center !important; | ||
61 | margin: auto; | ||
62 | } | ||
63 | } | ||
64 | |||
65 | img { | ||
66 | margin-right: 0; | ||
67 | } | ||
68 | } | 55 | } |
69 | } | ||
70 | 56 | ||
71 | @media screen and (max-width: $mobile-view) { | 57 | .video-channel-info { |
72 | .video-subscriptions-header { | 58 | padding-bottom: 10px; |
73 | flex-direction: column; | 59 | text-align: center; |
74 | 60 | ||
75 | input[type=text] { | 61 | .video-channel-names { |
76 | width: 100% !important; | 62 | flex-direction: column; |
63 | align-items: center !important; | ||
64 | margin: auto; | ||
77 | } | 65 | } |
78 | } | 66 | } |
79 | } | ||
80 | |||
81 | 67 | ||
68 | img { | ||
69 | margin-right: 0; | ||
70 | } | ||
71 | } | ||