Merge pull request #858 from oslokommune/truncated-okr-cards

Respect objective period length for cards in the timeline
oslokommune · Sep 13, 2023 · 70ff948 · 70ff948
2 parents b5e62f9 + 6778b72
commit 70ff948
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 13 deletions.
diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
@@ -645,8 +645,44 @@ export default {
 }
 
 .okr-link-card {
+  --card-bg-color: var(--color-white);
+
   position: relative;
   z-index: 1;
+  height: 9.5rem;
+  overflow: hidden;
+
+  ::v-deep &__inner {
+    justify-content: space-between;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      width: 1rem;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--card-bg-color) 75%,
+        var(--card-bg-color) 100%
+      );
+      content: '';
+    }
+  }
+
+  ::v-deep &__title {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+  }
+
+  &--active {
+    --card-bg-color: var(--color-blue-5);
+  }
 }
 
 @keyframes loading {

diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
@@ -11,15 +11,23 @@
       :href="href"
       @click="activate($event, navigate)"
     >
-      <pkt-tag v-if="!compact" text-style="normal-text" skin="yellow" size="small">
-        {{ activeItem.name }}
-      </pkt-tag>
+      <div class="okr-link-card__inner">
+        <pkt-tag
+          v-if="!compact"
+          text-style="normal-text"
+          skin="yellow"
+          size="small"
+          class="okr-link-card__owner"
+        >
+          {{ activeItem.name }}
+        </pkt-tag>
 
-      <span class="okr-link-card__title pkt-txt-14">
-        {{ title }}
-      </span>
+        <span class="okr-link-card__title pkt-txt-14">
+          {{ title }}
+        </span>
 
-      <progress-bar :progression="progression" :compact="compact" />
+        <progress-bar :progression="progression" :compact="compact" />
+      </div>
     </a>
   </router-link>
 </template>
@@ -89,11 +97,7 @@ export default {
 
 <style lang="scss" scoped>
 .okr-link-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-height: 6.5rem;
-  padding: 1rem;
+  display: block;
   color: var(--color-text);
   text-decoration: none;
   background-color: var(--color-white);
@@ -104,6 +108,18 @@ export default {
     color: var(--color-hover);
   }
 
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+    padding: 1rem;
+  }
+
+  &__owner {
+    white-space: nowrap;
+  }
+
   &__title {
     text-wrap: balance;
   }

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
@@ -85,9 +85,13 @@ export default {
 .progress-bar {
   width: 100%;
 
+  h4 + &__bar {
+    margin-top: 0.5rem;
+  }
+
   &__bar {
     position: relative;
-    margin: 0.5rem 0 1rem 0;
+    margin-bottom: 1rem;
     background-color: var(--color-grayscale-10);
 
     > span {