Closes #7936

- Fix left and right `alignmentData` offsets in EventTimelineView.vue, ImageryTimeView.vue and ActivityTimeline.vue.
nasa · Dec 20, 2024 · 0933d27 · 0933d27
1 parent f163034
commit 0933d27
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 14 deletions.
diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div ref="events" class="c-events-tsv js-events-tsv" :style="{ left: leftOffset + 'px' }" />
+  <div ref="events" class="c-events-tsv js-events-tsv" :style="alignmentStyle" />
 </template>
 
 <script>
@@ -69,8 +69,15 @@ export default {
     };
   },
   computed: {
-    leftOffset() {
-      return this.alignmentData.leftWidth + AXES_PADDING;
+    alignmentStyle() {
+      let leftOffset = 0;
+      const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
+      if (this.alignmentData.leftWidth) {
+        leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+      }
+      return {
+        margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
+      };
     }
   },
   watch: {

diff --git a/src/plugins/imagery/components/ImageryTimeView.vue b/src/plugins/imagery/components/ImageryTimeView.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div ref="imagery" class="c-imagery-tsv js-imagery-tsv" :style="{ left: leftOffset + 'px' }">
+  <div ref="imagery" class="c-imagery-tsv js-imagery-tsv" :style="alignmentStyle">
     <div ref="imageryHolder" class="c-imagery-tsv__contents u-contents"></div>
   </div>
 </template>
@@ -71,8 +71,15 @@ export default {
     };
   },
   computed: {
-    leftOffset() {
-      return this.alignmentData.leftWidth + AXES_PADDING;
+    alignmentStyle() {
+      let leftOffset = 0;
+      const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
+      if (this.alignmentData.leftWidth) {
+        leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+      }
+      return {
+        margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
+      };
     }
   },
   watch: {

diff --git a/src/plugins/plan/components/ActivityTimeline.vue b/src/plugins/plan/components/ActivityTimeline.vue
@@ -26,7 +26,7 @@
     </template>
     <template #object>
       <div class="c-plan-av" :style="alignmentStyle">
-        <svg v-if="activities.length > 0" :height="height" :width="svgWidth">
+        <svg v-if="activities.length > 0" class="c-plan-av__svg" :height="height">
           <symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
             <rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
             <line
@@ -157,24 +157,27 @@ export default {
   computed: {
     alignmentStyle() {
       let leftOffset = 0;
+      const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
       if (this.alignmentData.leftWidth) {
         leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
       }
       return {
-        left: `${this.alignmentData.leftWidth + leftOffset}px`
+        margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
       };
     },
     svgWidth() {
       // Reduce the width by left axis width, then take off the right yaxis width as well
+      return '100%'; // TEMP!
+      /*
       let leftOffset = 0;
       if (this.alignmentData.leftWidth) {
         leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
       }
       const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
-      return (
+           return (
         this.width -
         (this.alignmentData.leftWidth + leftOffset + this.alignmentData.rightWidth + rightOffset)
-      );
+      );*/
     }
   },
   methods: {

diff --git a/src/plugins/plan/plan.scss b/src/plugins/plan/plan.scss
@@ -27,11 +27,10 @@
     text {
       stroke: none;
     }
-  }
 
-  &-av {
-    // Activities view
-    @include abs();
+    .c-swimlane__lane-object {
+      display: flex;
+    }
   }
 
   &__activity {
@@ -58,3 +57,14 @@
     display: none;
   }
 }
+
+.c-plan-av {
+  // Activities view
+  background-color: $colorPlotBg;
+  flex: 1 1 auto;
+  height: 100%;
+
+  &__svg {
+    width: 100%;
+  }
+}