Skip to content

Commit 4e8a407

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: Modified the grid listview demo a bit.
1 parent b5e7763 commit 4e8a407

File tree

9 files changed

+75
-54
lines changed

9 files changed

+75
-54
lines changed

‎docs/demos/_assets/img/apple.png‎

-3.06 KB
Loading

‎docs/demos/_assets/img/blackberry_10.png‎

-18.4 KB
Loading

‎docs/demos/_assets/img/firefox_os.png‎

-5.3 KB
Loading

‎docs/demos/_assets/img/galaxy_express.png‎

-12.3 KB
Loading

‎docs/demos/_assets/img/lumia_800.png‎

-5.5 KB
Loading

‎docs/demos/_assets/img/nexus_7.png‎

-6.64 KB
Loading

‎docs/demos/_assets/img/tizen.png‎

-8.72 KB
Loading

‎docs/demos/demos/grid-listview/grid-listview-demo.html‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,19 @@
3838
border-color: #222;
3939
}
4040

41-
/* First breakpoint is 768px. 3 column layout. */
41+
/* First breakpoint is 768px. 3 column layout. Tiles 250x250 pixels at the breakpoint. */
4242
@media all and (min-width: 768px){
4343
.my-page .ui-content {
44-
padding: 9px; /* 768px - 2 x 9px padding = 750px */
44+
padding: 9px;
4545
}
4646
.my-page .ui-listview .ui-li.ui-btn {
4747
float: left;
48-
width: 30.9333%; /* 33.333% incl. 2 x 1.2% margin */
49-
height: 232px; /* 250px incl. 2 x 9px margin */
48+
width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
49+
height: 232px;
5050
margin: 9px 1.2%;
51-
border-width: 0;
51+
border-width: 0; /* The 1px border would break the layout so we set it on .ui-btn-inner instead. */
5252
}
53-
/* Set the border on .ui-btn-inner instead of .ui-btn */
53+
/* If you don't want a border at all, just set "border: none;" here to negate the semi white top border */
5454
.my-page .ui-listview .ui-li.ui-btn-inner {
5555
border: inherit;
5656
border-width: 1px;
@@ -69,7 +69,7 @@
6969
padding: 0 !important;
7070
position: relative;
7171
}
72-
/* Inherit the border-radius from the UL that has class .ui-corner-all). */
72+
/* Inherit the border-radius from the UL that has class .ui-corner-all in case of an inset listview. */
7373
.my-page .ui-listview .ui-li,
7474
.my-page .ui-listview .ui-btn-text,
7575
.my-page .ui-listview .ui-link-inherit,
@@ -89,7 +89,7 @@
8989
.my-page .ui-listview .ui-icon {
9090
display: none;
9191
}
92-
/* Overrides to make text wrap of the thumb. */
92+
/* Make text wrap. */
9393
.my-page .ui-listview .ui-li-heading,
9494
.my-page .ui-listview .ui-li-desc {
9595
white-space: normal;
@@ -98,7 +98,7 @@
9898
left: 0;
9999
right: 0;
100100
}
101-
/* Text positioning */
101+
/* Text position */
102102
.my-page .ui-listview .ui-li-heading {
103103
margin: 0;
104104
padding: 20px;
@@ -126,63 +126,72 @@
126126
.ui-listview .ui-li-has-thumb .ui-li-desc {
127127
padding: 0 10px;
128128
min-height: 20%;
129+
-webkit-border-bottom-left-radius: inherit;
130+
border-bottom-left-radius: inherit;
131+
-webkit-border-bottom-right-radius: inherit;
132+
border-bottom-right-radius: inherit;
129133
}
130134
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
131135
.my-page .ui-listview .ui-li-desc.ui-li-aside {
132-
padding: .1em 10px;
136+
padding: 2px 10px;
133137
width: auto;
134138
min-height: 0;
135139
top: 0;
136140
left: auto;
137141
bottom: auto;
138-
/* Custom styling */
142+
/* Custom styling. */
139143
color: #c0c0c0;
140144
background: #990099;
141145
background: rgba(153,0,153,.85);
142146
-webkit-border-top-right-radius: inherit;
143147
border-top-right-radius: inherit;
144148
-webkit-border-bottom-left-radius: inherit;
145149
border-bottom-left-radius: inherit;
150+
-webkit-border-bottom-right-radius: 0;
151+
border-bottom-right-radius: 0;
146152
}
147-
/* Add some shadow, but don't kill the focus style. */
148-
.my-page .ui-listview .ui-li.ui-btn:not(.ui-focus) {
153+
/* If you want to add shadow, don't kill the focus style. */
154+
.my-page .ui-listview .ui-btn:not(.ui-focus) {
149155
-moz-box-shadow: 0px 0px 9px #111;
150156
-webkit-box-shadow: 0px 0px 9px #111;
151157
box-shadow: 0px 0px 9px #111;
152158
}
153-
/* Show the focus style on hover as well. */
154-
.my-page .ui-listview .ui-li.ui-btn:hover {
155-
-moz-box-shadow: 0px 0px 9px #387bbe;
156-
-webkit-box-shadow: 0px 0px 9px #387bbe;
157-
box-shadow: 0px 0px 9px #387bbe;
159+
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
160+
.my-page .ui-listview .ui-btn:hover {
161+
-moz-box-shadow: 0px 0px 12px #387bbe;
162+
-webkit-box-shadow: 0px 0px 12px #387bbe;
163+
box-shadow: 0px 0px 12px #387bbe;
158164
}
159165
/* Animate focus and hover style, and resizing. */
160-
.my-page .ui-listview .ui-li.ui-btn {
166+
.my-page .ui-listview .ui-btn {
161167
-webkit-transition: all 500ms ease;
162168
-moz-transition: all 500ms ease;
163169
-o-transition: all 500ms ease;
164170
-ms-transition: all 500ms ease;
165171
transition: all 500ms ease;
166172
}
167173
}
168-
/* Second breakpoint. 4 column layout. */
174+
/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
169175
@media all and (min-width: 1020px){
170176
.my-page .ui-content {
171-
padding: 10px; /* 1020px - 2 x 10px padding = 1000px */
177+
padding: 10px;
172178
}
179+
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
180+
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
173181
.my-page .ui-listview {
174-
margin: 0 auto;
175182
max-width: 1000px;
183+
margin: 0 auto;
176184
}
177-
/* We could use pixel width here because 1000px is also the max-width, but let's stick to percentages. */
185+
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
186+
but we stick to percentage values for demo purposes. */
178187
.my-page .ui-listview .ui-li.ui-btn {
179-
width: 23%; /* 25% incl. 2 x 1% margin */
180-
height: 230px; /* 250px incl. 2 x 10px margin */
188+
width: 23%;
189+
height: 230px;
181190
margin: 10px 1%;
182191
}
183192
}
184193

185-
/* For this demo we used images with a size of 334x334 pixels: 1019px - 18px padding = 1001px x 33.3% = ~334px */
194+
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */
186195
</style>
187196
</head>
188197
<body>
@@ -252,5 +261,6 @@ <h3>January 2013</h3>
252261
</div>
253262

254263
</div><!-- /page -->
264+
255265
</body>
256266
</html>

‎docs/demos/demos/grid-listview/index.html‎

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,19 @@
3838
border-color: #222;
3939
}
4040

41-
/* First breakpoint is 768px. 3 column layout. */
41+
/* First breakpoint is 768px. 3 column layout. Tiles 250x250 pixels at the breakpoint. */
4242
@media all and (min-width: 768px){
4343
.my-page .ui-content {
44-
padding: 9px; /* 768px - 2 x 9px padding = 750px */
44+
padding: 9px;
4545
}
4646
.my-page .ui-listview .ui-li.ui-btn {
4747
float: left;
48-
width: 30.9333%; /* 33.333% incl. 2 x 1.2% margin */
49-
height: 232px; /* 250px incl. 2 x 9px margin */
48+
width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
49+
height: 232px;
5050
margin: 9px 1.2%;
51-
border-width: 0;
51+
border-width: 0; /* The 1px border would break the layout so we set it on .ui-btn-inner instead. */
5252
}
53-
/* Set the border on .ui-btn-inner instead of .ui-btn */
53+
/* If you don't want a border at all, just set "border: none;" here to negate the semi white top border */
5454
.my-page .ui-listview .ui-li.ui-btn-inner {
5555
border: inherit;
5656
border-width: 1px;
@@ -69,7 +69,7 @@
6969
padding: 0 !important;
7070
position: relative;
7171
}
72-
/* Inherit the border-radius from the UL that has class .ui-corner-all). */
72+
/* Inherit the border-radius from the UL that has class .ui-corner-all in case of an inset listview. */
7373
.my-page .ui-listview .ui-li,
7474
.my-page .ui-listview .ui-btn-text,
7575
.my-page .ui-listview .ui-link-inherit,
@@ -89,7 +89,7 @@
8989
.my-page .ui-listview .ui-icon {
9090
display: none;
9191
}
92-
/* Overrides to make text wrap of the thumb. */
92+
/* Make text wrap. */
9393
.my-page .ui-listview .ui-li-heading,
9494
.my-page .ui-listview .ui-li-desc {
9595
white-space: normal;
@@ -98,7 +98,7 @@
9898
left: 0;
9999
right: 0;
100100
}
101-
/* Text positioning */
101+
/* Text position */
102102
.my-page .ui-listview .ui-li-heading {
103103
margin: 0;
104104
padding: 20px;
@@ -126,63 +126,72 @@
126126
.ui-listview .ui-li-has-thumb .ui-li-desc {
127127
padding: 0 10px;
128128
min-height: 20%;
129+
-webkit-border-bottom-left-radius: inherit;
130+
border-bottom-left-radius: inherit;
131+
-webkit-border-bottom-right-radius: inherit;
132+
border-bottom-right-radius: inherit;
129133
}
130134
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
131135
.my-page .ui-listview .ui-li-desc.ui-li-aside {
132-
padding: .1em 10px;
136+
padding: 2px 10px;
133137
width: auto;
134138
min-height: 0;
135139
top: 0;
136140
left: auto;
137141
bottom: auto;
138-
/* Custom styling */
142+
/* Custom styling. */
139143
color: #c0c0c0;
140144
background: #990099;
141145
background: rgba(153,0,153,.85);
142146
-webkit-border-top-right-radius: inherit;
143147
border-top-right-radius: inherit;
144148
-webkit-border-bottom-left-radius: inherit;
145149
border-bottom-left-radius: inherit;
150+
-webkit-border-bottom-right-radius: 0;
151+
border-bottom-right-radius: 0;
146152
}
147-
/* Add some shadow, but don't kill the focus style. */
148-
.my-page .ui-listview .ui-li.ui-btn:not(.ui-focus) {
153+
/* If you want to add shadow, don't kill the focus style. */
154+
.my-page .ui-listview .ui-btn:not(.ui-focus) {
149155
-moz-box-shadow: 0px 0px 9px #111;
150156
-webkit-box-shadow: 0px 0px 9px #111;
151157
box-shadow: 0px 0px 9px #111;
152158
}
153-
/* Show the focus style on hover as well. */
154-
.my-page .ui-listview .ui-li.ui-btn:hover {
155-
-moz-box-shadow: 0px 0px 9px #387bbe;
156-
-webkit-box-shadow: 0px 0px 9px #387bbe;
157-
box-shadow: 0px 0px 9px #387bbe;
159+
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
160+
.my-page .ui-listview .ui-btn:hover {
161+
-moz-box-shadow: 0px 0px 12px #387bbe;
162+
-webkit-box-shadow: 0px 0px 12px #387bbe;
163+
box-shadow: 0px 0px 12px #387bbe;
158164
}
159165
/* Animate focus and hover style, and resizing. */
160-
.my-page .ui-listview .ui-li.ui-btn {
166+
.my-page .ui-listview .ui-btn {
161167
-webkit-transition: all 500ms ease;
162168
-moz-transition: all 500ms ease;
163169
-o-transition: all 500ms ease;
164170
-ms-transition: all 500ms ease;
165171
transition: all 500ms ease;
166172
}
167173
}
168-
/* Second breakpoint. 4 column layout. */
174+
/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
169175
@media all and (min-width: 1020px){
170176
.my-page .ui-content {
171-
padding: 10px; /* 1020px - 2 x 10px padding = 1000px */
177+
padding: 10px;
172178
}
179+
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
180+
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
173181
.my-page .ui-listview {
174-
margin: 0 auto;
175182
max-width: 1000px;
183+
margin: 0 auto;
176184
}
177-
/* We could use pixel width here because 1000px is also the max-width, but let's stick to percentages. */
185+
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
186+
but we stick to percentage values for demo purposes. */
178187
.my-page .ui-listview .ui-li.ui-btn {
179-
width: 23%; /* 25% incl. 2 x 1% margin */
180-
height: 230px; /* 250px incl. 2 x 10px margin */
188+
width: 23%;
189+
height: 230px;
181190
margin: 10px 1%;
182191
}
183192
}
184193

185-
/* For this demo we used images with a size of 334x334 pixels: 1019px - 18px padding = 1001px x 33.3% = ~334px */
194+
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */
186195
</style>
187196
</head>
188197
<body>
@@ -203,9 +212,11 @@ <h1>Grid Listview</h1>
203212

204213
<h2>Starting points</h2>
205214

206-
<p>Create a listview from an unordered list. For this demo we use an inset listview to show you how you can apply the corner styling to the tiles as well.</p>
215+
<p>Create a listview from an unordered list. For this demo we used an inset listview to show you how you can apply the corner styling to the tiles as well.</p>
216+
217+
<p>In this demo there are two breakpoints. At the first breakpoint we swap from the regular stacked layout to a three column grid layout with tiles. At the second we swith from three to four columns.</p>
207218

208-
<p>We will use two breakpoints. At the first breakpoint we swap from a stacked layout to a three column grid layout. At the second we swith from three to four columns.</p>
219+
<p>The list items have a thumbail. In the grid layout those will get the same size as the tile. One list item doesn't hold an image to demonstrate how you can take advantage of class <code>ui-li-has-thumb</code> to adjust the style.</p>
209220

210221
<div data-demo-html="#demo-page" data-demo-css="true"></div>
211222

0 commit comments

Comments
 (0)