better design @chat

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;
 
-}
+}

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;}
+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;}

src/Yavsc/wwwroot/js/chat.js

@@ -104,7 +104,7 @@ window.ChatHubHandler = (function ($) {
 
       // eslint-disable-next-line no-warning-comments
       // TODO userpart userjoin deniedpv
-      $('<li></li>').append(tag + ': ' + targetid + ': ').append(message.Value).addClass(tag).appendTo(notifications);
+      $('<li></li>').append(tag + ': ' + targetid + ': ').append(message).addClass(tag).appendTo(notifications);
     };
     var setChanInfo = function (chanInfo) {
       var chanId = 'r' + chanInfo.Name;

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=$('<ul></ul>').addClass('userlist');var notifications=$('<ul></ul>').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=$('<a>'+htmlEncode(name)+'</a>').click(function(){buildPv(name);});var $li=$('<li class="discussion"></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('<li class="pv"><strong>'+htmlEncode(name)+'</strong>: '+htmlEncode(message)+'</li>');};chat.client.notifyRoom=function(tag,targetid,message){if(tag==='connected'||tag==='reconnected'){onUserConnected(targetid,message);return;}else if(tag==='disconnected'){onUserDisconnected(targetid,message);return;}
 $('<li></li>').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;}
-$('<li></li>').append(tag+': '+targetid+': ').append(message.Value).addClass(tag).appendTo(notifications);};var setChanInfo=function(chanInfo){var chanId='r'+chanInfo.Name;$('#tv_'+chanId).replaceWith(chanInfo.Topic);}
+$('<li></li>').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);});}