new talk, tree with new react

This commit is contained in:
Galen Wolfe-Pauly 2016-01-27 10:53:37 -08:00
parent 21fb6583fa
commit 7ebefb7c5f
4 changed files with 21252 additions and 1619 deletions

View File

@ -1 +1 @@
;module(path "/home/pub/talk/main.js", component "talk");
;module(js "/home/pub/talk/main.js", css "/home/pub/talk/main.css", component "talk");

View File

@ -1,691 +1,68 @@
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau.woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau-italic.woff");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau-medium.woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau-mediumitalic.woff");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau-bold.woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau-bolditalic.woff");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau-super.woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "bau";
src: url("//storage.googleapis.com/urbit-extra/bau-superitalic.woff");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "scp";
src: url("//storage.googleapis.com/urbit-extra/scp-extralight.woff");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "scp";
src: url("//storage.googleapis.com/urbit-extra/scp-light.woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "scp";
src: url("//storage.googleapis.com/urbit-extra/scp-regular.woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "scp";
src: url("//storage.googleapis.com/urbit-extra/scp-medium.woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "scp";
src: url("//storage.googleapis.com/urbit-extra/scp-bold.woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "scp";
src: url("//storage.googleapis.com/urbit-extra/scp-black.woff");
font-weight: 700;
font-style: normal;
}
html,
body {
height: 100%;
font-family: "bau";
}
.type {
font-family: "scp";
}
input {
font-size: 1rem;
-webkit-appearance: none;
border-radius: 0;
font-family: "bau";
}
#length,
.time {
letter-spacing: 0;
}
.time {
font-weight: 200;
letter-spacing: 0.1rem;
color: #555;
}
#length,
.audi,
.time,
.station,
#audience .iden {
font-size: 0.8rem;
line-height: 1rem;
}
#length {
letter-spacing: 0.1rem;
}
#writing-container:focus #length {
display: inline;
}
.ship {
text-transform: uppercase;
letter-spacing: 0.05rem;
}
html,
body {
font-size: 18px;
}
body {
background-color: #fefefe;
padding: 0;
margin: 0;
}
.hidden {
display: none;
}
#c {
position: absolute;
top: 0rem;
left: 50%;
width: 58rem;
margin-left: -29rem;
margin-bottom: 6rem;
}
#station-container {
position: fixed;
width: 58rem;
max-height: 4rem;
background-color: rgba(255,255,255,0.95);
color: #555;
overflow: hidden;
z-index: 10;
border-bottom: 1px solid #ddd;
-webkit-transition: max-height 0.2s;
}
#station #station-container {
padding-top: 1rem;
min-width: 30rem;
text-align: right;
}
#writing-container {
margin-top: 2rem;
margin-bottom: 1rem;
}
#messages-container {
vertical-align: top;
margin-top: 5rem;
}
.caret,
.circle {
display: inline-block;
}
.caret {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #000;
margin-top: 2px;
}
.circle {
width: 6px;
height: 6px;
border: 3px solid #000;
border-radius: 6px;
margin-top: 2px;
}
#station-container #where .caret {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 0 50%;
-webkit-transition: -webkit-transform 0.2s;
}
#station-container #where .caret {
margin-top: 9px;
border-top: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #fff;
-webkit-transition: border-left-color 0.2s;
}
#head {
width: 100%;
height: 4rem;
color: #333;
border-bottom: 1px solid #ddd;
}
#station-container h1 {
display: none;
color: #555;
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.06rem;
display: inline-block;
line-height: 1.2rem;
}
#station-container h1:after {
content: "—";
margin-left: 0.6rem;
}
#station-container .audi,
#station-container .iden > div {
background-color: transparent;
}
#who {
width: 16rem;
}
#stations {
width: 15rem;
padding-bottom: 1rem;
border-left: 16rem solid transparent;
}
#station-container #head .ship {
font-size: 0.9rem;
font-weight: 400;
}
#station-container:hover #where {
color: #fff;
-webkit-transition: color 0.2s;
}
#station-container:hover #where {
color: #f04941;
-webkit-transition: color 0.2s;
}
#station-container:hover #where .caret {
border-left-color: #f04941;
-webkit-transition: border-left-color 0.2s;
}
#stations,
#audience,
#head > div,
#where > div {
display: inline-block;
vertical-align: top;
}
#where > div {
.planet,
.room {
font-family: 'scp'; }
div.meta {
display: inline-block; }
ul.grams {
list-style-type: none;
padding: 0; }
label.public {
background-color: #A100FE;
margin-right: 1rem;
text-transform: capitalize;
letter-spacing: 0.05rem;
font-size: 1.6rem;
}
#where .slat {
font-weight: 500;
}
#where .slat:after {
margin-left: 1rem;
content: "—";
}
#head > div {
height: 2rem;
line-height: 2rem;
margin-top: 1rem;
}
#where .caret {
border-left-color: #fff;
}
#who > div {
vertical-align: middle;
}
#members {
margin-bottom: 1rem;
}
#members > div {
display: block;
max-width: 24rem;
overflow: hidden;
white-space: nowrap;
}
#members > div:hover {
white-space: normal;
}
#members > div div {
display: inline-block;
vertical-align: bottom;
}
#members .audi {
margin-right: 0.3rem;
margin-top: 0;
}
#members .iden {
min-width: 10rem;
}
.station div {
display: inline-block;
}
.station .path {
text-transform: uppercase;
}
.station .remove {
opacity: 0;
cursor: pointer;
width: 0.6rem;
margin-left: 0.6rem;
line-height: 1rem;
font-size: 1.2rem;
font-weight: 500;
color: #f00;
vertical-align: top;
}
.station:hover .remove {
opacity: 1;
}
.sour-ctrl input {
color: #555;
background-color: transparent;
border: none;
font-size: 0.8rem;
line-height: 1.2rem;
letter-spacing: 0.05rem;
margin-top: 0.6rem;
font-weight: 300;
text-align: left;
outline: none;
cursor: pointer;
text-transform: uppercase;
border-bottom: 2px solid transparent;
}
.sour-ctrl input:focus {
border-bottom: 2px solid #fff;
}
.sour-ctrl input::-webkit-input-placeholder {
font-weight: 400;
font-size: 1.2rem;
margin-left: 0.6rem;
color: #555;
}
.sour-ctrl input:focus::-webkit-input-placeholder {
color: transparent;
}
.message {
padding-top: 0.3rem;
margin-bottom: 0.6rem;
}
#messages .message .time,
#messages .message .audi {
opacity: 0;
margin-left: 2rem;
}
#messages .message:hover .time,
#messages .message:hover .audi {
opacity: 1;
}
#messages .message .attr {
position: absolute;
overflow: hidden;
max-height: 1.6rem;
white-space: nowrap;
}
#writing-container {
padding-top: 0.3rem;
}
#messages .message.first,
#messages .message.same .audi {
margin-top: 0;
}
#messages .message.same .type {
opacity: 0;
}
#messages .message.same .iden {
display: none;
}
#messages .message:hover .type {
color: #f04941;
}
#messages .message.attr {
max-height: 2rem;
-webkit-transition: max-height 2s, color 0.1s linear;
}
#messages .message:hover .attr {
max-height: 6rem;
padding-bottom: 1rem;
z-index: 3;
-webkit-transition: max-height 0.2s, color 0.1s linear;
}
#messages .message:hover .attr > div {
max-width: 48rem;
}
#messages .message .ship,
#messages .message .audi > div {
cursor: pointer;
}
#messages .message.new {
border-top: 1px solid #e5e5e5;
}
.member {
width: 12rem;
margin: 0.3rem 0.6rem 0.3rem 0;
}
#messages {
height: auto;
}
.message.pending {
color: #ccc;
}
.message.say .mess {
font-style: italic;
}
.message.exp .mess {
font-family: monospace;
}
a {
text-decoration: underline;
color: inherit;
}
.sig,
.type {
margin-left: 1rem;
float: left;
width: 1rem;
}
.type {
height: 2rem;
}
.sig {
font-size: 2rem;
margin-left: 0.7rem;
margin-right: 0.3rem;
}
.sig:before {
content: "~";
}
.type.private:before {
content: attr(data-glyph);
font-size: 1rem;
line-height: 1.1rem;
}
.type.public:before {
content: attr(data-glyph);
font-size: 0.8rem;
line-height: 1.2rem;
}
.mess,
.iden,
#station .member div,
#writing {
display: inline-block;
}
.mess,
#writing,
#length {
vertical-align: top;
}
.attr > div {
line-height: 1.4rem;
max-width: 16rem;
}
.attr {
text-align: left;
display: inline-block;
max-height: 1.2rem;
margin-right: 0.3rem;
min-width: 16rem;
background-color: #fff;
}
.attr .iden {
line-hieght: 1.4rem;
}
.audi,
.station .path {
white-space: nowrap;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
.audi {
margin-top: 1rem;
background-color: #fff;
}
.audi > div {
margin-right: 0.3rem;
max-width: 16rem;
display: block;
}
.iden > div {
max-width: 11rem;
display: inline-block;
font-size: 0.9rem;
}
.iden > div,
.audi > div {
background-color: #fff;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-transition: max-width 0.2s;
}
.audi > div:last-child {
margin-right: 0;
}
.iden > div:hover,
.audi > div:hover {
position: relative;
-webkit-transition: max-width 0.2s;
}
.mess {
letter-spacing: 0.03rem;
word-wrap: break-word;
margin-left: 16.3rem;
}
.mess,
#writing,
.iden > div:hover,
.audi > div:hover {
max-width: 42rem;
}
.iden > div:hover {
padding-right: 3rem;
}
.mess,
#writing {
font-size: 1.2rem;
}
#writing {
min-height: 1.6rem;
min-width: 1.3rem;
max-width: 32rem;
line-height: 2rem;
outline: none;
padding: 0.3rem 0.1rem;
margin-top: -0.3rem;
border-bottom: 3px solid #555;
}
.writing {
padding-top: 0.3rem;
}
.writing #length {
display: inline;
margin-left: 1rem;
margin-top: 1.2rem;
}
.writing .attr {
line-height: 1.6rem;
vertical-align: top;
margin-left: 2rem;
min-width: 14rem;
}
.writing .iden {
display: block;
width: 100%;
}
.writing .iden .ship {
margin-right: 0.3rem;
}
#audi {
display: inline-block;
margin-right: -0.2rem;
margin-bottom: 0.3rem;
outline: none;
overflow: hidden;
max-width: 12rem;
min-width: 1rem;
padding: 0.3rem 0.1rem 0.1rem 0;
border-bottom: 2px solid #555;
}
.valid-false {
color: #ff2f2f !important;
}
#scrolling {
display: none;
}
.scrolling #scrolling {
position: fixed;
bottom: 3rem;
left: 2rem;
height: 1rem;
padding: 1rem;
height: 2rem;
background-color: #f9f9f9;
width: 1rem;
text-align: center; }
label.public:before {
content: '%';
color: #fff;
font-family: 'scp';
font-size: .8rem;
font-weight: 500;
font-size: 0.8rem;
text-transform: uppercase;
}
body:not(.offline) #offline {
display: none;
}
#offline {
transition: color 0.25s ease;
}
#offline.error {
color: #f00;
}
@media only screen and (min-width: 1024px) {
#station-container:hover {
max-height: 30rem;
height: auto;
-webkit-transition: max-height 0.2s;
}
#station-container:hover #where .caret {
transform: rotate(90deg);
transform-origin: 0 50%;
-webkit-transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
}
}
@media only screen and (max-width: 1170px) {
#station-container.open {
max-height: 30rem;
height: auto;
-webkit-transition: max-height 0.2s;
}
#station-container.open #where .caret {
transform: rotate(90deg);
transform-origin: 0 50%;
-webkit-transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
}
#c,
#station-container {
width: 96%;
left: 0;
margin-left: 2%;
margin-right: 2%;
}
.mess,
#writing {
max-width: 60%;
line-height: 1.6rem;
}
.attr,
#stations,
#where {
width: 20%;
min-width: 20%;
}
#audience,
#who {
width: 60%;
}
#writing {
padding: 0.1rem;
}
#station-container.m-down,
#station-container.m-up {
position: absolute;
}
#station-container.m-down.m-fixed {
position: fixed;
top: 0;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mess,
#writing {
max-width: 70%;
line-height: 1.2rem;
}
#stations,
#audience {
width: 96%;
}
#stations,
#audience,
.sour-ctrl input {
text-align: left;
}
#station {
cursor: pointer;
}
#station-container.open {
max-height: 30rem;
height: auto;
-webkit-transition: max-height 0.2s;
}
#station-container.open #where .caret {
transform: rotate(90deg);
transform-origin: 0 50%;
-webkit-transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
}
}
line-height: 1rem;
vertical-align: middle; }
div.meta > label,
div.meta > h2,
div.meta > div {
display: inline-block; }
h2.author {
font-family: 'scp';
font-size: .8rem;
font-weight: 400;
margin-top: 0; }
.gram.same div.meta {
display: none; }
@media (max-width: 767px) {
label.public {
margin-right: 9px; } }
.input {
border-bottom: 3px solid #000;
display: inline-block;
line-height: 2rem;
font-size: 1rem;
padding: 0 .2rem;
min-width: 1rem;
min-height: 1rem; }
.audience {
margin-bottom: 2rem; }
.audience .input {
border-color: #373a3c;
font-family: 'scp'; }
.message .input {
border-color: #B1B7BD;
font-family: 'bau'; }
.message {
margin-bottom: 6rem; }
/*# sourceMappingURL=main.css.map */

File diff suppressed because it is too large Load Diff

View File

@ -27,7 +27,9 @@
::;link(type "text/css", rel "stylesheet", href "http://localhost:8000/docs/pub/tree/src/css/main.css");
;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js");
;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js");
;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js");
;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js");
;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js");
;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/flux/2.1.1/Flux.js");
;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.js");
;script(type "text/javascript", src "/~/at/{dez}/lib/js/urb.js");
;script(type "text/javascript", src "/{dez}/lib/js/hoon.js");
@ -42,7 +44,7 @@
;div.col-md-2.ctrl#nav;
==
==
;div.container
;div.container#container
;div.row
;div.col-md-10.col-md-offset-2.body#cont;
==