Add back button
Also: change PWA to standalone
This commit is contained in:
parent
32f52fe549
commit
fd1e7c0729
GPG key ID:
C1980A470C3EE5B1
10 changed files with 152 additions and 9 deletions
|
|
@ -13,7 +13,13 @@
|
||||||
<script src="/common/items.js"></script>
|
<script src="/common/items.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="left">
|
||||||
|
<img id="back-button" class="back" src="/common/back.svg"></img>
|
||||||
|
</div>
|
||||||
<h1>About</h1>
|
<h1>About</h1>
|
||||||
|
<div class="right"></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h2>InfoTren</h2>
|
<h2>InfoTren</h2>
|
||||||
|
|
|
||||||
18
base.css
18
base.css
|
|
@ -71,6 +71,22 @@ footer .rsk {
|
||||||
text-align: end;
|
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 {
|
h1 {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -236,7 +252,7 @@ input {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
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 {
|
.tabs {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,15 @@
|
||||||
window.addEventListener('load', function (e) {
|
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)) {
|
if (e.key == 'Backspace' && (e.target.tagName.toUpperCase() !== 'INPUT' || e.target.value.length === 0)) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
window.history.back()
|
window.history.back()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
var backButton = document.getElementById('back-button')
|
||||||
|
if (backButton) {
|
||||||
|
backButton.addEventListener('click', function (e) {
|
||||||
|
window.history.back()
|
||||||
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
83
common/back.svg
Normal file
83
common/back.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -1,9 +1,10 @@
|
||||||
{
|
{
|
||||||
|
"id": "ro.dcdev.infotren.kai",
|
||||||
"name": "Info Tren: Romanian Railways",
|
"name": "Info Tren: Romanian Railways",
|
||||||
"short_name": "Info Tren",
|
"short_name": "Info Tren",
|
||||||
"theme_color": "#0000ff",
|
"theme_color": "#0000ff",
|
||||||
"background_color": "#ffffff",
|
"background_color": "#ffffff",
|
||||||
"display": "minimal-ui",
|
"display": "standalone",
|
||||||
"scope": "/",
|
"scope": "/",
|
||||||
"start_url": "/",
|
"start_url": "/",
|
||||||
"shortcuts": [
|
"shortcuts": [
|
||||||
|
|
@ -12,6 +13,12 @@
|
||||||
"short_name": "My train",
|
"short_name": "My train",
|
||||||
"description": "Find information about a train",
|
"description": "Find information about a train",
|
||||||
"url": "/train.html"
|
"url": "/train.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Station Departures/Arrivals",
|
||||||
|
"short_name": "Departures/Arrivals",
|
||||||
|
"description": "View the departures and arrivals boards of a station",
|
||||||
|
"url": "/station.html"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,13 @@
|
||||||
<script src="station.js"></script>
|
<script src="station.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="left">
|
||||||
|
<img id="back-button" class="back" src="/common/back.svg"></img>
|
||||||
|
</div>
|
||||||
<h1>Station Information</h1>
|
<h1>Station Information</h1>
|
||||||
|
<div class="right"></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<h4><label for="stationName">Station Name</label></h4>
|
<h4><label for="stationName">Station Name</label></h4>
|
||||||
<input type="search" class="items" name="stationName" id="stationName">
|
<input type="search" class="items" name="stationName" id="stationName">
|
||||||
|
|
|
||||||
2
sw.js
2
sw.js
|
|
@ -1,4 +1,4 @@
|
||||||
const VERSION = 'v16'
|
const VERSION = 'v17'
|
||||||
const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
|
const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
|
||||||
const API_TRAINS = `${API_ORIGIN}v3/trains`
|
const API_TRAINS = `${API_ORIGIN}v3/trains`
|
||||||
const API_STATIONS = `${API_ORIGIN}v3/stations`
|
const API_STATIONS = `${API_ORIGIN}v3/stations`
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,13 @@
|
||||||
<script src="train.js"></script>
|
<script src="train.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="left">
|
||||||
|
<img id="back-button" class="back" src="/common/back.svg"></img>
|
||||||
|
</div>
|
||||||
<h1>Train Information</h1>
|
<h1>Train Information</h1>
|
||||||
|
<div class="right"></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<h4><label for="trainNumber">Train Number</label></h4>
|
<h4><label for="trainNumber">Train Number</label></h4>
|
||||||
<input class="items" type="tel" name="trainNumber" id="trainNumber">
|
<input class="items" type="tel" name="trainNumber" id="trainNumber">
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,13 @@
|
||||||
<script src="view-station.js"></script>
|
<script src="view-station.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="left">
|
||||||
|
<img id="back-button" class="back" src="/common/back.svg"></img>
|
||||||
|
</div>
|
||||||
<h1 id="title">View Station</h1>
|
<h1 id="title">View Station</h1>
|
||||||
|
<div class="right"></div>
|
||||||
|
</header>
|
||||||
<div id="-date" class="hidden">
|
<div id="-date" class="hidden">
|
||||||
<p></p>
|
<p></p>
|
||||||
<p class="sec" id="date"></p>
|
<p class="sec" id="date"></p>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,13 @@
|
||||||
<script src="view-train.js"></script>
|
<script src="view-train.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="left">
|
||||||
|
<img id="back-button" class="back" src="/common/back.svg"></img>
|
||||||
|
</div>
|
||||||
<h1 id="title"></h1>
|
<h1 id="title"></h1>
|
||||||
|
<div class="right"></div>
|
||||||
|
</header>
|
||||||
<div id="comp-date">
|
<div id="comp-date">
|
||||||
<p class="sec" id="company"></p>
|
<p class="sec" id="company"></p>
|
||||||
<p class="sec" id="date"></p>
|
<p class="sec" id="date"></p>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue