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.

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;
--text-color: #f5f5f5;
--text-indent: 1.6rem;
--view-background-color: #f5f5f574;
--overlay-background-color: #f5f5f574;
scrollbar-color: var(--primary-color) var(--background-color); }
@media (prefers-color-scheme: light) {
@ -20,7 +20,7 @@
--primary-color: #9f2b68;
--secondary-color: #cd2682;
--text-color: #0a0a0a;
--view-background-color: #0a0a0a74; } }
--overlay-background-color: #0a0a0a74; } }
* { margin: 0; }
@ -101,9 +101,9 @@ nav h1 {
section { margin-top: 1rem; }
#view {
#overlay {
align-items: center;
background-color: var(--view-background-color);
background-color: var(--overlay-background-color);
display: flex;
visibility: hidden;
height: 100%;
@ -113,7 +113,7 @@ section { margin-top: 1rem; }
vertical-align: middle;
width: 100%; }
#view * {
#overlay * {
flex: none;
margin: 0 auto;
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})`;
}
document.getElementById("view").addEventListener("click", e => {
document.getElementById("overlay").addEventListener("click", e => {
e.target.firstChild.remove();
e.target.style.visibility = "hidden";
scale = 1;
@ -27,23 +27,23 @@ file_links.forEach(f => f.addEventListener('click', e => {
video.autoplay = true;
video.controls = true;
video.src = e.target.pathname;
document.getElementById("view").appendChild(video);
document.getElementById("view").style.visibility = "visible";
document.getElementById("overlay").appendChild(video);
document.getElementById("overlay").style.visibility = "visible";
} else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
e.preventDefault();
const audio = document.createElement("audio");
audio.autoplay = true;
audio.controls = true;
audio.src = e.target.pathname;
document.getElementById("view").appendChild(audio);
document.getElementById("view").style.visibility = "visible";
document.getElementById("overlay").appendChild(audio);
document.getElementById("overlay").style.visibility = "visible";
} else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
e.preventDefault();
const image = document.createElement("img");
image.addEventListener('wheel', mousescroll);
image.src = e.target.pathname;
document.getElementById("view").appendChild(image);
document.getElementById("view").style.visibility = "visible";
document.getElementById("overlay").appendChild(image);
document.getElementById("overlay").style.visibility = "visible";
}
}));

2
files/views/index.pug
View File

@ -39,4 +39,4 @@ html(lang='en')
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 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