From 74069d341575e8a8d0b5909838837fc78f8543fd Mon Sep 17 00:00:00 2001
From: nipun <nipunnadeendesilva@gmail.com>
Date: Wed, 9 Oct 2019 12:28:37 +0530
Subject: [PATCH] Improve the screenshots view of the APPM UI

---
 .../react-app/src/App.css                     | 29 ++++++++++++++++--
 .../components/apps/release/ReleaseView.js    |  6 ++--
 .../react-app/src/App.css                     | 30 +++++++++++++++++--
 .../apps/release/images/ImgViewer.js          |  8 ++---
 4 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
index 3eb44f4ddb1..532442bc094 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
@@ -34,9 +34,34 @@
 }
 
 .release .release-screenshot img{
-  width: 100%;
+  height:450px;
   border-radius: 15px;
-  padding: 5px;
+  padding: 15px;
+}
+
+.release .release-images{
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.release .release-images::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.release .release-images::-webkit-scrollbar{
+  height: 8px;
+  background-color: #F5F5F5;
+}
+
+.release .release-images::-webkit-scrollbar-thumb{
+  background-color: #aaaaaa;
+  border-radius: 10px;
+}
+
+.release .release-screenshot{
+  display: table-cell;
 }
 
 .main-container{
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
index cd7a0221586..99f7d8055c7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -122,12 +122,12 @@ class ReleaseView extends React.Component {
                         </Col>
                     </Row>
                     <Divider/>
-                    <Row>
+                    <Row className="release-images">
                         {release.screenshots.map((screenshotUrl) => {
                             return (
-                                <Col key={"col-" + screenshotUrl} lg={6} md={8} xs={8} className="release-screenshot">
+                                <div key={"col-" + screenshotUrl} className="release-screenshot">
                                     <img key={screenshotUrl} src={screenshotUrl}/>
-                                </Col>
+                                </div>
                             )
                         })}
                     </Row>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
index 3eb44f4ddb1..9ca9ccf486b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
@@ -34,9 +34,35 @@
 }
 
 .release .release-screenshot img{
-  width: 100%;
+  height: 400px;
   border-radius: 15px;
-  padding: 5px;
+  padding: 10px;
+
+}
+
+.release .release-images{
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.release .release-images::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.release .release-images::-webkit-scrollbar{
+  height: 8px;
+  background-color: #F5F5F5;
+}
+
+.release .release-images::-webkit-scrollbar-thumb{
+  background-color: #aaaaaa;
+  border-radius: 10px;
+}
+
+.release .release-screenshot{
+  display: table-cell;
 }
 
 .main-container{
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js
index 17a136aac69..f8804e428d1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js
@@ -44,13 +44,13 @@ class ImgViewer extends Component {
             movable : false
         };
         return (
-            <div>
+            <div className="release-images">
                 <RcViewer options={options} ref='viewer'>
                     {this.props.images.map((screenshotUrl) => {
                         return (
-                            <Col key={"col-" + screenshotUrl} lg={6} md={8} xs={8} className="release-screenshot">
-                                <img key={screenshotUrl} src={screenshotUrl}/>
-                            </Col>
+                            <div key={"col-" + screenshotUrl} className="release-screenshot">
+                                    <img alt="screenshot" key={screenshotUrl} src={screenshotUrl}/>
+                            </div>
                         )
                     })}
                 </RcViewer>