finalize with layout manager

apps/web/priv/static/app/Kakaranet-Scene.svg

@@ -536,13 +536,13 @@
         </g>
     </g>
 
-    <foreignObject id="GameChatEditor" x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
+    <foreignObject id="GameChatEditor" x="864" y="504" width="196" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
         <div xmlns:data="Chat" id="edit" contentEditable="true"
           style="min-height:21px;padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
         xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
     </foreignObject>
 
-    <foreignObject id="OnlineChatEditor" x="10" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
+    <foreignObject id="OnlineChatEditor" x="10" y="504" width="196" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
         <div xmlns:data="Chat+xxx" contentEditable="true" id="onlineChatEdit"
           style="min-height:21px;padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
          xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>

apps/web/priv/static/app/js/bootloader.js

@@ -362,9 +362,9 @@ function manualForeignObjectPositioning()
         shiftY = 0;
         shiftX = (innerWidth - realX) / 2;
 
-        globalShiftX = shiftX > 30 ? shiftX - 20 : 0;
+        globalShiftX = adaptiveDesign() ? (shiftX > 30 ? shiftX - 20 : 0) : 0;
         barwidth = scope.fixedChatBars ? 0 : globalShiftX;
-        rightPosition = svgWidth+globalShiftX-(barwidth+206);
+        rightPosition = adaptiveDesign() ? (svgWidth+globalShiftX-(barwidth+206)) : 866 ;
 
     } else  {
 //      console.log("Top and Bottom White Spaces. Do reorient, or adopt the Height.");
@@ -374,13 +374,13 @@ function manualForeignObjectPositioning()
 
     $("#GameChatEditor").attr({x: rightPosition * realX / svgWidth + shiftX,
                                y: 504 * realY / svgHeight + shiftY,
-                               width: 198 * realX / svgWidth,
+                               width: 196 * realX / svgWidth,
                                height: 120 * realY / svgHeight});
 
-    $("#OnlineChatEditor").attr({x: 7 * realX / svgWidth + shiftX - 
+    $("#OnlineChatEditor").attr({x: 10 * realX / svgWidth + shiftX - 
                                    globalShiftX * realX / svgWidth,
                                y: 504 * realY / svgHeight + shiftY,
-                               width: 198 * realX / svgWidth,
+                               width: 196 * realX / svgWidth,
                                height: 120 * realY / svgHeight});
 }
 
@@ -412,16 +412,16 @@ function relayout()
         globalRightPosition = rightPosition;
 
 //        $("#Chat")           .attr({x:0,transform:"translate("+(rightPosition)+" 0)",width:barwidth+206});
-        $("#Right-Bar")      .attr({x:0,transform:"translate("+(rightPosition)+" 0)",width:barwidth+218});
-        $("#Clip-Path-Right").attr({x:0,transform:"translate("+(rightPosition)+" 0)",width:barwidth+206});
+        $("#Right-Bar")      .attr({x:0,transform:"translate("+(rightPosition)+" 0)",width:barwidth+216});
+        $("#Clip-Path-Right").attr({x:0,transform:"translate("+(rightPosition)+" 0)",width:barwidth+216});
 
         $("#Online-Users").attr({transform:"translate("+(-globalShiftX+10)+" 20)"});
         $("#Facebook-Login").attr({transform:"translate("+(rightPosition+(barwidth+216)-150)+" 20)"});
 
 //        $("#Online-List").attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:barwidth+206});
         $("#Left-Bar")           .attr({x:0,transform:"translate("+(-globalShiftX)+" 0)",  width:barwidth+216});
-        $("#Clip-Path-Left")     .attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:barwidth+206});
-        $("#Clip-Path-Left-Chat").attr({x:0,transform:"translate("+(-globalShiftX)+" 0)",width:barwidth+206});
+        $("#Clip-Path-Left")     .attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:barwidth+216});
+        $("#Clip-Path-Left-Chat").attr({x:0,transform:"translate("+(-globalShiftX)+" 0)",width:barwidth+216});
 
         onlineHover();
         mouseWheelHandler({'detail':0,'wheelDelta':0});
@@ -432,8 +432,8 @@ function relayout()
         barHoverOut();
         
         if (!isSafari()) {
-            $("#GameChatEditor").attr({x: 7+rightPosition});
-            $("#OnlineChatEditor").attr({x: 7-globalShiftX});
+            $("#GameChatEditor").attr({x: 10+rightPosition});
+            $("#OnlineChatEditor").attr({x: 10-globalShiftX});
         }
 
     } else  {

apps/web/priv/static/app/js/chat.js

@@ -54,8 +54,9 @@ function mouseWheelHandler(e) {
 
 function chatMessage(chatName, id, me, string) {
     var i=0;
+    var d=10;
     var colors=['#FDFDFD','#DFF1F4'];
-    var x1 = 7;
+    var x1 = d;
     var y1 = 0;
     var container = chatName == "Chat" ? "Right-Bar" : "Left-Bar";
     var hover = chatName == "Chat" ? "barHover" : "onlineHover";
@@ -66,7 +67,7 @@ function chatMessage(chatName, id, me, string) {
     var x2 = 206; //$("#"+container).width();
     var textElement = chatText(container,id,me,string);
 //    var textElement = chatText(chatName,id,me,string);
-    var dy = translate_y == 0 ? 0 : translate_y + 10;
+    var dy = translate_y == 0 ? 0 : translate_y + d;
     var html = "<g xmlns='http://www.w3.org/2000/svg' " + 
         "id='Message-"+id+"' transform='translate("+
          0
@@ -80,13 +81,13 @@ function chatMessage(chatName, id, me, string) {
     var box = "<path xmlns:data='"+container+"' xmlns='http://www.w3.org/2000/svg' d='M"+x1+","+y1+
                 " L"+x2+","+y1+
             ((me == document.user) ?
-                (" L"+x2+","+parseFloat(y2-7)+
-                " L"+parseFloat(x2+7)+","+y2+
+                (" L"+x2+","+parseFloat(y2-d)+
+                " L"+parseFloat(x2+d)+","+y2+
                 " L"+x1+","+y2)
             :
                 (" L"+x2+","+y2+
                 " L"+0+","+y2+
-                " L"+x1+","+parseFloat(y2-7)))
+                " L"+x1+","+parseFloat(y2-d)))
         + " L"+x1+","+y1+"' fill='"+colors[me==document.user?1:0]+"'></path>";
     var boxElement = svg(box);
 //    textElement.setAttribute("xmlns:data",container);