diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-01 11:10:27 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-01 16:54:49 +0200 |
commit | 0f7407d926cf7774f8f730dba08327569c11680c (patch) | |
tree | 6b44be72187390514d9068b78851b48b1a9b7244 /client/src/app/+my-library/my-history | |
parent | 33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 (diff) | |
download | PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.gz PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.zst PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.zip |
Refactor video miniature
Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
Diffstat (limited to 'client/src/app/+my-library/my-history')
-rw-r--r-- | client/src/app/+my-library/my-history/my-history.component.html | 4 | ||||
-rw-r--r-- | client/src/app/+my-library/my-history/my-history.component.scss | 45 |
2 files changed, 30 insertions, 19 deletions
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html index c180161e7..9dec64645 100644 --- a/client/src/app/+my-library/my-history/my-history.component.html +++ b/client/src/app/+my-library/my-history/my-history.component.html | |||
@@ -4,7 +4,7 @@ | |||
4 | </h1> | 4 | </h1> |
5 | 5 | ||
6 | <div class="top-buttons"> | 6 | <div class="top-buttons"> |
7 | <div> | 7 | <div class="search-wrapper"> |
8 | <div class="input-group has-feedback has-clear"> | 8 | <div class="input-group has-feedback has-clear"> |
9 | <input | 9 | <input |
10 | type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history" | 10 | type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history" |
@@ -15,7 +15,7 @@ | |||
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
17 | 17 | ||
18 | <div class="history-switch ml-auto mr-3"> | 18 | <div class="history-switch"> |
19 | <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch> | 19 | <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch> |
20 | <label i18n>Track watch history</label> | 20 | <label i18n>Track watch history</label> |
21 | </div> | 21 | </div> |
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss index 928a8a3da..af4a34b4b 100644 --- a/client/src/app/+my-library/my-history/my-history.component.scss +++ b/client/src/app/+my-library/my-history/my-history.component.scss | |||
@@ -11,16 +11,24 @@ | |||
11 | 11 | ||
12 | .top-buttons { | 12 | .top-buttons { |
13 | margin-bottom: 30px; | 13 | margin-bottom: 30px; |
14 | display: flex; | 14 | display: grid; |
15 | grid-template-columns: 250px 1fr auto auto; | ||
15 | align-items: center; | 16 | align-items: center; |
16 | flex-wrap: wrap; | ||
17 | 17 | ||
18 | #history-search { | 18 | .search-wrapper { |
19 | @include peertube-input-text(250px); | 19 | grid-column: 1; |
20 | |||
21 | input { | ||
22 | @include peertube-input-text(250px); | ||
23 | } | ||
20 | } | 24 | } |
21 | 25 | ||
22 | .history-switch { | 26 | .history-switch { |
27 | grid-column: 3; | ||
28 | |||
23 | display: flex; | 29 | display: flex; |
30 | margin-left: auto; | ||
31 | margin-right: 15px; | ||
24 | 32 | ||
25 | label { | 33 | label { |
26 | margin: 0 0 0 5px; | 34 | margin: 0 0 0 5px; |
@@ -31,6 +39,8 @@ | |||
31 | } | 39 | } |
32 | 40 | ||
33 | .delete-history { | 41 | .delete-history { |
42 | grid-column: 4; | ||
43 | |||
34 | @include peertube-button; | 44 | @include peertube-button; |
35 | @include grey-button; | 45 | @include grey-button; |
36 | @include button-with-icon; | 46 | @include button-with-icon; |
@@ -40,26 +50,27 @@ | |||
40 | } | 50 | } |
41 | 51 | ||
42 | .video { | 52 | .video { |
43 | @include row-blocks; | 53 | @include row-blocks($column-responsive: false); |
44 | |||
45 | .my-video-miniature { | ||
46 | flex-grow: 1; | ||
47 | } | ||
48 | } | 54 | } |
49 | 55 | ||
50 | @media screen and (max-width: $mobile-view) { | 56 | @media screen and (max-width: $small-view) { |
51 | .top-buttons { | 57 | .top-buttons { |
52 | .history-switch label, .delete-history { | 58 | grid-template-columns: auto 1fr auto; |
53 | @include ellipsis; | 59 | row-gap: 20px; |
54 | } | ||
55 | 60 | ||
56 | .history-switch label { | 61 | .history-switch { |
57 | width: 60%; | 62 | grid-row: 1; |
63 | grid-column: 1; | ||
64 | margin: 0; | ||
58 | } | 65 | } |
59 | 66 | ||
60 | .delete-history { | 67 | .delete-history { |
61 | margin-left: auto; | 68 | grid-row: 1; |
62 | max-width: 32%; | 69 | grid-column: 3; |
70 | } | ||
71 | |||
72 | .search-wrapper { | ||
73 | grid-column: 1 / 4; | ||
63 | } | 74 | } |
64 | } | 75 | } |
65 | } | 76 | } |