mobile login, lite mobile work, mark done in store

arvo/eyre.hoon

@@ -510,6 +510,9 @@
     ;html
       ;head
         ;meta(charset "utf-8");
+        ;meta(name "viewport", content "width=device-width, ".
+        "height=device-height, initial-scale=1.0, user-scalable=0, ".
+        "minimum-scale=1.0, maximum-scale=1.0");
         ;title:"{(trip a)}" 
         ;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/".
           "libs/jquery/2.1.1/jquery.min.js");

lib/base.css

@@ -166,3 +166,17 @@ input {
   outline: none;
   border-bottom: 3px solid #555;
 }
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+  #c {
+    width: 16rem;
+    margin-left: -8rem;
+  }
+  #pass {
+    width: 16rem;
+  }
+  input {
+    -webkit-appearance: none;
+    border-radius: 0;
+  }
+}

pub/work/src/css/main.css

@@ -167,9 +167,12 @@ h1.leader:after {
 }
 .input-bool,
 .item .done {
-  width: 0.7rem;
-  height: 0.7rem;
+  width: 1rem;
+  height: 1rem;
   border: 0.2rem solid #ccc;
+  padding: 0;
+  outline: none;
+  background-color: #fff;
 }
 .input-bool.true,
 .item .done-true {
@@ -205,9 +208,11 @@ h1.leader:after {
   cursor: pointer;
   transform-origin: 6px 12px;
   transition: transform 200ms linear;
+  -webkit-transform-origin: 6px 12px;
 }
 .item.expand .expand {
   transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
   transition: transform 200ms linear;
 }
 .item .header {
@@ -314,11 +319,12 @@ h1.leader:after {
 }
 .item .submit {
   font-size: 0.7rem;
-  text-transform: uppercase;
+  font-weight: 500;
   display: inline-block;
   background-color: #b9b9b9;
   letter-spacing: 0.07rem;
   color: #fff;
+  border: 0;
   padding: 0 0.3rem;
   margin-top: 0.5rem;
 }
@@ -358,7 +364,10 @@ h1.leader:after {
   border: 0;
   font: inherit;
   resize: none;
+  -webkit-user-select: text;
+  user-select: text;
 }
+textarea:focus,
 .input:focus {
   background-color: #e6e6e6;
 }
@@ -397,3 +406,78 @@ h1.leader:after {
   width: 3rem;
   background-color: #ccc;
 }
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+  #c {
+    width: 100%;
+    margin: 0;
+    left: 0.6rem;
+  }
+  h1 {
+    font-size: 1rem;
+  }
+  input,
+  textarea {
+    -webkit-appearance: none;
+    border-radius: 0;
+  }
+  .input {
+    padding: 0 0.3rem 0 0.1rem;
+  }
+  .ctrl {
+    margin-top: 1rem;
+  }
+  .ctrl .sorts,
+  .ctrl .filters {
+    margin-left: 0;
+  }
+  .ctrl .filters .done label {
+    display: none;
+  }
+  .ctrl .sort {
+    padding: 0.2rem 0.3rem;
+  }
+  .ctrl .filter {
+    line-height: 1.3rem;
+  }
+  .ctrl .sort label,
+  .ctrl .filter label {
+    font-size: 0.7rem;
+    letter-spacing: 0.05rem;
+    line-height: 1.3rem;
+  }
+  .items {
+    margin-left: 0;
+  }
+  .item {
+    width: auto;
+  }
+  .item .sort {
+    display: none;
+  }
+  .item .title,
+  .item .date,
+  .item .tags {
+    min-width: 4rem;
+    max-width: 4rem;
+    margin-left: 0.3rem;
+  }
+  .item .expand {
+    float: right;
+    margin-right: 0.6rem;
+  }
+  .item .description,
+  .item .discussion {
+    margin: 0.5rem 0;
+  }
+  .item .description textarea {
+    min-width: 18rem;
+    margin: 0;
+  }
+  .item .comment.new {
+    max-width: 18rem;
+  }
+  .item .submit {
+    line-height: 1.6rem;
+    letter-spacing: 0;
+  }
+}

pub/work/src/css/main.styl

@@ -91,9 +91,12 @@ h1.leader:after
 
 .input-bool
 .item .done
-  width .7rem
-  height .7rem
+  width 1rem
+  height 1rem
   border .2rem solid #ccc
+  padding 0
+  outline none
+  background-color #fff
 
 .input-bool.true
 .item .done-true
@@ -129,9 +132,11 @@ h1.leader:after
     cursor pointer
     transform-origin 6px 12px
     transition transform 200ms linear
