From 99c7266c4f0fe7d2118e594469580c66608ea1b4 Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Tue, 20 Jul 2021 15:18:33 +0200 Subject: [PATCH] updated css and nanogallery options --- .classpath | 6 +- .settings/org.eclipse.wst.common.component | 32 ++++++---- .../client/ui/gallery/ImagesGallery.java | 59 ++++++++++++++++--- src/main/webapp/GeoportalDataViewer.css | 24 +++++++- 4 files changed, 98 insertions(+), 23 deletions(-) diff --git a/.classpath b/.classpath index 5ef800e..285ac7e 100644 --- a/.classpath +++ b/.classpath @@ -1,12 +1,12 @@ - + - + @@ -36,5 +36,5 @@ - + diff --git a/.settings/org.eclipse.wst.common.component b/.settings/org.eclipse.wst.common.component index 4155b4e..0d454c2 100644 --- a/.settings/org.eclipse.wst.common.component +++ b/.settings/org.eclipse.wst.common.component @@ -1,58 +1,68 @@ - + - - + + + + - + + - + + - + + - + + - + + - + + - + + - + + diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java index 90254a3..22266a3 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java @@ -27,19 +27,55 @@ public class ImagesGallery { .$("#nanogallery") .nanogallery2( { + thumbnailHeight : '200 XS150 SM150', // RESPONSIVE THUMBNAIL HEIGHT: default=250px, XS resolution=200px, SM resolution=200px + thumbnailWidth : 'auto', // RESPONSIVE THUMBNAIL WIDTH: default=250px, XS resolution=150px, SM resolution=200px + thumbnailAlignment : 'left', + thumbnailBorderHorizontal : 0, + thumbnailBorderVertical : 0, + thumbnailGutterWidth : '10 XS10 SM10', + thumbnailGutterHeight : '10 XS10 SM10', - thumbnailHeight : '200', - thumbnailWidth : 'auto', - thumbnailAlignment : 'fillWidth', + // THUMBNAIL TOOLS & LABEL + thumbnailLabel : { + display : true, + position : 'onBottom', + align : 'left' + }, + thumbnailToolbarImage : { + bottomLeft : 'display' + }, + // replace the default DISPLAY tool icon + icons : { + thumbnailDisplay : ' display' + }, - thumbnailDisplayTransition : 'slideDown', - thumbnailDisplayTransitionDuration : 500, - thumbnailDisplayInterval : 30, + // DISPLAY ANIMATION + galleryDisplayTransition : 'slideUp', + galleryDisplayTransitionDuration : 1000, + thumbnailDisplayTransition : 'scaleDown', + thumbnailDisplayTransitionDuration : 300, + thumbnailDisplayInterval : 50, // THUMBNAIL'S HOVER ANIMATION - thumbnailHoverEffect2 : 'imageScaleIn80', + //thumbnailBuildInit2 : 'tools_font-size_1.5em|title_font-size_1.5em', + thumbnailHoverEffect2 : 'image_scale_1.00_1.20_1000|tools_opacity_0_1|tools_translateX_-30px_0px|title_opacity_1_0|title_translateX_0px_-30px', touchAnimation : true, touchAutoOpenDelay : 800, + + // GALLERY THEME + galleryTheme : { + thumbnail : { + borderRadius : '2px', + background : '#fff', + titleShadow : 'none', + titleColor : 'gray', + labelBackground : '#f3f3f3' + }, + thumbnailIcon : { + color : '#000', + shadow : 'none' + }, + }, viewerToolbar : { display : true, standard : 'minimizeButton, label', @@ -79,8 +115,15 @@ public class ImagesGallery { JSONObject json = new JSONObject(); json.put("src", new JSONString(imageContent.getLink())); json.put("srct", new JSONString(imageContent.getLink())); + List listAuthors = image.getResponsabili(); + String txtAuthors = listAuthors.size()>1 ? "Authors ": "Author "; + for (String author : listAuthors) { + txtAuthors+= " "+author +","; + } + String description = txtAuthors + ". ID Licenza: "+image.getLicenseID(); + txtAuthors = txtAuthors.substring(0,txtAuthors.length()-1); json.put("title", new JSONString(image.getDidascalia())); - //json.put("description", new JSONString(image.getDidascalia())); + json.put("description", new JSONString(description)); json.put("downloadURL", new JSONString(imageContent.getLink())); jsonArray.set(index, json); index++; diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index 9eb0fc3..7f83318 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/src/main/webapp/GeoportalDataViewer.css @@ -230,4 +230,26 @@ body { .info-interaction .gwt-Label { font-weight: bold; padding-bottom: 5px; -} \ No newline at end of file +} + + + +/** NanoGallery2 **/ + +.nanogallery_viewertheme_dark_nanogallery .nGY2Viewer { + background: rgba(4, 4, 4, 0.80) !important; +} + +.nanogallery_viewertheme_dark_nanogallery .nGY2Viewer .toolbarBackground { + background: rgba(4, 4, 4, 0.60) !important; +} + +.nGY2 .toolbar .ngbt { + font-size: 1em !important; + padding: 12px 12px !important; +} + +.nGY2 .toolbar .label .title { + font-size: .9em !important; + margin-bottom: 5px !important +}