kbruen
/
kai.infodb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add back button 

Also: change PWA to standalone
master
Kenneth Bruen 2 years ago
parent
32f52fe549
commit
fd1e7c0729
Signed by: kbruen
GPG Key ID: C1980A470C3EE5B1
10 changed files with 152 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      about.html
  2. 18
      base.css
  3. 9
      common/back.js
  4. 83
      common/back.svg
  5. 9
      manifest.json
  6. 8
      station.html
  7. 2
      sw.js
  8. 8
      train.html
  9. 8
      view-station.html
  10. 8
      view-train.html

8
about.html
Unescape View File

@ -13,7 +13,13 @@
<script src="/common/items.js"></script> <script src="/common/items.js"></script>
</head> </head>
<body> <body>
<h1>About</h1> <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"> <div class="content">
<h2>InfoTren</h2> <h2>InfoTren</h2>

18
base.css
Unescape View File

@ -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 {

9
common/back.js
Unescape View File

@ -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
Unescape View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

9
manifest.json
Unescape View File

@ -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"
} }
] ]
} }

8
station.html
Unescape View File

@ -16,7 +16,13 @@
<script src="station.js"></script> <script src="station.js"></script>
</head> </head>
<body> <body>
<h1>Station Information</h1> <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> <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
Unescape View File

@ -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`

8
train.html
Unescape View File

@ -16,7 +16,13 @@
<script src="train.js"></script> <script src="train.js"></script>
</head> </head>
<body> <body>
<h1>Train Information</h1> <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> <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">

8
view-station.html
Unescape View File

@ -18,7 +18,13 @@
<script src="view-station.js"></script> <script src="view-station.js"></script>
</head> </head>
<body> <body>
<h1 id="title">View Station</h1> <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"> <div id="-date" class="hidden">
<p></p> <p></p>
<p class="sec" id="date"></p> <p class="sec" id="date"></p>

8
view-train.html
Unescape View File

@ -17,7 +17,13 @@
<script src="view-train.js"></script> <script src="view-train.js"></script>
</head> </head>
<body> <body>
<h1 id="title"></h1> <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"> <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>

Write Preview
Loading…
Cancel
Save