add css to align visuals

mbta · May 31, 2024 · 9890c4b · 9890c4b
1 parent 5d7b086
commit 9890c4b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/assets/css/_stop-card.scss b/assets/css/_stop-card.scss
@@ -84,9 +84,9 @@ $radius: 4px;
     // on mobile, adopt a full-screen "app" view,
     // this is the scrollable section
     @include media-breakpoint-down(sm) {
+      -webkit-overflow-scrolling: touch;
       overflow-y: scroll;
       overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
     }
   }
 
@@ -102,9 +102,9 @@ $radius: 4px;
     @include media-breakpoint-down(sm) {
       bottom: 0;
       display: grid;
-      left: 0;
       gap: 0;
       grid-template-rows: auto 1fr;
+      left: 0;
       padding-bottom: 0;
       padding-top: 0;
       position: fixed;
@@ -425,3 +425,22 @@ $radius: 4px;
     margin: 0;
   }
 }
+
+.departure-card__times {
+  .no-real-time-data {
+    @extend .font-helvetica-neue;
+    @extend .fs-14;
+  }
+}
+
+.stop-departures--realtime {
+  .no-real-time-data {
+    @extend .align-items-center;
+    @extend .c-alert-item--low;
+    @extend .d-flex;
+    @extend .justify-content-center;
+    @extend .m-8;
+    @extend .pb-40;
+    @extend .pt-40;
+  }
+}
diff --git a/assets/ts/helpers/departureInfo.tsx b/assets/ts/helpers/departureInfo.tsx
@@ -169,7 +169,11 @@ const departuresListFromInfos = (
   const tripId = departureInfos[0]?.trip?.id;
 
   if (isSubway && !predictionTimeCutoff) {
-    return [<div key={`${routeId}-${tripId}`}>No real-time data</div>];
+    return [
+      <div className="no-real-time-data" key={`${routeId}-${tripId}`}>
+        No real-time data
+      </div>
+    ];
   }
 
   return chain(departureInfos)