diff options
author | Chocobozzz <me@florianbigard.com> | 2019-02-20 15:52:03 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-02-20 15:52:03 +0100 |
commit | ef80c66cea945d315336251dbb5efcb06c64189d (patch) | |
tree | 1f40fb3c95bc285c749e035832af2bfb81decd34 | |
parent | 6d28a5056efc68da51c7ef00d563f3557a72bc49 (diff) | |
download | PeerTube-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.scss | 4 | ||||
-rw-r--r-- | client/src/app/app.component.scss | 5 | ||||
-rw-r--r-- | client/src/app/menu/menu.component.scss | 14 | ||||
-rw-r--r-- | client/src/app/search/search.component.scss | 4 | ||||
-rw-r--r-- | client/src/app/shared/video/video-miniature.component.scss | 4 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 6 |
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 | ||
12 | menu { | 12 | menu { |
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 | * |