Merge pull request #86 from cheeaun/staging

Update from staging
cheeaun · Nov 25, 2022 · 4d35fa2 · 4d35fa2
2 parents 3ed0acb + 6cecbec
commit 4d35fa2
Show file tree

Hide file tree

Showing 21 changed files with 48,367 additions and 54,795 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "singleQuote": true
+}
diff --git a/assets/app.css b/assets/app.css
@@ -585,15 +585,27 @@ a:active {
   font-size: 0.8em;
   line-height: 1.3;
 }
+.callout.iconic {
+  display: flex;
+}
+.callout.iconic:before {
+  margin-right: .5em;
+}
 .warning {
   background-color: papayawhip;
   color: saddlebrown;
   font-weight: bold;
 }
+.warning.iconic:before {
+  content: '⚠️';
+}
 .info {
   background-color: lightcyan;
   color: midnightblue;
 }
+.info.iconic:before {
+  content: 'ℹ';
+}
 
 #arrivals-popover {
   max-height: none;
@@ -984,6 +996,19 @@ span.legend-opposite {
   margin-right: 8px;
 }
 
+.stops-table td.same {
+  background: linear-gradient(
+      #f01b4866,
+      #f01b4866 2px,
+      #ffff 2px,
+      #ffff 4px,
+      #f01b4866 4px,
+      #f01b4866
+    )
+    center no-repeat;
+  background-size: 10px 6px;
+}
+
 .placeholder {
   color: #aaa;
   letter-spacing: -1px;
@@ -1214,6 +1239,10 @@ a.service-tag:hover {
   flex: 1;
   font-weight: bold;
 }
+.popover-button.primary {
+  box-shadow: inset 0 0 0 2px #007aff, 0 1px 5px #007aff99;
+  background-color: #fff;
+}
 .popover-button:first-child {
   margin-left: 0;
 }

diff --git a/assets/app.js b/assets/app.js
@@ -212,7 +212,7 @@ const App = () => {
   };
 
   const handleServicesScroll = () => {
-    if (expandSearch) return;
+    if (expandSearch || expandedSearchOnce) return;
     setExpandSearch(true);
     setExpandedSearchOnce(true);
     // $map.classList.add('fade-out');
@@ -1315,7 +1315,8 @@ const App = () => {
 
     map = window._map = new mapboxgl.Map({
       container: 'map',
-      style: 'mapbox://styles/cheeaun/ckn18umqw1jsi17nymmpdinba',
+      // style: 'mapbox://styles/cheeaun/clasg1d6s003s15qmq7wr6yp1/draft',
+      style: 'mapbox://styles/cheeaun/clasg1d6s003s15qmq7wr6yp1',
       renderWorldCopies: false,
       boxZoom: false,
       minZoom: 8,
@@ -2246,7 +2247,7 @@ const App = () => {
           'line-opacity': ['interpolate', ['linear'], ['zoom'], 14.1, 0, 16, 1],
         },
       },
-      'road-label',
+      'road-label-navigation',
     );
 
     // Service live buses
@@ -2855,7 +2856,7 @@ const App = () => {
                   href={`/bus-arrival/#${stopPopoverData.number}`}
                   target="_blank"
                   onClick={openBusArrival}
-                  class="popover-button"
+                  class="popover-button primary"
                 >
                   {t('glossary.busArrivals')}{' '}
                   <img

diff --git a/assets/arrival.css b/assets/arrival.css
@@ -150,7 +150,7 @@ table thead * {
 
 table th,
 table td {
-  padding: 6px 10px;
+  padding: 6px 10px 0px;
 }
 
 table th *,
@@ -162,16 +162,41 @@ table tbody {
   transition: opacity 0.3s;
 }
 
-table tbody th {
+table tbody th:not([colspan]) {
   width: 8ex;
   z-index: 10;
   position: relative;
   background-color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   pointer-events: auto;
 }
+table tbody th[colspan] {
+  padding: 0 10px 6px;
+  background: repeating-linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.05) 0,
+    rgba(0, 0, 0, 0.05) 1px,
+    transparent 1px,
+    transparent 50px
+  ) 8ex 0;
+}
+table tbody th small {
+  font-weight: normal;
+  color: #666;
+  font-size: 11px;
+}
+table tbody th small:after {
+  content: ' ←';
+  opacity: .5;
+}
 
-table tbody tr:nth-child(2n) {
+/* table tbody tr:nth-child(2n) {
+  background-color: #fafafa;
+} */
+
+/* alternate four rows */
+table tbody tr:nth-child(4n),
+table tbody tr:nth-child(4n-1) {
   background-color: #fafafa;
 }
 
@@ -202,10 +227,13 @@ table tbody td.blank {
   background-color: rgba(240, 240, 240, 0.75);
   z-index: 11;
   backdrop-filter: blur(1px) saturate(3);
+}
+
+.legend .loads {
   display: flex;
 }
 
-.legend span {
+.legend .loads span {
   display: flex;
   align-items: center;
   padding: 3px;
@@ -214,10 +242,13 @@ table tbody td.blank {
   border-radius: 1px;
 }
 
-.legend span > img {
-  margin-right: 5px;
-  min-height: 16px;
-  min-width: 16px;
+.legend .visits {
+  display: flex;
+}
+.legend .visit-numbers {
+  display: flex;
+  gap: 6px;
+  margin-right: 10px;
 }
 
 footer {
@@ -247,11 +278,18 @@ footer {
   right: -6px;
   width: 12px;
   height: 12px;
-  border: 2px solid #fff;
   border-radius: 12px;
   overflow: hidden;
+}
+.stop-tag.online:after,
+.stop-tag.loading:after {
+  border: 2px solid #fff;
   background-color: limegreen;
 }
+.stop-tag.error:after {
+  border: 2px solid #fff;
+  background-color: orangered;
+}
 
 @keyframes blink {
   0% {
@@ -262,8 +300,12 @@ footer {
   }
 }
 
-.stop-tag.loading:after {
-  animation: blink 0.3s ease-in-out 4 alternate both;
+.stop-tag.loading:after,
+.stop-tag.error:after {
+  animation: blink 0.3s ease-in-out infinite alternate both;
+}
+.stop-tag.online:after {
+  animation: blink 3s ease-in-out infinite alternate both;
 }
 
 .load {
@@ -291,16 +333,17 @@ footer {
 
 .time-sea {
   color: green;
+  border-bottom: transparent solid;
 }
 
 .time-sda {
   color: orangered;
-  border-bottom-style: dotted;
+  border-bottom: orangered dotted;
 }
 
 .time-lsd {
   color: firebrick;
-  border-bottom-style: dashed;
+  border-bottom: firebrick dashed;
 }
 
 @media (min-width: 720px) {
@@ -337,6 +380,10 @@ footer {
   table {
     float: right;
   }
+  .legend {
+    clear: both;
+    width: 50%;
+  }
 }
 
 .bus-lane-cell {
@@ -349,21 +396,61 @@ footer {
     transparent 1px,
     transparent 50px
   );
+  vertical-align: top;
 }
 
 .bus-lane {
   position: relative;
   height: 1.8em;
 }
+.bus-lane + .bus-lane {
+  border-top: 1px dashed rgba(0, 0, 0, 0.05);
+  padding-top: 3px;
+  margin-top: 3px;
+}
 
-.bus-lane .bus {
+.visit-number {
+  display: inline-block;
+  font-weight: bold;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(255, 255, 255, .8);
+  border: 1px dashed rgba(0, 0, 0, 0.5);
+  border-radius: 3em;
+  width: 2em;
+  height: 2em;
+  text-align: center;
+  line-height: 1.8em;
+  z-index: 1;
+}
+
+.bus-lane .visit-number {
+  position: absolute;
+  top: 4px;
+  right: 12px;
+  pointer-events: none;
+}
+
+/* .bus-lane .bus {
   left: 0;
   bottom: 0;
   position: absolute;
   font-size: 11px;
   display: inline-block;
   transition: all 1s ease-out;
   filter: drop-shadow(1px 0 0 #fff) drop-shadow(1px -1px #fff);
+} */
+
+.bus-lane .bus {
+  display: block;
+  transition: all 1s ease-out;
+  will-change: margin-left;
+}
+
+.bus-lane .bus-float {
+  float: left;
+  font-size: 11px;
+  padding-right: 4px;
 }
 
 .bus-lane .bus > * {
@@ -381,6 +468,10 @@ footer {
   }
 }
 
+.bus.ghost .bus-float {
+  position: absolute;
+}
+
 .bus-lane > .bus.ghost:first-child > * {
   animation: ghosting 3s both;
 }
@@ -411,25 +502,41 @@ footer {
   z-index: 2;
 }
 
-.bus-lane .bus:not(.ghost) ~ .bus:not(.ghost) > * {
+/* .bus-lane .bus:not(.ghost) ~ .bus:not(.ghost) > * {
   filter: opacity(0.75);
 }
 .bus-lane .bus:not(.ghost) ~ .bus:not(.ghost):hover > * {
   filter: opacity(1);
-}
+} */
 
 .bus-lane .bus:not(.ghost) ~ .bus:not(.ghost) ~ .bus:not(.ghost) {
   z-index: 1;
 }
 
-.bus-lane .bus:not(.ghost) ~ .bus:not(.ghost) ~ .bus:not(.ghost) > * {
+/* .bus-lane .bus:not(.ghost) ~ .bus:not(.ghost) ~ .bus:not(.ghost) > * {
   filter: opacity(0.5);
 }
 .bus-lane .bus:not(.ghost) ~ .bus:not(.ghost) ~ .bus:not(.ghost):hover > * {
   filter: opacity(1);
-}
+} */
 
 .bus-lane .bus,
 .bus-lane .bus img {
   vertical-align: bottom;
 }
+
+.debug {
+  color: red;
+  z-index: 10000;
+  position: absolute;
+  background: white;
+  padding: 1px 2px;
+  top: -.5em;
+}
+
+.destination {
+  border-radius: 3px;
+  padding: 2px;
+  color: #3a6727;
+  background: linear-gradient(90deg, #5d33 0%, #fff0 100%);
+}