From af3a5da71316c355de04e64a5a34d4fc1856220e Mon Sep 17 00:00:00 2001 From: lassulus Date: Wed, 6 Nov 2013 19:07:32 +0100 Subject: webchat: border around chatbox --- webchat/public/reset.css | 1 + 1 file changed, 1 insertion(+) (limited to 'webchat/public') diff --git a/webchat/public/reset.css b/webchat/public/reset.css index 17e10567..c291544d 100644 --- a/webchat/public/reset.css +++ b/webchat/public/reset.css @@ -49,6 +49,7 @@ q:before, q:after { border-spacing: 0; background-color: black; color: white; + border: 5px solid black; } .chat_from { color:grey; -- cgit v1.2.3 From aec1b767fd0223029332b14e5834c555efc345ff Mon Sep 17 00:00:00 2001 From: lassulus Date: Wed, 6 Nov 2013 20:24:26 +0100 Subject: webchat: better layout --- webchat/public/client.js | 2 +- webchat/public/reset.css | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) (limited to 'webchat/public') diff --git a/webchat/public/client.js b/webchat/public/client.js index 95b67ad0..e13ab1f7 100644 --- a/webchat/public/client.js +++ b/webchat/public/client.js @@ -26,7 +26,7 @@ $(function connect() { var safe_message = $('
').text(object.message).html(); safe_message = replaceURLWithHTMLLinks(safe_message); var safe_from = $('
').text(object.from).html(); - $('#chatbox').append(''+safe_from+''+safe_message+''); + $(''+(new Date).getHours() + ':' + (new Date).getMinutes() + ':' + (new Date).getSeconds()+''+safe_from+''+safe_message+'').insertBefore('#foot'); } catch (error) { console.log(error); diff --git a/webchat/public/reset.css b/webchat/public/reset.css index c291544d..2b67f153 100644 --- a/webchat/public/reset.css +++ b/webchat/public/reset.css @@ -21,6 +21,7 @@ time, mark, audio, video { border: 0; font-size: 100%; font: inherit; + font-family: monospace; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ @@ -50,11 +51,21 @@ q:before, q:after { background-color: black; color: white; border: 5px solid black; + width: 100%; + height:100%; + opacity: 0.8; +} +#input{ + width: 100%; + background-color: black; + border: 1px solid black; + color: white; } .chat_from { color:grey; font-weight: bold; text-align: right; + font-size:12px; } .chat_from:after { content: ":"; @@ -68,6 +79,21 @@ q:before, q:after { left: 0; right: 0; } +#chatter { + width: 75%; +} +.chat_date,.chat_from,.chat_msg{ +} +.chat_msg{ + width: 100%; +} a { color: red; } +.chat_date { + color: green; +} +.chat_date:after { + content: ""; + padding-right: 4px; +} \ No newline at end of file -- cgit v1.2.3 From 2f0f23ec0e54aaa0dc7a9c28217f7daca72ea455 Mon Sep 17 00:00:00 2001 From: lassulus Date: Wed, 6 Nov 2013 21:53:51 +0100 Subject: webchat: nick and time display --- webchat/public/client.js | 29 ++++++++++++++++++++++++++++- webchat/public/reset.css | 3 +++ 2 files changed, 31 insertions(+), 1 deletion(-) (limited to 'webchat/public') diff --git a/webchat/public/client.js b/webchat/public/client.js index e13ab1f7..e7179449 100644 --- a/webchat/public/client.js +++ b/webchat/public/client.js @@ -6,9 +6,36 @@ function setMaybeNick (input) { var match = /^\/nick\s+(.+)$/.exec(input); if (match) { nick = match[1]; + $('#nick').html(nick); } } +function getCurTime () { + date = new Date; + h = date.getHours(); + if(h<10) + { + h = "0"+h; + } + m = date.getMinutes(); + if(m<10) + { + m = "0"+m; + } + s = date.getSeconds(); + if(s<10) + { + s = "0"+s; + } + return ''+h+':'+m+':'+s; +}; + +$(function updateTime () { + $('#time').html(getCurTime()); + setTimeout(updateTime,'1000'); + return true; +}); + var nick; $(function connect() { @@ -26,7 +53,7 @@ $(function connect() { var safe_message = $('
').text(object.message).html(); safe_message = replaceURLWithHTMLLinks(safe_message); var safe_from = $('
').text(object.from).html(); - $(''+(new Date).getHours() + ':' + (new Date).getMinutes() + ':' + (new Date).getSeconds()+''+safe_from+''+safe_message+'').insertBefore('#foot'); + $(''+getCurTime()+''+safe_from+''+safe_message+'').insertBefore('#foot'); } catch (error) { console.log(error); diff --git a/webchat/public/reset.css b/webchat/public/reset.css index 2b67f153..931ab453 100644 --- a/webchat/public/reset.css +++ b/webchat/public/reset.css @@ -96,4 +96,7 @@ a { .chat_date:after { content: ""; padding-right: 4px; +} +#time { + color: #00FF00; } \ No newline at end of file -- cgit v1.2.3 From 7d45af90928ef9b1b4f6f7e316eb73f9a5ae0094 Mon Sep 17 00:00:00 2001 From: lassulus Date: Thu, 7 Nov 2013 13:33:31 +0100 Subject: webchat: autoscroll --- webchat/public/client.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'webchat/public') diff --git a/webchat/public/client.js b/webchat/public/client.js index e7179449..ca71b537 100644 --- a/webchat/public/client.js +++ b/webchat/public/client.js @@ -52,8 +52,11 @@ $(function connect() { console.log(object.message); var safe_message = $('
').text(object.message).html(); safe_message = replaceURLWithHTMLLinks(safe_message); - var safe_from = $('
').text(object.from).html(); - $(''+getCurTime()+''+safe_from+''+safe_message+'').insertBefore('#foot'); + var safe_from = $('
').text(object.from).html(); + $(''+getCurTime()+''+safe_from+''+safe_message+'').insertBefore('#foot'); + + var elem = document.getElementById('chatter'); + elem.scrollTop = elem.scrollHeight; } catch (error) { console.log(error); -- cgit v1.2.3 From a8dcc8b3ce76916d3299956b64aa765cb8321482 Mon Sep 17 00:00:00 2001 From: lassulus Date: Thu, 7 Nov 2013 13:33:42 +0100 Subject: webchat: better css --- webchat/public/reset.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'webchat/public') diff --git a/webchat/public/reset.css b/webchat/public/reset.css index 931ab453..3f9ecbb9 100644 --- a/webchat/public/reset.css +++ b/webchat/public/reset.css @@ -48,16 +48,13 @@ q:before, q:after { #chatbox { border-collapse: collapse; border-spacing: 0; - background-color: black; color: white; - border: 5px solid black; width: 100%; - height:100%; - opacity: 0.8; + vertical-align: bottom; } #input{ width: 100%; - background-color: black; + background-color: #555555; border: 1px solid black; color: white; } @@ -81,6 +78,12 @@ q:before, q:after { } #chatter { width: 75%; + height: 100%; + background-color: black; + opacity: 0.8; + overflow: auto; + overflow-x: hidden; + vertical-align: bottom; } .chat_date,.chat_from,.chat_msg{ } -- cgit v1.2.3 From 9cbb93099faebd80cc44d68c818fb9e4e985950e Mon Sep 17 00:00:00 2001 From: lassulus Date: Thu, 7 Nov 2013 14:10:04 +0100 Subject: webchat: now with links --- webchat/public/reset.css | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'webchat/public') diff --git a/webchat/public/reset.css b/webchat/public/reset.css index 3f9ecbb9..c99fc307 100644 --- a/webchat/public/reset.css +++ b/webchat/public/reset.css @@ -102,4 +102,13 @@ a { } #time { color: #00FF00; +} +#sideboard { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 24%; + background-color: black; + opacity: 0.8; } \ No newline at end of file -- cgit v1.2.3 From 289c983910e86d0b6fa877724859345093da6d20 Mon Sep 17 00:00:00 2001 From: lassulus Date: Thu, 7 Nov 2013 14:27:43 +0100 Subject: webchat: links layout and fix --- webchat/public/reset.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'webchat/public') diff --git a/webchat/public/reset.css b/webchat/public/reset.css index c99fc307..65f68058 100644 --- a/webchat/public/reset.css +++ b/webchat/public/reset.css @@ -111,4 +111,9 @@ a { width: 24%; background-color: black; opacity: 0.8; +} +#links { + font-size: 14px; + position: absolute; + bottom: 5px; } \ No newline at end of file -- cgit v1.2.3