Refactor ellipsis CSS

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 e7c6863f1a0e533a1ab3fdf6a018919195e47474..b5c78e080bf9e4cf1ba5603a3dffb2cf2abb10cf 100644 (file)
--- 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 881f3ff318fa4f3e8ab94930ec313f3adf7fe3bb..3f8b9777af3aa667696effeb8df366141da3fb95 100644 (file)
--- 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 69704674aa5a9a9a90c1787417f86eb5da250631..137df6fc1a92d45aaf9b3bc5530f7aa2d9e9ae07 100644 (file)
--- 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 6de13d27624b9d3da851192d4ddc97c27ed53543..e0509ee15807440da5f4ce56d07d1852f6994290 100644 (file)
--- 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 66e59e6d37d332f8b2fdf262f04961de2f8c5661..c118fc3a13dcb0f268b5d278885d49f567a65aca 100644 (file)
--- 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 6fb9bf200bad614b6a4972d1424d3f21489df0af..c2e200a14df7ce6bfc0edfe4eac36f07b5e5d61b 100644 (file)
--- 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
  *