From 66fe0e3fb985cb1c5751302236534a89cccdf5f8 Mon Sep 17 00:00:00 2001 From: Paul Schneider Date: Sat, 15 Jun 2019 17:01:51 +0100 Subject: [PATCH] better design @chat --- src/Yavsc/wwwroot/css/main/site.css | 18 +++++++++++------- src/Yavsc/wwwroot/css/main/site.min.css | 8 ++++---- src/Yavsc/wwwroot/js/chat.js | 2 +- src/Yavsc/wwwroot/js/chat.min.js | 2 +- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/Yavsc/wwwroot/css/main/site.css b/src/Yavsc/wwwroot/css/main/site.css index 500eba61..08d7d760 100644 --- a/src/Yavsc/wwwroot/css/main/site.css +++ b/src/Yavsc/wwwroot/css/main/site.css @@ -173,10 +173,6 @@ a:hover { border: solid #306cc6 1px; } -#discussion { - float: left; -} - /* Set widths on the form inputs since otherwise they're 100% wide */ @@ -401,10 +397,12 @@ h6 { div.chatbar { border-bottom: rgb(24, 24, 167) solid 2px; + display: flex; + justify-content: space-between; } div.chatctl { - float: right; + display: inline; } div.roomlist { @@ -413,8 +411,14 @@ div.roomlist { div.chatlist { color: #008; background-color: rgb(231, 229, 199); - + overflow: auto; + max-height: 16em; } + +.chatlist { + max-height: 100%; +} + #chatview ul.notifs li.error { color: #a94442; background-color: white; @@ -423,4 +427,4 @@ div.chatlist { border-bottom-style: ridge; border-bottom-width: 1pt; -} \ No newline at end of file +} diff --git a/src/Yavsc/wwwroot/css/main/site.min.css b/src/Yavsc/wwwroot/css/main/site.min.css index ae7e70b0..46b70f1f 100644 --- a/src/Yavsc/wwwroot/css/main/site.min.css +++ b/src/Yavsc/wwwroot/css/main/site.min.css @@ -6,7 +6,7 @@ tr.hiddenpost{max-height:2em;background-color:#888;font-size:smaller;} tr.hiddenpost img{max-height:3em;} a.bloglink{font-weight:bold;text-shadow:0px 0px 8px black;} a{font-weight:900;} -a:active,a:hover{outline:0;}.panel{display:inline-block;padding:1em;margin:1em;color:#0d5175;background-color:inherit;border:solid#306cc6 1px;}#discussion{float:left;} +a:active,a:hover{outline:0;}.panel{display:inline-block;padding:1em;margin:1em;color:#0d5175;background-color:inherit;border:solid#306cc6 1px;} input,select,button,textarea{background-color:#bbb;color:#000;}.jumbotron{padding:.5em;}.carousel.item.carousel-caption-s{-webkit-transition:-webkit-transform 2s background-color 2s color 2s;-moz-transition:transform 2s background-color 2s color 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0);}.carousel.item.active.carousel-caption-s{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}.disabled{color:#999;background-color:#555;}.smallphoto{max-height:4em;}.carousel-caption-s p{-webkit-text-shadow:3px 3px 7px rgb(0,0,0);animation:mymove 4s infinite;font-family:"Arial";font-weight:800;font-size:x-large;text-shadow:3px 3px 7px rgb(0,0,60);color:#fff;background-color:rgba(94,24,194,.15);border-radius:.5em;}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;min-height:16em;overflow:auto;}.carousel-inner.item{padding-left:15%;padding-right:15%;}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em;} main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em;}@media(max-width:767px){main.container{padding-right:.3em;padding-left:.3em;margin-left:.3em;margin-right:.3em;}.carousel-caption-s p{margin:0.2em;padding:.2em;}}@-webkit-keyframes mymove{from{text-decoration-color:red;} 50%{text-decoration-color:blue;} @@ -21,7 +21,7 @@ body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;} p{font-size:20px;} p.small{font-size:16px;}.smalltext{font-size:10px;} h1,h2,h3,h4,h5,h6{font-family:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;} -div.chatbar{border-bottom:rgb(24,24,167)solid 2px;} -div.chatctl{float:right;} +div.chatbar{border-bottom:rgb(24,24,167)solid 2px;display:flex;justify-content:space-between;} +div.chatctl{display:inline;} div.roomlist{display:inline-block;} -div.chatlist{color:#008;background-color:rgb(231,229,199);}#chatview ul.notifs li.error{color:#a94442;background-color:white;font-style:italic;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;border-bottom-style:ridge;border-bottom-width:1pt;} \ No newline at end of file +div.chatlist{color:#008;background-color:rgb(231,229,199);overflow:auto;max-height:16em;}.chatlist{max-height:100%;}#chatview ul.notifs li.error{color:#a94442;background-color:white;font-style:italic;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;border-bottom-style:ridge;border-bottom-width:1pt;} \ No newline at end of file diff --git a/src/Yavsc/wwwroot/js/chat.js b/src/Yavsc/wwwroot/js/chat.js index b7108a50..1bab791b 100644 --- a/src/Yavsc/wwwroot/js/chat.js +++ b/src/Yavsc/wwwroot/js/chat.js @@ -104,7 +104,7 @@ window.ChatHubHandler = (function ($) { // eslint-disable-next-line no-warning-comments // TODO userpart userjoin deniedpv - $('
  • ').append(tag + ': ' + targetid + ': ').append(message.Value).addClass(tag).appendTo(notifications); + $('
  • ').append(tag + ': ' + targetid + ': ').append(message).addClass(tag).appendTo(notifications); }; var setChanInfo = function (chanInfo) { var chanId = 'r' + chanInfo.Name; diff --git a/src/Yavsc/wwwroot/js/chat.min.js b/src/Yavsc/wwwroot/js/chat.min.js index 7651f0aa..70304088 100644 --- a/src/Yavsc/wwwroot/js/chat.min.js +++ b/src/Yavsc/wwwroot/js/chat.min.js @@ -2,7 +2,7 @@ window.ChatHubHandler=(function($){$.fn.filterByData=function(prop,val){return this.filter(function(){return $(this).data(prop)==val;});};var ChatView=function($view,full){if(!full)throw new Error('not implemented');var chans=[];var userlist=[];var frontChanId;var ulist=$('').addClass('userlist');var notifications=$('').addClass('notifs');ulist.appendTo($view);notifications.appendTo($view);var onUserDisconnected=function(uname){$('#u'+uname).remove();};var onUserConnected=function(username){addChatUser(username);};var chat=$.connection.chatHub;chat.client.addMessage=function(name,room,message){var $userTag=$(''+htmlEncode(name)+'').click(function(){buildPv(name);});var $li=$('
  • ');$userTag.appendTo($li);$li.append(' '+htmlEncode(message));$li.appendTo($('#r'+room));};chat.client.addPV=function(name,message){if(!$('#mute').prop('checked')){audio.play();} buildPv(name);$('#u'+name).append('
  • '+htmlEncode(name)+': '+htmlEncode(message)+'
    • ');};chat.client.notifyRoom=function(tag,targetid,message){if(tag==='connected'||tag==='reconnected'){onUserConnected(targetid,message);return;}else if(tag==='disconnected'){onUserDisconnected(targetid,message);return;} $('
  • ').addClass(tag).append(tag+': '+targetid+' ').append(message).addClass(tag).appendTo($('#room_'+targetid));};chat.client.notifyUser=function(tag,targetid,message){if(tag==='connected'||tag==='reconnected'){onUserConnected(targetid,message);return;}else if(tag==='disconnected'){onUserDisconnected(targetid,message);return;} -$('
  • ').append(tag+': '+targetid+': ').append(message.Value).addClass(tag).appendTo(notifications);};var setChanInfo=function(chanInfo){var chanId='r'+chanInfo.Name;$('#tv_'+chanId).replaceWith(chanInfo.Topic);} +$('
  • ').append(tag+': '+targetid+': ').append(message).addClass(tag).appendTo(notifications);};var setChanInfo=function(chanInfo){var chanId='r'+chanInfo.Name;$('#tv_'+chanId).replaceWith(chanInfo.Topic);} var setActiveChan=function(chanId){if(frontChanId!=chanId){if(frontChanId){$('#sel_'+frontChanId).addClass('btn-primary');$('#v'+frontChanId).addClass('hidden');} frontChanId=chanId;$('#sel_'+chanId).removeClass('btn-primary');$('#v'+chanId).removeClass('hidden');$('#inp_'+chanId).focus();}};function join(roomName) {chat.server.join(roomName).done(function(chatInfo){setChanInfo(chatInfo);setActiveChan('r'+chatInfo.Name);});}