From b91c002e4025a0c31b3287b8dce1d6ac971b6f78 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Wed, 19 Aug 2015 16:23:48 -0700 Subject: [PATCH] cleaning, comments --- pub/work/src/css/main.css | 56 ++++-- pub/work/src/css/main.styl | 186 ++++++++++-------- .../src/js/components/ItemComponent.coffee | 30 ++- pub/work/src/js/main.js | 58 ++++-- pub/work/src/js/stores/WorkStore.coffee | 8 +- 5 files changed, 223 insertions(+), 115 deletions(-) diff --git a/pub/work/src/css/main.css b/pub/work/src/css/main.css index e15ede25e..84f9a0e79 100644 --- a/pub/work/src/css/main.css +++ b/pub/work/src/css/main.css @@ -110,11 +110,8 @@ h1 { background-color: #fff; transition: max-height 200ms linear; } -.item .comments { - height: 0; -} .item.expand { - max-height: 16rem; + max-height: 24rem; transition: max-height 200ms linear; } .item .expand { @@ -139,17 +136,22 @@ h1 { font-family: 'scp'; } .item .audience, -.item .date { +.item .date, +.item .ship { font-size: 0.7rem; } .item .audience, .item .sort { color: #ccc; } -.item .audience { +.item .audience, +.item .date, +.item .ship { text-transform: uppercase; height: 1rem; letter-spacing: 0.07rem; +} +.item .audience { margin-left: 2.2rem; } .item .done { @@ -179,13 +181,9 @@ h1 { margin: 0.5rem 0 0.5rem 2.3rem; } .item .description textarea { - min-width: 20rem; + min-width: 27rem; min-height: 6rem; } -.item .hr { - height: 0.2rem; - width: 6rem; -} .item .comp { width: 3rem; opacity: 0; @@ -199,6 +197,30 @@ h1 { .item:hover .comp { opacity: 1; } +.item .submit { + font-size: 0.7rem; + text-transform: uppercase; + display: inline-block; + background-color: #b9b9b9; + letter-spacing: 0.07rem; + color: #fff; + padding: 0 0.3rem; + margin-top: 0.5rem; +} +.comment { + margin-bottom: 1rem; +} +.comment .date, +.comment .ship { + margin-right: 1rem; +} +.comment .body { + margin-top: 1rem; +} +.comment.new .input { + max-width: 27rem; + margin-top: 1rem; +} /* global */ .top { vertical-align: top; @@ -216,7 +238,6 @@ h1 { } .input { outline: none; - display: inline-block; padding: 0 0.3rem; background-color: #f9f9f9; border: 0; @@ -233,3 +254,14 @@ h1 { border-bottom: 6px solid transparent; margin-top: 0.4rem; } +.hr1 { + height: 0.2rem; + width: 6rem; + background-color: #ccc; + margin-left: 2.2rem; +} +.hr2 { + height: 0.1rem; + width: 3rem; + background-color: #ccc; +} diff --git a/pub/work/src/css/main.styl b/pub/work/src/css/main.styl index 91d8564a5..46a774121 100644 --- a/pub/work/src/css/main.styl +++ b/pub/work/src/css/main.styl @@ -32,96 +32,116 @@ h1 background-color #fff transition max-height 200ms linear -.item .comments - height 0 + &.expand + max-height 24rem + transition max-height 200ms linear -.item.expand - max-height 16rem - transition max-height 200ms linear + .expand + margin-left 2rem + cursor pointer + transform-origin 3px 12px + transition transform 200ms linear -.item .expand - margin-left 2rem - cursor pointer - transform-origin 3px 12px - transition transform 200ms linear + &.expand .expand + transform rotate(90deg) + transition transform 200ms linear -.item.expand .expand - transform rotate(90deg) - transition transform 200ms linear + .sort + .title + .date + .tags + .comment + line-height 2rem -.item .sort -.item .title -.item .date -.item .tags -.item .comment - line-height 2rem + .sort + .date + font-family 'scp' -.item .sort -.item .date - font-family 'scp' + .audience + .date + .ship + font-size .7rem -.item .audience -.item .date - font-size .7rem + .audience + .sort + color #ccc -.item .audience -.item .sort - color #ccc - -.item .audience - text-transform uppercase - height 1rem - letter-spacing .07rem - margin-left 2.2rem - -.item .done - width .7rem - height .7rem - margin-top .5rem - border .2rem solid #ccc - -.item .sort - font-size .6rem - width 2rem - text-align center - -.item .title - min-width 16rem - margin-left .5rem - -.item .date - min-width 6rem - -.item .tags - min-width 6rem - -.item .description -.item .discussion - line-height 2rem - margin .5rem 0 .5rem 2.3rem + .audience + .date + .ship + text-transform uppercase + height 1rem + letter-spacing .07rem -.item .description textarea - min-width 20rem - min-height 6rem + .audience + margin-left 2.2rem -.item .hr - height .2rem - width 6rem + .done + width .7rem + height .7rem + margin-top .5rem + border .2rem solid #ccc + + .sort + font-size .6rem + width 2rem + text-align center + + .title + min-width 16rem + margin-left .5rem + + .date + min-width 6rem + + .tags + min-width 6rem + + .description + .discussion + line-height 2rem + margin .5rem 0 .5rem 2.3rem + .description textarea + min-width 27rem + min-height 6rem -.item .comp - width 3rem - opacity 0 + .comp + width 3rem + opacity 0 + .a + display block + font-size .7rem + font-weight 500 + line-height .9rem -.item .comp .a - display block - font-size .7rem - font-weight 500 - line-height .9rem + &:hover .comp + opacity 1 + + .submit + font-size .7rem + text-transform uppercase + display inline-block + background-color #b9b9b9 + letter-spacing .07rem + color #fff + padding 0 .3rem + margin-top .5rem -.item:hover .comp - opacity 1 +.comment + margin-bottom 1rem + + .date + .ship + margin-right 1rem + .body + margin-top 1rem + + &.new .input + max-width 27rem + margin-top 1rem + /* global */ .top @@ -140,7 +160,6 @@ h1 .input outline none - display inline-block padding 0 .3rem background-color #f9f9f9 border 0 @@ -155,4 +174,15 @@ h1 border-top 6px solid transparent border-right 6px solid transparent border-bottom 6px solid transparent - margin-top .4rem \ No newline at end of file + margin-top .4rem + +.hr1 + height .2rem + width 6rem + background-color #ccc + margin-left 2.2rem + +.hr2 + height .1rem + width 3rem + background-color #ccc \ No newline at end of file diff --git a/pub/work/src/js/components/ItemComponent.coffee b/pub/work/src/js/components/ItemComponent.coffee index 5db00f03a..39969cbe3 100644 --- a/pub/work/src/js/components/ItemComponent.coffee +++ b/pub/work/src/js/components/ItemComponent.coffee @@ -58,19 +58,19 @@ module.exports = recl contentEditable:true onFocus:@_focus onKeyDown:@_keyDown - className:'input' + className:'input ib' },@props.item.title) ]) (div {className:'date ib top'}, [ (div { contentEditable:true - className:'input' + className:'input ib' },@formatDate(@props.item['date-created'])) ]) (div {className:'tags ib top'},[ (div { contentEditable:true - className:'input' + className:'input ib' },@props.item.tags.join(" ")) ]) (div { @@ -82,17 +82,27 @@ module.exports = recl ]) (div {className:"description"},[ (textarea { - className:'input' + className:'input ib' },@props.item.description) ]) (div {className:"hr"},"") (div {className:"discussion"},[ - (div {className:"comments"}, @props.item.discussion.map (slug) -> - (div {className:'slug'}, slug) + (div {className:"comments"}, @props.item.discussion.map (slug) => + (div {className:'comment'}, [ + (div {className:'hr2'},"") + (div {className:'ship ib'}, slug.ship) + (div {className:'date ib'}, @formatDate(slug.date)) + (div {className:'body'}, slug.body) + ]) ), - (div { - contentEditable:true - className:'input comment' - },"") + (div {className:'new comment'},[ + (div {className:'hr2'},"") + (div {className:'ship ib'}, "TALSUR-TODRES") + (div {className:'date ib'}, @formatDate(new Date())) + (div { + contentEditable:true, + className:'input'},"") + (div {className:'submit'},'Post') + ]) ]) ]) \ No newline at end of file diff --git a/pub/work/src/js/main.js b/pub/work/src/js/main.js index 6a5cf4ba3..b7770ebf6 100644 --- a/pub/work/src/js/main.js +++ b/pub/work/src/js/main.js @@ -117,21 +117,21 @@ module.exports = recl({ contentEditable: true, onFocus: this._focus, onKeyDown: this._keyDown, - className: 'input' + className: 'input ib' }, this.props.item.title) ]), div({ className: 'date ib top' }, [ div({ contentEditable: true, - className: 'input' + className: 'input ib' }, this.formatDate(this.props.item['date-created'])) ]), div({ className: 'tags ib top' }, [ div({ contentEditable: true, - className: 'input' + className: 'input ib' }, this.props.item.tags.join(" ")) ]), div({ className: 'expand ib', @@ -150,7 +150,7 @@ module.exports = recl({ className: "description" }, [ textarea({ - className: 'input' + className: 'input ib' }, this.props.item.description) ]), div({ className: "hr" @@ -159,14 +159,38 @@ module.exports = recl({ }, [ div({ className: "comments" - }, this.props.item.discussion.map(function(slug) { - return div({ - className: 'slug' - }, slug); - })), div({ - contentEditable: true, - className: 'input comment' - }, "") + }, this.props.item.discussion.map((function(_this) { + return function(slug) { + return div({ + className: 'comment' + }, [ + div({ + className: 'hr2' + }, ""), div({ + className: 'ship ib' + }, slug.ship), div({ + className: 'date ib' + }, _this.formatDate(slug.date)), div({ + className: 'body' + }, slug.body) + ]); + }; + })(this))), div({ + className: 'new comment' + }, [ + div({ + className: 'hr2' + }, ""), div({ + className: 'ship ib' + }, "TALSUR-TODRES"), div({ + className: 'date ib' + }, this.formatDate(new Date())), div({ + contentEditable: true, + className: 'input' + }, ""), div({ + className: 'submit' + }, 'Post') + ]) ]) ]); } @@ -408,7 +432,7 @@ $(function() { },{"./components/WorkComponent.coffee":4}],7:[function(require,module,exports){ /** - * Copyright (c) 2014, Facebook, Inc. + * Copyright (c) 2014-2015, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the @@ -786,7 +810,13 @@ _upcoming = [ tags: ['food', 'office'], title: 'get groceries', description: 'first go out the door, \n then walk down the block.', - discussion: [] + discussion: [ + { + date: new Date('2015-8-18'), + ship: "wictuc-folrex", + body: "Seems like a great idea." + } + ] }, { id: 1, sort: 1, diff --git a/pub/work/src/js/stores/WorkStore.coffee b/pub/work/src/js/stores/WorkStore.coffee index d6da5bf5f..7b98c5ec5 100644 --- a/pub/work/src/js/stores/WorkStore.coffee +++ b/pub/work/src/js/stores/WorkStore.coffee @@ -14,7 +14,13 @@ _upcoming = [ tags:['food','office'] title:'get groceries' description:'first go out the door, \n then walk down the block.' - discussion:[] + discussion:[ + { + date:new Date('2015-8-18') + ship:"wictuc-folrex" + body:"Seems like a great idea." + } + ] , id:1 sort:1