From 7c1f3e73667c013bcebdfbd75d55ba8ef83c6b54 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 21 Jan 2020 11:43:41 +0100
Subject: [PATCH] Center search fields (my videos/playlists)
---
.../my-account-video-playlists.component.html | 6 ++----
.../my-account-video-playlists.component.scss | 1 -
.../my-account-videos/my-account-videos.component.html | 8 ++++----
.../my-account-videos/my-account-videos.component.scss | 6 +++++-
4 files changed, 11 insertions(+), 10 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 49bf834c4..dd6a0e55b 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,8 +1,6 @@
-<div>
- <h4 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
-</div>
-
<div class="video-playlists-header">
+ <h4 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
+
<input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
<a class="create-button" routerLink="create">
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 4fb4ed4be..4e4156b22 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
@@ -36,7 +36,6 @@
.video-playlists-header {
display: flex;
justify-content: space-between;
- text-align: right;
margin: 20px 0 50px;
input[type=text] {
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 7479c84f9..b07b9c1a6 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,9 +1,9 @@
-<div>
- <h4 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
-</div>
-
<div class="videos-header">
+ <h4 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
+
<input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
+
+ <div class="fake-element"></div>
</div>
<my-videos-selection
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 f798c50b5..8248cc94f 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
@@ -4,9 +4,13 @@
.videos-header {
display: flex;
justify-content: space-between;
- text-align: right;
margin: 20px 0 50px;
+ h4,
+ .fake-element {
+ flex: 1;
+ }
+
input[type=text] {
@include peertube-input-text(300px);
}