+    -webkit-transform-origin 6px 12px
 
   &.expand .expand
     transform rotate(90deg)
+    -webkit-transform rotate(90deg)
     transition transform 200ms linear
   
   .header
@@ -237,11 +242,12 @@ h1.leader:after
     
   .submit
     font-size .7rem
-    text-transform uppercase
+    font-weight 500
     display inline-block
     background-color #b9b9b9
     letter-spacing .07rem
     color #fff
+    border 0
     padding 0 .3rem
     margin-top .5rem
 
@@ -282,7 +288,10 @@ h1.leader:after
   border 0
   font inherit
   resize none
+  -webkit-user-select text
+  user-select text
   
+textarea:focus
 .input:focus
   background-color #e6e6e6
 

pub/work/src/css/mobile.styl

@@ -10,4 +10,76 @@
 // @media only screen and (min-width: 320px) and (max-width: 1024px)
 
 /* phones portrait and landscape ----------- */
-// @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+  #c
+    width 100%
+    margin 0
+    left .6rem
+  
+  h1
+    font-size 1rem
+    
+  input
+  textarea
+    -webkit-appearance none
+    border-radius 0
+  
+  .input
+    padding 0 .3rem 0 .1rem
+  
+  .ctrl
+    margin-top 1rem
+  
+  .ctrl .sorts
+  .ctrl .filters
+    margin-left 0
+  
+  .ctrl .filters .done label
+    display none
+  
+  .ctrl .sort
+    padding .2rem .3rem
+  
+  .ctrl .filter
+    line-height 1.3rem
+
+  .ctrl .sort label
+  .ctrl .filter label
+    font-size .7rem
+    letter-spacing .05rem
+    line-height 1.3rem
+  
+  .items
+    margin-left 0
+    
+  .item
+    width auto
+  
+  .item .sort
+    display none
+  
+  .item .title
+  .item .date
+  .item .tags
+    min-width 4rem
+    max-width 4rem
+    margin-left .3rem
+  
+  .item .expand
+    float right
+    margin-right .6rem
+  
+  .item .description
+  .item .discussion
+    margin .5rem 0
+  
+  .item .description textarea
+    min-width 18rem
+    margin 0
+  
+  .item .comment.new
+    max-width 18rem
+  
+  .item .submit
+    line-height 1.6rem 
+    letter-spacing 0

pub/work/src/js/actions/WorkActions.coffee

@@ -30,8 +30,7 @@ module.exports =
     key = key.split('_').join '-'
     set = "#{key}": val
     Persistence.put old:{id,version,dif:{set}}
-    Dispatcher.handleViewAction {type:'updateItem',id,version}
-
+    Dispatcher.handleViewAction {type:'updateItem',id,version,key,val}
 
   ownItem: ({id,version},own) ->
     o = {}

pub/work/src/js/components/FilterComponent.coffee

@@ -1,6 +1,6 @@
 recl = React.createClass
 rece = React.createElement
-{div,h1,label} = React.DOM
+{div,h1,label,button} = React.DOM
 
 module.exports = recl
   onClick: (e) ->
@@ -41,7 +41,7 @@ module.exports = recl
         (label {}, title)
         switch filter
           when 'done'
-            (div {
+            (button {
                   className:'input-bool ib '+@props.filters[key],
                   @onClick
                 },"")

pub/work/src/js/components/ItemComponent.coffee

@@ -1,6 +1,6 @@
 recl = React.createClass
 rece = React.createElement
-{div,textarea} = React.DOM
+{div,textarea,button} = React.DOM
 
 WorkActions   = require '../actions/WorkActions.coffee'
 Field         = require './FieldComponent.coffee'
@@ -37,10 +37,12 @@ module.exports = recl
       e.preventDefault()
       return
 
-  onFocus: (e) -> @props._focus e,@
+  onFocus: (e) -> 
+    @props._focus e,@
+    return true
 
   _markDone: (e) -> 
-    WorkActions.setItem @props.item,'done',(not @props.item.done?)
+    WorkActions.setItem @props.item,'done',(not (@props.item.done is true))
 
   _changeStatus: (e) ->
     return if @props.item.status is 'released'
@@ -118,7 +120,7 @@ module.exports = recl
             (@renderField 'audience', {}, @formatAudience)
           )
         (div {className:'sort ib top'}, @props.item.sort)
-        (div {className:'done ib done-'+@props.item.done?, onClick:@_markDone}, '')
+        (button {className:'done ib done-'+(@props.item.done is true), onClick:@_markDone}, '')
         (@renderTopField 'title', {@onFocus,@onKeyDown})
         (@renderTopField 'date_due', {className:'date'}, @formatDate)
         (@renderTopField 'tags', {}, (tags=[])-> tags.join(" "))
@@ -147,7 +149,7 @@ module.exports = recl
                 (div {
                   contentEditable:true,
                   className:'input'})
-                (div {className:'submit',onClick:@_submitComment},'Post')
+                (button {className:'submit',onClick:@_submitComment},'Post')
             )
           )
     )

