[feature] Crowding widget frontend (#1838)

* Added car svgs * Build out TrainCrowding frontend, with styles * Don't use Solari arrow -- not reliable sizing * Prettified! * Improved typing in train_crowding, backend bugfix * Rename closed car atom * Rebuilt the lookup table. Renamed vars in camelCase * Prettier + removed nested ternaries --------- Co-authored-by: Jon Zimbel <[email protected]>
mbta · Aug 28, 2023 · 927d5cc · 927d5cc
1 parent cd4f330
commit 927d5cc
Show file tree

Hide file tree

Showing 33 changed files with 758 additions and 42 deletions.
diff --git a/assets/css/triptych_v2.scss b/assets/css/triptych_v2.scss
@@ -3,17 +3,38 @@
 @import "fonts/helvetica_font_face";
 @import "v2/common/widget";
 
-@import "v2/triptych/screen_container";
+@mixin font--heading-3 {
+  font-size: 158px;
+  font-weight: 700;
+  line-height: 158px;
+}
+
+@mixin font--subtitle {
+  font-size: 144px;
+  font-weight: 700;
+  line-height: 144px;
+}
 
-@import "v2/triptych/screen/normal";
+@mixin font--body-1 {
+  font-size: 96px;
+  font-weight: 600;
+  line-height: 118px;
+}
+
+@mixin font--body-2 {
+  font-size: 96px;
+  font-weight: 400;
+  line-height: 118px;
+}
 
-@import "v2/triptych/body/normal";
+@import "v2/triptych/screen_container";
 
-@import "v2/lcd_common_styles/page_load_no_data";
-@import "v2/lcd_common_styles/no_data";
+@import "v2/triptych/screen/full_screen";
+@import "v2/train_crowding";
 
 @import "v2/placeholder";
 
 body {
   margin: 0px;
+  font-family: Inter, sans-serif;
 }
diff --git a/assets/css/v2/train_crowding.scss b/assets/css/v2/train_crowding.scss
@@ -0,0 +1,130 @@
+.crowding-widget {
+  &__header {
+    display: flex;
+    flex-direction: column;
+    padding: 72px;
+    height: 578px;
+    background-color: #171f26;
+    color: #e5e4e1;
+    box-sizing: border-box;
+  }
+  &__body {
+    display: flex;
+    flex-direction: column;
+    height: 920px;
+    background-color: #d9d6d0;
+    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.32);
+  }
+  &__footer {
+    display: flex;
+    background-color: #cccbc8;
+    height: 422px;
+  }
+}
+
+.crowding-widget__header__top-row {
+  display: flex;
+
+  .t-logo {
+    padding: 4px;
+  }
+
+  .normal-header-time {
+    @include font--body-2;
+    margin-left: auto;
+  }
+}
+
+.crowding-widget__header__destination-sentence {
+  @include font--heading-3;
+  margin-top: auto;
+  .destination {
+    padding-left: 109px;
+  }
+}
+
+.crowding-widget__footer__segment {
+  @include font--body-1;
+  padding: 71px 72px;
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.crowding-widget__footer__key-row {
+  @include font--body-2;
+  display: inline-flex;
+  align-items: center;
+  .key-icon {
+    padding-right: 72px;
+  }
+}
+
+.crowding-widget__train-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 161px 52px 58px 52px;
+}
+
+@keyframes up-arrow {
+  from {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes up-left-arrow {
+  from {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-12px) translateX(-12px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes up-right-arrow {
+  from {
+    transform: translateY(0) rotate(90deg);
+  }
+  50% {
+    transform: translateY(-12px) translateX(12px) rotate(90deg);
+  }
+  to {
+    transform: translateY(0) rotate(90deg);
+  }
+}
+
+.crowding-widget__you-are-here-arrow {
+  width: 180px;
+  height: 180px;
+  &--up {
+    animation: up-arrow 1.2s infinite ease-in-out;
+  }
+  &--up-left {
+    animation: up-left-arrow 1.2s infinite ease-in-out;
+  }
+  &--up-right {
+    animation: up-right-arrow 1.2s infinite ease-in-out;
+  }
+}
+
+.crowding-widget__you-are-here-text {
+  @include font--subtitle;
+  width: 1080px;
+  box-sizing: border-box;
+  margin-top: auto;
+  padding: 0 72px 108px 72px;
+  text-align: left;
+  &--right-align {
+    text-align: right;
+  }
+}
diff --git a/assets/css/v2/triptych/screen/full_screen.scss b/assets/css/v2/triptych/screen/full_screen.scss
@@ -0,0 +1,7 @@
+.full-screen {
+  width: 3240px;
+  height: 1920px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+}
diff --git a/assets/css/v2/triptych/screen/normal.scss b/assets/css/v2/triptych/screen/normal.scss
diff --git a/assets/css/v2/triptych/screen_container.scss b/assets/css/v2/triptych/screen_container.scss
@@ -1,6 +1,6 @@
 .screen-container {
   position: relative;
-  width: 1080px;
+  width: 3240px;
   height: 1920px;
   margin: 0px auto;
   overflow: hidden;

diff --git a/assets/src/apps/v2/triptych.tsx b/assets/src/apps/v2/triptych.tsx
@@ -13,21 +13,21 @@ import {
 } from "Components/v2/screen_container";
 import { MappingContext } from "Components/v2/widget";
 
-import NormalScreen from "Components/v2/bus_shelter/normal_screen";
-import NormalBody from "Components/v2/bus_shelter/normal_body";
+import FullScreen from "Components/v2/basic_layouts/full_screen";
 
 import Placeholder from "Components/v2/placeholder";
 
 import SimulationScreenPage from "Components/v2/simulation_screen_page";
 import PageLoadNoData from "Components/v2/lcd/page_load_no_data";
 import NoData from "Components/v2/lcd/no_data";
+import TrainCrowding from "Components/v2/train_crowding";
 
 const TYPE_TO_COMPONENT = {
-  screen_normal: NormalScreen,
-  body_normal: NormalBody,
+  screen_normal: FullScreen,
   placeholder: Placeholder,
   page_load_no_data: PageLoadNoData,
   no_data: NoData,
+  train_crowding: TrainCrowding,
 };
 
 const DISABLED_LAYOUT = {

diff --git a/assets/src/components/v2/basic_layouts/full_screen.tsx b/assets/src/components/v2/basic_layouts/full_screen.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import Widget, { WidgetData } from "Components/v2/widget";
+
+interface Props {
+  full_screen: WidgetData;
+}
+
+const FullScreen: React.ComponentType<Props> = ({
+  full_screen: fullScreen,
+}) => {
+  return (
+    <div className="full-screen">
+      <Widget data={fullScreen} />
+    </div>
+  );
+};
+
+export default FullScreen;
diff --git a/assets/src/components/v2/normal_header.tsx b/assets/src/components/v2/normal_header.tsx
@@ -2,7 +2,7 @@ import useTextResizer from "Hooks/v2/use_text_resizer";
 import React, { forwardRef, ComponentType } from "react";
 import { getDatasetValue } from "Util/dataset";
 
-import LiveDataSvg from '../../../static/images/svgr_bundled/live-data-small.svg'
+import LiveDataSvg from "../../../static/images/svgr_bundled/live-data-small.svg";
 
 import {
   classWithModifier,
@@ -87,7 +87,7 @@ const NormalHeaderTitle: ComponentType<NormalHeaderTitleProps> = forwardRef(
           <div
             className={classWithModifiers(
               "normal-header-title__text",
-              modifiers
+              modifiers,
             )}
             ref={ref}
           >
@@ -97,22 +97,30 @@ const NormalHeaderTitle: ComponentType<NormalHeaderTitleProps> = forwardRef(
         </div>
       </>
     );
-  }
+  },
 );
 
 interface NormalHeaderTimeProps {
   time: string;
 }
 
-const NormalHeaderTime: ComponentType<NormalHeaderTimeProps> = ({ time }) => {
+export const NormalHeaderTime: ComponentType<NormalHeaderTimeProps> = ({
+  time,
+}) => {
   const currentTime = formatTimeString(time);
   return <div className="normal-header-time">{currentTime}</div>;
 };
 
 const NormalHeaderUpdated = () => {
   return (
     <div className="normal-header-updated">
-      <LiveDataSvg color="white" width="25" height="25" viewBox="0 0 32 32" className="normal-header-updated__img" />
+      <LiveDataSvg
+        color="white"
+        width="25"
+        height="25"
+        viewBox="0 0 32 32"
+        className="normal-header-updated__img"
+      />
       <div className="normal-header-updated__text">
         UPDATED LIVE EVERY MINUTE
       </div>