diff options
author | kimsible <kimsible@users.noreply.github.com> | 2020-08-03 13:55:48 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-08-03 16:52:40 +0200 |
commit | d607fc24631808fc70ce9fb8ddc323d8f856f8ed (patch) | |
tree | 706429e5e375f3ec6bedf9b6369e90fa117b2eac /client/src/app/+my-account/+my-account-video-channels | |
parent | b12ce2b8511039968faabe5a9eeee60ab36521eb (diff) | |
download | PeerTube-d607fc24631808fc70ce9fb8ddc323d8f856f8ed.tar.gz PeerTube-d607fc24631808fc70ce9fb8ddc323d8f856f8ed.tar.zst PeerTube-d607fc24631808fc70ce9fb8ddc323d8f856f8ed.zip |
Fix regressions sub-menu titles on mobile-view
Diffstat (limited to 'client/src/app/+my-account/+my-account-video-channels')
2 files changed, 21 insertions, 3 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 { |