aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-04-27 14:57:50 +0200
committerGitHub <noreply@github.com>2020-04-27 14:57:50 +0200
commit4682468d4d07e0864155dd2b403d93754786ea13 (patch)
treeb45c7ea139b20e2fcffdeb3a00e1b1b431b5d7a3 /client/src/app/+my-account
parent9181bc0c802bb84aeae9f07b08b59dcd90f486bc (diff)
downloadPeerTube-4682468d4d07e0864155dd2b403d93754786ea13.tar.gz
PeerTube-4682468d4d07e0864155dd2b403d93754786ea13.tar.zst
PeerTube-4682468d4d07e0864155dd2b403d93754786ea13.zip
Fix broken views on mobile and small screens (#2671)
* Fix mobile CSS for my-account-settings * Fix mobile CSS for my-account-videos * Fix mobile CSS my-account-video-channels * Fix mobile CSS for my-account-playlists * Fix CSS mobile for user-subscriptions header * Fix CSS mobile my-account-video-channel-edit * Fix CSS mobile / small view for textarea * Fix margin-right my-delete-button on inside span * Fix CSS mobile on accounts page * Fix indent * Fix CSS mobile for my-account-notifications * Fix CSS mobile / small view my-account-videos * Fix search small-view channels * Use miniature width for title of video on mobile * Add dots to ellipsis multilines * Fix controls and title video width small views * Fix my-account-playlist small and mobile views * Fix channels header + account header mobile * Fix CSS mobile/small view for my-account/subscriptions * Fix align followers channel item * Center header elements user account page on mobile * Fix margins on a element and img * Fix margin img channel or video Co-Authored-By: Rigel Kent <par@rigelk.eu> Co-authored-by: kimsible <kimsible@users.noreply.github.com> Co-authored-by: Rigel Kent <par@rigelk.eu>
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss6
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss23
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss14
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss14
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss11
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss19
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss44
8 files changed, 136 insertions, 5 deletions
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 43d1f82ab..73f7c7b24 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -23,3 +23,13 @@
23my-user-notifications { 23my-user-notifications {
24 font-size: 15px; 24 font-size: 15px;
25} 25}
26
27@media screen and (max-width: $mobile-view) {
28 .header {
29 flex-direction: column;
30
31 & >:first-child {
32 margin-bottom: 15px;
33 }
34 }
35}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 2660c2b72..3e1792e3e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -19,3 +19,9 @@
19 width: 500px; 19 width: 500px;
20 max-width: 100%; 20 max-width: 100%;
21} 21}
22
23@media screen and (max-width: $small-view) {
24 .progress {
25 width: 100%;
26 }
27}
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 7ac3c910f..ba8d56689 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
@@ -41,4 +41,27 @@
41 } 41 }
42} 42}
43 43
44@media screen and (max-width: $small-view) {
45 .video-channels-header {
46 text-align: center;
47 }
48
49 .video-channel {
50 .video-channel-info {
51 padding-bottom: 10px;
52 text-align: center;
53
54 .video-channel-names {
55 flex-direction: column;
56 align-items: center !important;
57 margin: auto;
58 }
59 }
60
61 img {
62 margin-right: 0;
63 }
64 }
65}
66
44 67
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
index c8c327398..43a49a01a 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -26,9 +26,9 @@ my-actor-avatar-info {
26input { 26input {
27 &[type=text] { 27 &[type=text] {
28 @include peertube-input-text(340px); 28 @include peertube-input-text(340px);
29 29
30 display: block; 30 display: block;
31 31
32 &#name { 32 &#name {
33 width: auto; 33 width: auto;
34 flex-grow: 1; 34 flex-grow: 1;
@@ -63,3 +63,13 @@ my-markdown-textarea ::ng-deep {
63.breadcrumb { 63.breadcrumb {
64 @include breadcrumb; 64 @include breadcrumb;
65} 65}
66
67@media screen and (max-width: $small-view) {
68 input[type=text]#name {
69 width: auto !important;
70 }
71
72 label[for=name] + div, textarea {
73 width: 100%;
74 }
75}
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 c0dc41f12..e1acf6cd6 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
@@ -70,9 +70,17 @@
70 } 70 }
71 71
72 .video-channel { 72 .video-channel {
73 .video-channel-names { 73 padding-bottom: 10px;
74 flex-direction: column; 74
75 align-items: center !important; 75 .video-channel-info {
76 padding-bottom: 10px;
77 text-align: center;
78
79 .video-channel-names {
80 flex-direction: column;
81 align-items: center !important;
82 margin: auto;
83 }
76 } 84 }
77 85
78 img { 86 img {
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 9657ac11d..a4ca0f45d 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -11,6 +11,11 @@
11 11
12 display: flex; 12 display: flex;
13 justify-content: center; 13 justify-content: center;
14
15 /* fix ellipsis dots background color */
16 ::ng-deep .miniature-name::after {
17 background-color: var(--submenuColor) !important;
18 }
14} 19}
15 20
16// Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples 21// Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
@@ -37,3 +42,9 @@
37.videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { 42.videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
38 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); 43 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
39} 44}
45
46@media screen and (max-width: $small-view) {
47 .playlist-info {
48 margin-top: -$sub-menu-margin-bottom-small-view;
49 }
50}
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 aed3302ba..4381d74b0 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
@@ -67,3 +67,22 @@
67 } 67 }
68 } 68 }
69} 69}
70
71@media only screen and (min-width: $mobile-view) and (max-width: $small-view) {
72 .video-playlists-header {
73 input[type=text] {
74 width: 42% !important;
75 }
76 }
77}
78
79@media screen and (max-width: $mobile-view) {
80 .video-playlists-header {
81 flex-direction: column;
82
83 input[type=text] {
84 width: 100% !important;
85 margin-bottom: 12px;
86 }
87 }
88}
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 8248cc94f..40bae7668 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
@@ -54,3 +54,47 @@ my-delete-button,
54my-edit-button { 54my-edit-button {
55 margin-right: 10px; 55 margin-right: 10px;
56} 56}
57
58@media screen and (max-width: $small-view) {
59 .videos-header {
60 flex-direction: column;
61 }
62
63 ::ng-deep {
64 .video-miniature {
65 align-items: center;
66
67 .video-bottom,
68 .video-bottom .video-miniature-information {
69 /* same width than a.video-thumbnail */
70 max-width: 223px !important;
71 }
72 }
73 }
74
75 my-delete-button,
76 my-edit-button {
77 margin-right: 0px;
78
79 ::ng-deep {
80 span, a {
81 margin-right: 0px;
82 }
83 }
84 }
85
86 my-delete-button,
87 my-edit-button,
88 my-button {
89 margin-top: 15px;
90 width: 100%;
91 text-align: center;
92
93 ::ng-deep {
94 .action-button {
95 /* same width than a.video-thumbnail */
96 width: 223px;
97 }
98 }
99 }
100}