<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Grid</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-loglevelx="3"
data-sap-ui-xx-bindingsyntax="complex"
data-sap-ui-resourceroots='{ "ui" : "./ui" }'
data-sap-ui-rootcomponent="ui"
data-sap-ui-xx-rootcomponentnode="root">
</script>
</head>
<body class="sapUiBody" id="root" role="application"></body>
</html>
.productInfo {
position: absolute;
left: 0;
bottom: 0;
background-color: rgb(255, 255, 255); /* The Fallback */
background-color: rgba(255, 255, 255, 0.7);
}
/*
.productShortDescription {
font-weight: bold;
}
*/
.productNumber {
color: #666;
}
/* Image Grid */
.uoMImgGrid {
padding: 0.25em;
overflow: hidden;
background-color: #fff;
}
.uoMImgGrid .sapMCLI {
float: left;
width: 50%;
padding: 0.25em;
}
.uoMImgGrid .sapMLIBContent {
position: relative;
}
.uoMImgGrid .sapMImg {
display: block;
max-width: 100%;
width: 100%;
}
.uoMImgGrid .sapMCLI:nth-child(odd) {
clear: left;
}
/* Image Grid Media Queries */
@media screen and (min-width: 40em) {
.uoMImgGrid .sapMCLI {
width: 33.3333333333333333%;
}
.uoMImgGrid .sapMText {
font-size: 1em;
}
.uoMImgGrid .sapMCLI:nth-child(3n+1) {
clear: left;
}
.uoMImgGrid .sapMCLI:nth-child(odd) {
clear: none;
}
}
@media screen and (min-width: 55em) {
.uoMImgGrid .sapMCLI {
width: 25%;
}
.uoMImgGrid .sapMText {
font-size: 1.05em;
}
.uoMImgGrid .sapMCLI:nth-child(4n+1) {
clear: left;
}
.uoMImgGrid .sapMCLI:nth-child(3n+1) {
clear: none;
}
}
@media screen and (min-width: 72em) {
.uoMImgGrid .sapMCLI {
width: 20%;
}
.uoMImgGrid .sapMText {
font-size: 1.1em;
}
.uoMImgGrid .sapMCLI:nth-child(5n+1) {
clear: left;
}
.uoMImgGrid .sapMCLI:nth-child(4n+1) {
clear: none;
}
}
@media screen and (min-width: 90em) {
.uoMImgGrid .sapMCLI {
width: 16.666666666%;
}
.uoMImgGrid .sapMText {
font-size: 1.15em;
}
.uoMImgGrid .sapMCLI:nth-child(6n+1) {
clear: left;
}
.uoMImgGrid .sapMCLI:nth-child(5n+1) {
clear: none;
}
}
# Responsive Image Grid
jQuery.sap.declare("ui.Component");
sap.ui.core.UIComponent.extend("ui.Component", {
metadata : {
rootView : "ui.App",
name : "Image Grid",
version : "1.0",
includes : [
"../style.css"
],
dependencies : {
libs : ["sap.m"]
}
},
init : function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.loadData("model/data.json");
this.setModel(oJSONModel);
}
});
<mvc:View controllerName="ui.App" displayBlock="true"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<App>
<Page title="Responsive Image Grid" id="resizepanel">
<!--
<subHeader>
<Toolbar>
<Slider width="100%" value="100" liveChange="onSliderMoved"></Slider>
</Toolbar>
</subHeader>
-->
<List
id="list"
class="uoMImgGrid"
showSeparators="None"
growing="true"
growingThreshold="10"
growingScrollToLoad="true"
items="{/items}" >
<CustomListItem>
<Image densityAware="false" src="{image}" />
<VBox class="productInfo" width="100%" alignItems="Stretch">
<Text
class="productShortDescription"
width="100%"
text="{productShortDescription}"
textAlign="Center"
wrapping="false" />
<Text
class="productNumber"
width="100%"
text="Product-ID: {productNumber}"
textAlign="Center"
wrapping="false" />
</VBox>
</CustomListItem>
</List>
</Page>
</App>
</mvc:View>
(function() {
'use strict';
sap.ui.controller("ui.App", {
onSliderMoved: function (oEvent) {
var iValue = oEvent.getParameter("value");
this.getView().byId("list").setWidth(iValue + "%");
}
});
})();
{
"items" : [
{
"productNumber" : "1",
"productShortDescription" : "This is a very long text that will be clipped out of context",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "2",
"productShortDescription" : "3D Logo Model",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "3",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "4",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "5",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "6",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "7",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "8",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "9",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "10",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "11",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "12",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "13",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "14",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "15",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "16",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "17",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "18",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "19",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
},
{
"productNumber" : "20",
"productShortDescription" : "Product Text",
"image" : "http://sap.github.io/openui5/resources/3d_logos.jpg"
}
]
}