Closes #7936

- Consolidate `__no-items` message style into timeline.scss.
nasa · Dec 19, 2024 · cfa2129 · cfa2129
1 parent 6cafa7a
commit cfa2129
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue
@@ -37,7 +37,7 @@ import eventData from '../mixins/eventData.js';
 
 const PADDING = 1;
 const CONTAINER_CLASS = 'c-events-tsv__container';
-const NO_ITEMS_CLASS = 'c-events-tsv__no-items';
+const NO_ITEMS_CLASS = 'c-timeline__no-items';
 const EVENT_WRAPPER_CLASS = 'c-events-tsv__event-line';
 const ID_PREFIX = 'wrapper-';
 const AXES_PADDING = 20;

diff --git a/src/plugins/events/components/events-view.scss b/src/plugins/events/components/events-view.scss
@@ -66,13 +66,6 @@
             transform: translateX(($hitAreaW - $lineW) * -0.5);
         }
     }
-
-    &__no-items {
-        position: absolute;
-        left: $interiorMargin;
-        top: 50%;
-        transform: translateY(-50%);
-    }
 }
 
 .c-events-canvas {

diff --git a/src/plugins/imagery/components/ImageryTimeView.vue b/src/plugins/imagery/components/ImageryTimeView.vue
@@ -42,7 +42,7 @@ const AXES_PADDING = 20;
 const PADDING = 1;
 const IMAGE_WIDTH_THRESHOLD = 25;
 const CONTAINER_CLASS = 'c-imagery-tsv-container';
-const NO_ITEMS_CLASS = 'c-imagery-tsv__no-items';
+const NO_ITEMS_CLASS = 'c-timeline__no-items';
 const IMAGE_WRAPPER_CLASS = 'c-imagery-tsv__image-wrapper';
 const ID_PREFIX = 'wrapper-';
 
@@ -254,7 +254,7 @@ export default {
       let existingContainer = this.$el.querySelector(`.${CONTAINER_CLASS}`);
       if (existingContainer) {
         imageryContainer = existingContainer;
-        imageryContainer.style.maxWidth = `${containerWidth}px`;
+        // imageryContainer.style.maxWidth = `${containerWidth}px`;
       } else {
         if (this.destroyImageryContainer) {
           this.destroyImageryContainer();
@@ -284,7 +284,7 @@ export default {
         this.$refs.imageryHolder.appendChild(component.$el);
 
         imageryContainer = component.$el.querySelector(`.${CONTAINER_CLASS}`);
-        imageryContainer.style.maxWidth = `${containerWidth}px`;
+        // imageryContainer.style.maxWidth = `${containerWidth}px`;
       }
 
       return imageryContainer;
@@ -320,7 +320,7 @@ export default {
       }
     },
     plotNoItems(containerElement) {
-      let textElement = document.createElement('text');
+      let textElement = document.createElement('div');
       textElement.classList.add(NO_ITEMS_CLASS);
       textElement.innerHTML = 'No images within timeframe';
 

diff --git a/src/plugins/timeline/timeline.scss b/src/plugins/timeline/timeline.scss
@@ -51,4 +51,12 @@
         pointer-events: none; // Allows clicks to pass through
         z-index: 10; // Ensure it sits atop swimlanes
     }
+
+    &__no-items {
+        font-style: italic;
+        position: absolute;
+        left: $interiorMargin;
+        top: 50%;
+        transform: translateY(-50%);
+    }
 }