feat: Made Bulletin column wider

Techno3d · May 16, 2024 · 2f79865 · 2f79865
1 parent e6208f7
commit 2f79865
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/app/components/Bullet.tsx b/app/components/Bullet.tsx
@@ -111,7 +111,7 @@ export function Bullet(props: { route: Route; size: number }) {
  }}
  >
  <h1
- className="rotate-[-45deg] text-center font-bold"
+ className="rotate-[-45deg] text-nowrap text-center font-bold"
  style={{
  fontSize: `${props.size * 0.65}px`,
  color: `#${props.route.route_text_color}`,
@@ -134,21 +134,21 @@ export function Bullet(props: { route: Route; size: number }) {
  }}
  >
  <span
- className="flex rotate-[45deg] items-center justify-center"
+ className="flex items-center justify-center rounded-full"
  style={{
  backgroundColor: `#${props.route.route_color}`,
- height: `${props.size / Math.sqrt(2)}px`,
- width: `${props.size / Math.sqrt(2)}px`,
+ height: `${props.size}px`,
+ width: `${props.size}px`,
  }}
  >
  <h1
- className="rotate-[-45deg] text-center font-bold"
+ className="text-nowrap text-center font-bold"
  style={{
  fontSize: `${props.size * 0.5}px`,
  color: `#${props.route.route_text_color}`,
  }}
  >
- {props.route.route_name.substring(0, 1)}
+ {props.route.route_name}
  </h1>
  </span>
  </span>
@@ -157,14 +157,14 @@ export function Bullet(props: { route: Route; size: number }) {
 
  return (
  <span
- className="flex items-center justify-center rounded-2xl"
+ className="w-ful flex items-center justify-center rounded-2xl"
  style={{
  backgroundColor: `#${props.route.route_color}`,
  height: `${props.size}px`,
  }}
  >
  <h1
- className="line-clamp-1 text-center font-bold"
+ className="text-nowrap text-center font-bold"
  style={{
  fontSize: `${props.size * 0.65}px`,
  color: `#${props.route.route_text_color}`,

diff --git a/app/components/Bulletin.tsx b/app/components/Bulletin.tsx
@@ -22,8 +22,8 @@ export function Bulletin(props: { routes: Record<string, Route>; stop: Stop; wal
  className="flex min-h-29 flex-row items-center rounded-lg bg-slate-200 text-black"
  key={Math.random()}
  >
- <div className="flex h-full w-4/5 flex-row items-center rounded-lg bg-slate-100 shadow-2xl">
- <div className="flex h-full w-3/4 flex-row items-center justify-start gap-2 px-2">
+ <div className="flex h-full w-5/6 flex-row items-center rounded-lg bg-slate-100 shadow-2xl">
+ <div className="flex h-full w-4/5 flex-row items-center justify-start gap-2 px-2">
  <Bullet
  route={
  props.routes[times[0].route_id]
@@ -37,15 +37,15 @@ export function Bulletin(props: { routes: Record<string, Route>; stop: Stop; wal
  }
  size={72}
  />
- <h1 className="line-clamp-2 text-wrap font-bold 2xl:text-3xl">{times[0].destination_name}</h1>
+ <h1 className="line-clamp-2 text-wrap font-bold 2xl:text-4xl">{times[0].destination_name}</h1>
  </div>
- <div className="flex h-full w-1/4 flex-col items-center justify-center">
+ <div className="flex h-full w-1/5 flex-col items-center justify-center">
  <h1 className="font-black 2xl:text-6xl">{times[0].minutes_until_arrival}</h1>
  <h1 className="font-semibold 2xl:text-2xl">min</h1>
  </div>
  </div>
 
- <div className="flex h-full w-1/4 flex-col items-center justify-center">
+ <div className="flex h-full w-1/6 flex-col items-center justify-center">
  {times[1] ? (
  <React.Fragment>
  <h1 className="font-black 2xl:text-6xl">{times[1].minutes_until_arrival}</h1>

diff --git a/app/components/Countdown.tsx b/app/components/Countdown.tsx
@@ -18,7 +18,7 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
  <div className="flex min-h-64 flex-row rounded-lg bg-slate-300">
  <div className="flex h-full w-3/4 flex-row rounded-lg bg-slate-200 shadow-2xl">
  <div className="flex h-full w-2/3 rounded-lg bg-slate-100 shadow-2xl">
- <div className="flex h-full flex-col px-8 py-4">
+ <div className="flex h-full flex-col px-6 py-2">
  <div className="flex basis-2/5 flex-row items-center">
  <h1 className="line-clamp-1 font-bold text-black 2xl:text-6xl 2xl:leading-normal">
  {times[0].destination_name}
@@ -36,17 +36,17 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
  route_text_color: "",
  }
  }
- size={112}
+ size={96}
  />
  <div className="flex items-baseline">
  <h1 className="font-bold text-black 2xl:text-9xl">{times[0].minutes_until_arrival}</h1>
- <h1 className="font-semibold text-black 2xl:text-5xl">min</h1>
+ <h1 className="font-semibold text-black 2xl:text-4xl">min</h1>
  </div>
  </div>
  </div>
  </div>
  {times[1] ? (
- <div className="flex h-full w-1/3 flex-col px-8 py-4">
+ <div className="flex h-full w-1/3 flex-col px-6 py-2">
  <div className="flex basis-2/5 flex-row items-center">
  <Bullet
  route={
@@ -59,20 +59,20 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
  route_text_color: "",
  }
  }
- size={96}
+ size={72}
  />
  </div>
  <div className="flex basis-3/5 flex-row items-center gap-4">
  <div className="flex items-baseline">
  <h1 className="font-bold text-black 2xl:text-9xl">{times[1].minutes_until_arrival}</h1>
- <h1 className="font-semibold text-black 2xl:text-5xl">min</h1>
+ <h1 className="font-semibold text-black 2xl:text-4xl">min</h1>
  </div>
  </div>
  </div>
  ) : undefined}
  </div>
  {times[2] ? (
- <div className="flex h-full w-1/4 flex-col px-8 py-4">
+ <div className="flex h-full w-1/4 flex-col px-6 py-2">
  <div className="flex basis-2/5 flex-row items-center">
  <Bullet
  route={
@@ -85,13 +85,13 @@ export function Countdown(props: { routes: Record<string, Route>; stop: Stop; wa
  route_text_color: "",
  }
  }
- size={96}
+ size={72}
  />
  </div>
  <div className="flex basis-3/5 flex-row items-center gap-4">
  <div className="flex items-baseline">
  <h1 className="font-bold text-black 2xl:text-9xl">{times[2].minutes_until_arrival}</h1>
- <h1 className="font-semibold text-black 2xl:text-5xl">min</h1>
+ <h1 className="font-semibold text-black 2xl:text-4xl">min</h1>
  </div>
  </div>
  </div>

diff --git a/app/page.tsx b/app/page.tsx
@@ -107,7 +107,7 @@ export default function Home() {
  return (
  <div className="flex min-h-screen flex-col">
  <div className="flex grow flex-row gap-4 bg-emerald-700 p-2 text-black">
- <div className="flex min-h-full basis-2/3 flex-col gap-4">
+ <div className="flex min-h-full basis-3/5 flex-col gap-4">
  <div className="flex h-full flex-col gap-2 rounded-xl bg-black p-2">
  {Object.values(config.subway).map((value) => {
  return (
@@ -124,7 +124,7 @@ export default function Home() {
  {<Message name={"Service Alerts"} headers={headers} routes={routes} index={index} />}
  </div>
  </div>
- <div className="flex min-h-full basis-1/3 flex-col gap-4">
+ <div className="flex min-h-full basis-2/5 flex-col gap-4">
  <div className="flex h-full flex-col gap-2 rounded-xl bg-black p-2">
  {Object.values(config.bus).map((value) => {
  return (