Skip to content

Commit 2aeb318

Browse files
author
Parashuram
committed
Added styling for Mobile also
1 parent 4780bfa commit 2aeb318

File tree

2 files changed

+69
-14
lines changed

2 files changed

+69
-14
lines changed

‎example/index.html

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<script type = "text/javascript" src="../jquery.indexeddb.js">
1010
</script>
1111
<link href="style.css" rel="stylesheet"/>
12+
<meta charset="UTF-8">
1213
</head>
1314
<body>
1415
<div>
@@ -24,23 +25,23 @@ <h2>My Web Store
2425
<div class = "controls">
2526
<h2>Catalog</h2>
2627
<a href = "javascript:loadFromDB('catalog')">Load from Local DB</a>
27-
<a href = "javascript:downloadCatalog();">Save from Server TO DB</a>
28+
<a href = "javascript:downloadCatalog();">Sync to DB</a>
2829
</div>
2930
<table id = "catalog" width="400">
3031
<tr>
3132
<th class = "header key">
3233
Id
3334
</th>
35+
<th class = "header actions">
36+
Actions
37+
</th>
3438
<th class = "header value action">
3539
Object
3640
<div style ="float:right; width : 200px">
3741
<a href = "javascript:loadFromDB('catalog')">Show all</a>
3842
<a href = "javascript:sort('catalog', 'price')">Sort by Price</a>
3943
</div>
4044
</th>
41-
<th class = "header actions">
42-
Actions
43-
</th>
4445
</tr>
4546
</table>
4647
</div>
@@ -55,16 +56,16 @@ <h2>Cart</h2>
5556
<th>
5657
Id
5758
</th>
59+
<th>
60+
Actions
61+
</th>
5862
<th>
5963
Object
6064
<div class = "action" style ="float:right; width : 200px">
6165
<a href = "javascript:loadFromDB('cart')">Show all</a>
6266
<a href = "javascript:sort('cart', 'itemId')">Sort by ItemId</a>
6367
</div>
6468
</th>
65-
<th>
66-
Actions
67-
</th>
6869
</tr>
6970
</table>
7071
</div>
@@ -80,10 +81,10 @@ <h2>wishlist</h2>
8081
Id
8182
</th>
8283
<th>
83-
Object
84+
Actions
8485
</th>
8586
<th>
86-
Actions
87+
Object
8788
</th>
8889
</tr>
8990
</table>
@@ -122,7 +123,7 @@ <h2>wishlist</h2>
122123
loadFromDB("cart");
123124
loadFromDB("wishlist");
124125
downloadCatalog();
125-
}, 100)
126+
}, 200);
126127
});
127128

128129
function deleteDB(){
@@ -251,24 +252,35 @@ <h2>wishlist</h2>
251252
var row = document.createElement("tr");
252253
var html = ["<tr>"];
253254
html = html.concat(["<td class = 'key'>", key, "</td>"]);
254-
html = html.concat(["<td class = 'value'>", JSON.stringify(value).replace(/,/g, ",\n"), "</td>"]);
255255
html.push("<td class = 'action'>");
256256
for (var action in actions[tableName]) {
257257
html = html.concat("<a href = 'javascript:", actions[tableName][action], "(", key, ")'>", action, "</a>");
258258
}
259259
html.push("</td>");
260+
html = html.concat(["<td class = 'value'>", renderJSON(value), "</td>"]);
260261
html.push("</tr>");
261262
row.innerHTML = html.join("");
262263
table.appendChild(row);
263264
}
264265

266+
function renderJSON(val){
267+
var result = [];
268+
for (var key in val) {
269+
result.push("<div class = 'keyval'>");
270+
result.push("<span class = 'key'>", key, "</span>");
271+
result.push("<span class = 'value'>", JSON.stringify(val[key]), "</span>");
272+
result.push("</div>")
273+
}
274+
return result.join("");
275+
}
276+
265277
function _(promise){
266278
promise.then(function(a, e){
267279
console.log("Action completed", e.type, a, e);
268280
}, function(a, e){
269-
console.log("Action completed", e.type, a, e);
281+
console.log("Action completed", a, e);
270282
}, function(a, e){
271-
console.log("Action completed", e.type, a, e);
283+
console.log("Action completed", a, e);
272284
})
273285
}
274286
</script>

‎example/style.css

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ table th {
6363
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
6464
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
6565
background-image: linear-gradient(top, #eeeeee, #cccccc);
66-
6766
}
6867

6968
table td.key, th.key {
@@ -75,10 +74,53 @@ table td.value {
7574
text-align: left;
7675
}
7776

77+
table td.value div.keyval{
78+
display: inline-block;
79+
padding : 5px;
80+
}
81+
82+
@media screen and (max-width: 500px) {
83+
table td.value div.keyval{
84+
display: block;
85+
padding : 1px;
86+
width: 100%;
87+
text-overflow : ellipsis;
88+
}
89+
}
90+
91+
table td.value div.keyval:after{
92+
content: ",";
93+
}
94+
95+
table td.value div.keyval span.key{
96+
color: #333;
97+
}
98+
99+
table td.value div.keyval span.key:after{
100+
content : ":";
101+
}
102+
103+
table td.value div.keyval span.value{
104+
color: #777;
105+
}
106+
107+
78108
table td.action {
79109
width: 20%;
110+
min-width: 100px;
111+
}
112+
113+
@media screen and (max-width: 1098px) {
114+
table td.action a{
115+
display: block;
116+
width: 80px;
117+
margin: 5px auto;
118+
padding-top: 10px;
119+
padding-bottom: 10px;
120+
}
80121
}
81122

123+
82124
#console {
83125
clear: both;
84126
}
@@ -134,6 +176,7 @@ table td.action {
134176
.action a {
135177
vertical-align: middle;
136178
margin: 0 1%;
179+
line-height: 15px;
137180
}
138181

139182
.action a{

0 commit comments

Comments
 (0)