gtfs-to-html 2.6.11 → 2.7.0

package/views/default/css/timetable_styles.css

@@ -0,0 +1,447 @@
+/* Base styles */
+body {
+  color: #666;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  line-height: inherit;
+  margin: 0;
+}
+
+*, ::before, ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: inherit;
+  font-weight: inherit;
+  color: #333;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Timetable Styles */
+
+.timetable-page {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .timetable-page {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .timetable-page {
+    max-width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .timetable-page {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .timetable-page {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .timetable-page {
+    max-width: 1536px;
+  }
+}
+
+.timetable-page h1 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  padding-top: 1rem;
+  gap: 0.24rem;
+  display: flex;
+  align-items: center;
+}
+
+.timetable-page h2 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.timetable-page h3 {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.timetable-page .effective-date {
+  margin-top: 0.5rem;
+  color: rgb(75 85 99);
+}
+
+.timetable-page .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.timetable-page .hidden {
+  display: none;
+}
+
+.timetable-page .timetable .timetable-label {
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .timetable .timetable-footer {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .timetable-page .timetable .timetable-footer {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* Menu Styles */
+
+.timetable-page .timetable-simple-menu {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.timetable-page .timetable-jump-menu {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .timetable-page .timetable-jump-menu {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.timetable-page .timetable-jump-menu a {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .timetable-radio-menu {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .timetable-page .timetable-radio-menu {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.timetable-page .timetable-radio-menu label {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .menu-type-radio .timetable {
+  display: none;
+}
+
+.timetable-page .btn-blue {
+  color: rgb(255 255 255);
+  padding: 0.75rem 1.5rem;
+  background-color: rgb(37 99 235);
+  border-radius: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.timetable-page .btn-blue:hover {
+  background-color: rgb(29 78 216);
+  text-decoration: none;
+}
+
+.timetable-page .btn-gray {
+  color: rgb(75 85 99);
+  padding: 0.75rem 1.5rem;
+  background-color: rgb(209 213 219);
+  border-radius: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.timetable-page .btn-gray:hover {
+  background-color: rgb(201, 206, 213);
+  text-decoration: none;
+}
+
+.timetable-page .btn-sm {
+  padding: 0.25rem 1rem;
+  border-radius: 0.25rem;
+}
+
+.timetable-page .timetable {
+  margin-bottom: 2.5rem;
+}
+
+.timetable-page .timetable .table-vertical .stop-header {
+  text-align: center;
+}
+
+.timetable-page .timetable .run-header {
+  text-align: center;
+}
+
+.timetable-page .timetable .run-footer {
+  text-align: center;
+}
+
+.timetable-page .timetable .run-footer .continues-as-route {
+  font-weight: bold;
+}
+
+.timetable-page .timetable .stop-code {
+  font-weight: normal;
+}
+
+.timetable-page .timetable .stop-time {
+  text-align: center;
+}
+
+.timetable-page .timetable .stop-time.pm {
+  font-weight: bold;
+}
+
+.timetable-page .timetable a.symbol {
+  padding-left: 4px;
+  color: #212529;
+  text-decoration: none;
+}
+
+.timetable-page .timetable .trip-frequency {
+  text-align: center;
+  font-weight: bold;
+}
+
+.timetable-page .timetable .city-row {
+  font-size: 1.5em;
+  color: #415d86;
+}
+
+.timetable-page .timetable th.city-column {
+  font-size: 1.5em;
+  text-align: center;
+}
+
+.timetable-page .timetable .table-container {
+  overflow-x: scroll;
+  margin: 20px 0;
+}
+
+.timetable-page .timetable .table-container::-webkit-scrollbar {
+  -webkit-appearance: none;
+  height: 8px;
+}
+
+.timetable-page .timetable .table-container::-webkit-scrollbar-track {
+  background-color: rgba(57, 57, 57, 0.2);
+  border-radius: 4px;
+}
+
+.timetable-page .timetable .table-container::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(156, 156, 156, 0.8);
+}
+
+.timetable-page .timetable .table-container table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+.timetable-page .timetable thead tr {
+  background: #bae6fd;
+}
+
+.timetable-page .timetable thead tr,
+.timetable-page .timetable thead tr a {
+  color: #222222;
+}
+
+.timetable-page .timetable th {
+  text-align: left;
+}
+
+.timetable-page .timetable td,
+.timetable-page .timetable th {
+  padding: 0;
+}
+
+.timetable-page .timetable table > thead > tr > th,
+.timetable-page .timetable table > tbody > tr > th,
+.timetable-page .timetable table > tfoot > tr > th,
+.timetable-page .timetable table > thead > tr > td,
+.timetable-page .timetable table > tbody > tr > td,
+.timetable-page .timetable table > tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.42857143;
+  vertical-align: top;
+  border: 1px solid #dddddd;
+}
+
+.timetable-page .timetable table > thead > tr > th {
+  vertical-align: top;
+  border-bottom: 2px solid #dddddd;
+}
+
+.timetable-page .timetable table > caption + thead > tr:first-child > th,
+.timetable-page .timetable table > colgroup + thead > tr:first-child > th,
+.timetable-page .timetable table > thead:first-child > tr:first-child > th,
+.timetable-page .timetable table > caption + thead > tr:first-child > td,
+.timetable-page .timetable table > colgroup + thead > tr:first-child > td,
+.timetable-page .timetable table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+
+.timetable-page .timetable table > tbody + tbody {
+  border-top: 2px solid #dddddd;
+}
+
+.timetable-page .timetable table > thead > tr > th,
+.timetable-page .timetable table > thead > tr > td {
+  border-bottom-width: 2px;
+}
+
+.timetable-page .timetable table > tbody > tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+
+.timetable-page .table-horizontal tbody tr th.stop-name-container {
+  min-width: 175px;
+}
+
+@media screen and (min-width: 768px) {
+  .timetable-page .table-horizontal tbody tr th.stop-name-container {
+    min-width: 250px;
+  }
+}
+
+.timetable-page .table-hourly {
+  width: auto;
+}
+
+.timetable-page .timetable .table-vertical .trip-row .trip-notes {
+  text-wrap: nowrap;
+}
+
+.timetable-page .route-color-swatch {
+  min-width: 34px;
+  height: 34px;
+  border-radius: 17px;
+  text-align: center;
+  line-height: 34px;
+  font-size: 14px;
+  letter-spacing: -0.5px;
+  padding: 0 5px;
+  flex: none;
+  flex-shrink: 0;
+}
+
+.timetable-page .route-color-swatch-large {
+  min-width: 46px;
+  height: 46px;
+  border-radius: 23px;
+  text-align: center;
+  line-height: 46px;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: -1px;
+  padding: 0 6px;
+  flex: none;
+  flex-shrink: 0;
+}
+
+/* Map Styles */
+
+.timetable-page .map {
+  min-height: 350px;
+}
+
+@media screen and (min-width: 768px) {
+  .timetable-page .map {
+    min-height: 450px;
+  }
+}
+
+.timetable-page .map .mapboxgl-popup-content .popup-title {
+  margin: 0 20px 5px 0;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.timetable-page .map .mapboxgl-popup-content .popup-label {
+  margin-right: 0.25rem;
+}
+
+.timetable-page .map .mapboxgl-popup-content .route-list {
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .map .mapboxgl-popup-content .map-route-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+  gap: 0.5rem;
+}
+
+.timetable-page .map .mapboxgl-popup-content .map-route-item:hover {
+  text-decoration: none;
+}
+
+.timetable-page .map .mapboxgl-popup-content a.map-route-item .underline-hover:hover {
+  text-decoration: underline;
+}
+
+.timetable-page .map .mapboxgl-popup-content .mapboxgl-popup-close-button {
+  padding: 0 5px;
+}

package/views/default/formatting_functions.pug

@@ -1,11 +1,11 @@
 -
   function getTimetableSummary(timetable) {
-    var summary = `This table shows schedules for a selection of key stops on the route for ${timetable.timetable_label} ${timetable.dayList}.`;
-    if (timetable.orientation = 'vertical') {
+    let summary = `This table shows schedules for a selection of key stops on the route for ${timetable.timetable_label} ${timetable.dayList}.`;
+    if (timetable.orientation === 'vertical') {
       summary += ' Stops and their schedule times are listed in the columns.';
-    } else if (timetable.orientation = 'horizontal') {
+    } else if (timetable.orientation === 'horizontal') {
       summary += ' Schedule times are listed in rows, starting with the stop name in the first cell of the row.';
-    } else if (timetable.orientation = 'hourly') {
+    } else if (timetable.orientation === 'hourly') {
       summary += ' Schedule times are listed in rows, starting with the stop name in the first cell of the row and the minutes after the hour in the second row.';
     }
     return summary;
@@ -16,7 +16,7 @@
   }
 
   function formatFrequencyWarning(frequencies) {
-    var warning = 'Trip times shown below are an example only. ';
+    let warning = 'Trip times shown below are an example only. ';
     frequencies.forEach((frequency, idx) => {
       if (idx === 0) {
         warning += 'This route runs every ';
@@ -90,3 +90,19 @@
       geojson: minifiedGeojson
     }
   }
+
+  function getRouteColorsAsCss (route) {
+    if (route && route.route_color) {
+      return `background: #${route.route_color}; color: #${route.route_text_color ?? 'ffffff'};`
+    }
+
+    return ''
+  }
+
+  function formatRouteName(route) {
+    if (isNullOrEmpty(route.route_long_name)) {
+      return `Route ${route.route_short_name}`;
+    }
+
+    return route.route_long_name;
+  }

package/{public → views/default}/js/system-map.js

@@ -1,5 +1,5 @@
 /* global window, document, _, $, mapboxgl */
-/* eslint no-var: "off", prefer-arrow-callback: "off", no-unused-vars: "off" */
+/* eslint prefer-arrow-callback: "off", no-unused-vars: "off" */
 
 const maps = {};
 
@@ -13,27 +13,30 @@ function formatRouteTextColor(route) {
 
 function formatRoute(route) {
   const html = route.route_url
-    ? $('<a>').attr('href', route.route_url).addClass('hover:no-underline')
+    ? $('<a>').attr('href', route.route_url)
     : $('<div>');
 
-  html.addClass('route-item text-xs mb-2');
+  html.addClass('map-route-item');
+
+  // Only add color swatch if route has a color
+  const routeItemDivs = [];
 
   if (route.route_color) {
-    // Only add color swatch if route has a color
-    $('<div>')
-      .addClass('flex items-center gap-2')
-      .html([
-        $('<div>')
-          .addClass('route-color-swatch flex-shrink-0 text-white')
-          .css('backgroundColor', formatRouteColor(route))
-          .css('color', formatRouteTextColor(route))
-          .text(route.route_short_name || ''),
-        $('<div>')
-          .addClass('hover:underline')
-          .text(route.route_long_name || ''),
-      ])
-      .appendTo(html);
+    routeItemDivs.push(
+      $('<div>')
+        .addClass('route-color-swatch')
+        .css('backgroundColor', formatRouteColor(route))
+        .css('color', formatRouteTextColor(route))
+        .text(route.route_short_name ?? ''),
+    );
   }
+  routeItemDivs.push(
+    $('<div>')
+      .addClass('underline-hover')
+      .text(route.route_long_name ?? `Route ${route.route_short_name}`),
+  );
+
+  html.append(routeItemDivs);
 
   return html.prop('outerHTML');
 }
@@ -60,17 +63,24 @@ function formatStopPopup(feature) {
     .appendTo(html);
 
   if (feature.properties.stop_code ?? false) {
-    $('<label>').addClass('mr-1').text('Stop Code:').appendTo(html);
-
-    $('<strong>').text(feature.properties.stop_code).appendTo(html);
+    $('<div>')
+      .html([
+        $('<label>').addClass('popup-label').text('Stop Code:'),
+        $('<strong>').text(feature.properties.stop_code),
+      ])
+      .appendTo(html);
   }
 
-  $('<label>').addClass('block').text('Routes Served:').appendTo(html);
+  $('<label>').text('Routes Served:').appendTo(html);
 
-  $(html).append(routes.map((route) => formatRoute(route)));
+  $(html).append(
+    $('<div>')
+      .addClass('route-list')
+      .html(routes.map((route) => formatRoute(route))),
+  );
 
   $('<a>')
-    .addClass('btn-blue btn-sm mt-2')
+    .addClass('btn-blue btn-sm')
     .prop(
       'href',
       `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&heading=0&pitch=0&fov=90`,

package/{public → views/default}/js/timetable-map.js

@@ -13,32 +13,30 @@ function formatRouteTextColor(route) {
 
 function formatRoute(route) {
   const html = route.route_url
-    ? $('<a>').attr('href', route.route_url).addClass('hover:no-underline')
+    ? $('<a>').attr('href', route.route_url)
     : $('<div>');
 
-  html.addClass('route-item text-xs mb-2');
+  html.addClass('map-route-item');
+
+  // Only add color swatch if route has a color
+  const routeItemDivs = [];
 
   if (route.route_color) {
-    // Only add color swatch if route has a color
-    $('<div>')
-      .addClass('flex items-center gap-2')
-      .html([
-        $('<div>')
-          .addClass('route-color-swatch flex-shrink-0 text-white')
-          .css('backgroundColor', formatRouteColor(route))
-          .css('color', formatRouteTextColor(route))
-          .text(route.route_short_name || ''),
-        $('<div>')
-          .addClass('hover:underline')
-          .text(route.route_long_name || ''),
-      ])
-      .appendTo(html);
-  } else {
-    $('<div>')
-      .addClass('hover:underline')
-      .text(route.route_long_name || '')
-      .appendTo(html);
+    routeItemDivs.push(
+      $('<div>')
+        .addClass('route-color-swatch')
+        .css('backgroundColor', formatRouteColor(route))
+        .css('color', formatRouteTextColor(route))
+        .text(route.route_short_name ?? ''),
+    );
   }
+  routeItemDivs.push(
+    $('<div>')
+      .addClass('underline-hover')
+      .text(route.route_long_name ?? `Route ${route.route_short_name}`),
+  );
+
+  html.append(routeItemDivs);
 
   return html.prop('outerHTML');
 }
@@ -53,17 +51,24 @@ function formatStopPopup(feature, routes) {
     .appendTo(html);
 
   if (feature.properties.stop_code ?? false) {
-    $('<label>').addClass('mr-1').text('Stop Code:').appendTo(html);
-
-    $('<strong>').text(feature.properties.stop_code).appendTo(html);
+    $('<div>')
+      .html([
+        $('<label>').addClass('popup-label').text('Stop Code:'),
+        $('<strong>').text(feature.properties.stop_code),
+      ])
+      .appendTo(html);
   }
 
-  $('<label>').addClass('block').text('Routes Served:').appendTo(html);
+  $('<label>').text('Routes Served:').appendTo(html);
 
-  $(html).append(routeIds.map((routeId) => formatRoute(routes[routeId])));
+  $(html).append(
+    $('<div>')
+      .addClass('route-list')
+      .html(routeIds.map((routeId) => formatRoute(routes[routeId]))),
+  );
 
   $('<a>')
-    .addClass('btn-blue btn-sm mt-2')
+    .addClass('btn-blue btn-sm')
     .prop(
       'href',
       `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&heading=0&pitch=0&fov=90`,

package/views/default/overview.pug

@@ -1,25 +1,25 @@
 include formatting_functions.pug
 
-.h-screen.items-stretch(class="md:flex")
+.timetable-overview
   if !timetablePages || !timetablePages.length
-    h1.text-2xl.mx-4.py-3 No timetables found
+    h1 No timetables found
   else
-    .overview-list.flex-none(class="md:overflow-y-scroll md:max-w-96")
+    .overview-list
       each timetablePageGroup in getAgencyTimetableGroups(timetablePages, agencies)
-        h1.text-2xl.mx-4.py-3= `${formatAgencyName(timetablePageGroup.agency)} Routes`
-  
+        h1= `${formatAgencyName(timetablePageGroup.agency)} Routes`
         each timetablePage in timetablePageGroup.timetablePages
           if config.allowEmptyTimetables || timetablePage.consolidatedTimetables.length > 0
-            a.timetable-overview-label.flex.items-center.gap-2.block.p-2.border-b.border-slate-200(class="hover:bg-slate-100 hover:no-underline" href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
-              each route in _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
-                .route-color-swatch-large.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
+            a.timetable-page-link(href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
+              - const timetableRouteList = _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
+              each route in timetableRouteList
+                .route-color-swatch-large(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
               div
-                .text-xl.leading-none.text-slate-800= timetablePage.timetable_page_label
-                .inline-flex.items-center.justify-center.px-2.py-1.text-xs.font-bold.leading-none.text-slate-800.bg-slate-200.rounded-full= timetablePage.dayList
+                .timetable-page-label= timetablePage.timetable_page_label || timetableRouteList.map(route => formatRouteName(route)).join(' and ')
+                .badge-gray= timetablePage.dayList
     if config.showMap
-      .map.h-full.w-full(id="system_map")
+      #system_map.overview-map
 
-      //- Use #{variable} format to inject values from pug to client side js
+      //- Use !{variable} format to inject values from pug to client side js
       script.
         (function() {
           const geojson = !{JSON.stringify(geojson) || '\'\''};