From 807005e164d9e5e98ee859ac9e1371f5453ac591 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 15 Apr 2019 10:29:24 +0200
Subject: [PATCH] truncate activity text

---
 .../src/components/profile/ModuleActivity.vue | 21 +++++++++++++++++++
 client/src/pages/module.vue                   |  2 +-
 client/src/pages/profile.vue                  |  2 +-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 0a25f7f7..9eafb946 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -47,6 +47,22 @@
     @include widget-shadow;
     padding: $medium-spacing;
 
+    /* used for text ellipis... somehow https://css-flexbox-text-ellipsis.dinhquangtrung.net/ just does not work */
+
+    max-width: 640px;
+
+    @include desktop {
+      max-width: 1020px;
+    }
+
+    @media (max-width: 639px) {
+      max-width: 400px;
+    }
+
+    @media (max-width: 401px) {
+      max-width: 320px;
+    }
+
     &__module-name {
       @include small-text;
       color: $color-grey;
@@ -69,6 +85,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    width: 100%;
 
     $line-height: 50px;
 
@@ -81,11 +98,15 @@
 
     &__submission {
       width: 100%;
+      min-width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     &__title, &__submission {
       line-height: $line-height;
       height: $line-height;
+      white-space: nowrap;
     }
 
     &__chevron {
diff --git a/client/src/pages/module.vue b/client/src/pages/module.vue
index 2e28907e..fc2fdb88 100644
--- a/client/src/pages/module.vue
+++ b/client/src/pages/module.vue
@@ -62,7 +62,7 @@
           };
           setTimeout(() => {
             this.$scrollTo(`#${this.scrollToAssignmentId.replace(/=/g, '')}`, 1000, options);
-            }, 250)
+            }, 250) // unfortunately this timeout is needed as it is hard to tell when everything is rendered
         }
       })
     },
diff --git a/client/src/pages/profile.vue b/client/src/pages/profile.vue
index 0d52510e..faf7caa4 100644
--- a/client/src/pages/profile.vue
+++ b/client/src/pages/profile.vue
@@ -40,7 +40,7 @@
     margin: 0 auto;
 
     @include desktop {
-      max-width: 100%;
+      max-width: 1024px;
       margin: 0;
     }