aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorkimsible <kimsible@users.noreply.github.com>2020-08-03 13:55:48 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-03 16:52:40 +0200
commitd607fc24631808fc70ce9fb8ddc323d8f856f8ed (patch)
tree706429e5e375f3ec6bedf9b6369e90fa117b2eac /client
parentb12ce2b8511039968faabe5a9eeee60ab36521eb (diff)
downloadPeerTube-d607fc24631808fc70ce9fb8ddc323d8f856f8ed.tar.gz
PeerTube-d607fc24631808fc70ce9fb8ddc323d8f856f8ed.tar.zst
PeerTube-d607fc24631808fc70ce9fb8ddc323d8f856f8ed.zip
Fix regressions sub-menu titles on mobile-view
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html9
-rw-r--r--client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss15
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html9
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss18
-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
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html9
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss14
8 files changed, 67 insertions, 28 deletions
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
index f4ff32366..205d23cd5 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
@@ -1,12 +1,15 @@
1<h1 class="d-flex justify-content-between"> 1<h1>
2 <span> 2 <span>
3 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> 3 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My channels</ng-container> 4 <ng-container i18n>My channels</ng-container>
5 <span class="badge badge-secondary">{{ totalItems }}</span> 5 <span class="badge badge-secondary">{{ totalItems }}</span>
6 </span> 6 </span>
7</h1>
7 8
9<div class="video-channels-header d-flex justify-content-between">
8 <div class="has-feedback has-clear"> 10 <div class="has-feedback has-clear">
9 <input type="text" placeholder="Search your channels" i18n-placeholder [(ngModel)]="channelsSearch" (ngModelChange)="onChannelsSearchChanged()" /> 11 <input type="text" placeholder="Search your channels" i18n-placeholder [(ngModel)]="channelsSearch"
12 (ngModelChange)="onChannelsSearchChanged()" />
10 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a> 13 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
11 <span class="sr-only" i18n>Clear filters</span> 14 <span class="sr-only" i18n>Clear filters</span>
12 </div> 15 </div>
@@ -15,7 +18,7 @@
15 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> 18 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
16 <ng-container i18n>Create video channel</ng-container> 19 <ng-container i18n>Create video channel</ng-container>
17 </a> 20 </a>
18</h1> 21</div>
19 22
20<div class="video-channels"> 23<div class="video-channels">
21 <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel"> 24 <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss
index 4ecb4f408..cbd999fbd 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss
@@ -64,6 +64,10 @@ input[type=text] {
64 top: 1px; 64 top: 1px;
65} 65}
66 66
67.video-channels-header {
68 margin-bottom: 30px;
69}
70
67@media screen and (max-width: $small-view) { 71@media screen and (max-width: $small-view) {
68 .video-channels-header { 72 .video-channels-header {
69 text-align: center; 73 text-align: center;
@@ -97,6 +101,17 @@ input[type=text] {
97 } 101 }
98} 102}
99 103
104@media screen and (max-width: $mobile-view) {
105 .video-channels-header {
106 flex-direction: column;
107
108 input[type=text] {
109 width: 100% !important;
110 margin-bottom: 12px;
111 }
112 }
113}
114
100@media screen and (min-width: breakpoint(lg)) { 115@media screen and (min-width: breakpoint(lg)) {
101 :host-context(.main-col:not(.expanded)) { 116 :host-context(.main-col:not(.expanded)) {
102 .video-channel-buttons { 117 .video-channel-buttons {
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
index 6cec7c0d5..6ab3826ba 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
@@ -1,16 +1,19 @@
1<h1 class="d-flex justify-content-between"> 1<h1>
2 <span> 2 <span>
3 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> 3 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My subscriptions</ng-container> 4 <ng-container i18n>My subscriptions</ng-container>
5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span> 5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
6 </span> 6 </span>
7</h1>
7 8
9<div class="video-subscriptions-header d-flex justify-content-between">
8 <div class="has-feedback has-clear"> 10 <div class="has-feedback has-clear">
9 <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch" (ngModelChange)="onSubscriptionsSearchChanged()" /> 11 <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
12 (ngModelChange)="onSubscriptionsSearchChanged()" />
10 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a> 13 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
11 <span class="sr-only" i18n>Clear filters</span> 14 <span class="sr-only" i18n>Clear filters</span>
12 </div> 15 </div>
13</h1> 16</div>
14 17
15<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div> 18<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
16 19
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
index 884959070..5ead45dd8 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -45,11 +45,11 @@ input[type=text] {
45 } 45 }
46} 46}
47 47
48@media screen and (max-width: $small-view) { 48.video-subscriptions-header {
49 .video-channels-header { 49 margin-bottom: 30px;
50 text-align: center; 50}
51 }
52 51
52@media screen and (max-width: $small-view) {
53 .video-channel { 53 .video-channel {
54 .video-channel-info { 54 .video-channel-info {
55 padding-bottom: 10px; 55 padding-bottom: 10px;
@@ -68,4 +68,14 @@ input[type=text] {
68 } 68 }
69} 69}
70 70
71@media screen and (max-width: $mobile-view) {
72 .video-subscriptions-header {
73 flex-direction: column;
74
75 input[type=text] {
76 width: 100% !important;
77 }
78 }
79}
80
71 81
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;
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 779b42ab7..f2ed0ac99 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,16 +1,19 @@
1<h1 class="d-flex justify-content-between"> 1<h1>
2 <span> 2 <span>
3 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> 3 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My videos</ng-container> 4 <ng-container i18n>My videos</ng-container>
5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span> 5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
6 </span> 6 </span>
7</h1>
7 8
9<div class="videos-header d-flex justify-content-between">
8 <div class="has-feedback has-clear"> 10 <div class="has-feedback has-clear">
9 <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" /> 11 <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch"
12 (ngModelChange)="onVideosSearchChanged()" />
10 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a> 13 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
11 <span class="sr-only" i18n>Clear filters</span> 14 <span class="sr-only" i18n>Clear filters</span>
12 </div> 15 </div>
13</h1> 16</div>
14 17
15<my-videos-selection 18<my-videos-selection
16 [pagination]="pagination" 19 [pagination]="pagination"
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 0930b1959..246f46320 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -56,10 +56,6 @@ my-edit-button {
56} 56}
57 57
58@media screen and (max-width: $small-view) { 58@media screen and (max-width: $small-view) {
59 .videos-header {
60 flex-direction: column;
61 }
62
63 .action-button { 59 .action-button {
64 flex-direction: column; 60 flex-direction: column;
65 align-self: center; 61 align-self: center;
@@ -119,3 +115,13 @@ my-edit-button {
119 } 115 }
120 } 116 }
121} 117}
118
119@media screen and (max-width: $mobile-view) {
120 .videos-header {
121 flex-direction: column;
122
123 input[type=text] {
124 width: 100% !important;
125 }
126 }
127}