pub/work/src/js/main.js

@@ -63,7 +63,9 @@ module.exports = {
     return Dispatcher.handleViewAction({
       type: 'updateItem',
       id: id,
-      version: version
+      version: version,
+      key: key,
+      val: val
     });
   },
   ownItem: function(arg, own) {
@@ -329,13 +331,13 @@ module.exports = recl({
 
 
 },{"../actions/WorkActions.coffee":1}],3:[function(require,module,exports){
-var div, h1, label, rece, recl, ref;
+var button, div, h1, label, rece, recl, ref;
 
 recl = React.createClass;
 
 rece = React.createElement;
 
-ref = React.DOM, div = ref.div, h1 = ref.h1, label = ref.label;
+ref = React.DOM, div = ref.div, h1 = ref.h1, label = ref.label, button = ref.button;
 
 module.exports = recl({
   onClick: function(e) {
@@ -420,7 +422,7 @@ module.exports = recl({
         }, label({}, title), (function() {
           switch (filter) {
             case 'done':
-              return div({
+              return button({
                 className: 'input-bool ib ' + this.props.filters[key],
                 onClick: this.onClick
               }, "");
@@ -440,13 +442,13 @@ module.exports = recl({
 
 
 },{}],4:[function(require,module,exports){
-var Field, WorkActions, div, rece, recl, ref, textarea;
+var Field, WorkActions, button, div, rece, recl, ref, textarea;
 
 recl = React.createClass;
 
 rece = React.createElement;
 
-ref = React.DOM, div = ref.div, textarea = ref.textarea;
+ref = React.DOM, div = ref.div, textarea = ref.textarea, button = ref.button;
 
 WorkActions = require('../actions/WorkActions.coffee');
 
@@ -491,10 +493,11 @@ module.exports = recl({
     }
   },
   onFocus: function(e) {
-    return this.props._focus(e, this);
+    this.props._focus(e, this);
+    return true;
   },
   _markDone: function(e) {
-    return WorkActions.setItem(this.props.item, 'done', this.props.item.done == null);
+    return WorkActions.setItem(this.props.item, 'done', !(this.props.item.done === true));
   },
   _changeStatus: function(e) {
     var own;
@@ -611,8 +614,8 @@ module.exports = recl({
       className: 'action a'
     }, action)), this.renderField('audience', {}, this.formatAudience)), div({
       className: 'sort ib top'
-    }, this.props.item.sort), div({
-      className: 'done ib done-' + (this.props.item.done != null),
+    }, this.props.item.sort), button({
+      className: 'done ib done-' + (this.props.item.done === true),
       onClick: this._markDone
     }, ''), this.renderTopField('title', {
       onFocus: this.onFocus,
@@ -669,7 +672,7 @@ module.exports = recl({
     }, this.formatDate(new Date)), div({
       contentEditable: true,
       className: 'input'
-    }), div({
+    }), button({
       className: 'submit',
       onClick: this._submitComment
     }, 'Post'))) : void 0);
@@ -1657,9 +1660,12 @@ WorkStore = assign({}, EventEmitter.prototype, {
     return _tasks[id].archived = true;
   },
   updateItem: function(arg) {
-    var id, version;
-    id = arg.id, version = arg.version;
-    return _tasks[id].version = version;
+    var id, key, val, version;
+    id = arg.id, version = arg.version, key = arg.key, val = arg.val;
+    _tasks[id].version = version;
+    if (key === 'done') {
+      return _tasks[id].done = val;
+    }
   }
 });
 

pub/work/src/js/stores/WorkStore.coffee

@@ -114,7 +114,9 @@ WorkStore = assign {},EventEmitter.prototype,{
     _list = list
   setAudience: ({id,to})-> _tasks[id].audience = to
   archiveItem: ({id})-> _tasks[id].archived = true
-  updateItem: ({id,version})-> _tasks[id].version = version
+  updateItem: ({id,version,key,val})-> 
+    _tasks[id].version = version
+    _tasks[id].done = val if key is 'done'
 
 }