aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
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/sass
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/sass')
-rw-r--r--client/src/sass/application.scss7
-rw-r--r--client/src/sass/include/_mixins.scss25
-rw-r--r--client/src/sass/include/_variables.scss1
3 files changed, 31 insertions, 2 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 11e5c16c3..cc6552705 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -301,10 +301,13 @@ table {
301 overflow-x: auto; 301 overflow-x: auto;
302 padding-left: 15px; 302 padding-left: 15px;
303 padding-right: 15px; 303 padding-right: 15px;
304 margin-bottom: 10px; 304 margin-bottom: $sub-menu-margin-bottom-small-view;
305 } 305 }
306 306
307 input[type=text], input[type=password] { 307 input[type=text],
308 input[type=password],
309 input[type=email],
310 textarea {
308 width: 100% !important; 311 width: 100% !important;
309 } 312 }
310 } 313 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3c420f547..75046798c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -29,6 +29,31 @@
29 line-height: $font-size; 29 line-height: $font-size;
30 overflow: hidden; 30 overflow: hidden;
31 text-overflow: ellipsis; 31 text-overflow: ellipsis;
32 /* Let space at right for dots */
33 position: relative;
34 margin-right: -1em;
35 padding-right: 1em;
36
37 /* Display dots if the max number of lines is exceeded */
38 &::before {
39 content: "...";
40 /* set position to right bottom corner of block */
41 position: absolute;
42 bottom: 0;
43 right: 0;
44 }
45
46 /* Hide dots if the max number of lines is not exceeded */
47 &:after {
48 content: '';
49 background-color: var(--mainBackgroundColor);
50 /* set position to right bottom corner of text */
51 position: absolute;
52 right: 0;
53 width: 1em;
54 height: 1em;
55 margin-top: 0.2em;
56 }
32} 57}
33 58
34@mixin prefix($property, $parameters...) { 59@mixin prefix($property, $parameters...) {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index f60d8ce94..cf7657550 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -69,6 +69,7 @@ $input-background-color: $bg-color;
69$input-placeholder-color: #898989; 69$input-placeholder-color: #898989;
70 70
71$sub-menu-margin-bottom: 30px; 71$sub-menu-margin-bottom: 30px;
72$sub-menu-margin-bottom-small-view: 10px;
72 73
73$activated-action-button-color: black; 74$activated-action-button-color: black;
74 75