Ticket #2273: 2273-2.diff

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery-lightbox/index.jsx

@@ +1 @@
+import React from 'react';
+import ImageGallery from 'react-image-gallery';
+
+export default class ImageGalleryLightbox extends React.Component {
+
+        constructor( props ) {
+                super( props );
+        }
+
+        _renderThumbInner = ( item ) => {
+                const onThumbnailError = this.props.onThumbnailError || this._handleImageError;
+
+                return (
+                        <button className = "image-gallery-thumbnail-inner">
+                                <img
+                                        src={ item.thumbnail }
+                                        alt={ item.thumbnailAlt }
+                                        title={ item.thumbnailTitle }
+                                        onError={ onThumbnailError }
+                                />
+                                {item.thumbnailLabel &&
+                                <div className="image-gallery-thumbnail-label">
+                                        {item.thumbnailLabel}
+                                </div>
+                                }
+                        </button>
+                );
+        };
+
+        render() {
+                return (
+                        <ImageGallery
+                                items={ this.props.items }
+                                useBrowserFullscreen={ false }
+                                showPlayButton={ false }
+                                renderThumbInner={ this._renderThumbInner }
+                                showFullscreenButton={ true }
+                        />
+                );
+        }
+}
+ No newline at end of file

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery-lightbox/style.scss

@@ +1 @@
+@import "node_modules/react-image-gallery/styles/scss/image-gallery.scss";
+
+#screenshots .image-gallery{
+
+        width: 100%;
+        height: auto;
+
+        .image-gallery-fullscreen-button{
+                height: 100%;
+                width: 100%;
+                &:before{
+                        content: none;
+                }
+        }
+
+        .image-gallery-swipe{
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+        }
+
+        .image-gallery-slides{
+                width: calc(100% - 50px);
+        }
+
+        .image-gallery-left-nav{
+                padding: 50px 10px 50px 5px;
+        }
+
+        .image-gallery-right-nav{
+                padding: 50px 5px 50px 10px;
+        }
+
+        .image-gallery-left-nav, .image-gallery-right-nav{
+                font-size: 2em;
+                &:before{
+                        color: #aaa;
+                        text-shadow: none;
+                        font-weight: bold;
+                }
+                &:hover, &:focus{
+                        &:before{
+                                color: #0073aa;
+                        }
+                }
+        }
+
+        .image-gallery-image{
+                display: flex;
+                flex-direction: column;
+        }
+
+        .image-gallery-slide img {
+                width: auto;
+                height: 480px;
+                max-height: 80vh;
+                object-fit: scale-down;
+                overflow: hidden;
+                object-position: center center;
+        }
+
+        .image-gallery-slide .image-gallery-description{
+                background: #f5f5f5;
+                color: #32373c;
+                line-height: 1.5;
+                padding: 10px 20px;
+                white-space: normal;
+                font-size: 12.8px;
+                font-size: .8rem;
+                position: relative;
+                bottom: 0;
+                margin-bottom: 12px;
+        }
+
+        .fullscreen{
+
+                .image-gallery-slides{
+                        width: 100%;
+                }
+
+                .image-gallery-slide {
+                        .image-gallery-description{
+                                display: none;
+                        }
+                }
+
+                .image-gallery-thumbnails-wrapper{
+                        display: none;
+                }
+        }
+}

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery/style.scss

@@ +1 @@
+/*
 $ig-screen-sm-min: 768px !default;
 $ig-black: #222 !default;
 $ig-blue: #337ab7 !default;
@@ -176 +177 @@
         right: 0;
         z-index: 4;
 }
+*/
+ No newline at end of file

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx

@@ -8 +8 @@
 /**
  * Internal dependencies.
  */
-import ImageGallery from './image-gallery';
+// import ImageGallery from './image-gallery';
+import ImageGalleryLightbox from './image-gallery-lightbox';
 
 export const Screenshots = ( { screenshots } ) => {
         const items = map( screenshots, ( { caption, src } ) => ( {
@@ -23 +24 @@
                 return (
                         <div id="screenshots" className="plugin-screenshots">
                                 <h2>{ localeData.screenshots }</h2>
-                                <ImageGallery items={ items } />
+                                {/* <ImageGallery items={ items } /> */}
+                                <ImageGalleryLightbox items={ items } />
                         </div>
                 );
         }

wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/package.json

@@ -58 +58 @@
   "dependencies": {
     "i18n-calypso": "^1.7.0",
     "json-loader": "^0.5.4",
-    "wpapi": "^1.2.1"
+    "wpapi": "^1.2.1",
+    "react-image-gallery": "^1.0.7"
   }
 }