chat should be radio

main/pub/radio/fab/hymn.hook

@@ -7,18 +7,20 @@
   ;head
     ;meta(charset "utf-8");
     ;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.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.1/react.min.js");
     ;meta(name "viewport", content "width=432, initial-scale=1");
     ;script(type "text/javascript", src "//use.typekit.net/fkv0sjk.js");
     ;script:'''
             try{Typekit.load();}catch(e){}
             '''
-    ;link(type "text/css", rel "stylesheet", href "/gen/main/pub/chat/src/main.css");
+    ;link(type "text/css", rel "stylesheet", href "/gen/main/pub/radio/src/main.css");
     ;script(type "text/javascript", src "/gop/hart.js");
     ;title: Radio
   ==
   ;body
     ;div#c;
     ;script(type "text/javascript", src "/gen/main/lib/urb.js");
-    ;script(type "text/javascript", src "/gen/main/pub/chat/src/main.js");
+    ;script(type "text/javascript", src "/gen/main/pub/radio/src/main.js");
   ==
 ==

main/pub/radio/src/main.css

@@ -41,6 +41,10 @@ input.join,
 .stations {
   font-family: "source-code-pro";
 }
+input {
+  -webkit-appearance: none;
+  border-radius: 0;
+}
 html,
 body {
   height: 100%;
@@ -83,36 +87,68 @@ body {
   left: 1rem;
   width: 12rem;
 }
+#station-container {
+  position: fixed;
+  top: 1rem;
+  left: 54rem;
+  width: 12rem;
+}
 #stations-container,
 #messages-container {
   vertical-align: top;
 }
 #station {
   width: 18rem;
-  text-align: right;
+}
+#station .iden {
+  display: block;
 }
 .stations {
   width: 4rem;
 }
 .station {
   display: inline-block;
+  width: 9rem;
   margin-bottom: 0.3rem;
   cursor: pointer;
+}
+.station .name {
   border-bottom: 2px solid transparent;
 }
-.station.selected {
+.station.selected .name {
   font-weight: 600;
   border-bottom: 2px solid #000;
 }
+.station > div {
+  display: inline;
+}
+.station .remove {
+  display: none;
+  float: right;
+  font-size: 0.8rem;
+  line-height: 1rem;
+}
+.station:hover .remove {
+  display: inline;
+}
 .join-ctrl {
   margin-top: 1.2rem;
 }
 .join-ctrl input {
   border: none;
 }
+.join-ctrl input::-webkit-input-placeholder {
+  font-weight: 200;
+}
+.join-ctrl input {
+  font-weight: 400;
+}
 .message {
   margin-bottom: 0.2rem;
 }
+#messages .message:last-child {
+  margin-bottom: 2rem;
+}
 #messages .message .time {
   opacity: 0;
 }
@@ -128,7 +164,6 @@ body {
   margin: 0.3rem 0.6rem 0.3rem 0;
 }
 #messages {
-  margin-bottom: 2rem;
   height: auto;
 }
 .attr {
@@ -156,11 +191,23 @@ body {
   font-size: 0.8rem;
   letter-spacing: 0.03rem;
   word-wrap: break-word;
+  max-width: 31rem;
 }
 .ship,
 .name {
   font-weight: 500;
 }
+.ship.talk:before {
+  content: "...";
+  margin-left: -1.3rem;
+  margin-right: 0.3rem;
+  width: 1rem;
+  margin-top: -0.4rem;
+  vertical-align: middle;
+  display: inline-block;
+  line-height: 0.2rem;
+  letter-spacing: -0.1rem;
+}
 #writing-container {
   bottom: 4rem;
   margin-bottom: 1rem;
@@ -213,16 +260,54 @@ input.join:focus {
     margin-left: 0;
     width: 24rem;
   }
-  .attr {
+  #messages-container,
+  #writing-container {
+    margin-left: 1rem;
+  }
+  #stations-container,
+  #station-container {
+    position: relative;
+    float: left;
+  }
+  #stations-container {
     width: 8rem;
+  }
+  #station-container {
+    left: auto;
+  }
+  .station {
+    width: 5rem;
+  }
+  .attr {
+    display: block;
+    text-align: left;
+    width: 2rem;
     margin-right: 1rem;
   }
+  .message {
+    height: 1.6rem;
+  }
   .join-ctrl input,
   .stations,
   .iden,
   #station {
     font-size: 0.5rem;
   }
+  .join-ctrl input {
+    width: 6rem;
+  }
+  .station .remove {
+    display: inline;
+    font-size: 0.6rem;
+    line-height: 0.6rem;
+  }
+  .ship.talk:before {
+    margin-left: -0.3rem;
+    margin-right: 0;
+  }
+  .attr {
+    width: 4rem;
+  }
   .iden > div {
     display: block;
   }