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 3eb44f4ddb..532442bc09 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 cd7a022158..99f7d8055c 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 { - + {release.screenshots.map((screenshotUrl) => { return ( - +
- +
) })}
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 3eb44f4ddb..9ca9ccf486 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 17a136aac6..f8804e428d 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 ( -
+
{this.props.images.map((screenshotUrl) => { return ( - - - +
+ screenshot +
) })}