rra/meshenger
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

rounded images on mobile and stylable text messages

Browse Source
This commit is contained in:
dennisdebel 2015-05-21 14:18:17 +02:00
parent 3658d3cf9e
commit 611734331f
3 changed files with 122 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/index.html
View File

@ -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">

3
web/main.js
View File

@ -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,

127
web/style.css
View File

@ -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{
-webkit-appearance: none;
#photo-name{ /* text field */
-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;