aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account/my-account-video-playlists
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account/my-account-video-playlists')
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html9
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss12
2 files changed, 10 insertions, 11 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index 3176bb8da..afcf6a084 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -1,11 +1,14 @@
1<h1 class="d-flex justify-content-between"> 1<h1>
2 <span> 2 <span>
3 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> 3 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span> 4 <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
5 </span> 5 </span>
6</h1>
6 7
8<div class="video-playlists-header d-flex justify-content-between">
7 <div class="has-feedback has-clear"> 9 <div class="has-feedback has-clear">
8 <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> 10 <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch"
11 (ngModelChange)="onVideoPlaylistSearchChanged()" />
9 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a> 12 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
10 <span class="sr-only" i18n>Clear filters</span> 13 <span class="sr-only" i18n>Clear filters</span>
11 </div> 14 </div>
@@ -14,7 +17,7 @@
14 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> 17 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
15 <ng-container i18n>Create playlist</ng-container> 18 <ng-container i18n>Create playlist</ng-container>
16 </a> 19 </a>
17</h1> 20</div>
18 21
19<div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> 22<div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
20 <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> 23 <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
index ade28c70b..2b7c88246 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -37,6 +37,10 @@ input[type=text] {
37 } 37 }
38} 38}
39 39
40.video-playlists-header {
41 margin-bottom: 30px;
42}
43
40@media screen and (max-width: $small-view) { 44@media screen and (max-width: $small-view) {
41 .video-playlists-header { 45 .video-playlists-header {
42 text-align: center; 46 text-align: center;
@@ -62,14 +66,6 @@ input[type=text] {
62 } 66 }
63} 67}
64 68
65@media only screen and (min-width: $mobile-view) and (max-width: $small-view) {
66 .video-playlists-header {
67 input[type=text] {
68 width: 42% !important;
69 }
70 }
71}
72
73@media screen and (max-width: $mobile-view) { 69@media screen and (max-width: $mobile-view) {
74 .video-playlists-header { 70 .video-playlists-header {
75 flex-direction: column; 71 flex-direction: column;