aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
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
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')
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss9
-rw-r--r--client/src/app/+accounts/accounts.component.scss29
-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
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss13
-rw-r--r--client/src/app/search/search.component.scss48
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss12
13 files changed, 226 insertions, 26 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index a258c7b86..042290809 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -29,4 +29,11 @@
29 } 29 }
30} 30}
31 31
32 32@media screen and (max-width: $mobile-view) {
33 .section {
34 .section-title {
35 flex-direction: column;
36 align-items: normal;
37 }
38 }
39}
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index d0187fe30..12170e371 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -56,3 +56,32 @@ my-user-moderation-dropdown,
56 padding: 5px; 56 padding: 5px;
57 margin-top: -2px; 57 margin-top: -2px;
58} 58}
59
60@media screen and (max-width: $mobile-view) {
61 .sub-menu {
62 .actor {
63 flex-direction: column;
64 align-items: center;
65
66 img,
67 .actor-info .actor-names .actor-display-name {
68 margin-right: 0;
69 }
70
71 .actor-info {
72 .actor-names {
73 flex-direction: column;
74 align-items: center;
75 }
76
77 my-user-moderation-dropdown {
78 margin-left: 0;
79 }
80
81 .actor-followers {
82 text-align: center;
83 }
84 }
85 }
86 }
87}
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}
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index a8e823b40..0a49f53cf 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -67,3 +67,16 @@
67 height: min-content; 67 height: min-content;
68 } 68 }
69} 69}
70
71@media screen and (max-width: $mobile-view) {
72 .sub-menu {
73 .actor {
74 flex-direction: column;
75
76 .actor-info .actor-names {
77 flex-direction: column;
78 align-items: normal;
79 }
80 }
81 }
82}
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index d4d8bbcf7..641647e2e 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -82,11 +82,35 @@
82} 82}
83 83
84@media screen and (max-width: $small-view) { 84@media screen and (max-width: $small-view) {
85 .video-channel-names { 85 .search-result {
86 flex-direction: column !important; 86 .entry.video-channel,
87 .entry.video {
88 flex-direction: column;
89 height: auto;
90 justify-content: center;
91 align-items: center;
92 text-align: center;
93
94 img {
95 margin: 0;
96 }
97
98 img {
99 margin: 0;
100 }
87 101
88 .video-channel-name { 102 .video-channel-info .video-channel-names {
89 margin-left: 0 !important; 103 align-items: center;
104 flex-direction: column !important;
105
106 .video-channel-name {
107 margin-left: 0 !important;
108 }
109 }
110
111 my-subscribe-button {
112 margin-top: 5px;
113 }
90 } 114 }
91 } 115 }
92} 116}
@@ -100,12 +124,6 @@
100 } 124 }
101 125
102 .entry { 126 .entry {
103 flex-direction: column;
104 height: auto;
105 justify-content: center;
106 align-items: center;
107 text-align: center;
108
109 &.video { 127 &.video {
110 .video-info-name, 128 .video-info-name,
111 .video-info-account { 129 .video-info-account {
@@ -126,16 +144,6 @@
126 } 144 }
127 } 145 }
128 } 146 }
129
130 &.video-channel {
131 .video-channel-info .video-channel-names {
132 align-items: center;
133 }
134
135 my-subscribe-button {
136 margin-top: 5px;
137 }
138 }
139 } 147 }
140 } 148 }
141} 149}
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 9bc05015f..44b629542 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -55,3 +55,15 @@
55 @include adapt-margin-content-width; 55 @include adapt-margin-content-width;
56} 56}
57 57
58@media screen and (max-width: $mobile-view) {
59 .videos-header {
60 flex-direction: column;
61 align-items: center;
62 height: auto;
63
64 .title-page {
65 margin-bottom: 10px;
66 margin-right: 0px;
67 }
68 }
69}