olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring and testing...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-09-19 13:26:48 +03:00
parent 9dc0b8222c
commit ac7179384c
2 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/grid-n-view.css
View File

@ -12,30 +12,24 @@
:root {
/* dimensions */
--gallery-image-base-height: 18rem;
--gallery-image-margin: 0;
--gallery-image-spacing: 0rem;
--gallery-current-image-border: 0.7rem;
--gallery-padding: 3rem;
--gallery-padding-horizontal: var(--gallery-padding);
--gallery-padding-vertical: var(--gallery-current-image-border);
--gallery-padding-top: var(--gallery-padding-vertical);
--gallery-padding-bottom: var(--gallery-padding-vertical);
--gallery-padding-left: var(--gallery-padding-horizontal);
--gallery-padding-right: var(--gallery-padding-horizontal);
--gallery-image-scroll-margin: calc(2 * var(--gallery-current-image-border));
--gallery-empty-height: var(--gallery-image-base-height);
--gallery-scrollbar-width: 0.5rem;
--toolbar-button-size: 2rem;
--lightbox-frame: 5vmin;
--lightbox-image-margin-top: 0.75;
--lightbox-button-size: 2em;
--lightbox-button-size: 2rem;
/* theme */
--gallery-text-color: black;
--gallery-secondary-color: silver;
--gallery-shade-color: whitesmoke;
--gallery-background-color: white;
--gallery-accent-color: white;
--gallery-secondary-accent-color: white;
--lightbox-text-color: black;
--lightbox-background-color: white;
@ -48,6 +42,21 @@
/* XXX can we use this as the basis for sizing for different devices??? */
font-size: 5mm;
}
/* calculated values... */
/* NOTE: these need to be separeated from the :root values to recalculate... */
body {
--gallery-image-margin: calc(var(--gallery-image-spacing) / 2);
--gallery-padding-horizontal: var(--gallery-padding);
--gallery-padding-vertical: var(--gallery-current-image-border);
--gallery-padding-top: var(--gallery-padding-vertical);
--gallery-padding-bottom: var(--gallery-padding-vertical);
--gallery-padding-left: var(--gallery-padding-horizontal);
--gallery-padding-right: var(--gallery-padding-horizontal);
--gallery-image-scroll-margin: calc(2 * var(--gallery-current-image-border));
--gallery-empty-height: var(--gallery-image-base-height);
}
.gallery-dark {
--gallery-text-color: silver;
@ -202,7 +211,7 @@ button:active {
.gallery:not(.lightboxed) .images img:not(.current):hover {
z-index: calc(var(--base-layer) + 1);
box-shadow:
0px 0px 0px calc(var(--gallery-current-image-border) / 5) rgba(255,255,255,1),
0px 0px 0px calc(var(--gallery-current-image-border) / 5) var(--gallery-accent-color),
0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
}
@ -210,13 +219,13 @@ button:active {
.gallery .images img.current {
z-index: 10;
box-shadow:
0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
0px 0px 0px var(--gallery-current-image-border) var(--gallery-accent-color),
0.4em 0.4em 2em 0em rgba(0,0,0,0.8);
}
.gallery:not(.lightboxed) .images img.current:hover {
z-index: calc(var(--base-layer) + 1);
box-shadow:
0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
0px 0px 0px var(--gallery-current-image-border) var(--gallery-secondary-accent-color),
0.6em 0.6em 3em 0em rgba(0,0,0,0.8);
}
@ -233,6 +242,8 @@ button:active {
}
.gallery .images img.dragged-over {
z-index: calc(var(--base-layer) + 1);
border-left: none;
margin-left: var(--gallery-image-margin);
box-shadow:
calc(var(--gallery-current-image-border) * -1) 0px 0px 0px rgba(0,0,0,0.8),
/* XXX this does not work... */

12
grid-n-view.html
View File

@ -15,6 +15,11 @@ body.splash {
opacity: 0;
}
/* demo classes... */
.image-spacing {
--gallery-image-spacing: 0.5em;
}
</style>
<script>
@ -73,10 +78,11 @@ For more info see: <a href="./README.md">README.md</a>
<h3>Settings and debug controls</h3>
<button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
<!-- XXX scrollbar still obeys gallery... -->
<!-- XXX scrollbar colors still inherited from gallery... -->
<button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toggle toolbar drag</button>
<button onclick="gallery.toggleLoading()">toggle loading screen</button>
<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toolbar drag</button>
<button onclick="gallery.toggleLoading()">loading screen</button>
<button onclick="document.body.classList.toggle('image-spacing'); gallery.update()">image spacing</button>
<hr>