code cleanup & fixed compatibility for non-JS users & fixed fullscreen images being in low resolution

This commit is contained in:
partisan 2024-11-19 10:36:33 +01:00
parent 0d083f53e7
commit db89f9c781
13 changed files with 474 additions and 300 deletions

View file

@ -7,6 +7,20 @@
<meta name="darkreader-lock">
{{ end }}
<title>{{ translate "site_description" }}</title>
<!-- Inline Style to Avoid Flashbang -->
<style>
body {
background-color: {{ if .IsThemeDark }} #121212 {{ else }} #ffffff {{ end }};
color: {{ if .IsThemeDark }} #ffffff {{ else }} #000000 {{ end }};
}
#js-enabled {
display: none;
}
#js-disabled {
display: block;
}
</style>
<link rel="stylesheet" href="/static/css/style-search.css">
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
@ -17,9 +31,14 @@
<link rel="apple-touch-icon" href="{{ .IconPathPNG }}">
</head>
<body>
<!-- Menu Button -->
<button class="material-icons-round settings-icon-link-search" onclick="openNav()">menu</button>
<!-- Menu Button -->
<div id="js-enabled">
<button class="material-icons-round settings-icon-link-search" onclick="openNav()">menu</button>
</div>
<div id="js-disabled">
<a href="/settings" class="material-icons-round settings-icon-link-search">menu</a>
</div>
<!-- Side Navigation Menu -->
<div id="mySidenav" class="side-nav">
@ -140,38 +159,48 @@
</div>
</div>
<div class="search-type-icons">
<input type="hidden" name="p" value="1">
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-text').click()">
<button id="sub-search-wrapper-ico-text" class="material-icons-round clickable" name="t" value="text">search</button>
<p>{{ translate "web" }}</p>
<div class="icon-button">
<button id="sub-search-wrapper-ico-text" class="material-icons-round clickable" name="t" value="text">
<span>search</span>
<p>{{ translate "web" }}</p>
</button>
</div>
<div class="icon-button">
<button id="sub-search-wrapper-ico-image" class="material-icons-round clickable" name="t" value="image">
<span>image</span>
<p>{{ translate "images" }}</p>
</button>
</div>
<div class="icon-button">
<button id="sub-search-wrapper-ico-video" class="material-icons-round clickable" name="t" value="video">
<span>movie</span>
<p>{{ translate "videos" }}</p>
</button>
</div>
<div class="icon-button">
<button id="sub-search-wrapper-ico-forum" class="material-icons-round clickable" name="t" value="forum">
<span>forum</span>
<p>{{ translate "forums" }}</p>
</button>
</div>
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-image').click()">
<button id="sub-search-wrapper-ico-image" class="material-icons-round clickable" name="t" value="image">image</button>
<p>{{ translate "images" }}</p>
<div class="icon-button">
<button id="sub-search-wrapper-ico-map" class="material-icons-round clickable" name="t" value="map">
<span>map</span>
<p>{{ translate "maps" }}</p>
</button>
</div>
<div class="icon-button">
<button id="sub-search-wrapper-ico-file" class="material-icons-round clickable" name="t" value="file">
<span>share</span>
<p>{{ translate "torrents" }}</p>
</button>
</div>
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-video').click()">
<button id="sub-search-wrapper-ico-video" class="material-icons-round clickable" name="t" value="video">movie</button>
<p>{{ translate "videos" }}</p>
</div>
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-forum').click()">
<button id="sub-search-wrapper-ico-forum" class="material-icons-round clickable" name="t" value="forum">forum</button>
<p>{{ translate "forums" }}</p>
</div>
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-map').click()">
<button id="sub-search-wrapper-ico-map" class="material-icons-round clickable" name="t" value="map">map</button>
<p>{{ translate "maps" }}</p>
</div>
<div class="icon-button" onclick="document.getElementById('sub-search-wrapper-ico-file').click()">
<button id="sub-search-wrapper-ico-file" class="material-icons-round clickable" name="t" value="file">share</button>
<p>{{ translate "torrents" }}</p>
</div>
</div>
</div>
</div>
</form>
@ -180,9 +209,9 @@
<script defer src="/static/js/sidemenu.js"></script>
<script defer src="/static/js/autocomplete.js"></script>
<script>
window.addEventListener('load', function() {
document.body.style.visibility = 'visible';
});
// When JS is detected, update the DOM
document.getElementById('js-enabled').style.display = 'block';
document.getElementById('js-disabled').style.display = 'none';
</script>
</body>
</html>