kbruen/kai.infodb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Embed header in window controls overlay

Browse source
This commit is contained in:
Kenneth Bruen 2023-01-22 09:55:36 +01:00
parent b488d28ff9
commit b5ed00a9f1
Signed by: kbruen
GPG key ID: C1980A470C3EE5B1
11 changed files with 65 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
about.html
View file

@ -21,6 +21,7 @@
<h1>About</h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<div class="content">
<h2>InfoTren</h2>

38
base.css
View file

@ -72,10 +72,41 @@ footer .rsk {
}
header {
position: fixed;
left: env(titlebar-area-x, 0);
top: env(titlebar-area-y, 0);
width: env(titlebar-area-width, 100%);
height: env(titlebar-area-height, 36px);
-webkit-app-region: drag;
app-region: drag;
display: flex;
align-items: center;
}
.header-placeholder {
margin-top: env(titlebar-area-height, 36px);
}
header.embedded {
background-color: #0000ff;
color: white;
}
@media (display-mode: window-controls-overlay) {
header {
background-color: #0000ff;
color: white;
}
header .back {
-webkit-app-region: no-drag;
app-region: no-drag;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(83deg) brightness(104%) contrast(101%);
}
}
header .left, header .right {
flex-grow: 1;
flex-basis: 0;
@ -87,6 +118,13 @@ header .back {
cursor: pointer;
}
header.embedded .back {
-webkit-app-region: no-drag;
app-region: no-drag;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(83deg) brightness(104%) contrast(101%);
}
h1 {
font-size: 17px;
font-weight: 400;

7
index.html
View file

@ -16,7 +16,12 @@
<script src="index.js"></script>
</head>
<body>
<h1>InfoTren</h1>
<header>
<div class="left"></div>
<h1>InfoTren</h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<div class="content">
<ul>

1
manifest.json
View file

@ -7,6 +7,7 @@
"background_color": "#ffffff",
"display": "standalone",
"display_override": [
"window-controls-overlay",
"standalone",
"minimal-ui"
],

3
route.html
View file

@ -20,11 +20,12 @@
<body>
<header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
<img id="back-button" class="back" src="/common/back.svg" alt="Back">
</div>
<h1>Find Route</h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<!-- <h4><label for="stationName">Station Name</label></h4>-->
<!-- <input type="search" class="items" name="stationName" id="stationName">-->

3
showcase.html
View file

@ -14,11 +14,12 @@
<body>
<header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
<img id="back-button" class="back" src="/common/back.svg" alt="Back">
</div>
<h1>Showcase</h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<div class="content">
<h1>h1</h1>

3
station.html
View file

@ -18,11 +18,12 @@
<body>
<header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
<img id="back-button" class="back" src="/common/back.svg" alt="Back">
</div>
<h1>Station Information</h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<h4><label for="stationName">Station Name</label></h4>
<input type="search" class="items" name="stationName" id="stationName">

8
sw.js
View file

@ -1,4 +1,4 @@
const VERSION = 'v28'
const VERSION = 'v29'
const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
const API_TRAINS = `${API_ORIGIN}v3/trains`
const API_STATIONS = `${API_ORIGIN}v3/stations`
@ -49,7 +49,7 @@ const CACHE_FIRST = [
// API
API_TRAINS,
API_STATIONS,
API_ITINERARIES,
// API_ITINERARIES,
];
/**
@ -61,7 +61,9 @@ function shouldReturnFromCacheFirst(url) {
}
self.addEventListener('install', (event) => {
self.skipInstall()
if ('skipInstall' in self) {
self.skipInstall()
}
event.waitUntil(
caches
.open(VERSION)

3
train.html
View file

@ -19,11 +19,12 @@
<body>
<header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
<img id="back-button" class="back" src="/common/back.svg" alt="Back">
</div>
<h1>Train Information</h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<h4><label for="trainNumber">Train Number</label></h4>
<input class="items" type="tel" name="trainNumber" id="trainNumber">

4
view-station.html
View file

@ -21,11 +21,13 @@
<body>
<header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
<img id="back-button" class="back" src="/common/back.svg" alt="Back">
</div>
<h1 id="title">View Station</h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<div id="-date" class="hidden">
<p></p>
<p class="sec" id="date"></p>

4
view-train.html
View file

@ -20,11 +20,13 @@
<body>
<header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
<img id="back-button" class="back" src="/common/back.svg" alt="Back">
</div>
<h1 id="title"></h1>
<div class="right"></div>
</header>
<div class="header-placeholder"></div>
<div id="comp-date">
<p class="sec" id="company"></p>
<p class="sec" id="date"></p>