Commit 5a3e7c65 authored by Richard's avatar Richard

Worked on look of the app

parent aa854e04
......@@ -23,7 +23,7 @@ Ext.define('app.controller.Main', {
'listpanel #summary': {
itemtap: 'simulation',
tap: 'closeoverlay',
//tap: 'closeoverlay',
},
'#ext-button-1': {
......@@ -136,7 +136,7 @@ Ext.define('app.controller.Main', {
});
this.requestInfo(test_id, cb);
this.getOverlay().hide().showBy(this.getMapView(), 'br-br');
this.getOverlay().showBy(this.getMapView(), 'br-br');
},
showOverlay: function(list, index, element, record){
......
......@@ -5,6 +5,7 @@ Ext.define('app.view.Map', {
config: {
useLoadMask : true,
mapOptions : {
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
......
......@@ -6,14 +6,15 @@ Ext.define('app.view.Simulation', {
items:
[
{
dock: 'top',
docked: 'top',
xtype: 'toolbar',
title: 'Flood Simulation Browser'
title: 'Flood Simulation Browser',
},
{
xtype: 'SimulationMap',
flex: 2,
}],
}
});
......
......@@ -15,11 +15,12 @@ Ext.define('app.view.StepsOverlay', {
type: 'slideOut',
direction:'right',
},
dragging: true,
//draggable: true,
autoDestroy: true,
hidden: true,
width: 200,
height: 80,
width: 80,
height: 150,
scroll: false,
items: [
{
......@@ -27,36 +28,39 @@ Ext.define('app.view.StepsOverlay', {
id: 'closebutton',
iconCls: 'delete',
iconMask: true,
width: 45,
top: -30,
right: 10,
height: 10,
top: 0,
right: 0,
border: 'solid',
handler: this.closebutton,
scope: this,
},
{
top: 15,
top: 50,
align: 'center',
items : [
{
xtype: "button",
id: 'backwards',
id: 'forward',
cls: 'overlay-button',
width: 45,
iconCls: 'arrow_left',
iconCls: 'arrow_up',
floating: 'right',
iconMask: true,
left: 10,
align: 'center',
left: 20,
},
{
top: 50,
xtype: "button",
id: 'forward',
id: 'backwards',
cls: 'overlay-button',
width: 45,
floating: 'left',
iconCls: 'arrow_right',
iconCls: 'arrow_down',
left: 20,
align: 'center',
left: 100,
iconMask: true,
}]
}],
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -78,6 +78,17 @@
background: white;
}
#overlay {
border: solid;
border-width: 1px;
border-color: #a9a9a9;
}
.x-button-icon.down.x-icon-mask {
background: url(up.png);
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -78,6 +78,17 @@
background: white;
}
#overlay {
border: solid;
border-width: 1px;
border-color: #a9a9a9;
}
.x-button-icon.down.x-icon-mask {
background: url(up.png);
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -78,6 +78,17 @@
background: white;
}
#overlay {
border: solid;
border-width: 1px;
border-color: #a9a9a9;
}
.x-button-icon.down.x-icon-mask {
background: url(up.png);
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -4,8 +4,8 @@
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
//@include sencha-sheet;
//@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
......@@ -13,7 +13,48 @@
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
//@include sencha-form;
//@include sencha-msgbox;
// Your custom code goes here...
\ No newline at end of file
// Your custom code goes here...
#overlay {
//@include border-radius(10px);
// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(255,255,255); // Old browsers
@include filter-gradient(#ffffff, #b2b2b2, vertical); // IE6-9
@include background-image(linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 65%,rgba(225,225,225,1) 82%,rgba(178,178,178,1) 100%));
}
#forward {
// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(255,48,25); // Old browsers
@include filter-gradient(#ff3019, #cf0404, vertical); // IE6-9
@include background-image(linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%));
}
#backwards {
// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(255,48,25); // Old browsers
@include filter-gradient(#ff3019, #cf0404, vertical); // IE6-9
@include background-image(linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%));
}
.x-button-pressed.overlay-button {
// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(207,4,4); // Old browsers
@include filter-gradient(#cf0404, #ff3019, vertical); // IE6-9
@include background-image(linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%));
}
.x-button-pressed.overlay-button {
// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(207,4,4); // Old browsers
@include filter-gradient(#cf0404, #ff3019, vertical); // IE6-9
@include background-image(linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%));
}
#closebutton {
background: none;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment