Merge branch 'application-mgt-new' into 'application-mgt-new'

Improve the screenshots view of the APPM UI

See merge request entgra/carbon-device-mgt!297

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{

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>

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{

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">
+                            <div key={"col-" + screenshotUrl} className="release-screenshot">
-                                <img key={screenshotUrl} src={screenshotUrl}/>
+                                    <img alt="screenshot" key={screenshotUrl} src={screenshotUrl}/>
-                            </Col>
+                            </div>
                         )
                     })}
                 </RcViewer>