feat: shorten track description

ocjojo · Mar 22, 2020 · f9c9022 · f9c9022
1 parent b219f16
commit f9c9022
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/frontend/src/components/TrackCard.vue b/frontend/src/components/TrackCard.vue
@@ -3,7 +3,7 @@
     <div class="track-img"></div>
     <div class="track-info">
       <h5>{{ track.Name }}</h5>
-      <p>{{ track.Description }}</p>
+      <p>{{ description }}</p>
     </div>
   </div>
 </template>
@@ -12,6 +12,14 @@
 export default {
   props: {
     track: Object
+  },
+  computed: {
+    description() {
+      const shortened = this.track.Description.substring(0, 160);
+      return shortened.length === this.track.Description.length
+        ? shortened
+        : shortened + "...";
+    }
   }
 };
 </script>
@@ -42,7 +50,6 @@ export default {
     margin-bottom: 5px;
     overflow: hidden;
     padding-top: 0;
-    text-overflow: ellipsis;
 
     h5 {
       font-weight: 900;

diff --git a/frontend/src/views/Main.vue b/frontend/src/views/Main.vue
@@ -16,7 +16,9 @@
         </div>
         <img v-else src="@/assets/defaultAvatar.svg" alt="avatar" />
         <div class="context-menu">
-          <div class="context-menu-item">Username: {{ user.Fullname }}</div>
+          <div class="context-menu-item">
+            Username: {{ user ? user.Fullname : "" }}
+          </div>
           <div class="context-menu-item">Bild ändern</div>
           <div class="context-menu-item" @click="logOut()">Ausloggen</div>
         </div>