Refactor ellipsis CSS

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 @@
 
     .video-info-account {
       @include disable-default-a-behaviour;
+      @include ellipsis;
 
       display: block;
       width: fit-content;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       font-size: 14px;
       color: $grey-foreground-color;
 
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 @@
       overflow: hidden;
 
       .instance-name {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        @include ellipsis;
+
         width: 100%;
       }
 
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 @@
 }
 
 menu {
+  @include ellipsis;
+
   background-color: var(--menuBackgroundColor);
   margin: 0;
   padding: 0;
   height: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: auto;
   color: var(--menuForegroundColor);
   display: flex;
@@ -40,10 +40,9 @@ menu {
     margin-bottom: 35px;
 
     .logged-in-info {
+      @include ellipsis;
+
       flex-grow: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
 
       .logged-in-display-name {
         font-size: 16px;
@@ -55,11 +54,10 @@ menu {
       }
 
       .logged-in-username {
+        @include ellipsis;
+
         font-size: 13px;
         color: #C6C6C6;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         max-width: 140px;
       }
     }
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 @@
 
         .video-info-account {
           @include disable-default-a-behaviour;
+          @include ellipsis;
 
           display: block;
           width: fit-content;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
           font-size: 14px;
           color: $grey-foreground-color;
 
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 @@
     .video-miniature-account,
     .video-miniature-channel {
       @include disable-default-a-behaviour;
+      @include ellipsis;
 
       display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       font-size: 13px;
       color: $grey-foreground-color;
 
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 @@
   }
 }
 
+
+@mixin ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /**
  *  This mixin will crop text in block for needed amount of lines and put ellipsis at the end
  *