aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-02-20 15:52:03 +0100
committerChocobozzz <me@florianbigard.com>2019-02-20 15:52:03 +0100
commitef80c66cea945d315336251dbb5efcb06c64189d (patch)
tree1f40fb3c95bc285c749e035832af2bfb81decd34
parent6d28a5056efc68da51c7ef00d563f3557a72bc49 (diff)
downloadPeerTube-ef80c66cea945d315336251dbb5efcb06c64189d.tar.gz
PeerTube-ef80c66cea945d315336251dbb5efcb06c64189d.tar.zst
PeerTube-ef80c66cea945d315336251dbb5efcb06c64189d.zip
Refactor ellipsis CSS
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.scss4
-rw-r--r--client/src/app/app.component.scss5
-rw-r--r--client/src/app/menu/menu.component.scss14
-rw-r--r--client/src/app/search/search.component.scss4
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss4
-rw-r--r--client/src/sass/include/_mixins.scss6
6 files changed, 17 insertions, 20 deletions
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index e7c6863f1..b5c78e080 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -58,12 +58,10 @@
58 58
59 .video-info-account { 59 .video-info-account {
60 @include disable-default-a-behaviour; 60 @include disable-default-a-behaviour;
61 @include ellipsis;
61 62
62 display: block; 63 display: block;
63 width: fit-content; 64 width: fit-content;
64 overflow: hidden;
65 text-overflow: ellipsis;
66 white-space: nowrap;
67 font-size: 14px; 65 font-size: 14px;
68 color: $grey-foreground-color; 66 color: $grey-foreground-color;
69 67
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 881f3ff31..3f8b9777a 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -48,9 +48,8 @@
48 overflow: hidden; 48 overflow: hidden;
49 49
50 .instance-name { 50 .instance-name {
51 overflow: hidden; 51 @include ellipsis;
52 text-overflow: ellipsis; 52
53 white-space: nowrap;
54 width: 100%; 53 width: 100%;
55 } 54 }
56 55
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 69704674a..137df6fc1 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -10,12 +10,12 @@
10} 10}
11 11
12menu { 12menu {
13 @include ellipsis;
14
13 background-color: var(--menuBackgroundColor); 15 background-color: var(--menuBackgroundColor);
14 margin: 0; 16 margin: 0;
15 padding: 0; 17 padding: 0;
16 height: 100%; 18 height: 100%;
17 white-space: nowrap;
18 text-overflow: ellipsis;
19 overflow: auto; 19 overflow: auto;
20 color: var(--menuForegroundColor); 20 color: var(--menuForegroundColor);
21 display: flex; 21 display: flex;
@@ -40,10 +40,9 @@ menu {
40 margin-bottom: 35px; 40 margin-bottom: 35px;
41 41
42 .logged-in-info { 42 .logged-in-info {
43 @include ellipsis;
44
43 flex-grow: 1; 45 flex-grow: 1;
44 white-space: nowrap;
45 overflow: hidden;
46 text-overflow: ellipsis;
47 46
48 .logged-in-display-name { 47 .logged-in-display-name {
49 font-size: 16px; 48 font-size: 16px;
@@ -55,11 +54,10 @@ menu {
55 } 54 }
56 55
57 .logged-in-username { 56 .logged-in-username {
57 @include ellipsis;
58
58 font-size: 13px; 59 font-size: 13px;
59 color: #C6C6C6; 60 color: #C6C6C6;
60 white-space: nowrap;
61 overflow: hidden;
62 text-overflow: ellipsis;
63 max-width: 140px; 61 max-width: 140px;
64 } 62 }
65 } 63 }
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 6de13d276..e0509ee15 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -80,12 +80,10 @@
80 80
81 .video-info-account { 81 .video-info-account {
82 @include disable-default-a-behaviour; 82 @include disable-default-a-behaviour;
83 @include ellipsis;
83 84
84 display: block; 85 display: block;
85 width: fit-content; 86 width: fit-content;
86 overflow: hidden;
87 text-overflow: ellipsis;
88 white-space: nowrap;
89 font-size: 14px; 87 font-size: 14px;
90 color: $grey-foreground-color; 88 color: $grey-foreground-color;
91 89
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 66e59e6d3..c118fc3a1 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -44,11 +44,9 @@
44 .video-miniature-account, 44 .video-miniature-account,
45 .video-miniature-channel { 45 .video-miniature-channel {
46 @include disable-default-a-behaviour; 46 @include disable-default-a-behaviour;
47 @include ellipsis;
47 48
48 display: block; 49 display: block;
49 overflow: hidden;
50 text-overflow: ellipsis;
51 white-space: nowrap;
52 font-size: 13px; 50 font-size: 13px;
53 color: $grey-foreground-color; 51 color: $grey-foreground-color;
54 52
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 6fb9bf200..c2e200a14 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -18,6 +18,12 @@
18 } 18 }
19} 19}
20 20
21
22@mixin ellipsis {
23 white-space: nowrap;
24 overflow: hidden;
25 text-overflow: ellipsis;
26}
21/** 27/**
22 * This mixin will crop text in block for needed amount of lines and put ellipsis at the end 28 * This mixin will crop text in block for needed amount of lines and put ellipsis at the end
23 * 29 *