Selection-Mode: Gesamtes Bild klickbar, Checkbox nach unten-rechts
- Capture-Listener auf document statt #main (aggressivster Ansatz) - stopImmediatePropagation blockt Poptrox komplett - Checkbox von oben-links nach unten-rechts verschoben (wird nicht mehr von Toolbar ueberlagert) - Nicht-ausgewaehlte Bilder leicht abgedunkelt (opacity 0.85) - Ausgewaehlte Bilder volle Helligkeit + gruener Rahmen - Mobile: Checkbox 2em gross fuer bessere Sichtbarkeit Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kroonk
2
assets/css/custom.min.css
vendored
2
assets/css/custom.min.css
vendored
@@ -1 +1 @@
|
|||||||
.text-fg{color:#a0a0a1}#selection-toolbar{position:fixed;top:0;left:0;width:100%;background:rgba(31,34,36,.95);padding:.75em 1.5em;display:flex;align-items:center;gap:1em;z-index:10003;transform:translateY(-100%);transition:transform .3s ease;box-sizing:border-box}#selection-toolbar.visible{transform:translateY(0)}#selection-toolbar #sel-count{color:#fff;font-weight:400;margin-right:auto;white-space:nowrap}#selection-toolbar button{white-space:nowrap}body.selection-mode #main .thumb{cursor:pointer;position:relative}body.selection-mode #main .thumb::before{content:"";position:absolute;top:.6em;left:.6em;width:1.4em;height:1.4em;border:2px solid rgba(255,255,255,.7);border-radius:3px;background:rgba(0,0,0,.4);z-index:2;transition:all .2s ease;pointer-events:none}body.selection-mode #main .thumb.selected::before{background:#34a58e;border-color:#34a58e}body.selection-mode #main .thumb.selected .image{outline:3px solid #34a58e;outline-offset:-3px}@media screen and (max-width: 736px){#selection-toolbar{top:4em;padding:.6em 1em;gap:.6em}#selection-toolbar #sel-count{font-size:.9em}#selection-toolbar button{font-size:.85em;padding:.5em 1em}body.selection-mode #main .thumb::before{top:.4em;left:.4em;width:1.8em;height:1.8em;border-width:2.5px}body.selection-mode #main .thumb.selected .image{outline-width:4px}}#footer .presentify{margin:0 0 1.4em 0;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}#footer .presentify .presentify-logo{display:flex;align-items:center;justify-content:center}#footer .presentify .presentify-logo a{display:flex;align-items:center;justify-content:center;border:0}#footer .presentify .presentify-logo img{width:72px;height:72px;display:block}#footer .presentify .presentify-text{margin:0}
|
.text-fg{color:#a0a0a1}#selection-toolbar{position:fixed;top:0;left:0;width:100%;background:rgba(31,34,36,.95);padding:.75em 1.5em;display:flex;align-items:center;gap:1em;z-index:10003;transform:translateY(-100%);transition:transform .3s ease;box-sizing:border-box}#selection-toolbar.visible{transform:translateY(0)}#selection-toolbar #sel-count{color:#fff;font-weight:400;margin-right:auto;white-space:nowrap}#selection-toolbar button{white-space:nowrap}body.selection-mode #main .thumb{cursor:pointer;position:relative}body.selection-mode #main .thumb::before{content:"";position:absolute;bottom:.6em;right:.6em;width:1.6em;height:1.6em;border:2px solid rgba(255,255,255,.8);border-radius:4px;background:rgba(0,0,0,.5);z-index:2;transition:all .2s ease;pointer-events:none}body.selection-mode #main .thumb .image{opacity:.85;transition:opacity .2s ease}body.selection-mode #main .thumb:active .image{opacity:.6}body.selection-mode #main .thumb.selected::before{background:#34a58e;border-color:#34a58e}body.selection-mode #main .thumb.selected .image{opacity:1;outline:3px solid #34a58e;outline-offset:-3px}@media screen and (max-width: 736px){#selection-toolbar{top:4em;padding:.6em 1em;gap:.6em}#selection-toolbar #sel-count{font-size:.9em}#selection-toolbar button{font-size:.85em;padding:.5em 1em}body.selection-mode #main .thumb::before{bottom:.3em;right:.3em;width:2em;height:2em;border-width:2.5px}body.selection-mode #main .thumb.selected .image{outline-width:4px}}#footer .presentify{margin:0 0 1.4em 0;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}#footer .presentify .presentify-logo{display:flex;align-items:center;justify-content:center}#footer .presentify .presentify-logo a{display:flex;align-items:center;justify-content:center;border:0}#footer .presentify .presentify-logo img{width:72px;height:72px;display:block}#footer .presentify .presentify-text{margin:0}
|
||||||
2
assets/css/light.min.css
vendored
2
assets/css/light.min.css
vendored
File diff suppressed because one or more lines are too long
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -341,14 +341,15 @@
|
|||||||
$toolbar.toggleClass('visible', selectionActive);
|
$toolbar.toggleClass('visible', selectionActive);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Klick auf Thumbnail im Selection-Mode (Capture-Phase, feuert VOR Poptrox)
|
// Klick auf Thumbnail im Selection-Mode
|
||||||
$main[0].addEventListener('click', function(e) {
|
// Capture-Phase auf document: faengt JEDEN Klick ab bevor Poptrox ihn sieht
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
if (!selectionActive) return;
|
if (!selectionActive) return;
|
||||||
var thumb = e.target.closest('.thumb');
|
var thumb = e.target.closest('#main .thumb');
|
||||||
if (!thumb) return;
|
if (!thumb) return;
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopImmediatePropagation();
|
||||||
|
|
||||||
var $thumb = $(thumb);
|
var $thumb = $(thumb);
|
||||||
var imgName = $thumb.attr('data-name');
|
var imgName = $thumb.attr('data-name');
|
||||||
|
|||||||
2
assets/js/main.min.js
vendored
2
assets/js/main.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -44,21 +44,32 @@ body.selection-mode {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
// Checkbox unten-rechts (wird nicht von Toolbar ueberlagert)
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.6em;
|
bottom: 0.6em;
|
||||||
left: 0.6em;
|
right: 0.6em;
|
||||||
width: 1.4em;
|
width: 1.6em;
|
||||||
height: 1.4em;
|
height: 1.6em;
|
||||||
border: 2px solid rgba(255, 255, 255, 0.7);
|
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Leichtes Overlay damit klar ist: gesamtes Bild anklickbar
|
||||||
|
.image {
|
||||||
|
opacity: 0.85;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active .image {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
&::before {
|
&::before {
|
||||||
background: _palette(accent1);
|
background: _palette(accent1);
|
||||||
@@ -66,6 +77,7 @@ body.selection-mode {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
|
opacity: 1;
|
||||||
outline: 3px solid _palette(accent1);
|
outline: 3px solid _palette(accent1);
|
||||||
outline-offset: -3px;
|
outline-offset: -3px;
|
||||||
}
|
}
|
||||||
@@ -91,10 +103,10 @@ body.selection-mode {
|
|||||||
|
|
||||||
body.selection-mode #main .thumb {
|
body.selection-mode #main .thumb {
|
||||||
&::before {
|
&::before {
|
||||||
top: 0.4em;
|
bottom: 0.3em;
|
||||||
left: 0.4em;
|
right: 0.3em;
|
||||||
width: 1.8em;
|
width: 2em;
|
||||||
height: 1.8em;
|
height: 2em;
|
||||||
border-width: 2.5px;
|
border-width: 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user