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

stylable nodes,hops info, minor esthetics

Browse Source
This commit is contained in:
dennisdebel 2015-05-21 14:58:00 +02:00
parent 611734331f
commit bc432d3dbc
3 changed files with 27 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/index.html
View File

@ -50,10 +50,9 @@
</div> </div>
<div id="overview-page"> <div id="overview-page"><br>
<div class="messages"> <div class="messages">
<ul id="inbox"></ul> <ul id="inbox"></ul>
lol
<ul id="outbox"></ul> <ul id="outbox"></ul>
</div> </div>
<div id="input-footer"> <div id="input-footer">

4
web/main.js
View File

@ -203,8 +203,8 @@ var localStorageArray = [];
'<div class="date-sender">On ' + datereadable + '<div class="date-sender">On ' + datereadable +
' <b>' + orderStorage[i].user +'</b> wrote:</div>' + ' <b>' + orderStorage[i].user +'</b> wrote:</div>' +
'<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' + //parseEmoticons is found in emoji.js '<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' + //parseEmoticons is found in emoji.js
' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].alias + '</span>' + ' <div class="nodehops"><div class="node '+orderStorage[i].node+'">from '+orderStorage[i].alias + '</div>' +
' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>'; ' <div class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</div></div></div></li>';
} }
document.getElementById( 'inbox' ).innerHTML = contentString; document.getElementById( 'inbox' ).innerHTML = contentString;
} }

56
web/style.css
View File

@ -66,7 +66,7 @@ body{
image-rendering: optimize-contrast; image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
} }
}
img.photo-message{ img.photo-message{
/* disable anti aliasing */ /* disable anti aliasing */
@ -81,6 +81,7 @@ img.photo-message{
} }
.photo-message{ /* rounded corner imgs on desktop...*/ .photo-message{ /* rounded corner imgs on desktop...*/
padding:30px;
width:100%; width:100%;
height:100%; height:100%;
overflow:hidden; overflow:hidden;
@ -98,11 +99,20 @@ img.photo-message{
border-bottom-left-radius:123px; border-bottom-left-radius:123px;
} }
}
img.emo { img.emo {
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
p.text-message{
padding: 30px;
padding-top: 40px;
}
#input-footer{ #input-footer{
position: fixed; position: fixed;
top:0px; top:0px;
@ -410,16 +420,13 @@ hr{
background:#fff; background:#fff;
} }
.nodehops{
.node {
font-size:10px;
margin-top:-30px;
display: none;
position: absolute; position: absolute;
word-wrap:break-word; float: right;
overflow: visible; right:20px;
text-align: right;
padding: 4px;
margin-top:-60px;
-moz-box-shadow:0 0 23px #bbb; -moz-box-shadow:0 0 23px #bbb;
-webkit-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb;
box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb;
@ -436,41 +443,26 @@ hr{
border-bottom-right-radius:123px; border-bottom-right-radius:123px;
border-bottom-left-radius:123px; border-bottom-left-radius:123px;
background:#fff; background:#fff;
} }
.hops {
display: none; .node, .hops {
font-size:10px; font-size:10px;
//padding: 10px; display: inline-block;
margin-top:-30px;
position: absolute;
word-wrap:break-word; word-wrap:break-word;
overflow: visible; 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 { .message-text {
font-size: 25px; font-size: 25px;
} }
.date-sender { .date-sender {
position: absolute; position: absolute;
font-size: 15px; font-size: 15px;
padding: 4px;
word-wrap:break-word; word-wrap:break-word;
overflow: visible; overflow: visible;
-moz-box-shadow:0 0 23px #bbb; -moz-box-shadow:0 0 23px #bbb;