kbruen/kai.infotren
1
0
Fork 0
mirror of https://codeberg.org/kbruen/kai.infotren.git synced 2025-11-04 17:06:46 +02:00
Code Issues 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> <h1>About</h1>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="header-placeholder"></div>
<div class="content"> <div class="content">
<h2>InfoTren</h2> <h2>InfoTren</h2>

38
base.css
View file

@ -72,10 +72,41 @@ footer .rsk {
} }
header { 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; display: flex;
align-items: center; 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 { header .left, header .right {
flex-grow: 1; flex-grow: 1;
flex-basis: 0; flex-basis: 0;
@ -87,6 +118,13 @@ header .back {
cursor: pointer; 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 { h1 {
font-size: 17px; font-size: 17px;
font-weight: 400; font-weight: 400;

7
index.html
View file

@ -16,7 +16,12 @@
<script src="index.js"></script> <script src="index.js"></script>
</head> </head>
<body> <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"> <div class="content">
<ul> <ul>

1
manifest.json
View file

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

3
route.html
View file

@ -20,11 +20,12 @@
<body> <body>
<header> <header>
<div class="left"> <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> </div>
<h1>Find Route</h1> <h1>Find Route</h1>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="header-placeholder"></div>
<!-- <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">-->

3
showcase.html
View file

@ -14,11 +14,12 @@
<body> <body>
<header> <header>
<div class="left"> <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> </div>
<h1>Showcase</h1> <h1>Showcase</h1>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="header-placeholder"></div>
<div class="content"> <div class="content">
<h1>h1</h1> <h1>h1</h1>

3
station.html
View file

@ -18,11 +18,12 @@
<body> <body>
<header> <header>
<div class="left"> <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> </div>
<h1>Station Information</h1> <h1>Station Information</h1>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="header-placeholder"></div>
<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">

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_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`
@ -49,7 +49,7 @@ const CACHE_FIRST = [
// API // API
API_TRAINS, API_TRAINS,
API_STATIONS, API_STATIONS,
API_ITINERARIES, // API_ITINERARIES,
]; ];
/** /**
@ -61,7 +61,9 @@ function shouldReturnFromCacheFirst(url) {
} }
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
self.skipInstall() if ('skipInstall' in self) {
self.skipInstall()
}
event.waitUntil( event.waitUntil(
caches caches
.open(VERSION) .open(VERSION)

3
train.html
View file

@ -19,11 +19,12 @@
<body> <body>
<header> <header>
<div class="left"> <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> </div>
<h1>Train Information</h1> <h1>Train Information</h1>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="header-placeholder"></div>
<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">

4
view-station.html
View file

@ -21,11 +21,13 @@
<body> <body>
<header> <header>
<div class="left"> <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> </div>
<h1 id="title">View Station</h1> <h1 id="title">View Station</h1>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="header-placeholder"></div>
<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>

4
view-train.html
View file

@ -20,11 +20,13 @@
<body> <body>
<header> <header>
<div class="left"> <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> </div>
<h1 id="title"></h1> <h1 id="title"></h1>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="header-placeholder"></div>
<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>