site: update css for website

site/common/styles/preview-img.less

@@ -3,6 +3,14 @@
   margin: 0 0 70px 28px;
   width: 616px;
   clear: both;
+
+  &-with-carousel {
+    width: 420px;
+
+    .preview-image-box {
+      padding: 0;
+    }
+  }
 }
 
 .preview-image-boxes + .preview-image-boxes {
@@ -101,6 +109,20 @@
 
 .image-modal {
   text-align: center;
+
+  &-container {
+    position: relative;
+    text-align: center;
+  }
+}
+
+.ant-carousel .slick-slider {
+  padding-bottom: 0;
+
+  img {
+    display: inline;
+    max-width: 100%;
+  }
 }
 
 .no-padding {

site/component/Article/ImagePreview.jsx

@@ -21,9 +21,9 @@ function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
       <div className="preview-image-description"
         dangerouslySetInnerHTML={{ __html: coverMeta.description }} />
 
-      <Modal className="image-modal" visible={previewVisible} title={null} footer={null}
+      <Modal className="image-modal" width="960" visible={previewVisible} title={null} footer={null}
         onCancel={onCancel}>
-        <Carousel>
+        <Carousel adaptiveHeight>
           { comparable ? cover : imgs }
         </Carousel>
         <div className="preview-image-title">{coverMeta.alt}</div>
@@ -73,7 +73,13 @@ export default class ImagePreview extends React.Component {
     });
 
     const imagesList = imgsMeta.map((meta, index) => {
-      return <img {...meta} key={index} />;
+      return (
+        <div key={index}>
+          <div className="image-modal-container">
+            <img {...meta} />
+          </div>
+        </div>
+      );
     });
     const comparable = imgs.length === 2 &&
             (imgsMeta[0].isGood || imgsMeta[0].isBad) &&

site/component/Article/index.jsx

@@ -23,11 +23,11 @@ export default class Article extends React.Component {
     }
 
     const imgs = node.children.split(/\r|\n/);
-    const hasPopup = imgs.length > 1;
+    const hasCarousel = imgs.length > 1;
     const previewClassName = classNames({
       'preview-image-boxes': true,
       clearfix: true,
-      'preview-image-boxes-with-popup': hasPopup,
+      'preview-image-boxes-with-carousel': hasCarousel,
     });
     return <ImagePreview className={previewClassName} imgs={imgs} />;
   }