WordPress.org
Get WordPress

Making WordPress.org

Ticket #2273: 2273-1.diff

File 2273-1.diff, 12.1 KB (added by ck3lee, 7 years ago)

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery-lightbox/index.jsx wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery-lightbox/index.jsx
new file mode 100644
index 000000000..ac3f74448
    - +  
     1import React from 'react';
     2import ImageGallery from 'react-image-gallery';
     3
     4export default class ImageGalleryLightbox extends React.Component {
     5
     6        constructor( props ) {
     7                super( props );
     8        }
     9
     10        _renderThumbInner = ( item ) => {
     11                const onThumbnailError = this.props.onThumbnailError || this._handleImageError;
     12
     13                return (
     14                        <button className = "image-gallery-thumbnail-inner">
     15                                <img
     16                                        src={ item.thumbnail }
     17                                        alt={ item.thumbnailAlt }
     18                                        title={ item.thumbnailTitle }
     19                                        onError={ onThumbnailError }
     20                                />
     21                                {item.thumbnailLabel &&
     22                                <div className="image-gallery-thumbnail-label">
     23                                        {item.thumbnailLabel}
     24                                </div>
     25                                }
     26                        </button>
     27                );
     28        };
     29
     30        render() {
     31                return (
     32                        <ImageGallery
     33                                items={ this.props.items }
     34                                useBrowserFullscreen={ false }
     35                                showPlayButton={ false }
     36                                renderThumbInner={ this._renderThumbInner }
     37                                showFullscreenButton={ true }
     38                        />
     39                );
     40        }
     41}

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery-lightbox/style.scss wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery-lightbox/style.scss
new file mode 100644
index 000000000..08f427030
    - +  
     1@import "node_modules/react-image-gallery/styles/scss/image-gallery.scss";
     2
     3#screenshots .image-gallery{
     4
     5    width: 100%;
     6    height: auto;
     7
     8    .image-gallery-fullscreen-button{
     9        height: 100%;
     10        width: 100%;
     11        &:before{
     12            content: none;
     13        }
     14    }
     15
     16    .image-gallery-swipe{
     17        display: flex;
     18        align-items: center;
     19        flex-direction: column;
     20    }
     21
     22    .image-gallery-slides{
     23        width: calc(100% - 50px);
     24    }
     25
     26    .image-gallery-left-nav{
     27        padding: 50px 10px 50px 5px;
     28    }
     29
     30    .image-gallery-right-nav{
     31        padding: 50px 5px 50px 10px;
     32    }
     33
     34    .image-gallery-left-nav, .image-gallery-right-nav{
     35        font-size: 2em;
     36       
     37        &:before{
     38            color: #aaa;
     39            text-shadow: none;
     40            font-weight: bold;
     41        }
     42        &:hover, &:focus{
     43            &:before{
     44                color: #0073aa;
     45            }
     46        }
     47    }
     48
     49    .image-gallery-image{
     50        display: flex;
     51        flex-direction: column;
     52    }
     53
     54    .image-gallery-slide img {
     55        width: auto;
     56        height: 480px;
     57        max-height: 80vh;
     58        object-fit: scale-down;
     59        overflow: hidden;
     60        object-position: center center;
     61    }
     62
     63    .image-gallery-slide .image-gallery-description{
     64        background: #f5f5f5;
     65        color: #32373c;
     66        line-height: 1.5;
     67        padding: 10px 20px;
     68        white-space: normal;
     69        font-size: 12.8px;
     70        font-size: .8rem;
     71        position: relative;
     72        bottom: 0;
     73        margin-bottom: 12px;
     74    }
     75
     76    .fullscreen{
     77
     78        .image-gallery-slides{
     79            width: 100%;
     80        }
     81
     82        .image-gallery-slide {
     83            .image-gallery-description{
     84                display: none;
     85            }
     86        }
     87
     88        .image-gallery-thumbnails-wrapper{
     89            display: none;
     90        }
     91    }
     92}
     93

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery/style.scss wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery/style.scss
index cd98aa9b5..8a3499cc6 100644
     
    1 $ig-screen-sm-min: 768px !default;
    2 $ig-black: #222 !default;
    3 $ig-blue: #337ab7 !default;
    4 $ig-background-black: rgba(0, 0, 0, .4) !default;
    5 
    6 .image-gallery {
    7         user-select: none;
    8 }
    9 
    10 .image-gallery-content {
    11         position: relative;
    12 
    13         .image-gallery-left-nav,
    14         .image-gallery-right-nav {
    15                 display: none;
    16                 font-size: ms( 10 );
    17                 height: 100%;
    18                 position: absolute;
    19                 top: 0;
    20                 z-index: 4;
    21                 border-color: #eee;
    22                 -webkit-transition: background 0.1s ease, border 0.1s ease;
    23                 transition: background 0.1s ease, border 0.1s ease;
    24 
    25                 @media (max-width: $ig-screen-sm-min) {
    26                         font-size: 3.4em;
    27                 }
    28 
    29                 @media (min-width: $ig-screen-sm-min) {
    30                         &:hover {
    31                                 background: #fff;
    32                                 opacity: 0.8;
    33                                 border: 1px solid #eee;
    34                         }
    35                 }
    36 
    37                 &:before {
    38                         position: relative;
    39                         font-family: 'dashicons';
    40                 }
    41         }
    42 
    43         .image-gallery-left-nav {
    44                 left: 0;
    45 
    46                 &:before {
    47                         content: '\f341';
    48                 }
    49 
    50                 &:hover {
    51                         margin-left: -1px;
    52                 }
    53         }
    54 
    55         .image-gallery-right-nav {
    56                 right: 0;
    57 
    58                 &:before {
    59                         content: '\f345';
    60                 }
    61 
    62                 &:hover {
    63                         margin-right: -1px;
    64                 }
    65         }
    66 
    67         &:hover {
    68                 .image-gallery-left-nav,
    69                 .image-gallery-right-nav {
    70                         display: block;
    71                 }
    72         }
    73 }
    74 
    75 .image-gallery-slides {
    76         line-height: 0;
    77         overflow: hidden;
    78         position: relative;
    79         white-space: nowrap;
    80         border: 1px solid #eee;
    81 }
    82 
    83 .image-gallery-slide {
    84         left: 0;
    85         position: absolute;
    86         top: 0;
    87         width: 100%;
    88 
    89         &.center {
    90                 position: relative;
    91         }
    92 
    93         .image-gallery-image {
    94                 margin: 0;
    95         }
    96 
    97         img {
    98                 display: block;
    99                 margin: 0 auto;
    100         }
    101 
    102         .image-gallery-description {
    103                 background: #f5f5f5;
    104                 color: $color__text-main;
    105                 line-height: 1.5;
    106                 padding: 10px 20px;
    107                 white-space: normal;
    108                 font-size: ms( -2 );
    109 
    110                 @media (max-width: $ig-screen-sm-min) {
    111                         font-size: ms( -2 );
    112                         padding: 8px 15px;
    113                 }
    114 
    115         }
    116 }
    117 
    118 .image-gallery-thumbnails {
    119         background: #fff;
    120         margin-top: 5px;
    121         //overflow: hidden;
    122 
    123         .image-gallery-thumbnails-container {
    124                 cursor: pointer;
    125                 text-align: center;
    126                 white-space: nowrap;
    127         }
    128 
    129 }
    130 
    131 .image-gallery-thumbnail {
    132         display: table-cell;
    133         margin-right: 5px;
    134         border: 1px solid #eee;
    135         max-height: 100px;
    136         overflow: hidden;
    137 
    138         .image-gallery-image {
    139                 margin: 0;
    140         }
    141 
    142         img {
    143                 vertical-align: middle;
    144                 width: 100px;
    145 
    146                 @media (max-width: $ig-screen-sm-min) {
    147                         width: 75px;
    148                 }
    149         }
    150 
    151         &:hover {
    152                 box-shadow: 0 1px 8px rgba(0,0,0,0.3);
    153         }
    154 
    155         &.active {
    156                 border: 1px solid $ig-blue;
    157         }
    158 }
    159 
    160 .image-gallery-thumbnail-label {
    161         color: $ig-black;
    162         font-size: 1em;
    163 
    164         @media(max-width: $ig-screen-sm-min) {
    165                 font-size: 0.8em;
    166         }
    167 }
    168 
    169 .image-gallery-index {
    170         background: $ig-background-black;
    171         bottom: 0;
    172         color: #fff;
    173         line-height: 1;
    174         padding: 10px 20px;
    175         position: absolute;
    176         right: 0;
    177         z-index: 4;
    178 }
     1// $ig-screen-sm-min: 768px !default;
     2// $ig-black: #222 !default;
     3// $ig-blue: #337ab7 !default;
     4// $ig-background-black: rgba(0, 0, 0, .4) !default;
     5
     6// .image-gallery {
     7//      user-select: none;
     8// }
     9
     10// .image-gallery-content {
     11//      position: relative;
     12
     13//      .image-gallery-left-nav,
     14//      .image-gallery-right-nav {
     15//              display: none;
     16//              font-size: ms( 10 );
     17//              height: 100%;
     18//              position: absolute;
     19//              top: 0;
     20//              z-index: 4;
     21//              border-color: #eee;
     22//              -webkit-transition: background 0.1s ease, border 0.1s ease;
     23//              transition: background 0.1s ease, border 0.1s ease;
     24
     25//              @media (max-width: $ig-screen-sm-min) {
     26//                      font-size: 3.4em;
     27//              }
     28
     29//              @media (min-width: $ig-screen-sm-min) {
     30//                      &:hover {
     31//                              background: #fff;
     32//                              opacity: 0.8;
     33//                              border: 1px solid #eee;
     34//                      }
     35//              }
     36
     37//              &:before {
     38//                      position: relative;
     39//                      font-family: 'dashicons';
     40//              }
     41//      }
     42
     43//      .image-gallery-left-nav {
     44//              left: 0;
     45
     46//              &:before {
     47//                      content: '\f341';
     48//              }
     49
     50//              &:hover {
     51//                      margin-left: -1px;
     52//              }
     53//      }
     54
     55//      .image-gallery-right-nav {
     56//              right: 0;
     57
     58//              &:before {
     59//                      content: '\f345';
     60//              }
     61
     62//              &:hover {
     63//                      margin-right: -1px;
     64//              }
     65//      }
     66
     67//      &:hover {
     68//              .image-gallery-left-nav,
     69//              .image-gallery-right-nav {
     70//                      display: block;
     71//              }
     72//      }
     73// }
     74
     75// .image-gallery-slides {
     76//      line-height: 0;
     77//      overflow: hidden;
     78//      position: relative;
     79//      white-space: nowrap;
     80//      border: 1px solid #eee;
     81// }
     82
     83// .image-gallery-slide {
     84//      left: 0;
     85//      position: absolute;
     86//      top: 0;
     87//      width: 100%;
     88
     89//      &.center {
     90//              position: relative;
     91//      }
     92
     93//      .image-gallery-image {
     94//              margin: 0;
     95//      }
     96
     97//      img {
     98//              display: block;
     99//              margin: 0 auto;
     100//      }
     101
     102//      .image-gallery-description {
     103//              background: #f5f5f5;
     104//              color: $color__text-main;
     105//              line-height: 1.5;
     106//              padding: 10px 20px;
     107//              white-space: normal;
     108//              font-size: ms( -2 );
     109
     110//              @media (max-width: $ig-screen-sm-min) {
     111//                      font-size: ms( -2 );
     112//                      padding: 8px 15px;
     113//              }
     114
     115//      }
     116// }
     117
     118// .image-gallery-thumbnails {
     119//      background: #fff;
     120//      margin-top: 5px;
     121//      //overflow: hidden;
     122
     123//      .image-gallery-thumbnails-container {
     124//              cursor: pointer;
     125//              text-align: center;
     126//              white-space: nowrap;
     127//      }
     128
     129// }
     130
     131// .image-gallery-thumbnail {
     132//      display: table-cell;
     133//      margin-right: 5px;
     134//      border: 1px solid #eee;
     135//      max-height: 100px;
     136//      overflow: hidden;
     137
     138//      .image-gallery-image {
     139//              margin: 0;
     140//      }
     141
     142//      img {
     143//              vertical-align: middle;
     144//              width: 100px;
     145
     146//              @media (max-width: $ig-screen-sm-min) {
     147//                      width: 75px;
     148//              }
     149//      }
     150
     151//      &:hover {
     152//              box-shadow: 0 1px 8px rgba(0,0,0,0.3);
     153//      }
     154
     155//      &.active {
     156//              border: 1px solid $ig-blue;
     157//      }
     158// }
     159
     160// .image-gallery-thumbnail-label {
     161//      color: $ig-black;
     162//      font-size: 1em;
     163
     164//      @media(max-width: $ig-screen-sm-min) {
     165//              font-size: 0.8em;
     166//      }
     167// }
     168
     169// .image-gallery-index {
     170//      background: $ig-background-black;
     171//      bottom: 0;
     172//      color: #fff;
     173//      line-height: 1;
     174//      padding: 10px 20px;
     175//      position: absolute;
     176//      right: 0;
     177//      z-index: 4;
     178// }

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx
index 3d1cda1cc..9aeaf0da3 100644
    import { identity, map } from 'lodash'; 
    88/**
    99 * Internal dependencies.
    1010 */
    11 import ImageGallery from './image-gallery';
     11// import ImageGallery from './image-gallery';
     12import ImageGalleryLightbox from './image-gallery-lightbox';
    1213
    1314export const Screenshots = ( { screenshots } ) => {
    1415        const items = map( screenshots, ( { caption, src } ) => ( {
    … … export const Screenshots = ( { screenshots } ) => { 
    2324                return (
    2425                        <div id="screenshots" className="plugin-screenshots">
    2526                                <h2>{ localeData.screenshots }</h2>
    26                                 <ImageGallery items={ items } />
     27                                {/* <ImageGallery items={ items } /> */}
     28                                <ImageGalleryLightbox items={ items } />
    2729                        </div>
    2830                );
    2931        }

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/package.json wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/package.json
index 87f09f1cd..791353314 100644
     
    5858  "dependencies": {
    5959    "i18n-calypso": "^1.7.0",
    6060    "json-loader": "^0.5.4",
    61     "wpapi": "^1.0.0"
     61    "wpapi": "^1.0.0",
     62    "react-image-gallery": "^0.8.16"
    6263  }
    6364}