diff --git a/css/grid-n-view.css b/css/grid-n-view.css index 4ad27f7..65dfdad 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -235,7 +235,11 @@ body { /*------------------------------------------------------- Details ---*/ .gallery .details img { - width: 50%; + width: 20em; + height: 20em; + padding: 0.5em; + object-fit: contain; + border: solid 1px black; } diff --git a/grid-n-view.html b/grid-n-view.html index d5b73d6..6721841 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -53,9 +53,9 @@ var restoreScroll = function(){
- Views: -Gallery- - Details + -Details-Lightbox-- toolbar +- toolbar -- floating over image (gallery/lightbox/details/...) - select / deselect - delete / clear deleted - crop diff --git a/grid-n-view.js b/grid-n-view.js index a2fdaa9..f78c0b7 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -120,6 +120,7 @@ function(elem) { // XXX add shift+arrow to select... // XXX add home/end, pageup/pagedown... +// XXX need a real ui stack -- close things top to bottom (Enter/Escape/...)... var keyboard = { ArrowLeft: function(){ gallery.prev() }, @@ -146,8 +147,9 @@ var keyboard = { || gallery.details.shown || gallery.down() }, Enter: function(){ - gallery.lightbox.toggle() }, - // XXX need a real ui stack -- close top to bottom... + gallery.details.shown ? + gallery.details.hide() + : gallery.lightbox.toggle() }, Escape: function(evt){ gallery.details.shown ? gallery.details.hide() @@ -732,6 +734,7 @@ var Gallery = { //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +// This is a prototype for all modal views... var Overlay = { dom: undefined,