diff options
Diffstat (limited to 'client/src/app/shared/shared-video-playlist')
5 files changed, 60 insertions, 73 deletions
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html index bd5d37196..6d787796a 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html | |||
@@ -30,12 +30,10 @@ | |||
30 | </div> | 30 | </div> |
31 | 31 | ||
32 | <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed"> | 32 | <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed"> |
33 | <div class="labels"> | 33 | <div class="header-label" i18n>Start at</div> |
34 | <div i18n>Start at</div> | 34 | <div class="header-label" i18n>Stop at</div> |
35 | <div i18n>Stop at</div> | ||
36 | </div> | ||
37 | 35 | ||
38 | <div *ngFor="let element of buildOptionalRowElements(playlist)"> | 36 | <ng-container *ngFor="let element of buildOptionalRowElements(playlist)"> |
39 | <my-peertube-checkbox | 37 | <my-peertube-checkbox |
40 | [inputName]="getOptionalInputName(playlist, element)" | 38 | [inputName]="getOptionalInputName(playlist, element)" |
41 | [ngModel]="element.enabled" [onPushWorkaround]="true" | 39 | [ngModel]="element.enabled" [onPushWorkaround]="true" |
@@ -55,7 +53,7 @@ | |||
55 | (inputBlur)="onElementTimestampUpdate(playlist, element)" | 53 | (inputBlur)="onElementTimestampUpdate(playlist, element)" |
56 | #stopAt | 54 | #stopAt |
57 | ></my-timestamp-input> | 55 | ></my-timestamp-input> |
58 | </div> | 56 | </ng-container> |
59 | </div> | 57 | </div> |
60 | </div> | 58 | </div> |
61 | </div> | 59 | </div> |
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss index 7db469d7c..de2f1032b 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss | |||
@@ -1,10 +1,6 @@ | |||
1 | @use '_variables' as *; | 1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
3 | 3 | ||
4 | $optional-rows-checkbox-width: 34px; | ||
5 | $timestamp-width: 50px; | ||
6 | $timestamp-margin-right: 10px; | ||
7 | |||
8 | .header, | 4 | .header, |
9 | .dropdown-item, | 5 | .dropdown-item, |
10 | .input-container { | 6 | .input-container { |
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px; | |||
52 | } | 48 | } |
53 | } | 49 | } |
54 | 50 | ||
55 | .primary-row, | 51 | .primary-row { |
56 | .optional-rows > div { | ||
57 | display: flex; | 52 | display: flex; |
58 | 53 | ||
59 | my-peertube-checkbox { | 54 | my-peertube-checkbox { |
60 | @include margin-right(10px); | 55 | @include margin-right(10px); |
56 | |||
61 | align-self: center; | 57 | align-self: center; |
62 | } | 58 | } |
63 | 59 | ||
@@ -84,41 +80,30 @@ $timestamp-margin-right: 10px; | |||
84 | height: 19px; | 80 | height: 19px; |
85 | } | 81 | } |
86 | } | 82 | } |
87 | |||
88 | my-timestamp-input { | ||
89 | @include margin-right($timestamp-margin-right); | ||
90 | |||
91 | ::ng-deep .ui-inputtext { | ||
92 | padding: 0; | ||
93 | width: $timestamp-width; | ||
94 | } | ||
95 | } | ||
96 | } | 83 | } |
97 | 84 | ||
98 | .optional-rows { | 85 | .optional-rows { |
99 | > div { | 86 | display: grid; |
100 | padding: 8px 5px 5px 10px; | 87 | grid-template-columns: 35px 80px 80px; |
101 | } | 88 | row-gap: 3px; |
89 | column-gap: 10px; | ||
90 | align-items: center; | ||
102 | 91 | ||
103 | my-peertube-checkbox { | 92 | my-peertube-checkbox { |
104 | @include margin-right(0 !important); | 93 | @include margin-left(auto); |
105 | |||
106 | display: block; | ||
107 | width: $optional-rows-checkbox-width; | ||
108 | } | 94 | } |
109 | 95 | ||
110 | .labels { | 96 | .header-label { |
111 | @include margin-left($optional-rows-checkbox-width); | ||
112 | |||
113 | font-size: 13px; | 97 | font-size: 13px; |
114 | color: pvar(--greyForegroundColor); | 98 | color: pvar(--greyForegroundColor); |
115 | padding-top: 5px; | 99 | padding-left: 2px; |
116 | padding-bottom: 0; | ||
117 | 100 | ||
118 | div { | 101 | &:nth-child(1) { |
119 | @include margin-right($timestamp-margin-right); | 102 | grid-column: 2; |
103 | } | ||
120 | 104 | ||
121 | width: $timestamp-width; | 105 | &:nth-child(2) { |
106 | grid-column: 3; | ||
122 | } | 107 | } |
123 | } | 108 | } |
124 | } | 109 | } |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html index 2400a4c25..f58d5f7f6 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html | |||
@@ -21,7 +21,7 @@ | |||
21 | [attr.title]="playlistElement.video.name" | 21 | [attr.title]="playlistElement.video.name" |
22 | >{{ playlistElement.video.name }}</a> | 22 | >{{ playlistElement.video.name }}</a> |
23 | 23 | ||
24 | <span *ngIf="isVideoPrivate()" class="badge badge-yellow">Private</span> | 24 | <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span> |
25 | </div> | 25 | </div> |
26 | 26 | ||
27 | <span class="video-miniature-created-at-views"> | 27 | <span class="video-miniature-created-at-views"> |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss index fbf67e892..e6b01d33d 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss | |||
@@ -75,41 +75,6 @@ my-video-thumbnail, | |||
75 | left: -2px; | 75 | left: -2px; |
76 | } | 76 | } |
77 | } | 77 | } |
78 | |||
79 | .video-info { | ||
80 | display: flex; | ||
81 | flex-direction: column; | ||
82 | align-self: flex-start; | ||
83 | min-width: 0; | ||
84 | |||
85 | .video-info-header { | ||
86 | display: flex; | ||
87 | align-items: baseline; | ||
88 | |||
89 | a { | ||
90 | width: auto; | ||
91 | padding-right: 5px; | ||
92 | } | ||
93 | |||
94 | .badge { | ||
95 | @include peertube-badge; | ||
96 | margin-right: 5px; | ||
97 | } | ||
98 | } | ||
99 | |||
100 | .video-info-account, | ||
101 | .video-info-timestamp { | ||
102 | color: pvar(--greyForegroundColor); | ||
103 | } | ||
104 | } | ||
105 | } | ||
106 | |||
107 | .video-info-name { | ||
108 | @include ellipsis; | ||
109 | |||
110 | font-size: 18px; | ||
111 | font-weight: $font-semibold; | ||
112 | display: inline-block; | ||
113 | } | 78 | } |
114 | 79 | ||
115 | .more, | 80 | .more, |
@@ -140,6 +105,45 @@ my-video-thumbnail, | |||
140 | } | 105 | } |
141 | } | 106 | } |
142 | 107 | ||
108 | .video-info-name { | ||
109 | @include ellipsis; | ||
110 | |||
111 | font-size: 18px; | ||
112 | font-weight: $font-semibold; | ||
113 | display: inline-block; | ||
114 | } | ||
115 | |||
116 | .video-info { | ||
117 | display: flex; | ||
118 | flex-direction: column; | ||
119 | align-self: flex-start; | ||
120 | min-width: 0; | ||
121 | |||
122 | .video-info-header { | ||
123 | display: flex; | ||
124 | align-items: baseline; | ||
125 | |||
126 | a { | ||
127 | width: auto; | ||
128 | padding-right: 5px; | ||
129 | } | ||
130 | |||
131 | .pt-badge { | ||
132 | @include margin-right(5px); | ||
133 | } | ||
134 | } | ||
135 | |||
136 | .video-info-account, | ||
137 | .video-info-timestamp { | ||
138 | color: pvar(--greyForegroundColor); | ||
139 | } | ||
140 | } | ||
141 | |||
142 | .video-info-account, | ||
143 | .video-miniature-created-at-views { | ||
144 | font-size: 14px; | ||
145 | } | ||
146 | |||
143 | .dropdown-menu { | 147 | .dropdown-menu { |
144 | 148 | ||
145 | .dropdown-item { | 149 | .dropdown-item { |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index 3956d9282..d43afad28 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss | |||
@@ -53,7 +53,7 @@ | |||
53 | 53 | ||
54 | .privacy-date { | 54 | .privacy-date { |
55 | margin-top: 5px; | 55 | margin-top: 5px; |
56 | font-size: 13px; | 56 | font-size: 14px; |
57 | 57 | ||
58 | .privacy { | 58 | .privacy { |
59 | font-weight: $font-semibold; | 59 | font-weight: $font-semibold; |