diff --git a/ren/tree/body.hoon b/ren/tree/body.hoon index 2743cfe11..3161bbc7e 100644 --- a/ren/tree/body.hoon +++ b/ren/tree/body.hoon @@ -5,10 +5,5 @@ /= dat /% /tree-json/ :: default include ^- marl ;= ;script(type "text/javascript"): window.tree = {(pojo (joba %data dat))} - ;div.container - ;div.row#main - ;div#head; - ;div#body; - == - == + ;div#tree; == diff --git a/web/lib/css/bootstrap.css b/web/lib/css/bootstrap.css index 90a42ec43..300875360 100644 --- a/web/lib/css/bootstrap.css +++ b/web/lib/css/bootstrap.css @@ -2089,21 +2089,21 @@ input[type="checkbox"].disabled { .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label { - color: #02d124; + color: #64de79; } .has-success .form-control { - border-color: #02d124; + border-color: #64de79; } .has-success .input-group-addon { - color: #02d124; - background-color: #a1feb0; - border-color: #02d124; + color: #64de79; + background-color: white; + border-color: #64de79; } .has-success .form-control-feedback { - color: #02d124; + color: #64de79; } .has-success .form-control-success { @@ -2406,28 +2406,28 @@ fieldset[disabled] a.btn { .btn-success { color: #fff; - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-success:hover { color: #fff; - background-color: #029e1b; - border-color: #01941a; + background-color: #3ad555; + border-color: #32d34d; } .btn-success:focus, .btn-success.focus { color: #fff; - background-color: #029e1b; - border-color: #01941a; + background-color: #3ad555; + border-color: #32d34d; } .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { color: #fff; - background-color: #029e1b; + background-color: #3ad555; background-image: none; - border-color: #01941a; + border-color: #32d34d; } .btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus, @@ -2435,18 +2435,18 @@ fieldset[disabled] a.btn { .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle.focus { color: #fff; - background-color: #017b15; - border-color: #01530e; + background-color: #29c244; + border-color: #22a038; } .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success:disabled:focus, .btn-success:disabled.focus { - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-success.disabled:hover, .btn-success:disabled:hover { - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-warning { @@ -2624,31 +2624,31 @@ fieldset[disabled] a.btn { } .btn-success-outline { - color: #02d124; + color: #64de79; background-color: transparent; background-image: none; - border-color: #02d124; + border-color: #64de79; } .btn-success-outline:focus, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline.active, .open > .btn-success-outline.dropdown-toggle { color: #fff; - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-success-outline:hover { color: #fff; - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .btn-success-outline.disabled:focus, .btn-success-outline.disabled.focus, .btn-success-outline:disabled:focus, .btn-success-outline:disabled.focus { - border-color: #3cfd5c; + border-color: #b8f0c2; } .btn-success-outline.disabled:hover, .btn-success-outline:disabled:hover { - border-color: #3cfd5c; + border-color: #b8f0c2; } .btn-warning-outline { @@ -3741,8 +3741,8 @@ input[type="button"].btn-block { } .card-success { - background-color: #02d124; - border-color: #02d124; + background-color: #64de79; + border-color: #64de79; } .card-info { @@ -3777,7 +3777,7 @@ input[type="button"].btn-block { .card-success-outline { background-color: transparent; - border-color: #02d124; + border-color: #64de79; } .card-warning-outline { @@ -4066,11 +4066,11 @@ a.label:focus, a.label:hover { } .label-success { - background-color: #02d124; + background-color: #64de79; } .label-success[href]:focus, .label-success[href]:hover { - background-color: #029e1b; + background-color: #3ad555; } .label-info { @@ -4334,16 +4334,16 @@ a.label:focus, a.label:hover { } .progress-success[value]::-webkit-progress-value { - background-color: #02d124; + background-color: #64de79; } .progress-success[value]::-moz-progress-bar { - background-color: #02d124; + background-color: #64de79; } @media screen and (min-width: 0\0) { .progress-success .progress-bar { - background-color: #02d124; + background-color: #64de79; } } @@ -5566,11 +5566,11 @@ a.text-primary:focus, a.text-primary:hover { } .text-success { - color: #02d124 !important; + color: #64de79 !important; } a.text-success:focus, a.text-success:hover { - color: #029e1b; + color: #3ad555; } .text-info { @@ -5617,11 +5617,11 @@ a.bg-primary:focus, a.bg-primary:hover { .bg-success { color: #fff !important; - background-color: #02d124 !important; + background-color: #64de79 !important; } a.bg-success:focus, a.bg-success:hover { - background-color: #029e1b; + background-color: #3ad555; } .bg-info { @@ -6020,12 +6020,14 @@ h1, h2, h3 { padding-top: 2rem; + line-height: 4rem; } h4, h5, h6 { padding-top: 1rem; + line-height: 2rem; } h3, h4 { @@ -6052,6 +6054,25 @@ h1:first-of-type { margin-bottom: 0; } +h1.first, +h2.first, +h3.first { + padding-top: 0; + padding-bottom: 2rem; +} + +.gray { + color: #55595c; +} + +.gray-light { + color: #b1b7bd; +} + +.gray-lighter { + color: #eceeef; +} + @media (max-width: 767px) { h1 { font-size: 2rem; @@ -6086,7 +6107,7 @@ textarea:focus { border-color: #000; } -.container { +body { padding-top: 3rem; padding-bottom: 9rem; } @@ -6128,7 +6149,7 @@ textarea:focus { } .green { - color: #02d124; + color: #64de79; } .yellow { @@ -6150,7 +6171,7 @@ textarea:focus { } .inverse.green { - background-color: #02d124; + background-color: #64de79; } .inverse.yellow { diff --git a/web/talk/main.css b/web/talk/main.css index 3dc1e517c..842664f88 100644 --- a/web/talk/main.css +++ b/web/talk/main.css @@ -6,22 +6,20 @@ div.input.valid-false { color: #FF0808; border-color: #FF0808; } -div.meta { - display: inline-block; } - -div.grams { +.grams { list-style-type: none; padding: 0; margin-top: -1.875rem; } + .grams .meta { + display: inline-block; } -div.meta label { - background-color: #B1B7BD; +.grams .meta label { margin-right: 0.9375rem; height: 0.9375rem; width: 0.9375rem; text-align: center; } -div.meta label:before { +.grams .meta label:before { content: attr(data-glyph); color: #fff; font-family: 'scp'; @@ -30,24 +28,24 @@ div.meta label:before { line-height: 1rem; vertical-align: middle; } -div.meta label, -div.meta h2, -div.meta h3 { +.grams .meta label, +.grams .meta h2, +.grams .meta h3 { display: inline-block; } -div.meta h2, -div.meta h3 { +.grams .meta h2, +.grams .meta h3 { font-family: 'scp'; font-size: .8rem; font-weight: 400; margin-top: 0; padding-top: 0; } -div.meta h3 { +.grams .meta h3 { margin-left: 2rem; line-height: 1rem; } -div.meta .time { +.grams .meta .time { padding-right: 2rem; } div.gram.first:first-of-type { @@ -71,8 +69,11 @@ div.gram.same:hover div.meta { .exp { font-family: 'scp'; - font-size: .9rem; - max-height: 2rem; } + font-size: .9rem; } + .exp .speech { + white-space: nowrap; + max-width: 100%; + overflow-x: scroll; } .exp .speech > span { color: #fff; background-color: #000; @@ -89,6 +90,19 @@ div.gram.same:hover div.meta { background-color: #000; color: #fff; } +.comment .speech a.btn { + background-color: transparent; + color: #B1B7BD; + font-size: .9rem; + border: 0; + border-bottom: 3px solid #b1b7bd; + text-transform: none; + text-decoration: none; + padding: 0; + line-height: 1rem; + margin: 1rem 0 2rem 0; + letter-spacing: 0; } + .gram pre { background-color: transparent; } diff --git a/web/talk/main.js b/web/talk/main.js index 6692300c0..04b935e05 100644 --- a/web/talk/main.js +++ b/web/talk/main.js @@ -590,11 +590,13 @@ module.exports = recl({ if (this.state.station && this.state.listening.indexOf(this.state.station) === -1) { MessageActions.listenStation(this.state.station); } - $(window).on('scroll', this.checkMore); + if (this.props.readOnly == null) { + $(window).on('scroll', this.checkMore); + window.util.scrollToBottom(); + } this.focused = true; $(window).on('blur', this._blur); - $(window).on('focus', this._focus); - return window.util.scrollToBottom(); + return $(window).on('focus', this._focus); }, componentWillUpdate: function(props, state) { var $window, i, j, key, lastSaid, len, len1, message, nowSaid, old, ref, ref1, results, sameAs, scrollTop; @@ -623,7 +625,7 @@ module.exports = recl({ }, componentDidUpdate: function(_props, _state) { var _messages, d, t; - if (this.setOffset) { + if (this.setOffset && (this.props.readOnly == null)) { $(window).scrollTop(this.setOffset); this.setOffset = null; } @@ -657,7 +659,7 @@ module.exports = recl({ return StationActions.setAudience(audi); }, render: function() { - var _messages, lastIndex, lastSaid, messageHeights, messages, ref, station; + var _messages, body, lastIndex, lastSaid, messageHeights, messages, ref, station; station = this.state.station; messages = this.sortedMessages(this.state.messages); this.last = messages[messages.length - 1]; @@ -696,15 +698,20 @@ module.exports = recl({ })); }; })(this)); + if (this.props.readOnly == null) { + body = React.createElement(Infinite, { + useWindowAsScrollContainer: true, + containerHeight: window.innerHeight, + elementHeight: messageHeights, + key: "messages-infinite" + }, _messages); + } else { + body = _messages; + } return div({ className: "grams", key: "messages" - }, React.createElement(Infinite, { - useWindowAsScrollContainer: true, - containerHeight: window.innerHeight, - elementHeight: messageHeights, - key: "messages-infinite" - }, _messages)); + }, body); } }); @@ -1280,6 +1287,9 @@ TreeActions.registerComponent("talk", React.createClass({ var station; require('./utils/util.coffee'); require('./utils/move.coffee'); + if (!this.props.readonly) { + $(window).on('scroll', window.util.checkScroll); + } station = this.getStation(); StationActions.listen(); StationActions.listenStation(station); @@ -1959,8 +1969,6 @@ $(window).on('scroll', function(e) { return so.ls = so.cs; }); -$(window).on('scroll', window.util.checkScroll); - },{}],16:[function(require,module,exports){ if (!window.util) { diff --git a/web/tree/main.css b/web/tree/main.css index dc9beb913..4bb0568f4 100644 --- a/web/tree/main.css +++ b/web/tree/main.css @@ -14,9 +14,62 @@ img.logo { img.logo.first { margin-bottom: 2rem; } +div.logo { + width: 3rem; + height: 3rem; + background-color: #fff; + display: inline-block; + margin-right: 1rem; + border-radius: 50%; + vertical-align: middle; + margin-top: -.8rem; + background-color: #000; } + +div.logo:before { + content: "~"; + color: #B1B7BD; + font-size: 2.6rem; + vertical-align: middle; + line-height: 3rem; + margin-top: .2rem; + text-align: center; + width: 2rem; + display: inline-block; } + +div.logo.inverse:before { + color: #fff; } + +.lead .logo.inverse { + margin-top: -1.4rem; } + .short { width: 75%; } +.meta-data { + padding: 1rem; + background-color: #f7f7f9; + font-family: 'scp'; + max-width: 12rem; + margin-bottom: 2rem; } + .meta-data h2, + .meta-data h3 { + padding: 0; + margin: 0; + font-size: 1rem; + line-height: 2rem; } + +.link-next { + margin-top: 4rem; } + .link-next a { + padding: .6rem; + border: 2px solid; + text-decoration: none; + font-weight: 500; + margin-top: 4rem; } + .link-next a:hover { + background-color: #000; + color: #fff; } + .loading:before { font-family: 'scp'; background-color: #000; @@ -27,6 +80,7 @@ img.logo.first { height: 1.6rem; text-align: center; font-size: .8rem; + line-height: 1.7rem; display: block; font-weight: 600; z-index: 3; } @@ -66,7 +120,8 @@ img.logo.first { #head { top: 0; z-index: 10; - width: 100%; } + width: 100%; + position: absolute; } #head.m-down, #head.m-up { position: absolute; } @@ -93,22 +148,54 @@ img.logo.first { .ctrl ul.nav li { width: 100%; overflow: hidden; - white-space: nowrap; } + white-space: nowrap; + margin-bottom: .6rem; } .ctrl ul.nav:hover { overflow: visible; } - .ctrl a.nav-link:hover { - text-decoration: underline; } .ctrl a.nav-link { - letter-spacing: 1px; } + letter-spacing: 1px; + text-decoration: none; + border-bottom: 2px solid; + line-height: 1rem; } .ctrl .selected a.nav-link { font-weight: 500; } +.ctrl.navbar { + position: relative; + margin-bottom: 3rem; + padding: 0; + background-color: transparent; } + .ctrl.navbar .icon, + .ctrl.navbar ul.nav, + .ctrl.navbar li { + display: inline-block; + padding: 0; } + .ctrl.navbar ul.nav { + margin-top: 0; + overflow: visible; } + .ctrl.navbar ul.nav li { + width: auto; + display: inline-block; + min-width: 16.66667%; } + .ctrl.navbar ul.nav .right { + float: right; } + .ctrl.navbar ul.nav .btn { + margin: 0; + padding: 0; + border: 0; + text-transform: none; } + .ctrl.open, .ctrl:hover { max-width: 33.33333%; min-width: 16.66667%; width: auto; } +.ctrl.navbar.open, +.ctrl.navbar:hover { + max-width: none; + min-width: none; } + @media (max-width: 991px) { ul.nav { line-height: 1.3rem; } @@ -137,7 +224,10 @@ img.logo.first { .ctrl.open { max-height: 12rem; } a.nav-link { - font-size: 1rem; } + font-size: 1rem; + line-height: 1rem; + text-decoration: none; + border-bottom: 2px solid; } .ctrl.open ul.nav { max-height: 9rem; overflow-y: scroll; } } @@ -249,35 +339,43 @@ img.logo.first { margin-top: 0; margin-bottom: 0; } } -[data-path^='/docs'] .selected .nav-link { - color: #02D124; } +[data-path^='/docs'] .selected .nav-link, +[data-path^='/work'] .selected .nav-link { + color: #55595c; } -[data-path^='/docs'] .nav-link { +[data-path^='/docs'] .nav-link, +[data-path^='/work'] .nav-link { font-weight: 500; } -[data-path^='/docs'] .home { - background-color: #0500F0; - border-color: #0500F0; } +[data-path^='/docs'] .home, +[data-path^='/work'] .home { + background-color: #55595c; + border-color: #55595c; } -[data-path^='/docs'] .home:hover { - background-color: #0500F0; - border-color: #0500F0; +[data-path^='/docs'] .home:hover, +[data-path^='/work'] .home:hover { + background-color: #B1B7BD; + border-color: #B1B7BD; opacity: .6; } -[data-path^='/docs'] .home:before { +[data-path^='/docs'] .home:before, +[data-path^='/work'] .home:before { content: "~"; color: #fff; line-height: .8rem; - font-size: 1.4rem; } + font-size: 1.4rem; + padding-left: 1px; } @media (max-width: 991px) { - [data-path^='/docs'] .home:before { + [data-path^='/docs'] .home:before, + [data-path^='/work'] .home:before { line-height: 0.7rem; font-size: 1rem; margin-left: .06rem; } } @media (max-width: 767px) { - [data-path^='/docs'] .home:before { + [data-path^='/docs'] .home:before, + [data-path^='/work'] .home:before { line-height: .7rem; margin-left: .05rem; font-size: 1rem; } } @@ -322,35 +420,183 @@ img.logo.first { line-height: 1rem; margin-bottom: 1rem; } } +.urbit.navbar.ctrl .icon .home { + border-color: #B1B7BD; + background-color: #B1B7BD; + width: 3rem; + height: 3rem; + margin: 0 4rem 0 0; } + +.urbit.navbar.ctrl .icon .home:before { + content: "~"; + color: #fff; + font-size: 2.6rem; + line-height: 2.6rem; + text-align: center; + width: 2.4rem; + display: inline-block; } + +.urbit.navbar.ctrl ul.nav li { + height: 3rem; + vertical-align: middle; } + +.urbit.navbar.ctrl ul.nav li a { + text-decoration: none; + color: #B1B7BD; + font-weight: 500; + font-size: 1rem; + line-height: 3rem; } + +.urbit.navbar.ctrl ul.nav .btn { + border: 3px solid #000; + margin-top: -3px; + height: 3rem; + padding: 0rem; } + .urbit.navbar.ctrl ul.nav .btn a { + font-size: 1rem; + color: #000; + letter-spacing: 0; } + +.urbit.navbar.ctrl ul.nav .btn.selected, +.urbit.navbar.ctrl ul.nav .btn:hover { + background-color: #000; } + .urbit.navbar.ctrl ul.nav .btn.selected a, + .urbit.navbar.ctrl ul.nav .btn:hover a { + color: #fff; } + +.urbit.navbar.ctrl ul.nav li a:hover, +.urbit.navbar.ctrl ul.nav li.selected a { + color: #000; } + +.urbit.navbar.ctrl .subnav ul.nav { + height: 1.5rem; } + .urbit.navbar.ctrl .subnav ul.nav li { + height: 1.5rem; } + .urbit.navbar.ctrl .subnav ul.nav li a { + line-height: 1.5rem; } + .urbit.navbar.ctrl .subnav ul.nav .btn { + position: relative; + height: 3rem; } + .urbit.navbar.ctrl .subnav ul.nav .btn a { + line-height: 3rem; } + +.urbit.home.navbar.ctrl .icon .home { + opacity: 0; + border-color: #fff; + background-color: #fff; } + +.urbit.home.navbar.ctrl .icon .home:before { + color: #B1B7BD; } + +.urbit.home.navbar.ctrl ul.nav li a { + color: #f7f7f9; } + +@media (max-width: 767px) { + .urbit.navbar.ctrl .icon { + margin-top: .5rem; + margin-bottom: .5rem; } + .urbit.navbar.ctrl .icon .home { + width: 2rem; + height: 2rem; + margin: 0; } + .urbit.navbar.ctrl .icon .home:before { + font-size: 1.6rem; + line-height: 1.8rem; + width: 1.6rem; } + .urbit.navbar.ctrl .navbar-toggler { + margin-top: .5rem; + margin-left: 1rem; } + .urbit.navbar.ctrl ul.nav, + .urbit.navbar.ctrl .subnav ul.nav { + overflow: visible; + height: auto; + margin-left: 3rem; + float: left; } + .urbit.navbar.ctrl ul.nav li, + .urbit.navbar.ctrl .subnav ul.nav li { + display: block; + height: 1.5rem; } + .urbit.navbar.ctrl ul.nav li a, + .urbit.navbar.ctrl .subnav ul.nav li a { + line-height: 1.5rem; } + .urbit.navbar.ctrl ul.nav li.btn, + .urbit.navbar.ctrl .subnav ul.nav li.btn { + height: 1.5rem; + border: 0; } + .urbit.navbar.ctrl ul.nav li.btn a, + .urbit.navbar.ctrl .subnav ul.nav li.btn a { + color: #64DE79; + line-height: 1.5rem; } } + .lead h1:first-of-type { padding-bottom: 0; } -.body[data-path^='/docs'] h1 { - color: #0500F0; } +.flush { + padding-top: 0; } -.body[data-path^='/docs'] h1 code { +.h-arrow { + width: 100%; + height: 9rem; + margin-bottom: 3rem; } + .h-arrow h1, + .h-arrow img { + float: left; } + .h-arrow img { + height: 6rem; + margin: 1rem 0 0 1rem; } + .h-arrow h1 { + color: #000; + display: inline-block; + line-height: 4rem; } + .h-arrow h1 code { + background-color: transparent; + color: #000; } + +.footer { + margin-top: 6rem; + font-weight: 500; + color: #B1B7BD; } + .footer a { + color: #55595c; + text-decoration: none; + border-bottom: 2px solid #55595c; + margin-left: .6rem; } + +.body[data-path^='/docs'] h1, +.body[data-path^='/work'] h1 { + color: #000; } + +.body[data-path^='/docs'] h1 code, +.body[data-path^='/work'] h1 code { background-color: transparent; - color: #0500F0; + color: #000; padding: 0; } -.body[data-path^='/docs'] .book h2 { +.body[data-path^='/docs'] .book h2, +.body[data-path^='/work'] .book h2 { color: #B1B7BD; } -.body[data-path^='/docs'] .book h2 code { - color: #0500F0; +.body[data-path^='/docs'] .book h2 code, +.body[data-path^='/work'] .book h2 code { + color: #000; background-color: transparent; } -.body[data-path^='/docs'] .book h2 a { - color: #0500F0; } +.body[data-path^='/docs'] .book h2 a, +.body[data-path^='/work'] .book h2 a { + color: #000; } -.body[data-path^='/docs'] .book hr { +.body[data-path^='/docs'] .book hr, +.body[data-path^='/work'] .book hr { margin-bottom: 3rem; } +.body[data-path^='/work'] h2 { + color: #000; } + .body[data-path^='/docs/system/hoon/runes/'] h1 { color: #B1B7BD; } .body[data-path^='/docs/system/hoon/runes/basic'] h1 { - color: #0500F0; } + color: #000; } .body[data-path^='/docs/system/hoon/library/'] h3 { font-size: 1.5rem; } @@ -362,6 +608,176 @@ img.logo.first { padding-top: 0; margin-bottom: 0; } +.body .urbit h1 { + color: #000; + line-height: 4rem; } + +.body .urbit a.green:hover { + color: #64DE79; } + +.body .urbit .container.stack { + margin-bottom: 3rem; } + +.body .urbit .container.stack.six { + margin-top: 12rem; + margin-bottom: 6rem; } + +.body .urbit .btn.black { + text-transform: none; + text-decoration: none; + border: 3px solid #000; + letter-spacing: 0; + margin-right: 1rem; } + +.body .urbit button.submit:hover, +.body .urbit .btn.black:hover { + background-color: #000; + color: #fff; } + +.body .urbit .front { + padding-bottom: 4rem; } + .body .urbit .front h1 { + padding-top: 0; } + .body .urbit .front h1, + .body .urbit .front h1 a { + font-size: 4rem; + line-height: 6rem; } + +.body .urbit .image-fs { + height: 44rem; + margin-bottom: 3rem; } + .body .urbit .image-fs .text-container, + .body .urbit .image-fs .image-container { + position: absolute; } + .body .urbit .image-fs .text-container { + display: table; + height: 44rem; + width: 100%; + z-index: 1; } + .body .urbit .image-fs .text-container .text { + display: table-cell; + vertical-align: middle; } + .body .urbit .image-fs .text-container .rect { + width: 60%; + margin-left: auto; + margin-right: auto; } + .body .urbit .image-fs .text-container .rect h1 { + padding-bottom: 1rem; + text-align: left; } + .body .urbit .image-fs .text-container .rect.no-header { + font-weight: 500; + color: #fff; + font-size: 1.4rem; } + .body .urbit .image-fs .text-container .rect.no-header p.email { + font-size: 1rem; } + .body .urbit .image-fs .text-container .rect.no-header button.submit { + background-color: transparent; + border-color: #fff; } + .body .urbit .image-fs .image-container { + z-index: 0; + height: 44rem; + width: 100%; + overflow: hidden; } + .body .urbit .image-fs .image-container img { + position: relative; + left: 50%; + margin-left: -50%; + top: 50%; + margin-top: -50%; + min-height: 44rem; + min-width: 100%; } + .body .urbit .image-fs h1 { + text-align: center; + color: #fff; } + +.body .urbit .image-fs.first { + margin-top: -9rem; } + +.body .urbit .slide { + margin-bottom: 12rem; + position: relative; } + .body .urbit .slide h1 { + padding-bottom: 1rem; } + .body .urbit .slide .pair { + display: table; } + .body .urbit .slide .pair .text, + .body .urbit .slide .pair .image { + display: table-cell; + vertical-align: middle; } + .body .urbit .slide .pair .image.right { + padding-left: 5%; } + .body .urbit .slide .pair .image.left { + padding-right: 5%; } + .body .urbit .slide .pair .text { + width: 75%; } + .body .urbit .slide .pair .image { + width: 20%; } + .body .urbit .slide .pair p:last-child { + margin-bottom: 0; } + +.body .urbit .end { + padding: 1rem; + background-color: #64DE79; + color: white; + text-decoration: none; + font-size: 2rem; + font-weight: 500; } + +.body .urbit input.email, +.body .urbit button.submit { + line-height: 1rem; + padding: .6rem; + border: 0; } + +.body .urbit input.email { + font-weight: 500; + background-color: #B1B7BD; + color: #fff; + margin-right: 1rem; + border: 3px solid #B1B7BD; } + +.body .urbit input.email::-moz-placeholder { + color: #D2D2D2; } + +.body .urbit input.email::-webkit-input-placeholder { + color: #D2D2D2; } + +.body .urbit button.submit { + text-transform: none; + text-decoration: none; + border: 3px solid #000; + background-color: #fff; + font-weight: 500; + letter-spacing: 0; } + +.body .urbit .last a { + display: block; + font-weight: 500; + color: #B1B7BD; } + +.body .urbit .last h2 { + padding-top: 0; + padding-bottom: 1rem; + margin-bottom: 0; } + +.body .urbit.home p.email { + margin-top: 3rem; } + +@media (max-width: 767px) { + .body .urbit { + margin-top: 4rem; } + .body .urbit .slide .pair, + .body .urbit .slide .pair .text, + .body .urbit .slide .pair .image { + display: block; + width: 100%; } + .body .urbit .slide .pair .image { + text-align: center; } + .body .urbit .slide .pair .image.left { + margin-bottom: 2rem; } + .body .urbit .slide .pair .image.right { + margin-top: 2rem; } } + @keyframes menu-open { 0% { visibility: hidden; } @@ -468,14 +884,31 @@ img.logo.first { font-weight: 500; font-size: 1.4rem; } -.body[data-path^='/docs'] .list { +.body[data-path^='/docs'] .list, +.body[data-path^='/work'] .list { list-style-type: none; padding-left: 0; } .body[data-path^='/docs'] .list a, - .body[data-path^='/docs'] .list h1 { - color: #02D124; + .body[data-path^='/docs'] .list h1, + .body[data-path^='/work'] .list a, + .body[data-path^='/work'] .list h1 { + color: #55595c; font-weight: 500; - height: 2rem; } + height: 2rem; + display: inline; + text-decoration: none; } + .body[data-path^='/docs'] .list h1, + .body[data-path^='/work'] .list h1 { + border-bottom: 2px solid #55595c; } + +.body[data-path^='/work'] .list.main a, +.body[data-path^='/work'] .list.main h1 { + font-size: 2rem; + line-height: 4rem; + height: 4rem; } + +.body[data-path^='/work'] .list.main h1 { + border-width: 4px; } .body[data-path^='/docs'] .list.runes { margin-top: 3rem; } @@ -493,7 +926,7 @@ img.logo.first { .body[data-path^='/docs'] .list.runes a h1 code { margin-right: 1rem; background-color: transparent; - color: #0500F0; } + color: #55595c; } .body[data-path^='/docs'] .list.runes a code { background-color: #eceeef; } .body[data-path^='/docs'] .list.runes a code { @@ -512,6 +945,21 @@ img.logo.first { .body[data-path^='/docs'] .list.runes a:hover:after { background-color: #0500F0; } +.urbit ul.blog { + list-style-type: none; + padding-left: 0; } + .urbit ul.blog li { + margin-bottom: 12rem; } + .urbit ul.blog .btn { + padding: .3rem; + border: 3px solid #64DE79; + color: #64DE79; + text-decoration: none; + text-transform: none; } + .urbit ul.blog .btn:hover { + background-color: #64DE79; + color: #fff; } + .kids.runes h1 { padding-top: 3rem; } @@ -528,6 +976,53 @@ img.logo.first { .kids.runes > div p:first-of-type { font-weight: 500; } +.urbit .post .date, +.urbit.post .date { + font-family: 'scp'; + color: #B1B7BD; + font-size: .7rem; + font-weight: 200; } + +.urbit .post h1.title, +.urbit .post p.preview, +.urbit.post h1.title, +.urbit.post p.preview { + font-weight: 500; } + +.urbit .post h1.title, +.urbit.post h1.title { + font-size: 2rem; + padding-bottom: 0; } + +.urbit .post h1.title, +.urbit .post img, +.urbit.post h1.title, +.urbit.post img { + width: 100%; + margin-bottom: 2rem; } + +.urbit .post .date, +.urbit .post p.preview, +.urbit .post h3.author, +.urbit.post .date, +.urbit.post p.preview, +.urbit.post h3.author { + margin-bottom: .6rem; } + +.urbit .post h3.author, +.urbit.post h3.author { + padding-top: 0; + font-size: 1rem; + font-weight: 200; } + +.urbit .post h3:before, +.urbit.post h3:before { + content: "—"; + margin-right: .6rem; } + +.urbit.post .preview { + max-width: 75%; } + .sections h1 { font-size: 2rem; color: #0500F0; } @@ -546,7 +1041,7 @@ img.logo.first { .sections ul li, .sections ul li a, .sections ul li h1 span { - color: #02D124; + color: #55595c; height: 2rem; } .sections .kids > div { @@ -555,7 +1050,8 @@ img.logo.first { margin-right: 3rem; margin-top: 2rem; min-width: 14rem; - margin-bottom: 3rem; } + margin-bottom: 3rem; + padding: 0; } .sections .kids > div p { font-weight: 500; } @@ -564,7 +1060,7 @@ img.logo.first { display: none; } .lead-offset { - margin-left: 8rem; } + margin-left: 4rem; } @media (max-width: 991px) { .lead-offset { @@ -578,7 +1074,7 @@ img.logo.first { .add-comment { width: 100%; - border-top: 3px dotted #000; + border-top: 3px dotted #f7f7f9; margin-top: 6rem; } .add-comment .btn { font-size: .8rem; } @@ -586,7 +1082,7 @@ img.logo.first { width: 66%; display: block; height: 12rem; - background-color: #F7F7F7; + background-color: #f7f7f9; border-bottom: 0; margin-bottom: 2rem; margin-top: 3rem; @@ -596,16 +1092,17 @@ img.logo.first { padding-top: 3rem; } .comments .comment { margin-top: 2rem; } - .comments .comment h3, - .comments .comment > span { - font-family: 'scp'; } .comments .comment > span { + font-family: 'scp'; font-size: .8rem; color: #B1B7BD; } - .comments .comment h3 { + .comments .comment h2 { padding-top: 0; font-size: 1rem; font-weight: 500; } + .comments .comment h2 code { + background-color: transparent; + padding: 0; } .comments .comment p { width: 66%; } diff --git a/web/tree/main.js b/web/tree/main.js index c9805606f..c4fcc4440 100644 --- a/web/tree/main.js +++ b/web/tree/main.js @@ -85,284 +85,7 @@ module.exports = { }; -},{"../dispatcher/Dispatcher.coffee":19,"../persistence/TreePersistence.coffee":21}],2:[function(require,module,exports){ -var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, reactify, recl, ref, rend, ul, util; - -clas = require('classnames'); - -BodyComponent = React.createFactory(require('./BodyComponent.coffee')); - -query = require('./Async.coffee'); - -reactify = require('./Reactify.coffee'); - -TreeStore = require('../stores/TreeStore.coffee'); - -TreeActions = require('../actions/TreeActions.coffee'); - -Sibs = require('./SibsComponent.coffee'); - -Dpad = require('./DpadComponent.coffee'); - -util = require('../utils/util.coffee'); - -recl = React.createClass; - -rend = ReactDOM.render; - -ref = React.DOM, div = ref.div, a = ref.a, ul = ref.ul, li = ref.li, button = ref.button; - -Nav = React.createFactory(query({ - path: 't', - kids: { - name: 't', - head: 'r', - meta: 'j' - } -}, recl({ - displayName: "Links", - stateFromStore: function() { - return TreeStore.getNav(); - }, - getInitialState: function() { - return this.stateFromStore(); - }, - _onChangeStore: function() { - if (this.isMounted()) { - return this.setState(this.stateFromStore()); - } - }, - componentDidMount: function() { - return TreeStore.addChangeListener(this._onChangeStore); - }, - componentWillUnmount: function() { - return TreeStore.removeChangeListener(this._onChangeStore); - }, - onClick: function() { - return this.toggleFocus(); - }, - onMouseOver: function() { - return this.toggleFocus(true); - }, - onMouseOut: function() { - return this.toggleFocus(false); - }, - onTouchStart: function() { - return this.ts = Number(Date.now()); - }, - onTouchEnd: function() { - var dt; - return dt = this.ts - Number(Date.now()); - }, - _home: function() { - return this.props.goTo("/"); - }, - toggleFocus: function(state) { - return $(ReactDOM.findDOMNode(this)).toggleClass('focus', state); - }, - toggleNav: function() { - return TreeActions.toggleNav(); - }, - render: function() { - var attr, dpad, navClas, sibs, title, toggleClas; - attr = { - onMouseOver: this.onMouseOver, - onMouseOut: this.onMouseOut, - onClick: this.onClick, - onTouchStart: this.onTouchStart, - onTouchEnd: this.onTouchEnd, - 'data-path': this.props.dataPath - }; - if (_.keys(window).indexOf("ontouchstart") !== -1) { - delete attr.onMouseOver; - delete attr.onMouseOut; - } - navClas = clas({ - 'col-md-2': true, - ctrl: true, - open: this.state.open === true - }); - attr = _.extend(attr, { - className: navClas, - key: "nav" - }); - title = this.state.title ? this.state.title : ""; - dpad = this.state.dpad !== false ? Dpad(this.props, "") : ""; - sibs = this.state.sibs !== false ? Sibs(_.merge(this.props, { - toggleNav: this.toggleNav - }), "") : ""; - toggleClas = clas({ - 'navbar-toggler': true, - show: this.state.subnav != null - }); - return div(attr, div({ - className: 'links', - key: "links" - }, div({ - className: 'icon' - }, div({ - className: 'home', - onClick: this._home - }, ""), div({ - className: 'app' - }, title), dpad, button({ - className: toggleClas, - type: 'button', - onClick: this.toggleNav - }, "☰")), sibs)); - } -}), recl({ - displayName: "Links_loading", - _home: function() { - return this.props.goTo("/"); - }, - render: function() { - return div({ - className: "col-md-2 ctrl", - "data-path": this.props.dataPath, - key: "nav-loading" - }, div({ - className: 'links' - }, div({ - className: 'icon' - }, div({ - className: 'home', - onClick: this._home - }, "")), ul({ - className: "nav" - }, li({ - className: "nav-item selected" - }, a({ - className: "nav-link" - }, this.props.curr))))); - } -}))); - -module.exports = query({ - sein: 't', - path: 't', - name: 't', - meta: 'j' -}, recl({ - displayName: "Anchor", - stateFromStore: function() { - return TreeStore.getNav(); - }, - getInitialState: function() { - return _.extend(this.stateFromStore(), { - url: window.location.pathname - }); - }, - _onChangeStore: function() { - if (this.isMounted()) { - return this.setState(this.stateFromStore()); - } - }, - componentWillUnmount: function() { - clearInterval(this.interval); - $('body').off('click', 'a'); - return TreeStore.removeChangeListener(this._onChangeStore); - }, - componentDidUpdate: function() { - return this.setTitle(); - }, - componentDidMount: function() { - var _this; - this.setTitle(); - this.interval = setInterval(this.checkURL, 100); - TreeStore.addChangeListener(this._onChangeStore); - _this = this; - return $('body').on('click', 'a', function(e) { - var href; - href = $(this).attr('href'); - if (href[0] === "#") { - return true; - } - if (href && !/^https?:\/\//i.test(href)) { - e.preventDefault(); - if ((href != null ? href[0] : void 0) !== "/") { - href = (document.location.pathname.replace(/[^\/]*\/?$/, '')) + href; - } - return _this.goTo(util.fragpath(href)); - } - }); - }, - setTitle: function() { - var ref1, title; - title = $('#body h1').first().text() || this.props.name; - if ((ref1 = this.props.meta) != null ? ref1.title : void 0) { - title = this.props.meta.title; - } - return document.title = title + " - " + this.props.path; - }, - setPath: function(href, hist) { - var href_parts, next; - href_parts = href.split("#"); - next = href_parts[0]; - if (next.substr(-1) === "/") { - next = next.slice(0, -1); - } - href_parts[0] = next; - if (hist !== false) { - history.pushState({}, "", util.basepath(href_parts.join("#"))); - } - if (next !== this.props.path) { - ReactDOM.unmountComponentAtNode($('#body')[0]); - TreeActions.setCurr(next); - return rend(BodyComponent({}, ""), $('#body')[0]); - } - }, - reset: function() { - $("html,body").animate({ - scrollTop: 0 - }); - $('#nav').attr('style', ''); - $('#nav').removeClass('scrolling m-up'); - return $('#nav').addClass('m-down m-fixed'); - }, - goTo: function(path) { - this.reset(); - return this.setPath(path); - }, - checkURL: function() { - if (this.state.url !== window.location.pathname) { - this.reset(); - this.setPath(util.fragpath(window.location.pathname), false); - return this.setState({ - url: window.location.pathname - }); - } - }, - render: function() { - var kids; - if (this.props.meta.anchor === 'none') { - return div({}, ""); - } - kids = [ - Nav({ - curr: this.props.name, - dataPath: this.props.sein, - sein: this.props.sein, - goTo: this.goTo, - key: "nav" - }, "div") - ]; - if (this.state.subnav) { - kids.push(reactify({ - gn: this.state.subnav, - ga: { - open: this.state.open, - toggle: TreeActions.toggleNav - }, - c: [] - }, "subnav")); - } - return div({}, kids); - } -})); - - -},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":22,"../utils/util.coffee":24,"./Async.coffee":3,"./BodyComponent.coffee":4,"./DpadComponent.coffee":8,"./Reactify.coffee":14,"./SibsComponent.coffee":17,"classnames":25}],3:[function(require,module,exports){ +},{"../dispatcher/Dispatcher.coffee":20,"../persistence/TreePersistence.coffee":22}],2:[function(require,module,exports){ var TreeActions, TreeStore, _load, code, div, recl, ref, span; _load = require('./LoadComponent.coffee'); @@ -516,8 +239,8 @@ module.exports = function(queries, Child, load) { }; -},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":22,"./LoadComponent.coffee":12}],4:[function(require,module,exports){ -var Comments, TreeActions, a, clas, div, extras, img, input, load, p, query, reactify, recl, ref, rele, util; +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"./LoadComponent.coffee":11}],3:[function(require,module,exports){ +var Comments, TreeActions, TreeStore, a, clas, div, extras, h1, h3, img, input, load, p, query, reactify, recl, ref, rele, util; clas = require('classnames'); @@ -529,6 +252,8 @@ reactify = require('./Reactify.coffee'); TreeActions = require('../actions/TreeActions.coffee'); +TreeStore = require('../stores/TreeStore.coffee'); + Comments = require('./CommentsComponent.coffee'); util = require('../utils/util.coffee'); @@ -537,7 +262,7 @@ recl = React.createClass; rele = React.createElement; -ref = React.DOM, div = ref.div, p = ref.p, img = ref.img, a = ref.a, input = ref.input; +ref = React.DOM, div = ref.div, h1 = ref.h1, h3 = ref.h3, p = ref.p, img = ref.img, a = ref.a, input = ref.input; extras = { spam: recl({ @@ -572,6 +297,46 @@ extras = { })); } }), + date: recl({ + displayName: "Date", + render: function() { + return div({ + className: 'date' + }, this.props.date); + } + }), + title: recl({ + displayName: "Title", + render: function() { + return h1({ + className: 'title' + }, this.props.title); + } + }), + image: recl({ + displayName: "Image", + render: function() { + return img({ + src: this.props.image + }, ""); + } + }), + preview: recl({ + displayName: "Preview", + render: function() { + return p({ + className: 'preview' + }, this.props.preview); + } + }), + author: recl({ + displayName: "Author", + render: function() { + return h3({ + className: 'author' + }, this.props.author); + } + }), next: query({ path: 't', kids: { @@ -610,9 +375,27 @@ extras = { footer: recl({ displayName: "Footer", render: function() { + var containerClas, footerClas; + containerClas = clas({ + footer: true, + container: this.props.container === 'false' + }); + footerClas = clas({ + 'col-md-12': this.props.container === 'false' + }); return div({ - className: "footer" - }, p({}, "This page was served by Urbit.")); + className: containerClas, + key: 'footer-container' + }, [ + div({ + className: footerClas, + key: 'footer-inner' + }, [ + "This page was served by an Urbit.", a({ + href: "mailto:urbit@urbit.org" + }, "urbit@urbit.org") + ]) + ]); } }) }; @@ -625,49 +408,91 @@ module.exports = query({ sein: 't' }, recl({ displayName: "Body", + stateFromStore: function() { + return { + curr: TreeStore.getCurr() + }; + }, + getInitialState: function() { + return this.stateFromStore(); + }, + _onChangeStore: function() { + if (this.isMounted()) { + return this.setState(this.stateFromStore()); + } + }, + componentDidMount: function() { + return TreeStore.addChangeListener(this._onChangeStore); + }, render: function() { - var bodyClas, containerClas, extra, ref1; + var bodyClas, extra, innerClas, parts, ref1; extra = (function(_this) { return function(name, props) { if (props == null) { props = {}; } if (_this.props.meta[name] != null) { + if ((_.keys(props)).length === 0) { + props[name] = _this.props.meta[name]; + } return React.createElement(extras[name], props); } }; })(this); - containerClas = clas({ - "col-md-10": true, - "col-md-offset-3": this.props.meta.anchor !== 'none', + innerClas = { body: true - }); + }; + if (this.props.meta.anchor !== 'none' && this.props.meta.navmode !== 'navbar') { + innerClas['col-md-10'] = true; + innerClas['col-md-offset-3'] = true; + } + if (this.props.meta.navmode === 'navbar' && this.props.meta.container !== 'false') { + innerClas['col-md-9'] = true; + innerClas['col-md-offset-1'] = true; + } + innerClas = clas(innerClas); bodyClas = clas((ref1 = this.props.meta.layout) != null ? ref1.split(',') : void 0); - return div({ - className: containerClas, - 'data-path': this.props.path - }, [ - div({ - key: "body" + this.props.path, - bodyClas: bodyClas - }, extra('spam'), extra('logo', { + parts = [ + extra('spam'), extra('logo', { color: this.props.meta.logo }), reactify(this.props.body), extra('next', { dataPath: this.props.sein, curr: this.props.name - }), extra('comments'), extra('footer')) + }), extra('comments'), extra('footer', { + container: this.props.meta.container + }) + ]; + if (this.props.meta.type === "post") { + parts.splice(1, 0, extra('date'), extra('title'), extra('image'), extra('preview'), extra('author')); + } + return div({ + dataPath: this.state.curr, + key: this.state.curr + }, [ + div({ + className: innerClas, + 'data-path': this.props.path, + key: 'body-inner' + }, [ + div({ + key: "body" + this.props.path, + id: 'body', + className: bodyClas + }, parts) + ]) ]); } }), recl({ render: function() { return div({ + id: 'body', className: "col-md-offset-3 col-md-10" }, rele(load)); } })); -},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":24,"./Async.coffee":3,"./CommentsComponent.coffee":6,"./LoadComponent.coffee":12,"./Reactify.coffee":14,"classnames":25}],5:[function(require,module,exports){ +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"../utils/util.coffee":25,"./Async.coffee":2,"./CommentsComponent.coffee":5,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],4:[function(require,module,exports){ var div, recl, ref, textarea; recl = React.createClass; @@ -690,7 +515,7 @@ module.exports = recl({ }); -},{}],6:[function(require,module,exports){ +},{}],5:[function(require,module,exports){ var Comment, TreeActions, a, clas, div, form, img, input, load, p, query, reactify, recl, ref, rele, textarea, util; clas = require('classnames'); @@ -785,7 +610,7 @@ module.exports = query({ })); -},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":24,"./Async.coffee":3,"./LoadComponent.coffee":12,"./Reactify.coffee":14,"classnames":25}],7:[function(require,module,exports){ +},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":25,"./Async.coffee":2,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],6:[function(require,module,exports){ var div, recl; recl = React.createClass; @@ -809,7 +634,7 @@ module.exports = { }; -},{"./CodeMirror.coffee":5,"./EmailComponent.coffee":9,"./KidsComponent.coffee":10,"./ListComponent.coffee":11,"./ModuleComponent.coffee":13,"./ScriptComponent.coffee":15,"./SearchComponent.coffee":16,"./TocComponent.coffee":18}],8:[function(require,module,exports){ +},{"./CodeMirror.coffee":4,"./EmailComponent.coffee":8,"./KidsComponent.coffee":9,"./ListComponent.coffee":10,"./ModuleComponent.coffee":12,"./ScriptComponent.coffee":15,"./SearchComponent.coffee":16,"./TocComponent.coffee":18}],7:[function(require,module,exports){ var a, div, recl, ref, util; util = require('../utils/util.coffee'); @@ -818,7 +643,7 @@ recl = React.createClass; ref = React.DOM, div = ref.div, a = ref.a; -module.exports = React.createFactory(recl({ +module.exports = recl({ displayName: "Dpad", renderUp: function() { if (this.props.sein) { @@ -864,10 +689,10 @@ module.exports = React.createFactory(recl({ key: 'dpad' }, this.renderUp(), this.renderArrows()); } -})); +}); -},{"../utils/util.coffee":24}],9:[function(require,module,exports){ +},{"../utils/util.coffee":25}],8:[function(require,module,exports){ var button, div, input, p, reactify, recl, ref; reactify = require('./Reactify.coffee'); @@ -887,9 +712,12 @@ module.exports = recl({ onClick: function() { return this.submit(); }, - onKeyUp: function(e) { + onChange: function(e) { var email, valid; - email = this.$email.val(); + email = e.target.value; + this.setState({ + email: e.target.value + }); valid = email.indexOf('@') !== -1 && email.indexOf('.') !== -1 && email.length > 7 && email.split(".")[1].length > 1 && email.split("@")[0].length > 0 && email.split("@")[1].length > 4; this.$email.toggleClass('valid', valid); this.$email.removeClass('error'); @@ -919,19 +747,21 @@ module.exports = recl({ return this.$email = $('input.email'); }, render: function() { - var cont; + var cont, ref1, submit; if (this.state.submit === false) { + submit = (ref1 = this.props.submit) != null ? ref1 : "Sign up"; cont = [ input({ key: "field", className: "email", placeholder: "your@email.com", - onKeyUp: this.onKeyUp - }, this.state.email), button({ + onChange: this.onChange, + value: this.state.email + }), button({ key: "submit", className: "submit", onClick: this.onClick - }, "Sign up") + }, submit) ]; } else { cont = [ @@ -948,7 +778,7 @@ module.exports = recl({ }); -},{"./Reactify.coffee":14}],10:[function(require,module,exports){ +},{"./Reactify.coffee":14}],9:[function(require,module,exports){ var a, clas, div, hr, li, query, reactify, recl, ref, ul; clas = require('classnames'); @@ -1022,7 +852,8 @@ module.exports = query({ results.push([ div({ key: keyed[k], - id: keyed[k] + id: keyed[k], + className: "col-md-4" }, reactify(elem.body)), hr({}) ]); } @@ -1032,7 +863,7 @@ module.exports = query({ })); -},{"./Async.coffee":3,"./Reactify.coffee":14,"classnames":25}],11:[function(require,module,exports){ +},{"./Async.coffee":2,"./Reactify.coffee":14,"classnames":26}],10:[function(require,module,exports){ var a, clas, div, h1, li, pre, query, reactify, recl, ref, span, ul, util; clas = require('classnames'); @@ -1061,7 +892,6 @@ module.exports = query({ k = clas({ list: true }, this.props.dataType, { - posts: this.props.dataType === 'post', "default": this.props['data-source'] === 'default' }, this.props.className); kids = this.renderList(); @@ -1077,7 +907,7 @@ module.exports = query({ }, 'Error: Empty path'), div({}, pre({}, this.props.path), span({}, 'is either empty or does not exist.'))); }, renderList: function() { - var _date, _k, _keys, date, elem, href, i, item, k, len, parts, path, preview, ref1, ref2, ref3, ref4, ref5, ref6, ref7, results, sorted, title, v; + var _date, _k, _keys, author, cont, date, elem, href, i, image, item, k, len, linked, node, parts, path, preview, ref1, ref2, ref3, ref4, ref5, ref6, results, sorted, title, v; sorted = true; _keys = []; ref1 = this.props.kids; @@ -1131,6 +961,9 @@ module.exports = query({ if ((ref6 = elem.meta) != null ? ref6.title : void 0) { title = { gn: 'h1', + ga: { + className: 'title' + }, c: [elem.meta.title] }; } @@ -1140,62 +973,100 @@ module.exports = query({ if (!title) { title = { gn: 'h1', + ga: { + className: 'title' + }, c: [item] }; } if (!this.props.titlesOnly) { - if (this.props.dataDates) { - _date = elem.meta.date; - if (!_date || _date.length === 0) { - _date = ""; - } - date = { - gn: 'div', - ga: { - className: 'date' - }, - c: [_date] - }; - parts.push(date); + _date = elem.meta.date; + if (!_date || _date.length === 0) { + _date = ""; } + date = { + gn: 'div', + ga: { + className: 'date' + }, + c: [_date] + }; + parts.push(date); } parts.push(title); if (!this.props.titlesOnly) { - if (this.props.dataPreview) { - if (this.props.dataType === 'post' && !elem.meta.preview) { - parts.push.apply(parts, elem.snip.c.slice(0, 2)); - } else { - if (elem.meta.preview) { - preview = { - gn: 'p', - c: [elem.meta.preview] - }; + if (this.props.dataType === 'post') { + if (elem.meta.image) { + image = { + gn: 'img', + ga: { + src: elem.meta.image + } + }; + parts.push(image); + } + if (this.props.dataPreview) { + if (!elem.meta.preview) { + parts.push.apply(parts, elem.snip.c.slice(0, 2)); } else { - preview = elem.snip; + if (elem.meta.preview) { + preview = { + gn: 'p', + ga: { + className: 'preview' + }, + c: [elem.meta.preview] + }; + } else { + preview = elem.snip; + } + parts.push(preview); } - parts.push(preview); + if (elem.meta.author) { + author = { + gn: 'h3', + ga: { + className: 'author' + }, + c: [elem.meta.author] + }; + parts.push(author); + } + cont = { + gn: 'a', + ga: { + className: 'btn continue', + href: href + }, + c: ['Continue reading'] + }; + parts.push(cont); + linked = true; } } } - results.push(li({ - key: item, - className: (ref7 = this.props.dataType) != null ? ref7 : "" - }, a({ - href: href, - className: clas({ - preview: this.props.dataPreview != null - }) - }, reactify({ + node = reactify({ gn: 'div', c: parts - })))); + }); + if (linked == null) { + node = a({ + href: href, + className: clas({ + preview: this.props.dataPreview != null + }) + }, node); + } + results.push(li({ + key: item + }, node)); } return results; } })); -},{"../utils/util.coffee":24,"./Async.coffee":3,"./Reactify.coffee":14,"classnames":25}],12:[function(require,module,exports){ +},{"../utils/util.coffee":25,"./Async.coffee":2,"./Reactify.coffee":14,"classnames":26}],11:[function(require,module,exports){ var div, recl, ref, span; recl = React.createClass; @@ -1233,7 +1104,7 @@ module.exports = recl({ }); -},{}],13:[function(require,module,exports){ +},{}],12:[function(require,module,exports){ var TreeActions, div, recl; recl = React.createClass; @@ -1267,7 +1138,327 @@ module.exports = recl({ }); -},{"../actions/TreeActions.coffee":1}],14:[function(require,module,exports){ +},{"../actions/TreeActions.coffee":1}],13:[function(require,module,exports){ +var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, reactify, recl, ref, rend, ul, util; + +clas = require('classnames'); + +BodyComponent = React.createFactory(require('./BodyComponent.coffee')); + +query = require('./Async.coffee'); + +reactify = require('./Reactify.coffee'); + +TreeStore = require('../stores/TreeStore.coffee'); + +TreeActions = require('../actions/TreeActions.coffee'); + +Sibs = React.createFactory(require('./SibsComponent.coffee')); + +Dpad = React.createFactory(require('./DpadComponent.coffee')); + +util = require('../utils/util.coffee'); + +recl = React.createClass; + +rend = ReactDOM.render; + +ref = React.DOM, div = ref.div, a = ref.a, ul = ref.ul, li = ref.li, button = ref.button; + +Nav = React.createFactory(query({ + path: 't', + kids: { + name: 't', + head: 'r', + meta: 'j' + } +}, recl({ + displayName: "Links", + stateFromStore: function() { + return TreeStore.getNav(); + }, + getInitialState: function() { + return this.stateFromStore(); + }, + _onChangeStore: function() { + if (this.isMounted()) { + return this.setState(this.stateFromStore()); + } + }, + componentDidMount: function() { + return TreeStore.addChangeListener(this._onChangeStore); + }, + componentWillUnmount: function() { + return TreeStore.removeChangeListener(this._onChangeStore); + }, + onClick: function() { + return this.toggleFocus(); + }, + onMouseOver: function() { + return this.toggleFocus(true); + }, + onMouseOut: function() { + return this.toggleFocus(false); + }, + onTouchStart: function() { + return this.ts = Number(Date.now()); + }, + onTouchEnd: function() { + var dt; + return dt = this.ts - Number(Date.now()); + }, + _home: function() { + return this.props.goTo(this.props.meta.navhome ? this.props.meta.navhome : "/"); + }, + toggleFocus: function(state) { + return $(ReactDOM.findDOMNode(this)).toggleClass('focus', state); + }, + toggleNav: function() { + return TreeActions.toggleNav(); + }, + render: function() { + var attr, dpad, i, iconClass, itemsClass, len, linksClas, navClas, ref1, ref2, ref3, sibs, sub, subprops, title, toggleClas, v; + attr = { + onMouseOver: this.onMouseOver, + onMouseOut: this.onMouseOut, + onClick: this.onClick, + onTouchStart: this.onTouchStart, + onTouchEnd: this.onTouchEnd, + 'data-path': this.props.dataPath + }; + if (_.keys(window).indexOf("ontouchstart") !== -1) { + delete attr.onMouseOver; + delete attr.onMouseOut; + } + linksClas = clas({ + links: true, + subnav: (this.props.meta.navsub != null) + }); + navClas = { + navbar: this.props.meta.navmode === 'navbar', + ctrl: true, + open: this.state.open === true + }; + if (this.props.meta.layout) { + ref1 = this.props.meta.layout.split(","); + for (i = 0, len = ref1.length; i < len; i++) { + v = ref1[i]; + navClas[v.trim()] = true; + } + } + navClas = clas(navClas); + iconClass = clas({ + icon: true, + 'col-md-1': this.props.meta.navmode === 'navbar' + }); + attr = _.extend(attr, { + className: navClas, + key: "nav" + }); + title = this.state.title ? this.state.title : ""; + dpad = this.state.dpad !== false && ((ref2 = this.props.meta) != null ? ref2.navdpad : void 0) !== "false" ? Dpad(this.props, "") : ""; + sibs = this.state.sibs !== false && ((ref3 = this.props.meta) != null ? ref3.navsibs : void 0) !== "false" ? Sibs(_.merge(_.clone(this.props), { + toggleNav: this.toggleNav + }), "") : ""; + itemsClass = clas({ + items: true, + 'col-md-11': this.props.meta.navmode === 'navbar' + }); + if (this.props.meta.navsub) { + subprops = _.cloneDeep(this.props); + subprops.dataPath = subprops.meta.navsub; + delete subprops.meta.navselect; + subprops.className = 'subnav'; + sub = Sibs(_.merge(subprops, { + toggleNav: this.toggleNav + }), ""); + } + toggleClas = clas({ + 'navbar-toggler': true, + show: this.state.subnav != null + }); + return div(attr, div({ + className: linksClas, + key: "links" + }, div({ + className: iconClass + }, div({ + className: 'home', + onClick: this._home + }, ""), div({ + className: 'app' + }, title), dpad, button({ + className: toggleClas, + type: 'button', + onClick: this.toggleNav + }, "☰")), div({ + className: itemsClass + }, sibs, sub))); + } +}), recl({ + displayName: "Links_loading", + _home: function() { + return this.props.goTo("/"); + }, + render: function() { + return div({ + className: "col-md-2 ctrl", + "data-path": this.props.dataPath, + key: "nav-loading" + }, div({ + className: 'links' + }, div({ + className: 'icon' + }, div({ + className: 'home', + onClick: this._home + }, "")), ul({ + className: "nav" + }, li({ + className: "nav-item selected" + }, a({ + className: "nav-link" + }, this.props.curr))))); + } +}))); + +module.exports = query({ + sein: 't', + path: 't', + name: 't', + meta: 'j' +}, recl({ + displayName: "Anchor", + stateFromStore: function() { + return TreeStore.getNav(); + }, + getInitialState: function() { + return _.extend(this.stateFromStore(), { + url: window.location.pathname + }); + }, + _onChangeStore: function() { + if (this.isMounted()) { + return this.setState(this.stateFromStore()); + } + }, + componentWillUnmount: function() { + clearInterval(this.interval); + $('body').off('click', 'a'); + return TreeStore.removeChangeListener(this._onChangeStore); + }, + componentDidUpdate: function() { + this.setTitle(); + return this.checkRedirect(); + }, + componentDidMount: function() { + var _this; + this.setTitle(); + TreeStore.addChangeListener(this._onChangeStore); + _this = this; + $('body').on('click', 'a', function(e) { + var href, url; + href = $(this).attr('href'); + if (href[0] === "#") { + return true; + } + if (href && !/^https?:\/\//i.test(href)) { + e.preventDefault(); + url = new URL(this.href); + if (url.pathname.substr(-1) !== "/") { + url.pathname += "/"; + } + return _this.goTo(url.pathname + url.search + url.hash); + } + }); + return this.checkRedirect(); + }, + checkRedirect: function() { + if (this.props.meta.redirect) { + return setTimeout(((function(_this) { + return function() { + return _this.goTo(_this.props.meta.redirect); + }; + })(this)), 0); + } + }, + setTitle: function() { + var ref1, title; + title = $('#body h1').first().text() || this.props.name; + if ((ref1 = this.props.meta) != null ? ref1.title : void 0) { + title = this.props.meta.title; + } + return document.title = title + " - " + this.props.path; + }, + setPath: function(path, hist) { + var next; + if (hist !== false) { + history.pushState({}, "", path); + } + next = util.fragpath(path.split('#')[0]); + if (next !== this.props.path) { + return TreeActions.setCurr(next); + } + }, + reset: function() { + return $("html,body").animate({ + scrollTop: 0 + }); + }, + goTo: function(path) { + this.reset(); + return this.setPath(path); + }, + checkURL: function() { + if (this.state.url !== window.location.pathname) { + this.reset(); + this.setPath(window.location.pathname, false); + return this.setState({ + url: window.location.pathname + }); + } + }, + render: function() { + var kids, kidsPath, navClas; + if (this.props.meta.anchor === 'none') { + return div({}, ""); + } + navClas = clas({ + container: this.props.meta.container === 'false' + }); + kidsPath = this.props.sein; + if (this.props.meta.navpath) { + kidsPath = this.props.meta.navpath; + } + kids = [ + Nav({ + curr: this.props.name, + dataPath: kidsPath, + meta: this.props.meta, + sein: this.props.sein, + goTo: this.goTo, + key: "nav" + }, "div") + ]; + if (this.state.subnav) { + kids.push(reactify({ + gn: this.state.subnav, + ga: { + open: this.state.open, + toggle: TreeActions.toggleNav + }, + c: [] + }, "subnav")); + } + return div({ + id: 'head', + className: navClas + }, kids); + } +})); + + +},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"../utils/util.coffee":25,"./Async.coffee":2,"./BodyComponent.coffee":3,"./DpadComponent.coffee":7,"./Reactify.coffee":14,"./SibsComponent.coffee":17,"classnames":26}],14:[function(require,module,exports){ var TreeStore, Virtual, div, load, reactify, recl, ref, rele, span, walk; recl = React.createClass; @@ -1355,7 +1546,7 @@ module.exports = _.extend(reactify, { }); -},{"../stores/TreeStore.coffee":22,"./LoadComponent.coffee":12}],15:[function(require,module,exports){ +},{"../stores/TreeStore.coffee":23,"./LoadComponent.coffee":11}],15:[function(require,module,exports){ var appendNext, recl, rele, waitingScripts; recl = React.createClass; @@ -1392,7 +1583,9 @@ module.exports = recl({ } }, componentWillUnmount: function() { - return document.body.removeChild(this.js); + if (this.js.parentNode === document.body) { + return document.body.removeChild(this.js); + } }, render: function() { return rele("script", this.props); @@ -1538,8 +1731,8 @@ module.exports = query({ })); -},{"./Async.coffee":3,"./Reactify.coffee":14}],17:[function(require,module,exports){ -var a, clas, li, reactify, recl, ref, ul, util; +},{"./Async.coffee":2,"./Reactify.coffee":14}],17:[function(require,module,exports){ +var a, clas, li, query, reactify, recl, ref, ul, util; util = require('../utils/util.coffee'); @@ -1547,11 +1740,20 @@ clas = require('classnames'); reactify = require('./Reactify.coffee'); +query = require('./Async.coffee'); + recl = React.createClass; ref = React.DOM, ul = ref.ul, li = ref.li, a = ref.a; -module.exports = React.createFactory(recl({ +module.exports = query({ + path: 't', + kids: { + snip: 'r', + head: 'r', + meta: 'j' + } +}, recl({ displayName: "Siblings", toText: function(elem) { return reactify.walk(elem, function() { @@ -1565,13 +1767,25 @@ module.exports = React.createFactory(recl({ }); }, render: function() { - var keys; + var keys, navClas; keys = util.getKeys(this.props.kids); + navClas = { + nav: true, + 'col-md-12': this.props.meta.navmode === 'navbar' + }; + if (this.props.className) { + navClas[this.props.className] = true; + } + navClas = clas(navClas); return ul({ - className: "nav" + className: navClas }, keys.map((function(_this) { return function(key) { - var className, data, head, href; + var className, data, head, href, selected; + selected = key === _this.props.curr; + if (_this.props.meta.navselect) { + selected = key === _this.props.meta.navselect; + } href = util.basepath(_this.props.path + "/" + key); data = _this.props.kids[key]; if (data.meta) { @@ -1583,8 +1797,11 @@ module.exports = React.createFactory(recl({ head || (head = key); className = clas({ "nav-item": true, - selected: key === _this.props.curr + selected: selected }); + if (data.meta.sibsclass) { + className += " " + clas(data.meta.sibsclass.split(",")); + } return li({ className: className, key: key @@ -1599,7 +1816,7 @@ module.exports = React.createFactory(recl({ })); -},{"../utils/util.coffee":24,"./Reactify.coffee":14,"classnames":25}],18:[function(require,module,exports){ +},{"../utils/util.coffee":25,"./Async.coffee":2,"./Reactify.coffee":14,"classnames":26}],18:[function(require,module,exports){ var div, query, reactify, recl, slice = [].slice; @@ -1736,7 +1953,50 @@ module.exports = query({ })); -},{"./Async.coffee":3,"./Reactify.coffee":14}],19:[function(require,module,exports){ +},{"./Async.coffee":2,"./Reactify.coffee":14}],19:[function(require,module,exports){ +var body, clas, div, head, query, recf, recl; + +query = require('./Async.coffee'); + +clas = require('classnames'); + +recf = React.createFactory; + +recl = React.createClass; + +head = recf(require('./NavComponent.coffee')); + +body = recf(require('./BodyComponent.coffee')); + +div = React.DOM.div; + +module.exports = query({ + body: 'r', + name: 't', + path: 't', + meta: 'j', + sein: 't' +}, recl({ + displayName: "Tree", + render: function() { + var treeClas; + treeClas = clas({ + container: this.props.meta.container !== 'false' + }); + return div({ + className: treeClas + }, [ + head({ + key: 'head-container' + }, ""), body({ + key: 'body-container' + }, "") + ]); + } +})); + + +},{"./Async.coffee":2,"./BodyComponent.coffee":3,"./NavComponent.coffee":13,"classnames":26}],20:[function(require,module,exports){ module.exports = _.extend(new Flux.Dispatcher(), { handleServerAction: function(action) { return this.dispatch({ @@ -1753,15 +2013,18 @@ module.exports = _.extend(new Flux.Dispatcher(), { }); -},{}],20:[function(require,module,exports){ +},{}],21:[function(require,module,exports){ var rend; rend = ReactDOM.render; $(function() { - var body, frag, head, util; + var frag, main, util; util = require('./utils/util.coffee'); require('./utils/scroll.coffee'); + if (document.location.pathname.substr(-1) !== "/") { + history.replaceState({}, "", document.location.pathname + "/" + document.location.search + document.location.hash); + } window.tree.actions = require('./actions/TreeActions.coffee'); window.tree.actions.addVirtual(require('./components/Components.coffee')); frag = util.fragpath(window.location.pathname.replace(/\.[^\/]*$/, '')); @@ -1774,14 +2037,12 @@ $(function() { } return window.tree.actions.clearData(); }; - head = React.createFactory(require('./components/AnchorComponent.coffee')); - body = React.createFactory(require('./components/BodyComponent.coffee')); - rend(head({}, ""), $('#head')[0]); - return rend(body({}, ""), $('#body')[0]); + main = React.createFactory(require('./components/TreeComponent.coffee')); + return rend(main({}, ""), document.getElementById('tree')); }); -},{"./actions/TreeActions.coffee":1,"./components/AnchorComponent.coffee":2,"./components/BodyComponent.coffee":4,"./components/Components.coffee":7,"./utils/scroll.coffee":23,"./utils/util.coffee":24}],21:[function(require,module,exports){ +},{"./actions/TreeActions.coffee":1,"./components/Components.coffee":6,"./components/TreeComponent.coffee":19,"./utils/scroll.coffee":24,"./utils/util.coffee":25}],22:[function(require,module,exports){ var dedup, pending, util, waspWait; util = require('../utils/util.coffee'); @@ -1869,7 +2130,7 @@ module.exports = { }; -},{"../utils/util.coffee":24}],22:[function(require,module,exports){ +},{"../utils/util.coffee":25}],23:[function(require,module,exports){ var EventEmitter, MessageDispatcher, QUERIES, TreeStore, _curr, _data, _nav, _tree, _virt, clog; EventEmitter = require('events').EventEmitter.EventEmitter; @@ -2138,7 +2399,7 @@ TreeStore.dispatchToken = MessageDispatcher.register(function(p) { module.exports = TreeStore; -},{"../dispatcher/Dispatcher.coffee":19,"events":26}],23:[function(require,module,exports){ +},{"../dispatcher/Dispatcher.coffee":20,"events":27}],24:[function(require,module,exports){ var scroll; scroll = { @@ -2232,7 +2493,7 @@ scroll.init(); module.exports = scroll; -},{}],24:[function(require,module,exports){ +},{}],25:[function(require,module,exports){ var _basepath; _basepath = window.urb.util.basepath("/"); @@ -2281,7 +2542,7 @@ module.exports = { }; -},{}],25:[function(require,module,exports){ +},{}],26:[function(require,module,exports){ /*! Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see @@ -2331,7 +2592,7 @@ module.exports = { } }()); -},{}],26:[function(require,module,exports){ +},{}],27:[function(require,module,exports){ // Copyright Joyent, Inc. and other Node contributors. // // Permission is hereby granted, free of charge, to any person obtaining a @@ -2631,4 +2892,4 @@ function isUndefined(arg) { return arg === void 0; } -},{}]},{},[20]); +},{}]},{},[21]);