Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add stages

  • Loading branch information...
commit 31756e81905c7256102dc64c2b1d0145f4e4b47a 1 parent a216f11
@maccman authored
View
7 app/app.coffee
@@ -1,15 +1,18 @@
require("lib/jquery.touch")
+
+Stage = require("controllers/index")
Contacts = require("controllers/contacts")
Contact = require("models/contact")
class App extends Spine.Controller
elements:
- "#content": "content"
+ "#stage": "stage"
constructor: ->
super
- @contacts = new Contacts(el: @content)
+ @stage = new Stage(el: @stage)
+ @contacts = new Contacts(stage: @stage)
$.preventDefaultTouch()
$.setupTouch()
View
6 app/controllers/contacts.coffee
@@ -1,5 +1,4 @@
Panel = require("lib/panel")
-Manager = require("lib/panel.manager")
Contact = require("models/contact")
class ContactsList extends Panel
@@ -42,14 +41,15 @@ class ContactsItem extends Panel
@item = item
@render()
-class Contacts extends Manager
+class Contacts extends Spine.Controller
constructor: ->
super
@list = new ContactsList
@item = new ContactsItem
- @addPanel(@list, @item)
+ # Add to main stage
+ @stage.add(@list, @item)
@routes
"/contacts": (params) ->
View
18 app/controllers/index.coffee
@@ -0,0 +1,18 @@
+Stage = require("lib/stage")
+
+class Main extends Stage
+ elements:
+ "header": "header"
+ ".content": "content"
+ "footer": "footer"
+
+ constructor: ->
+ # A global stage
+ @global = true
+ super
+
+ append: (elements...) ->
+ elements = (e.el or e for e in elements)
+ @content.append(elements...)
+
+module.exports = Main
View
35 app/lib/panel.coffee
@@ -1,41 +1,28 @@
-class Panel extends Spine.Controller
- title: "Panel Title"
+Stage = require("lib/stage")
+
+class Panel extends Stage
+ title: false
constructor: ->
super
+
@el.addClass("panel")
@header = $("<header />")
@header.append($("<h2 />").html(@title)) if @title
@content = $("<div />").addClass("content")
- @append(@header)
- @append(@content)
-
- html: -> @content.html.apply(@content, arguments)
-
- activate: (params = {}) ->
- effect = params.transition or params.trans
- @el.addClass("active")
- if effect
- @effects[effect].apply(this)
- else
- @header.add(@content).css(opacity: 1, display: 'block')
- deactivate: (params = {}) ->
- effect = params.transition or params.trans
-
- if effect
- @reverseEffects[effect].apply(this) if @isActive()
- @content.queueNext =>
- @el.removeClass("active")
- else
- @el.removeClass("active")
+ @append(@header, @content)
+ html: -> @content.html.apply(@content, arguments)
+
effects:
left: ->
+ @el.addClass("active")
@content.gfxSlideIn(direction: "left")
@header.gfxSlideIn(direction: "left", fade: true, distance: 50)
right: ->
+ @el.addClass("active")
@content.gfxSlideIn(direction: "right")
@header.gfxSlideIn(direction: "right", fade: true, distance: 50)
@@ -43,9 +30,11 @@ class Panel extends Spine.Controller
left: ->
@content.gfxSlideOut(direction: "right")
@header.gfxSlideOut(direction: "right", fade: true, distance: 50)
+ @content.queueNext => @el.removeClass("active")
right: ->
@content.gfxSlideOut(direction: "left")
@header.gfxSlideOut(direction: "left", fade: true, distance: 50)
+ @content.queueNext => @el.removeClass("active")
module.exports = Panel
View
8 app/lib/panel.manager.coffee
@@ -1,8 +0,0 @@
-manager = new Spine.Manager
-
-class PanelManager extends Spine.Controller
- addPanel: (panels...) ->
- manager.add(panels...)
- @append(panels...)
-
-module.exports = PanelManager
View
53 app/lib/stage.coffee
@@ -0,0 +1,53 @@
+globalManager = new Spine.Manager
+
+class Stage extends Spine.Controller
+ @globalManager: -> globalManager
+ @globalStage: -> @globalManager().controllers[0]
+
+ constructor: ->
+ super
+ @el.addClass("stage")
+ globalManager.add(@) if @global
+
+ add: (panels...) ->
+ @manager or= new Spine.Manager
+ @manager.add(panels...)
+ @append(panels...)
+
+ activate: (params = {}) ->
+ effect = params.transition or params.trans
+ if effect
+ @effects[effect].apply(this)
+ else
+ @el.addClass("active")
+
+ deactivate: (params = {}) ->
+ effect = params.transition or params.trans
+ return unless @isActive()
+ if effect
+ @reverseEffects[effect].apply(this)
+ else
+ @el.removeClass("active")
+
+ isActive: ->
+ @el.hasClass("active")
+
+ effects:
+ left: ->
+ @el.addClass("active")
+ @el.gfxSlideIn(direction: "left")
+
+ right: ->
+ @el.addClass("active")
+ @el.gfxSlideIn(direction: "right")
+
+ reverseEffects:
+ left: ->
+ @el.gfxSlideOut(direction: "right")
+ @el.queueNext => @el.removeClass("active")
+
+ right: ->
+ @el.gfxSlideOut(direction: "left")
+ @el.queueNext => @el.removeClass("active")
+
+module.exports = Stage
View
3  app/models/contact.coffee
@@ -1,3 +1,4 @@
-class Contact extends (Spine.Model("Contact", "name", "email"))
+class Contact extends Spine.Model
+ @configure "Contact", "name", "email"
module.exports = Contact
View
20 lib/gfx/gfx.js
@@ -136,9 +136,8 @@
};
$(this).queueNext(function() {
return $(this).css({
- display: 'block',
opacity: '0'
- });
+ }).show();
});
return $(this).gfx({
opacity: 1
@@ -157,8 +156,7 @@
opacity: 0
}, options);
return $(this).queueNext(function() {
- return $(this).css({
- display: 'none',
+ return $(this).hide().css({
opacity: 1
});
});
@@ -345,7 +343,9 @@
}
distance += "%";
opacity = options.fade ? 0 : 1;
- $(this).queueNext(function() {});
+ $(this).queueNext(function() {
+ return $(this).show();
+ });
$(this).gfx({
translate3d: "" + distance + ",0,0",
opacity: opacity
@@ -353,9 +353,8 @@
return $(this).queueNext(function() {
return $(this).transform({
translate3d: "0,0,0",
- opacity: 1,
- display: 'none'
- });
+ opacity: 1
+ }).hide();
});
};
$.fn.gfxSlideIn = function(options) {
@@ -373,9 +372,8 @@
$(this).queueNext(function() {
return $(this).transform({
translate3d: "" + distance + ",0,0",
- opacity: opacity,
- display: 'block'
- });
+ opacity: opacity
+ }).show();
});
return $(this).gfx({
translate3d: "0,0,0",
View
2  lib/spine/spine.ajax.js
@@ -58,7 +58,7 @@
};
}
if (method === "read" && !params.success) {
- params.success = function() {
+ params.success = function(data) {
return (record.refresh || record.load).call(record, data);
};
}
View
50 lib/spine/spine.js
@@ -13,7 +13,7 @@
child.__super__ = parent.prototype;
return child;
};
- $ = this.jQuery || Zepto || function() {
+ $ = this.jQuery || this.Zepto || function() {
return arguments[0];
};
Events = {
@@ -136,18 +136,6 @@
__extends(Model, Module);
Model.records = {};
Model.attributes = [];
- Model.setup = function() {
- var Instance;
- Instance = (function() {
- __extends(Instance, this);
- function Instance() {
- Instance.__super__.constructor.apply(this, arguments);
- }
- return Instance;
- }).call(this);
- Instance.configure.apply(Instance, arguments);
- return Instance;
- };
Model.configure = function() {
var attributes, name;
name = arguments[0], attributes = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
@@ -191,6 +179,7 @@
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
record = _ref[_i];
record.newRecord = false;
+ record.id || (record.id = guid());
this.records[record.id] = record;
}
this.trigger("refresh");
@@ -471,7 +460,8 @@
}, this));
};
Model.prototype.trigger = function() {
- return this.constructor.trigger.apply(this.constructor, arguments);
+ var _ref;
+ return (_ref = this.constructor).trigger.apply(_ref, arguments);
};
return Model;
})();
@@ -538,7 +528,7 @@
return this.el.html(element.el || element);
};
Controller.prototype.append = function() {
- var e, elements;
+ var e, elements, _ref;
elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
elements = (function() {
var _i, _len, _results;
@@ -549,7 +539,7 @@
}
return _results;
})();
- return this.el.append.apply(this.el, elements);
+ return (_ref = this.el).append.apply(_ref, elements);
};
Controller.prototype.appendTo = function(element) {
return this.el.appendTo(element.el || element);
@@ -580,11 +570,7 @@
return v.toString(16);
}).toUpperCase();
};
- if (typeof exports === !"undefined") {
- Spine = exports;
- } else {
- Spine = this.Spine = {};
- }
+ Spine = this.Spine = {};
Spine.version = "2.0.0";
Spine.isArray = isArray;
Spine.$ = $;
@@ -592,9 +578,10 @@
Spine.Log = Log;
Spine.Module = Module;
Spine.Controller = Controller;
- Spine.Model = function() {
- return Model.setup.apply(Model, arguments);
- };
+ Spine.Model = Model;
+ if (typeof module !== "undefined" && module !== null) {
+ module.exports = Spine;
+ }
Module.create = Module.sub = Controller.create = Controller.sub = Model.sub = function(instance, static) {
var result;
result = (function() {
@@ -615,11 +602,20 @@
}
return result;
};
+ Model.setup = function() {
+ var Instance;
+ Instance = (function() {
+ __extends(Instance, this);
+ function Instance() {
+ Instance.__super__.constructor.apply(this, arguments);
+ }
+ return Instance;
+ }).call(this);
+ Instance.configure.apply(Instance, arguments);
+ return Instance;
+ };
Module.init = Controller.init = Model.init = function(a1, a2, a3, a4, a5) {
return new this(a1, a2, a3, a4, a5);
};
- Spine.Model.setup = function(name, attributes) {
- return Spine.Model.apply(Spine, [name].concat(__slice.call(attributes)));
- };
Spine.Class = Module;
}).call(this);
View
25 lib/spine/spine.manager.js
@@ -13,7 +13,9 @@
Spine.Manager = (function() {
__extends(Manager, Spine.Module);
function Manager() {
+ this.controllers = [];
this.add.apply(this, arguments);
+ this.bind("change", this.change);
}
Manager.prototype.add = function() {
var cont, controllers, _i, _len, _results;
@@ -26,18 +28,25 @@
return _results;
};
Manager.prototype.addOne = function(controller) {
- this.bind("change", function(current, args) {
- if (controller === current) {
- return controller.activate.apply(controller, args);
- } else {
- return controller.deactivate.apply(controller, args);
- }
- });
- return controller.active(__bind(function() {
+ controller.active(__bind(function() {
var args;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
return this.trigger("change", controller, args);
}, this));
+ return this.controllers.push(controller);
+ };
+ Manager.prototype.deactivate = function() {
+ return this.trigger.apply(this, ["change", false].concat(__slice.call(arguments)));
+ };
+ Manager.prototype.change = function(current, args) {
+ var cont, _i, _len, _ref, _results;
+ _ref = this.controllers;
+ _results = [];
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ cont = _ref[_i];
+ _results.push(cont === current ? cont.activate.apply(cont, args) : cont.deactivate.apply(cont, args));
+ }
+ return _results;
};
return Manager;
})();
View
2  lib/spine/spine.route.js
@@ -116,7 +116,7 @@
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
route = _ref[_i];
if (route.match(path, options)) {
- return;
+ return route;
}
}
};
View
202 public/css/application.css
@@ -3,6 +3,9 @@ Less CSS3 utils.
*/
/* Vertical Background Gradient */
/* Horizontal Background Gradient */
+body, html {
+ height: 100%;
+}
body {
font-family: Helvetica, Arial, sans-serif;
overflow-x: hidden;
@@ -15,76 +18,20 @@ body {
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
-header {
- color: #292D39;
- text-shadow: 0 1px 0 #FFF;
- text-align: center;
- position: relative;
-}
-header button {
- margin: 6px;
- padding: 5px 10px;
- font-size: 13px;
- cursor: pointer;
- font-weight: bold;
- border: 1px solid #777A85;
- color: #313748;
- text-shadow: 0 1px 0 #FFF;
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- background: rgba(255, 255, 255, 0.9);
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.2)));
- background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
- background: linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
-}
-header button:active {
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-header button.left {
- position: absolute;
- left: 0;
-}
-header button.right {
- position: absolute;
- right: 0;
-}
-header h1, header h2 {
- margin: 0;
- padding: 0;
- font-size: 18px;
- position: absolute;
- left: 0;
- right: 0;
-}
-footer {
- color: #565D65;
- text-shadow: 0 1px 0 #FFF;
- font-weight: bold;
- font-size: 15px;
-}
-footer .item {
- width: 70px;
- height: 25px;
- line-height: 25px;
- padding: 5px 0;
- text-align: center;
- cursor: pointer;
- position: relative;
+#stage {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: stretch;
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ -moz-box-align: stretch;
}
-footer .item.active, footer .item:active {
- background: rgba(255, 255, 255, 0.3);
+#stage > .content {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
}
#header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
height: 40px;
line-height: 40px;
-webkit-box-sizing: border-box;
@@ -98,11 +45,6 @@ footer .item.active, footer .item:active {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, left bottom, from(#b6b9c3), to(#9a9eac));
}
#footer {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- height: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -123,36 +65,37 @@ footer .item.active, footer .item:active {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
+ color: #565D65;
+ text-shadow: 0 1px 0 #FFF;
+ font-weight: bold;
+ font-size: 15px;
}
-#content {
- position: absolute;
- top: 40px;
- bottom: 40px;
- left: 0;
- right: 0;
+#footer .item {
+ width: 70px;
+ height: 30px;
+ line-height: 30px;
+ padding: 5px;
+ text-align: center;
+ cursor: pointer;
+ position: relative;
}
-#content header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- height: 40px;
- line-height: 40px;
+#footer .item.active, #footer .item:active {
+ background: rgba(255, 255, 255, 0.3);
}
-.panels {
+.viewport {
position: relative;
}
-.panels > .panel {
+.viewport > * {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
-.panels > .panel:not(.active) {
+.viewport > *:not(.active) {
display: none;
}
-.panels .panel {
+.panel {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
@@ -160,13 +103,89 @@ footer .item.active, footer .item:active {
-moz-box-orient: vertical;
-moz-box-align: stretch;
}
-.panels .panel .fillout {
+.panel .content {
+ overflow: auto;
+}
+.panel .list {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+}
+.panel .fillout {
background: #F6F6F7;
padding: 15px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
+.panel header {
+ height: 40px;
+ line-height: 40px;
+ color: #292D39;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
+ position: relative;
+ margin-top: -40px;
+}
+.panel header button {
+ margin: 6px;
+ padding: 5px 10px;
+ font-size: 13px;
+ cursor: pointer;
+ font-weight: bold;
+ border: 1px solid #777A85;
+ color: #313748;
+ text-shadow: 0 1px 0 #FFF;
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.9);
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.2)));
+ background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
+ background: linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
+}
+.panel header button:active {
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.panel header button.left {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.panel header button.right {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.panel header h1, .panel header h2 {
+ padding: 0;
+ font-size: 18px;
+ margin: 0 65px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.list h3 {
+ margin: 0;
+ padding: 4px 15px;
+ color: #FFF;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.5);
+ background: #9a9eac;
+ background: -webkit-gradient(linear, left top, left bottom, from(#9a9eac), to(#b6b9c3));
+ background: -moz-linear-gradient(top, #9a9eac, #b6b9c3);
+ background: linear-gradient(top, #9a9eac, #b6b9c3);
+ font-size: 16px;
+ border-top: 1px solid #70727D;
+ border-bottom: 1px solid #70727D;
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
.list .item {
cursor: pointer;
background: #F6F6F7;
@@ -188,3 +207,6 @@ footer .item.active, footer .item:active {
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
+.list .item:last-child:active {
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.3);
+}
View
229 public/css/application.less
@@ -1,5 +1,9 @@
@import "public/css/utils";
+body, html {
+ height: 100%;
+}
+
body {
font-family: Helvetica, Arial, sans-serif;
overflow-x: hidden;
@@ -13,76 +17,15 @@ body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
-header {
- color: #292D39;
- text-shadow: 0 1px 0 #FFF;
- text-align: center;
- position: relative;
-}
-
-header button {
- margin: 6px;
- padding: 5px 10px;
- font-size: 13px;
- cursor: pointer;
- font-weight: bold;
- border: 1px solid #777A85;
- color: #313748;
- text-shadow: 0 1px 0 #FFF;
- .inset-box-shadow(0, 1px, 1px, rgba(0,0,0,0.08));
- .border-radius(5px);
-
- .vbg-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
-
- &:active {
- .inset-box-shadow(0, 1px, 2px, rgba(0,0,0,0.4));
- }
+#stage {
+ .vbox();
- &.left {
- position: absolute; left: 0;
- }
- &.right {
- position: absolute; right: 0;
- }
-}
-
-header h1, header h2 {
- margin: 0;
- padding: 0;
- font-size: 18px;
- position: absolute;
- left: 0; right: 0;
-}
-
-footer {
- color: #565D65;
- text-shadow: 0 1px 0 #FFF;
- font-weight: bold;
- font-size: 15px;
-}
-
-footer .item {
- width: 70px;
- height: 25px;
- line-height: 25px;
-
- padding: 5px 0;
- text-align: center;
-
- cursor: pointer;
- position: relative;
-
- &.active, &:active {
- background: rgba(255, 255, 255, 0.3);
+ > .content {
+ .box-flex(1);
}
}
#header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
-
height: 40px;
line-height: 40px;
@@ -103,12 +46,6 @@ footer .item {
}
#footer {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- height: 40px;
-
.border-box();
border-top: 1px solid #464854;
.inset-box-shadow(0, 1px, 0, rgba(255, 255, 255, 0.2));
@@ -124,42 +61,54 @@ footer .item {
);
.hbox();
.box-pack(center);
-}
+
+ color: #565D65;
+ text-shadow: 0 1px 0 #FFF;
+ font-weight: bold;
+ font-size: 15px;
-#content {
- position: absolute;
- top: 40px;
- bottom: 40px;
- left: 0; right: 0;
-}
+ .item {
+ width: 70px;
+ height: 30px;
+ line-height: 30px;
-#content header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
+ padding: 5px;
+ text-align: center;
- height: 40px;
- line-height: 40px;
+ cursor: pointer;
+ position: relative;
+
+ &.active, &:active {
+ background: rgba(255, 255, 255, 0.3);
+ }
+ }
}
-.panels {
- position: relative;
+.viewport {
+ position: relative;
}
-.panels > .panel {
+.viewport > * {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
}
-.panels > .panel:not(.active) {
+.viewport > *:not(.active) {
display: none;
}
-.panels .panel {
+.panel {
.vbox();
+ .content {
+ overflow: auto;
+ }
+
+ .list {
+ .box-flex(1);
+ }
+
.fillout {
background: #F6F6F7;
padding: 15px;
@@ -167,27 +116,89 @@ footer .item {
}
}
-.list .item {
- cursor: pointer;
-
- background: #F6F6F7;
- background: -webkit-gradient(linear, left top, left bottom,
- from(rgba(255, 255, 255, 1)),
- color-stop(0.5, rgba(255, 255, 255, 0.4)),
- color-stop(0.5, rgba(255, 255, 255, 0))
- ), #F6F6F7;
- padding: 15px;
- border-bottom: 1px solid #CCCED4;
+.panel header {
+ height: 40px;
+ line-height: 40px;
+
color: #292D39;
- text-shadow: 0 1px 0 #FFF;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
+ position: relative;
+ margin-top: -40px;
+
+ button {
+ margin: 6px;
+ padding: 5px 10px;
+ font-size: 13px;
+ cursor: pointer;
+ font-weight: bold;
+ border: 1px solid #777A85;
+ color: #313748;
+ text-shadow: 0 1px 0 #FFF;
+ .inset-box-shadow(0, 1px, 1px, rgba(0,0,0,0.08));
+ .border-radius(5px);
+
+ .vbg-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
+
+ &:active {
+ .inset-box-shadow(0, 1px, 2px, rgba(0,0,0,0.4));
+ }
+
+ &.left {
+ position: absolute; left: 0; top: 0;
+ }
+ &.right {
+ position: absolute; right: 0; top: 0;
+ }
+ }
+
+ h1, h2 {
+ padding: 0;
+ font-size: 18px;
+ margin: 0 65px;
+ .ellipsis()
+ }
+}
+
+.list {
+ h3 {
+ margin: 0;
+ padding: 4px 15px;
+ color: #FFF;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.5);
+ .vbg-gradient(#9A9EAC, lighten(#9A9EAC, 10%));
+ font-size: 16px;
+ border-top: 1px solid #70727D;
+ border-bottom: 1px solid #70727D;
+ .inset-line();
+ }
+
+ .item {
+ cursor: pointer;
- &:active {
background: #F6F6F7;
- .inset-box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.1));
- }
+ background: -webkit-gradient(linear, left top, left bottom,
+ from(rgba(255, 255, 255, 1)),
+ color-stop(0.5, rgba(255, 255, 255, 0.4)),
+ color-stop(0.5, rgba(255, 255, 255, 0))
+ ), #F6F6F7;
+ padding: 15px;
+ border-bottom: 1px solid #CCCED4;
+ color: #292D39;
+ text-shadow: 0 1px 0 #FFF;
+
+ &:active {
+ background: #F6F6F7;
+ .inset-box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.1));
+ }
- &:last-child {
- border-bottom: none;
- .box-shadow(0, 4px, 8px, rgba(0,0,0,0.3));
- }
+ &:last-child {
+ border-bottom: none;
+ .box-shadow(0, 4px, 8px, rgba(0,0,0,0.3));
+ }
+
+ &:last-child:active {
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0,0,0,0.3);
+ }
+ }
}
View
14 public/index.html
@@ -16,9 +16,15 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
</head>
-<body>
- <header id="header"></header>
- <div class="panels" id="content"></div>
- <footer id="footer"></footer>
+<body class="viewport">
+ <div id="stage" class="active">
+ <header id="header"></header>
+ <div class="content viewport"></div>
+ <footer id="footer">
+ <div data-type="menu1" class="item active">Menu 1</div>
+ <div data-type="menu2" class="item">Menu 2</div>
+ <div data-type="menu3" class="item">Menu 3</div>
+ </footer>
+ </div>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.