Arav/Dwelling
1
0
Fork 0
Code Issues Packages Releases Activity

Let's fix terminology. The term overlay is more suitable here, so let's stick to it.

Browse Source
This commit is contained in:
Alexander Andreev 2021-09-16 15:30:19 +04:00
parent b1b19c7e54
commit b14a6dbed4
Signed by: Arav
GPG Key ID: 610DF2574456329F
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
files/static/assets/css/main.css
View File

@ -11,7 +11,7 @@
--secondary-color: #9f2b68; --secondary-color: #9f2b68;
--text-color: #f5f5f5; --text-color: #f5f5f5;
--text-indent: 1.6rem; --text-indent: 1.6rem;
--view-background-color: #f5f5f574; --overlay-background-color: #f5f5f574;
scrollbar-color: var(--primary-color) var(--background-color); } scrollbar-color: var(--primary-color) var(--background-color); }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@ -20,7 +20,7 @@
--primary-color: #9f2b68; --primary-color: #9f2b68;
--secondary-color: #cd2682; --secondary-color: #cd2682;
--text-color: #0a0a0a; --text-color: #0a0a0a;
--view-background-color: #0a0a0a74; } } --overlay-background-color: #0a0a0a74; } }
* { margin: 0; } * { margin: 0; }
@ -101,9 +101,9 @@ nav h1 {
section { margin-top: 1rem; } section { margin-top: 1rem; }
#view { #overlay {
align-items: center; align-items: center;
background-color: var(--view-background-color); background-color: var(--overlay-background-color);
display: flex; display: flex;
visibility: hidden; visibility: hidden;
height: 100%; height: 100%;
@ -113,7 +113,7 @@ section { margin-top: 1rem; }
vertical-align: middle; vertical-align: middle;
width: 100%; } width: 100%; }
#view * { #overlay * {
flex: none; flex: none;
margin: 0 auto; margin: 0 auto;
max-height: 100%; max-height: 100%;

14
files/static/assets/js/main.js
View File

@ -11,7 +11,7 @@ function mousescroll(e) {
e.target.style.transform = `scale(${scale})`; e.target.style.transform = `scale(${scale})`;
} }
document.getElementById("view").addEventListener("click", e => { document.getElementById("overlay").addEventListener("click", e => {
e.target.firstChild.remove(); e.target.firstChild.remove();
e.target.style.visibility = "hidden"; e.target.style.visibility = "hidden";
scale = 1; scale = 1;
@ -27,23 +27,23 @@ file_links.forEach(f => f.addEventListener('click', e => {
video.autoplay = true; video.autoplay = true;
video.controls = true; video.controls = true;
video.src = e.target.pathname; video.src = e.target.pathname;
document.getElementById("view").appendChild(video); document.getElementById("overlay").appendChild(video);
document.getElementById("view").style.visibility = "visible"; document.getElementById("overlay").style.visibility = "visible";
} else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) { } else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
e.preventDefault(); e.preventDefault();
const audio = document.createElement("audio"); const audio = document.createElement("audio");
audio.autoplay = true; audio.autoplay = true;
audio.controls = true; audio.controls = true;
audio.src = e.target.pathname; audio.src = e.target.pathname;
document.getElementById("view").appendChild(audio); document.getElementById("overlay").appendChild(audio);
document.getElementById("view").style.visibility = "visible"; document.getElementById("overlay").style.visibility = "visible";
} else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) { } else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
e.preventDefault(); e.preventDefault();
const image = document.createElement("img"); const image = document.createElement("img");
image.addEventListener('wheel', mousescroll); image.addEventListener('wheel', mousescroll);
image.src = e.target.pathname; image.src = e.target.pathname;
document.getElementById("view").appendChild(image); document.getElementById("overlay").appendChild(image);
document.getElementById("view").style.visibility = "visible"; document.getElementById("overlay").style.visibility = "visible";
} }
})); }));

2
files/views/index.pug
View File

@ -39,4 +39,4 @@ html(lang='en')
h2 Privacy statements h2 Privacy statements
p I collect access logs that include access date and time, IP-address, User-Agent, referer URL that tells me where have you came from, request that you sent to me. In addition there are GeoIP information added based on your IP-address that includes country, region, and city for my convenience. p I collect access logs that include access date and time, IP-address, User-Agent, referer URL that tells me where have you came from, request that you sent to me. In addition there are GeoIP information added based on your IP-address that includes country, region, and city for my convenience.
p This site makes use of JavaScript purely for convenient functionality, like being able to watch video, listen to music, and look images in an overlay without the need to open a file in a new tab or return back. p This site makes use of JavaScript purely for convenient functionality, like being able to watch video, listen to music, and look images in an overlay without the need to open a file in a new tab or return back.
div#view div#overlay