querySelectorAll to querySelector, rearrangement of meta tags in /bus…

…-arrival/ Replaced querySelectorAll to querySelector for queries returning one element in arrival.js and setIcon.js (total of 2 instances) Shifted non-critical meta tags below link tags in bus-arrival/index.html Changed strings to match existing style (single quotes)
jglim · Jan 15, 2019 · 333f590 · 333f590
1 parent 5aba1fd
commit 333f590
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/assets/arrival.js b/assets/arrival.js
@@ -132,7 +132,7 @@ class ArrivalTimes extends Component {
         if (stop) {
           const [lng, lat, name] = stop;
           document.title = `Bus arrival times for ${code + ' - ' + name}`;
-          document.querySelectorAll('[name="apple-mobile-web-app-title"]')[0].setAttribute("content", name);
+          document.querySelector('[name="apple-mobile-web-app-title"]').setAttribute('content', name);
           this.setState({
             busStop: { code, name, lat, lng },
           });

diff --git a/bus-arrival/index.html b/bus-arrival/index.html
@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-title" content="Bus arrival times">
 <title>Bus arrival times</title>
 <link rel="apple-touch-icon" href="../icons/icon-192.png">
 <link rel="stylesheet" href="../assets/arrival.css">
@@ -12,6 +10,8 @@
 <link rel="preload" as="image" href="../assets/images/stop-active.svg">
 <link rel="preload" as="image" href="../assets/images/bus-single.svg">
 <link rel="preload" as="image" href="../assets/images/bus-double.svg">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="Bus arrival times">
 <main>
   <div id="arrivals"></div>
 </main>

diff --git a/utils/setIcon.js b/utils/setIcon.js
@@ -1,14 +1,14 @@
 export default (iconText) => {
   let iconSize = 512;
-  let iconBackgroundColor = "#F01B48";
-  let iconPrimaryColor = "#FFFFFF";
+  let iconBackgroundColor = '#F01B48';
+  let iconPrimaryColor = 'FFFFFF';
   let iconTextFont = `bold ${Math.round(iconSize * 0.2)}px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif`;
 
   // canvas handles
   let c = document.createElement('canvas');
   c.width = iconSize;
   c.height = iconSize;
-  let ctx = c.getContext("2d");
+  let ctx = c.getContext('2d');
 
   // whitewash canvas first
   ctx.fillStyle = iconPrimaryColor;
@@ -35,11 +35,11 @@ export default (iconText) => {
   // draw the icon text
   // bus stop codes are consistently 5-characters wide
   ctx.font = iconTextFont;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
   ctx.fillStyle = iconPrimaryColor;
   ctx.fillText(iconText, (c.width / 2), (c.height / 2));
 
   // replace existing apple-touch-icon
-  document.querySelectorAll('[rel="apple-touch-icon"]')[0].setAttribute("href", c.toDataURL());
+  document.querySelector('[rel="apple-touch-icon"]').setAttribute('href', c.toDataURL());
 };