Add back button

Also: change PWA to standalone
2 years ago · fd1e7c0729
10 changed files with 152 additions and 9 deletions
--- a/about.html
+++ b/about.html
@ -13,7 +13,13 @@
 	<script src="/common/items.js"></script>
 </head>
 <body>
+	<header>
+		<div class="left">
+			<img id="back-button" class="back" src="/common/back.svg"></img>
+		</div>
 		<h1>About</h1>
+		<div class="right"></div>
+	</header>

 	<div class="content">
 		<h2>InfoTren</h2>
--- a/base.css
+++ b/base.css
@ -71,6 +71,22 @@ footer .rsk {
 	text-align: end;
 }

+header {
+	display: flex;
+	align-items: center;
+}
+
+header .left, header .right {
+	flex-grow: 1;
+	flex-basis: 0;
+}
+
+header .back {
+	margin: 4px;
+	height: 24px;
+	cursor: pointer;
+}
+
 h1 {
 	font-size: 17px;
 	font-weight: 400;
@ -236,7 +252,7 @@ input {
 }

 body {
-	font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif;
+	font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif, sans-serif;
 }

 .tabs {
--- a/common/back.js
+++ b/common/back.js
@ -1,8 +1,15 @@
 window.addEventListener('load', function (e) {
-	this.document.body.addEventListener('keydown', function (e) {
+	document.body.addEventListener('keydown', function (e) {
 		if (e.key == 'Backspace' && (e.target.tagName.toUpperCase() !== 'INPUT' || e.target.value.length === 0)) {
 			e.preventDefault()
 			window.history.back()
 		}
 	})
+
+	var backButton = document.getElementById('back-button')
+	if (backButton) {
+		backButton.addEventListener('click', function (e) {
+			window.history.back()
+		})
+	}
 })
--- a/common/back.svg
+++ b/common/back.svg
@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="80"
+   height="21"
+   viewBox="0 0 80 21"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="back.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="8"
+     inkscape:cx="69.0625"
+     inkscape:cy="-14.625"
+     inkscape:window-width="1920"
+     inkscape:window-height="966"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="13.964817"
+       y="34.74966"
+       width="31.664412"
+       height="28.903925"
+       id="rect113" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="fill:none;stroke:none">
+    <path
+       class="arrow"
+       style="fill:none;stroke:#000000;stroke-opacity:1"
+       d="m 10.707106,0.5 -9.99999923,10 9.99999923,10 H 79.627 v -20 z"
+       id="path342"
+       sodipodi:nodetypes="cccccc" />
+    <g
+       id="g1046">
+      <svg
+        x="10"
+        y="0"
+        width="70"
+        height="20">
+        <text
+          xml:space="preserve"
+          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.7322px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect487);fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.909149"
+          id="text119"
+          x="50%"
+          y="50%"
+          dominant-baseline="central"
+          text-anchor="middle"
+          inkscape:label="text119">Back</text>
+      </svg>
+      <rect
+         style="fill:none;stroke:none;stroke-width:5.63791"
+         id="rect487"
+         width="68.209442"
+         height="19.004217"
+         x="10.917553"
+         y="0.99609375" />
+    </g>
+  </g>
+</svg>
--- a/manifest.json
+++ b/manifest.json
@ -1,9 +1,10 @@
 {
+  "id": "ro.dcdev.infotren.kai",
  "name": "Info Tren: Romanian Railways",
  "short_name": "Info Tren",
  "theme_color": "#0000ff",
  "background_color": "#ffffff",
-  "display": "minimal-ui",
+  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "shortcuts": [
@ -12,6 +13,12 @@
      "short_name": "My train",
      "description": "Find information about a train",
      "url": "/train.html"
+    },
+    {
+      "name": "Station Departures/Arrivals",
+      "short_name": "Departures/Arrivals",
+      "description": "View the departures and arrivals boards of a station",
+      "url": "/station.html"
    }
  ]
 }
--- a/station.html
+++ b/station.html
@ -16,7 +16,13 @@
 	<script src="station.js"></script>
 </head>
 <body>
+	<header>
+		<div class="left">
+			<img id="back-button" class="back" src="/common/back.svg"></img>
+		</div>
 		<h1>Station Information</h1>
+		<div class="right"></div>
+	</header>

 	<h4><label for="stationName">Station Name</label></h4>
 	<input type="search" class="items" name="stationName" id="stationName">
--- a/sw.js
+++ b/sw.js
@ -1,4 +1,4 @@
-const VERSION = 'v16'
+const VERSION = 'v17'
 const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
 const API_TRAINS = `${API_ORIGIN}v3/trains`
 const API_STATIONS = `${API_ORIGIN}v3/stations`
--- a/train.html
+++ b/train.html
@ -16,7 +16,13 @@
 	<script src="train.js"></script>
 </head>
 <body>
+	<header>
+		<div class="left">
+			<img id="back-button" class="back" src="/common/back.svg"></img>
+		</div>
 		<h1>Train Information</h1>
+		<div class="right"></div>
+	</header>

 	<h4><label for="trainNumber">Train Number</label></h4>
 	<input class="items" type="tel" name="trainNumber" id="trainNumber">
--- a/view-station.html
+++ b/view-station.html
@ -18,7 +18,13 @@
 	<script src="view-station.js"></script>
 </head>
 <body>
+	<header>
+		<div class="left">
+			<img id="back-button" class="back" src="/common/back.svg"></img>
+		</div>
 		<h1 id="title">View Station</h1>
+		<div class="right"></div>
+	</header>
 	<div id="-date" class="hidden">
 		<p></p>
 		<p class="sec" id="date"></p>
--- a/view-train.html
+++ b/view-train.html
@ -17,7 +17,13 @@
 	<script src="view-train.js"></script>
 </head>
 <body>
+	<header>
+		<div class="left">
+			<img id="back-button" class="back" src="/common/back.svg"></img>
+		</div>
 		<h1 id="title"></h1>
+		<div class="right"></div>
+	</header>
 	<div id="comp-date">
 		<p class="sec" id="company"></p>
 		<p class="sec" id="date"></p>