Permalink
Browse files

Adding example application

  • Loading branch information...
1 parent 6db356b commit db7599ed27b8d835bb318510a66efcb191917660 @jawsthegame jawsthegame committed Oct 2, 2012
View
@@ -0,0 +1 @@
+node_modules
View
@@ -0,0 +1,37 @@
+$ = require 'jqueryify2'
+Backbone = require 'backbone'
+Quips = require 'quips'
+
+LoginView = require 'views/login_view'
+
+loginLayout = require 'templates/login/layout'
+navTemplate = require 'templates/navigation/index'
+
+class App
+
+ constructor: (@apiRoot) ->
+ module.exports.apiRoot = @apiRoot
+
+ root = $('body')
+ @loginController = new Quips.LoginController(loginLayout,
+ LoginView, el: root)
+
+ (do @login)
+ .pipe(@showUI)
+
+ login: =>
+ Quips.User.authenticateAgainst(@apiRoot)
+ @loginController.login()
+
+ showUI: =>
+ layout = $('body').empty().append(require 'templates/layout')
+
+ main = layout.find('.body')
+ navigation = layout.find('.navigation')
+
+ new Quips.NavigationController(Quips.User.current,
+ navTemplate, el: navigation).activate()
+
+ Backbone.history.start()
+
+module.exports.app = App
@@ -0,0 +1,7 @@
+.container
+
+ .navigation
+
+ .body
+
+ .footer
@@ -0,0 +1,2 @@
+#login
+ .login-view.box
@@ -0,0 +1,17 @@
+%form.login
+
+ .header
+ %h1 welcome to quips.
+
+ .notice
+
+ %p
+ %label{:for => 'email'} Email
+ %input{:type => 'text', :name => 'email'}
+
+ %p
+ %label{:for => 'password'} Password
+ %input{:type => 'password', :name => 'password'}
+
+ .actions
+ %input{:type => 'submit', :name => 'submit', :value => 'Login', :class => 'btn'} Log In
@@ -0,0 +1,31 @@
+.navigation
+
+ %ul.primary
+
+ %li.title
+ %span= @name
+
+ %li
+ %a{:href => '#', :class => 'first-level-one'} One
+
+ %li
+ %a{:href => '#', :class => 'first-level-two'} Two
+
+ %li.account
+ %a{:href => '#', :class => 'account'} Account
+
+ %ul.secondary.first-level-one
+ %li
+ %a{:href => '#/item1/'} Sub Item 1
+ %li
+ %a{:href => '#/item2/'} Sub Item 2
+
+ %ul.secondary.first-level-two
+ %li
+ %a{:href => '#/item3/'} Sub Item 3
+ %li
+ %a{:href => '#/item4/'} Sub Item 4
+
+ %ul.secondary.account
+ %li
+ %a{:href => '#/logout'} Log Out
@@ -0,0 +1,8 @@
+Quips = require 'quips'
+
+
+class LoginView extends Quips.LoginView
+ template: require 'templates/login/view'
+
+
+module.exports = LoginView
View
@@ -0,0 +1,2 @@
+#quips-css
+a supplemental set of css definitions for quips
View
@@ -0,0 +1,28 @@
+@import './mixin'
+
+.btn
+ vbg-gradient #eee #ccc
+ border 1px solid #ccc
+ border-bottom 1px solid #bbb
+ border-radius 3px
+ color #333
+ font bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif
+ line-height 1
+ padding 8px
+ text-align center
+ text-shadow 0 1px 0 #eee
+
+ &:hover
+ vbg-gradient #ddd #bbb
+ border 1px solid #bbb
+ border-bottom 1px solid #999
+ cursor pointer
+ text-shadow 0 1px 0 #ddd
+
+ &:active
+ border 1px solid #aaa
+ border-bottom 1px solid #aaa
+ inset-box-shadow 0 0 5px 2px #aaa, 0 1px 0 0 #eee
+
+ &.delete
+ color #9d261d
View
@@ -0,0 +1,23 @@
+gray-darker = #222
+gray-dark = #333
+gray = #555
+gray-light = #999
+gray-lighter = #eee
+
+light = #f0f0f0
+light-stroke = 1px solid light
+
+blue = #003a94
+
+notice = desaturate(blue, 80%)
+notice-light = lighten(notice, 75%)
+
+// Taken from the logo prototypes
+primary = #a61f2c
+primary-orange = #f17522
+primary-red = #cf1e23
+
+primary-green = #99cc00
+primary-green-dark = #5ba300
+primary-blue = #0078ad
+primary-blue-dark = #003875
View
@@ -0,0 +1,117 @@
+@import 'mixin'
+@import 'colors'
+
+default-width = 210px
+small-width = 98px
+label-width = 140px
+error-color = primary-red
+
+// --------------------------------------------------------------------------
+// Form Elements
+// --------------------------------------------------------------------------
+
+input, select, textarea
+ border-radius 3px
+ display inline-block
+ color #555
+ border 1px solid #ccc
+ background-color #fff
+ padding 4px
+
+input
+ &:disabled
+ background gray-lighter
+ color gray
+
+ &[type="text"],
+ &[type="password"]
+ transition border-color linear 0.2s
+ width default-width
+ height 18px
+ inset-box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)
+ margin-bottom 0
+
+ &:focus
+ border-color primary-blue
+ box-shadow 0 0 5px primary-blue
+ outline 0
+
+ &.small, &.date
+ width small-width
+
+select
+ width default-width + 10px
+ height 28px
+ &.small, &.time
+ width small-width + 10px
+
+textarea
+ width default-width
+ height 100px
+
+// --------------------------------------------------------------------------
+// Input Layout
+// --------------------------------------------------------------------------
+
+p
+ padding 12px 0 1px 0
+ margin 0 0 6px 0
+ border-radius 12px
+
+ label
+ float left
+ width label-width
+ padding 5px 10px 0 0
+ text-align right
+ margin-bottom 5px
+ display block
+
+// --------------------------------------------------------------------------
+// Errors
+// --------------------------------------------------------------------------
+
+ul.errors
+ padding 0
+ margin (tick / 2) 0 tick (label-width + 10px)
+ list-style-type none
+
+ li
+ color darken(error-color, 50%)
+ text-shadow 1px 1px 0 #fff
+
+p.error
+ background-color lighten(error-color, 95%)
+ input
+ border 1px solid error-color
+
+// --------------------------------------------------------------------------
+// Header / Action footer
+// --------------------------------------------------------------------------
+
+.header
+ height 44px
+ padding-bottom 10px
+ border-bottom light-stroke
+
+ h1
+ color gray
+ padding-top 14px
+
+ h2
+ font-size 24pt
+
+ img
+ float right
+
+.actions
+ padding 15px 20px 5px 147px
+
+ .cancel
+ padding: 0 10px
+ margin: 5px 0 0 0
+ text-shadow 2px 1px 0 #fff
+
+ p.error
+ background-color lighten(error-color, 95%)
+ input
+ border 1px solid error-color
View
@@ -0,0 +1,35 @@
+@import 'mixin'
+@import 'colors'
+@import 'type'
+
+tick = 18px
+
+body
+ margin 0
+ padding 0
+ background #efeeec
+
+a, a:visited
+ color primary-blue-dark
+
+.hidden
+ display none !important
+
+.left
+ float left
+
+.right
+ float right
+
+.clear
+ clear both
+
+@import 'report'
+@import 'table'
+@import 'split-view'
+@import 'navigation'
+
+@import 'width'
+@import 'text'
+@import 'form'
+@import 'buttons'
Oops, something went wrong. Retry.

0 comments on commit db7599e

Please sign in to comment.