rounded images on mobile and stylable text messages

web/index.html

@@ -17,7 +17,6 @@
     <form id="message-form" action="" accept-charset="utf-8">
       <textarea id="name" rows="1" placeholder="Your Name"></textarea>
       <textarea id="message" rows="2"  placeholder="Your Message"></textarea>
-      <!-- removed photo button from here, otherwise triggers sending (empty) messages... TO FIX-->
       <br>
       <input type="submit" class="send-button" value="Send">
     </form>
@@ -54,7 +53,7 @@
   <div id="overview-page">
     <div class="messages">
       <ul id="inbox"></ul>
-
+lol
       <ul id="outbox"></ul>
     </div>
     <div id="input-footer">

web/main.js

@@ -80,7 +80,7 @@ function onSubmitMessage(){
   if ( !namm || namm === "" ) {
    namm = "anonymous";
   }
-  addOutboxItem( namm, msg );
+  addOutboxItem( namm, "<p class='text-message'>"+msg+"</p>" );
   return false;
 }
 
@@ -89,6 +89,7 @@ function addOutboxItem( namm, message ){
   var newMsgs = {};
   var ddata = new Date().getTime();
   var alias = ownAlias;
+  
   var contento = {
     "time" : ddata,
     "message" : message,

web/style.css

@@ -15,8 +15,30 @@ body{
 
 /* resize images on mobile */
 @media all and (max-width: 768px) {
+
+  .photo-message{ /* rounded corner imgs...*/
+    width:100%;
+    height:100%;
+    overflow:hidden;
+     line-height: 0;
+    -webkit-border-top-left-radius:123px;
+    -webkit-border-top-right-radius:123px;
+    -webkit-border-bottom-right-radius:123px;
+    -webkit-border-bottom-left-radius:123px;
+    -moz-border-radius-bottomright:123px;
+    -moz-border-radius-bottomleft:123px;
+    -moz-border-top-left-radius:123px;
+    -moz-border-top-right-radius:123px;
+    border-top-left-radius:123px;
+    border-top-right-radius:123px;
+    border-bottom-right-radius:123px;
+    border-bottom-left-radius:123px;
+  }
+
   img.photo-message{
     width:100%;
+    line-height: 0;
+    vertical-align:middle; /* otherwise produces bottom border the size of the body 'line-height' */
     /* disable anti aliasing */
     image-rendering: optimizeSpeed;
     image-rendering: -moz-crisp-edges;
@@ -28,7 +50,7 @@ body{
   }
 }
 
-/* resize images on mobile */
+/* resize images on desktop */
 @media all and (min-width: 768px) {
   img.photo-message{
     width:50%;
@@ -55,8 +77,27 @@ img.photo-message{
   image-rendering: pixelated;
   image-rendering: optimize-contrast;
   -ms-interpolation-mode: nearest-neighbor;
+
 }
 
+.photo-message{ /* rounded corner imgs on desktop...*/
+    width:100%;
+    height:100%;
+    overflow:hidden;
+    -webkit-border-top-left-radius:123px;
+    -webkit-border-top-right-radius:123px;
+    -webkit-border-bottom-right-radius:123px;
+    -webkit-border-bottom-left-radius:123px;
+    -moz-border-radius-bottomright:123px;
+    -moz-border-radius-bottomleft:123px;
+    -moz-border-top-left-radius:123px;
+    -moz-border-top-right-radius:123px;
+    border-top-left-radius:123px;
+    border-top-right-radius:123px;
+    border-bottom-right-radius:123px;
+    border-bottom-left-radius:123px;
+  }
+
 img.emo {
   width: 22px;
   height: 22px;
@@ -254,8 +295,8 @@ margin:10px;
 
 }
 
-#photo-name{
+#photo-name{ /* text field */
-    -webkit-appearance: none;
+  -webkit-appearance: none;
   -moz-appearance: none;
 
   display: block;
@@ -327,12 +368,14 @@ hr{
 
 .messages ul{
   padding:0px;
+  margin: 0;
 }
 .messages li{
   list-style: none;
+  margin: 0;
 }
 .messages .message-block {
-  padding:30px;
+  margin:30px;
   word-wrap:break-word;
   overflow: visible;
   -moz-box-shadow:0 0 23px #bbb;
@@ -353,16 +396,16 @@ hr{
   background:#fff;
 }
 
+
+
 .photoBox {
-  width: 98%;
+  width: 100%;
   margin: 0 auto;
   line-height: 40px;
   display: none;
   position: absolute;
   background-color:#fff;
   z-index:1002;
-  overflow: auto;
-  width: 100%;
   overflow: visible;
   background:#fff;
 }
@@ -370,14 +413,82 @@ hr{
 
 
 
-.node, .hops {
+.node {
   font-size:10px;
+  margin-top:-30px;
+  display: none;
+  position: absolute;
+  word-wrap:break-word;
+  overflow: visible;
+  -moz-box-shadow:0 0 23px #bbb;
+  -webkit-box-shadow:0 0 23px #bbb;
+  box-shadow:0 0 23px #bbb;
+  -webkit-border-top-left-radius:123px;
+  -webkit-border-top-right-radius:123px;
+  -webkit-border-bottom-right-radius:123px;
+  -webkit-border-bottom-left-radius:123px;
+  -moz-border-radius-bottomright:123px;
+  -moz-border-radius-bottomleft:123px;
+  -moz-border-top-left-radius:123px;
+  -moz-border-top-right-radius:123px;
+  border-top-left-radius:123px;
+  border-top-right-radius:123px;
+  border-bottom-right-radius:123px;
+  border-bottom-left-radius:123px;
+  background:#fff;
 }
+.hops {
+    display: none;
+  font-size:10px;
+  //padding: 10px;
+  margin-top:-30px;
+  position: absolute;
+  word-wrap:break-word;
+  overflow: visible;
+  -moz-box-shadow:0 0 23px #bbb;
+  -webkit-box-shadow:0 0 23px #bbb;
+  box-shadow:0 0 23px #bbb;
+  -webkit-border-top-left-radius:123px;
+  -webkit-border-top-right-radius:123px;
+  -webkit-border-bottom-right-radius:123px;
+  -webkit-border-bottom-left-radius:123px;
+  -moz-border-radius-bottomright:123px;
+  -moz-border-radius-bottomleft:123px;
+  -moz-border-top-left-radius:123px;
+  -moz-border-top-right-radius:123px;
+  border-top-left-radius:123px;
+  border-top-right-radius:123px;
+  border-bottom-right-radius:123px;
+  border-bottom-left-radius:123px;
+  background:#fff;
+}
+
+
 .message-text {
   font-size: 25px;
 }
 .date-sender {
+  position: absolute;
   font-size: 15px;
+
+  word-wrap:break-word;
+  overflow: visible;
+  -moz-box-shadow:0 0 23px #bbb;
+  -webkit-box-shadow:0 0 23px #bbb;
+  box-shadow:0 0 23px #bbb;
+  -webkit-border-top-left-radius:123px;
+  -webkit-border-top-right-radius:123px;
+  -webkit-border-bottom-right-radius:123px;
+  -webkit-border-bottom-left-radius:123px;
+  -moz-border-radius-bottomright:123px;
+  -moz-border-radius-bottomleft:123px;
+  -moz-border-top-left-radius:123px;
+  -moz-border-top-right-radius:123px;
+  border-top-left-radius:123px;
+  border-top-right-radius:123px;
+  border-bottom-right-radius:123px;
+  border-bottom-left-radius:123px;
+  background:#fff;
 }
 #outbox{
   display:none;