Archives
/
fastgallery
mirror of https://github.com/tonimelisma/fastgallery
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Primer CSS for web frontend

Browse Source
pull/3/head
Toni Melisma 4 years ago
parent 38ffcb93fc
commit c5e13daeb9
No known key found for this signature in database
GPG Key ID: FFF9A7EDDEA34756
5 changed files with 192 additions and 102 deletions
Show Stats Download Patch File Download Diff File

7
.gitignore vendored
Unescape Escape View File

@ -5,6 +5,13 @@
*.so
*.dylib
# temp media files
*.mp4
*.jpg
*.png
*.heic
.DS_Store
# Test binary, built with `go test -c`
*.test

81
web/fastgallery.css
Unescape Escape View File

@ -1,22 +1,5 @@
body {
background-color: #eeeeee;
color: black;
margin-left: 10%;
margin-right: 10%;
font-family: sans-serif;
}
h1 {
text-align: center;
}
a {
color: inherit;
text-decoration: none;
}
#modal {
display: none;
display: flex;
justify-content: center;
align-items: center;
left: 0;
@ -25,25 +8,18 @@ a {
height: 100%;
position: fixed;
z-index: 1;
background-color: rgba(238, 238, 238, 1);
}
#modalPicture {
max-height: 100%;
max-width: 100%;
display: block;
margin: auto;
}
/* TODO add hover and click animations for modal buttons, cursor: pointer etc */
.modalClose {
position: absolute;
top: 0%;
right: 0%;
width: 100px;
height: 100px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
@ -53,8 +29,8 @@ a {
position: absolute;
top: 50%;
left: 0%;
width: 100px;
height: 100px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
@ -64,8 +40,8 @@ a {
position: absolute;
top: 50%;
right: 0%;
width: 100px;
height: 100px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
@ -80,48 +56,7 @@ a {
background-color: rgba(0, 0, 0, 0.5);
}
div.images {
display: grid;
}
div.folder {
width: 250px;
height: 250px;
text-align: center;
}
div.folderThumbnail {
width: 200px;
height: 200px;
display: grid;
grid-gap: 0px;
margin: auto;
}
img.folder {
width: 100px;
height: 100px;
}
div.image {
width: 250px;
height: 250px;
text-align: center;
}
img.image {
width: 200px;
height: 200px;
margin: auto;
}
/*img.preload {
display: none
}*/
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}*/

19
web/temp2/Alikansio/index.html
Unescape Escape View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alikansio</title>
<!--<link rel="stylesheet" href="css/style.css">-->
<!--lightbox here-->
</head>
<body>
<a href="../../_pictures/temp2/Alikansio/2018-10-14 15.59.44.jpg">
<div class="icon">
<img src="../../_thumbnails/temp2/Alikansio/2018-10-14 15.59.44.jpg" original alt="../../_original/temp2/Alikansio/2018-10-14 15.59.44.jpg">
</div>
</a>
</body>
</html>

63
web/temp2/index.html
Unescape Escape View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>temp2</title>
<!--<link rel="stylesheet" href="css/style.css">-->
<!--lightbox here-->
</head>
<body>
<a href="Alikansio">
<div class="icon">
<img src="../_thumbnails/temp2/Alikansio/2018-10-14 15.59.44.jpg" width="50%">
</div>
</a>
<a href="../_pictures/temp2/2018-10-14 15.59.20.jpg">
<div class="icon">
<img src="../_thumbnails/temp2/2018-10-14 15.59.20.jpg" original alt="../_original/temp2/2018-10-14 15.59.20.jpg">
</div>
</a>
<a href="../_pictures/temp2/2018-11-25 20.59.17.jpg">
<div class="icon">
<img src="../_thumbnails/temp2/2018-11-25 20.59.17.jpg" original alt="../_original/temp2/2018-11-25 20.59.17.jpg">
</div>
</a>
<a href="../_pictures/temp2/2018-11-25 20.59.21.jpg">
<div class="icon">
<img src="../_thumbnails/temp2/2018-11-25 20.59.21.jpg" original alt="../_original/temp2/2018-11-25 20.59.21.jpg">
</div>
</a>
<a href="../_pictures/temp2/2018-11-25 20.59.46.jpg">
<div class="icon">
<img src="../_thumbnails/temp2/2018-11-25 20.59.46.jpg" original alt="../_original/temp2/2018-11-25 20.59.46.jpg">
</div>
</a>
<a href="../_pictures/temp2/2018-11-25 21.00.57.jpg">
<div class="icon">
<img src="../_thumbnails/temp2/2018-11-25 21.00.57.jpg" original alt="../_original/temp2/2018-11-25 21.00.57.jpg">
</div>
</a>
<a href="../_pictures/temp2/2018-11-28 21.08.12.jpg">
<div class="icon">
<img src="../_thumbnails/temp2/2018-11-28 21.08.12.jpg" original alt="../_original/temp2/2018-11-28 21.08.12.jpg">
</div>
</a>
<a href="../_pictures/temp2/2018-11-28 21.08.18.jpg">
<div class="icon">
<img src="../_thumbnails/temp2/2018-11-28 21.08.18.jpg" original alt="../_original/temp2/2018-11-28 21.08.18.jpg">
</div>
</a>
</body>
</html>

124
web/template.html
Unescape Escape View File

@ -5,43 +5,73 @@
<title>%%TITLE%%</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="fastgallery.css">
<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet">
<link href="fastgallery.css" rel="stylesheet">
<!-- <script src="fastgallery.js"></script> -->
</head>
<body>
<body class="bg-gray">
<h1>%%TITLE%%</h1>
<div class="images">
<!-- TODO -->
<a href="temp2">
<div class="folder">
<div class="folderThumbnail">
<img src="_thumbnails/temp2/2018-10-14 15.59.20.jpg" alt="diipadaapa" class="folder"><img src="_thumbnails/temp2/2018-11-25 20.59.17.jpg" alt="diipadaapa" class="folder"><img src="_thumbnails/temp2/2018-11-25 20.59.21.jpg" alt="diipadaapa"
class="folder"><img src="_thumbnails/temp2/2018-11-25 20.59.46.jpg" alt="diipadaapa" class="folder">
</div>
<span>temp2</span>
</div>
</a>
</div>
<div class="images">
<div class="image" onclick="changePicture(0);displayModal(true);">
<img src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg" class="image">
<span class="image">2018-03-31 16.48.28.jpg</span>
<div class="container-xl">
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0">
<a href="temp2">
<img class="width-fit" src="_thumbnails/temp2/2018-10-14 15.59.20.jpg" alt="diipadaapa">
</a>
<span class="width-fit css-truncate css-truncate-target p-1">temp2</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(0);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-03-31 16.48.28.jpg</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(1);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-07-16 17.28.12 -000.jpg</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(2);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-07-16 17.28.12 -000.jpg</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(3);displayModal(true);">
<img class="width-fit" src="_thumbnails/2016-05-01 18.20.21.jpg" alt="2016-05-01 18.20.21.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2016-05-01 18.20.21</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(0);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-03-31 16.48.28.jpg</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(1);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-07-16 17.28.12 -000.jpg</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(2);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-07-16 17.28.12 -000.jpg</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(3);displayModal(true);">
<img class="width-fit" src="_thumbnails/2016-05-01 18.20.21.jpg" alt="2016-05-01 18.20.21.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2016-05-01 18.20.21</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(0);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-03-31 16.48.28.jpg" alt="2018-03-31 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-03-31 16.48.28.jpg</span>
</div>
<div class="image" onclick="changePicture(1);displayModal(true);">
<img src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg" class="image">
<span class="image">2018-07-16 17.28.12 -000.jpg</span>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(1);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-07-16 17.28.12 -000.jpg" alt="2018-03-31 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-07-16 17.28.12 -000.jpg</span>
</div>
<div class="image" onclick="changePicture(2);displayModal(true);">
<img src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg" class="image">
<span class="image">2018-07-16 17.28.12 -000.jpg</span>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(2);displayModal(true);">
<img class="width-fit" src="_thumbnails/2018-11-10 12.36.05.jpg" alt="2018-11-10 16.48.28.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2018-07-16 17.28.12 -000.jpg</span>
</div>
<div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0" onclick="changePicture(3);displayModal(true);">
<img class="width-fit" src="_thumbnails/2016-05-01 18.20.21.jpg" alt="2016-05-01 18.20.21.jpg">
<span class="width-fit css-truncate css-truncate-target p-1">2016-05-01 18.20.21</span>
</div>
</div>
<!-- TODO make modal navigation way smaller and nicer looking -->
<div id="modal">
<div class="bg-gray v-hidden p-3" id="modal">
<div class="modalClose" onclick="displayModal(false);">
<svg width="100" height="100">
<polygon points="15,25 25,15 50,40 75,15 85,25 60,50 85,75 75,85 50,60 25,85 15,75 40,50"
@ -53,7 +83,7 @@
<polygon points="10,50 70,10 70,90" style="fill:gray;" />
</svg>
</div>
<img id="modalPicture">
<img class="width-fit height-fit" id="modalPicture">
<div class="modalNext" onclick="nextPicture();">
<svg width="80" height="100">
<polygon points="70,50 10,10 10,90" style="fill:gray;" />
@ -74,15 +104,49 @@
thumbnail: "_thumbnails/2018-11-10 12.36.05.jpg",
fullsize: "_pictures/2018-11-10 12.36.05.jpg",
original: "_original/2018-11-10 12.36.05.jpg"
}, {
thumbnail: "_thumbnails/2016-05-01 18.20.21.jpg",
fullsize: "_pictures/2016-05-01 18.20.21.jpg",
original: "_original/2016-05-01 18.20.21.jpg"
}]
// global variable maintains currently shown picture
var currentPicture
// create hover effect shadow for all box elements
const hoverOnBox = (event) => {
event.target.classList.remove("box-shadow")
event.target.classList.add("box-shadow-large")
event.target.classList.add("border-gray-dark")
}
const hoverOffBox = (event) => {
event.target.classList.remove("border-gray-dark")
event.target.classList.remove("box-shadow-large")
event.target.classList.add("box-shadow")
}
const registerBoxEventHandlers = (element) => {
element.addEventListener("mouseenter", hoverOnBox)
element.addEventListener("mouseleave", hoverOffBox)
}
var boxes = document.getElementsByClassName("box")
for (let box of boxes) {
registerBoxEventHandlers(box)
}
// create hover effect for modal navigation elements
// const hoverOnNav = (event) => {}
// logic to show and hide picture modal
const displayModal = (display) => {
if (display) {
document.getElementById("modal").style.display = "flex"
document.getElementById("modal").classList.remove("v-hidden")
document.getElementById("modal").classList.add("v-visible")
} else {
document.getElementById("modal").style.display = "none"
document.getElementById("modal").classList.add("v-hidden")
document.getElementById("modal").classList.remove("v-visible")
window.location.hash = ""
}
}
@ -90,6 +154,7 @@
// TODO add swipe support https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
// TODO add arrow key navigation support
// modal previous and next picture button logic
const prevPicture = () => {
if (!isNaN(currentPicture)) {
if (currentPicture === 0) {
@ -126,6 +191,7 @@
currentPicture = number
}
// if URL links directly to thumbnail via hash link, open modal for that pic on page load
const hashNavigate = () => {
if (window.location.hash) {
const thumbnail = decodeURIComponent(window.location.hash.substring(1))

Write Preview
Loading…
Cancel
Save