Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

added dynamic loading of favicons

Browse source
This commit is contained in:
partisan 2025-05-09 08:26:14 +02:00
parent 255acb360f
commit 81fb811111
4 changed files with 355 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

42
templates/text.html
View file

@ -17,6 +17,45 @@
<link rel="icon" href="{{ .IconPathSVG }}" type="image/svg+xml">
<link rel="icon" href="{{ .IconPathPNG }}" type="image/png">
<link rel="apple-touch-icon" href="{{ .IconPathPNG }}">
<style>
.favicon-wrapper {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
}
.favicon-wrapper.loading img {
visibility: hidden; /* hide placeholder */
}
.favicon-wrapper.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -8px 0 0 -8px;
border: 2px solid var(--html-bg);
border-top-color: var(--fg);
border-radius: 50%;
animation: spin 0.7s linear infinite;
z-index: 2;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/*
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
} */
</style>
</head>
<body>
<!-- Menu Button -->
@ -194,10 +233,9 @@
</form>
</div>
<div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="text"></div>
<script defer src="/static/js/dynamicscrolling.js"></script>
<script defer src="/static/js/dynamicscrollingtext.js"></script>
<script defer src="/static/js/autocomplete.js"></script>
<script defer src="/static/js/minimenu.js"></script>
<script defer src="/static/js/dynamicscrollingimages.js"></script>
<script>
document.querySelectorAll('.js-enabled').forEach(el => el.classList.remove('js-enabled'));
</script>