w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-12-13 07:33:39 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Tiny footer in embedded mode

Browse Source
This commit is contained in:
Ian Renton
2025-11-30 15:13:53 +00:00
parent e86d6b8c28
commit 03af6858b4
3 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -26,7 +26,7 @@ This is a Progressive Web App, so you can also "install" it to your Android or i
You can embed Spothole in another website, e.g. for use as part of a ham radio custom dashboard.
URL parameters can be used to trigger an "embedded" mode which hides the headers, footers and settings. In this mode, you provide configuration for the various filter and display options via additional URL parameters. In this mode, any settings that the user has set for Spothole are ignored. This is so that the embedding site can select, for example, their choice of dark mode or SIG filters, which will not impact how Spothole appears when the user accesses it directly.
URL parameters can be used to trigger an "embedded" mode which hides the headers, footers and settings. In this mode, you provide configuration for the various filter and display options via additional URL parameters. Any settings that the user has set for Spothole are ignored. This is so that the embedding site can select, for example, their choice of dark mode or SIG filters, which will not impact how Spothole appears when the user accesses it directly. Effectively, it becomes separate to their normal Spothole settings.
These are supplied with the URL to the page you want to embed, for example for an embedded version of the band map in dark mode, use `https://spothole.com/bands?embedded=true&dark-mode=true`. For an embedded version of the main spots/home page in the system light/dark mode, use `https://spothole.com/?embedded=true`. Providing no URL params causes the page to be loaded in the normal way it would when accessed directly in the user's browser.

8
views/webpage_base.tpl
View File

@@ -49,12 +49,12 @@
<nav id="header" class="navbar navbar-expand-lg bg-body p-0 border-bottom">
<div class="container-fluid p-0">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" id="logo" width="192" height="60" alt="Spothole">
<img src="/img/logo.png" class="logo" width="192" height="60" alt="Spothole">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggler-content" aria-controls="navbar-toggler-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<div class="collapse navbar-collapse" id="navbar-toggler-content">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item ms-4"><a href="/" class="nav-link" id="nav-link-spots"><i class="fa-solid fa-tower-cell"></i> Spots</a></li>
<li class="nav-item ms-4"><a href="/map" class="nav-link" id="nav-link-map"><i class="fa-solid fa-map"></i> Map</a></li>
@@ -99,5 +99,7 @@
</div>
</div>
<div id="embeddedModeFooter" class="text-body-secondary pt-2 px-2 pb-1">Powered by <img src="/img/logo.png" class="logo" width="96" height="30" alt="Spothole"></div>
</body>
</html>

25
webassets/css/style.css
View File

@@ -8,11 +8,30 @@
whole of #header, the map vertical sizing breaks. */
[embedded-mode=true] #header div, [embedded-mode=true] #footer,
[embedded-mode=true] #settingsButtonRow, [embedded-mode=true] #settingsButtonRowMap {
display: none;
display: none;
}
[data-bs-theme=dark] #logo {
filter: invert(100%) hue-rotate(180deg) brightness(80%);
/* Display floating footer in embedded mode only */
#embeddedModeFooter {
display: none;
position: fixed;
bottom: 0;
right: 0;
background: var(--bs-body-bg);
border-radius: 1em 0 0 0;
font-size: 0.9em;
}
[embedded-mode=true] #embeddedModeFooter {
display: block;
}
#embeddedModeFooter img.logo {
position: relative;
top: -2px;
}
/* Invert logo colours in dark mode */
[data-bs-theme=dark] .logo {
filter: invert(100%) hue-rotate(180deg) brightness(80%);
}