CAMP/camp
1
0
Fork 0
Code Issues 3 Pull requests 1 Releases Wiki Activity

mobile view

Browse source
This commit is contained in:
j 2025-03-28 14:49:02 +00:00
parent cefdca4200
commit cd75c84255
3 changed files with 107 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
camp/static/css/main.css
View file

@ -58,6 +58,11 @@ a:focus, a:hover {
padding-left: 0em !important;
padding-top: 10px; /* moved below search bar */
}
@media screen and (max-width: 39.9375em) {
.special-column {
padding-right: 0;
}
}
.index-text {
padding-left: 3%;

33
camp/static/css/site.scss
View file

@ -164,3 +164,36 @@
border-color: #1779ba;
}
}
.inline-photo {
display: inline-block;
.caption {
display: none;
}
.photo {
scroll-margin-top: 12px;
}
}
.inline {
margin-left: -12px;
width: 100vw;
li {
padding: 0;
}
.inline-photo {
display: block;
.caption {
display: block;
color: #ffffff;
padding-left: 2px;
padding-right: 2px;
p {
margin-bottom: 0;
}
}
}
}
@media screen and (max-width: 39.9375em) {
.gallery {
}
}

81
camp/static/js/gallery.js
View file

@ -2,6 +2,10 @@ function isNumber(x) {
return parseFloat(x) == x
};
function isMobile() {
return getComputedStyle(document.querySelector('.special-column')).paddingRight == '0px'
}
function parseGalleryHash() {
let parts = document.location.hash.slice(1).split('/')
if (parts.lengh == 1 && isNumber(parts[0])) {
@ -32,14 +36,19 @@ function loadGalleries() {
edit: img.dataset.edit
}
photos.push(photo)
img.parentElement.href = `#${galleryIdx+1}/${photos.length}`
img.parentElement.addEventListener("click", event => {
event.preventDefault()
event.stopPropagation()
dialog.open(src)
dialog.open(src, -1, event)
})
})
dialog = loadGallery(photos, galleryIdx)
gallery.appendChild(dialog.element)
if (isMobile()) {
dialog = loadInlineGallery(photos, galleryIdx, null, gallery)
} else {
dialog = loadGallery(photos, galleryIdx, null, gallery)
}
dialog.element && gallery.appendChild(dialog.element)
if (current.gallery == galleryIdx) {
dialog.open(undefined, current.image)
}
@ -58,7 +67,7 @@ function loadGalleries() {
img.parentElement.addEventListener("click", event => {
event.preventDefault()
event.stopPropagation()
stage.open(src)
dialog.open(src, -1, event)
})
})
const main = document.querySelector('.gallery-main-stage')
@ -66,6 +75,46 @@ function loadGalleries() {
})
}
function loadInlineGallery(images, idx, main, thumbnails) {
thumbnails.querySelectorAll('.photo').forEach(img => {
const container = document.createElement('div')
container.classList.add("inline-photo")
container.innerHTML = `
<img class="photo" src="${img.src}">
<div class="caption">${img.dataset.caption||''}</div>
`
img.replaceWith(container)
})
return {
element: null,
open: function(src, newIdx=-1, event=null) {
let img
if (newIdx != -1) {
img = thumbnails.querySelectorAll('.photo')[newIdx - 1]
}
if (thumbnails.classList.contains("inline")) {
thumbnails.classList.remove("inline");
thumbnails.querySelectorAll('.photo').forEach(img => {
img.src = img.src.replace('_display', '_thumbnail')
})
thumbnails.previousElementSibling.scrollIntoView()
} else {
thumbnails.classList.add("inline");
thumbnails.querySelectorAll('.photo').forEach(img => {
img.src = img.src.replace('_thumbnail', '_display')
})
setTimeout(() => {
if (img) {
img.scrollIntoView()
} else if (event && event.target) {
event.target.scrollIntoView()
}
}, 20)
}
}
}
}
function loadGallery(images, idx, main, thumbnails) {
let gallery;
@ -145,7 +194,7 @@ function loadGallery(images, idx, main, thumbnails) {
gallery.querySelectorAll(".thumbnail").forEach((thumb, i) => {
thumb.classList.toggle("active", i === index);
});
if (thumbnailsContainer && getComputedStyle(thumbnailsContainer).flexWrap == "nowrap") {
if (thumbnailsContainer && !isMobile()) {
gallery.querySelector('.active').scrollIntoView()
}
}
@ -156,12 +205,14 @@ function loadGallery(images, idx, main, thumbnails) {
download.href = ""
download.classList.add('disabled')
}
if (images[index].edit) {
edit.href = images[index].edit
edit.classList.remove('disabled')
} else {
edit.href = ""
edit.classList.add('disabled')
if (edit) {
if (images[index].edit) {
edit.href = images[index].edit
edit.classList.remove('disabled')
} else {
edit.href = ""
edit.classList.add('disabled')
}
}
prevBtn.disabled = index === 0;
nextBtn.disabled = index === images.length - 1;
@ -177,7 +228,9 @@ function loadGallery(images, idx, main, thumbnails) {
const thumb = document.createElement("img");
thumb.src = img.src.replace('_display', '_thumbnail');
thumb.classList.add("thumbnail");
thumb.onclick = () => {
thumb.onclick = (event) => {
event.preventDefault()
event.stopPropagation()
currentIndex = index;
updateGallery(index);
};
@ -191,6 +244,8 @@ function loadGallery(images, idx, main, thumbnails) {
}
prevBtn.onclick = () => {
event.preventDefault()
event.stopPropagation()
if (currentIndex > 0) {
currentIndex--;
updateGallery(currentIndex);
@ -198,6 +253,8 @@ function loadGallery(images, idx, main, thumbnails) {
};
nextBtn.onclick = () => {
event.preventDefault()
event.stopPropagation()
if (currentIndex < images.length - 1) {
currentIndex++;
updateGallery(currentIndex);