andrey/album
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Changed zoom-on-click to use fullscreen.

Browse Source
This commit is contained in:
Rasmus Kaj 2023-01-12 01:22:21 +01:00
parent 17cdd4f5cd
commit 01013aaf06
4 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -8,6 +8,8 @@ The format is based on
* Check for null bytes in autocomplete patterns, make them result in a * Check for null bytes in autocomplete patterns, make them result in a
400 bad request rather than a 500 internal server error. 400 bad request rather than a 500 internal server error.
* Changed zoom-on-click to use fullscreen. I think that is an
improvement especially on mobile.
* Improved logging by using tracing and tracing-subscriber rather than * Improved logging by using tracing and tracing-subscriber rather than
log and env_logger. log and env_logger.
* Four more kinds of OSM areas to recognize. * Four more kinds of OSM areas to recognize.

20
res/photos.scss
View File

@ -10,6 +10,7 @@ body {
background: #eee; background: #eee;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: serif;
justify-content: space-between; justify-content: space-between;
line-height: 1.6; line-height: 1.6;
} }
@ -248,28 +249,25 @@ main.details {
width: -moz-available; width: -moz-available;
width: -webkit-fill-available; width: -webkit-fill-available;
width: available; width: available;
&.zoom { &:fullscreen {
position: fixed;
top: 0;
left: 0;
width: -moz-available;
height: -moz-available;
z-index: 10000;
object-fit: contain; object-fit: contain;
border: 0;
background: #222;
} }
} }
} }
@media screen and (min-width: 50em) { @media screen and (min-width: 56ch) {
main.details { main.details {
align-items: start; align-items: start;
display: grid; display: grid;
flex: content 1 1; flex: content 1 1;
grid-gap: 1ex; grid-gap: 1ex;
grid-template-columns: 1fr fit-content(29%); grid-template-columns: 1fr clamp(24ch, 29%, 52ch);
grid-template-rows: min-content 1fr min-content 1fr; grid-template-rows: min-content 1fr min-content 1fr;
max-height: -moz-available; max-height: -moz-available;
overflow: hidden; overflow: hidden;
min-height: 20em;
h1 { h1 {
grid-column: 2; grid-column: 2;
@ -286,10 +284,6 @@ main.details {
object-fit: scale-down; object-fit: scale-down;
width: auto; width: auto;
height: auto; height: auto;
.zoom {
grid-column: 1 / 3;
}
} }
.places a:nth-child(n+2) { .places a:nth-child(n+2) {
font-size: 80%; font-size: 80%;

10
res/ux.js
View File

@ -33,7 +33,15 @@
let i = d.querySelector('.details .item'); let i = d.querySelector('.details .item');
if (i) { if (i) {
i.addEventListener('click', e => { i.addEventListener('click', e => {
i.classList.toggle('zoom'); if (!d.fullscreenElement) {
let full = d.querySelector('.meta a.full');
if (full && (i.src != full.href)) {
i.src = full.href;
}
i.requestFullscreen();
} else if (d.exitFullscreen) {
d.exitFullscreen();
}
resize_map(); resize_map();
}); });
} }

2
templates/details.rs.html
View File

@ -14,7 +14,7 @@
<img class="item" src="/img/@photo.id-m.jpg" width="@photo.get_size(SizeTag::Medium).0" height="@photo.get_size(SizeTag::Medium).1"> <img class="item" src="/img/@photo.id-m.jpg" width="@photo.get_size(SizeTag::Medium).0" height="@photo.get_size(SizeTag::Medium).1">
<div class="meta"> <div class="meta">
@if context.is_authorized() { @if context.is_authorized() {
<p><a href="/img/@photo.id-l.jpg">@photo.path</a></p> <p><a href="/img/@photo.id-l.jpg" class="full">@photo.path</a></p>
@if photo.is_public() {<p>This photo is public.</p>} @if photo.is_public() {<p>This photo is public.</p>}
else {<p>This photo is not public.</p>} else {<p>This photo is not public.</p>}
} }