Skip to content

Commit

Permalink
Mobileapp sample various fixes. Refs ibm-js#122
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmandrioli
dmandrioli committed Jul 16, 2014
1 parent cec3da9 commit 47bdb4b
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 29 deletions.
31 changes: 24 additions & 7 deletions demos/mobileapp/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
font-family: sans-serif;
}

.d-list {
border: none;
}

.pageHeader, .pageFooter{
background-color: #1AA1E1;
color: white;
Expand All @@ -11,6 +15,7 @@
.pageHeader {
border-bottom: 2px solid black;
padding: 0.3em;
height: 60px;
}

.pageFooter {
Expand All @@ -23,16 +28,28 @@
text-align: center;
}

button{
width: 32px;
height: 32px;
.appButton, .appButton2 {
border: none;
background-color: white;
font-weight: bold;
min-width: 50px;
cursor: pointer;
padding: 10px 10px 10px 10px;
font-size: 110%;
}

.titleStyle{
font-size: 1.5em;
text-align: center;
padding-top: 0.2em;
.appButton2 {
background-color: #1AA1E1;
color: white;
margin: 0 30% 0 30%;
}

.titleStyle {
text-align: center;
margin-top: auto;
margin-bottom: auto;
font-weight: bold;
font-size: 150%;
/* One line title with ellipsis if needed */
white-space: nowrap;
text-overflow: ellipsis;
Expand Down
50 changes: 28 additions & 22 deletions demos/mobileapp/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,19 @@

<link rel="stylesheet" href="../../../delite/themes/defaultapp.css">
<link rel="stylesheet" href="app.css">

<!-- For testing purposes. Real applications should load the AMD loader directly -->
<script type="text/javascript" src="../../tests/boilerplate.js"></script>
<script type="text/javascript" src="../../../requirejs/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl: "../../../"
});
</script>

<script type="text/javascript">
require([
"delite/register",
"deliteful/ViewStack",
"deliteful/SidePane",
"deliteful/LinearLayout",
"deliteful/Button",
"deliteful/list/List",
"delite/css!deliteful/ViewStack/transitions/fade_css",
"requirejs-domready/domReady!"
Expand All @@ -28,11 +30,15 @@
for (var i = 1; i < 100; i++){
list.store.add({label: "Item #" + i});
}
menulist.store.add({label: "List A", target:"aaa"});
menulist.store.add({label: "List B", target:"bbb"});
menulist.store.add({label: "View A", target:"aaa"});
menulist.store.add({label: "View B", target:"bbb"});
menulist.store.add({label: "View C", target:"ccc"});
menulist.store.add({label: "View D", target:"ddd"});
var actionHandler = function(event, list) {
var renderer = list.getEnclosingRenderer(event.target);
vs.show(renderer.item.target, {transition: "fade"});
if (renderer) {
vs.show(renderer.item.target, {transition: "fade"});
}
};

menulist.on("click", function (event) {
Expand All @@ -46,18 +52,19 @@
<d-side-pane mode="push" position="start" id="leftPane">
<d-linear-layout class="height100">
<d-linear-layout vertical="false" class="pageHeader">
<div><button is="d-button" onclick="leftPane.hide()"></button></div>
<div class="fill titleStyle">Menu</div>
<div><button is="d-button" onclick="leftStack.show(settings)"></button></div>
</d-linear-layout>

<d-view-stack id="leftStack" class="width100 fill" style="background-color: white">
<div style="height: 100%" id="menu">
<d-list style="height: 100%" id="menulist" targetAttr="target"></d-list>
</div>
<div id="settings" style="text-align: center">
<button is="d-button" onclick="leftStack.show(menu, {reverse:true})"></button>
</div>
<d-linear-layout id="menu">
<div class="fill">
<d-list style="height: 100%" id="menulist" targetAttr="target"></d-list>
</div>
<button class="appButton2" onclick="leftStack.show('settings')">&gt;</button>
</d-linear-layout>
<d-linear-layout id="settings" style="background-color: #bce8f1">
<div class="fill"><div class="titleStyle">Page 2</div></div>
<button class="appButton2" onclick="leftStack.show('menu', {reverse:true})">&lt;</button>
</d-linear-layout>
</d-view-stack>
</d-linear-layout>
</d-side-pane>
Expand All @@ -66,9 +73,8 @@
<d-linear-layout class="page width100 height100">
<!-- Header -->
<d-linear-layout vertical="false" class="pageHeader">
<div><button is="d-button" onclick="leftPane.show()"></button></div>
<button class="appButton" onclick="leftPane.toggle()">Menu</button>
<div class="fill titleStyle">Deliteful Mobile App</div>
<div><button is="d-button"></button></div>
</d-linear-layout>
<!-- Main content (ViewStack) -->
<d-view-stack id="vs" class="fill">
Expand All @@ -87,10 +93,10 @@
</d-view-stack>
<!-- Footer -->
<d-linear-layout vertical="false" class="pageFooter">
<div class="fill"><button is="d-button" onclick="vs.show(aaa)"></button></div>
<div class="fill"><button is="d-button" onclick="vs.show(bbb)"></button></div>
<div class="fill"><button is="d-button" onclick="vs.show(ccc)"></button></div>
<div class="fill"><button is="d-button" onclick="vs.show(ddd)"></button></div>
<div class="fill"><button class="appButton" onclick="vs.show(aaa)">A</button></div>
<div class="fill"><button class="appButton" onclick="vs.show(bbb)">B</button></div>
<div class="fill"><button class="appButton" onclick="vs.show(ccc)">C</button></div>
<div class="fill"><button class="appButton" onclick="vs.show(ddd)">D</button></div>
</d-linear-layout>
</d-linear-layout>
</body>
Expand Down

0 comments on commit 47bdb4b

Please sign in to comment.