fix #4

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

@@ -143,8 +143,9 @@ function PatchSVG()
         $("body").css({'background-color': "#EDF9FF"});
     }
 
-//    document.addEventListener('touchmove',function(e) {e.preventDefault();},false);
+    document.addEventListener('touchmove',function(e) {e.preventDefault();},false);
     $svg.attr({preserveAspectRatio:"xMidYMid meet",width:"100%",height:"100%"});
+
 }
 
 function sendSawOkey()
@@ -233,7 +234,8 @@ function onRulesClose(evt) {
 
 function initEditorsSafari()
 {
-    if (isSafari()) {
+    if (isSafari()) 
+    {
         $("#edit").css({position:"relative"});
         $("#onlineChatEdit").css({position:"relative"});
         $(window).on("resize", manualForeignObjectPositioning);
@@ -367,6 +369,64 @@ function showRevealHand(o) {
           [ "Right", "Center", "Left", "Me" ]
          ];
 
+globalShiftX = 0;
+
 
 appRun();
 
+
+function relayout()
+{
+
+    var svgWidth = $svg[0].viewBox.baseVal.width,
+        svgHeight = $svg[0].viewBox.baseVal.height;
+
+    var sizeX = svgWidth / innerWidth,
+        sizeY = svgHeight / innerHeight,
+        size = Math.max(sizeX, sizeY) || 1;
+
+    var realX, realY, scale, shiftX, shiftY;
+
+    realX = 1/size * svgWidth;
+    realY = 1/size * svgHeight;
+
+    if (sizeX < sizeY) {
+        //console.log("Left and Right White Spaces. Do stretch the Width "+svgWidth);
+
+        shiftY = 0;
+        shiftX = (innerWidth - realX) / 2;
+
+        globalShiftX = shiftX - 10;
+
+        $("#Chat").attr({width:globalShiftX+206});
+        $("#Right-Bar").attr({width:215+globalShiftX});
+        $("#Clip-Path-Right").attr({width:globalShiftX+206});
+
+        $("#Online-Users").attr({transform:"translate("+(-globalShiftX+10)+" 20)"});
+        $("#Facebook-Login").attr({transform:"translate("+(parseInt($("#Right-Bar")[0].getAttribute("x"))+206+globalShiftX-140)+" 20)"});
+
+        $("#Online-List").attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:globalShiftX+206});
+        $("#Left-Bar").attr({x:0,transform:"translate("+(-globalShiftX)+" 0)",width:215+globalShiftX});
+        $("#Clip-Path-Left").attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:globalShiftX+206});
+
+        onlineHover();
+        mouseWheelHandler({'detail':0,'wheelDelta':0});
+        onlineHoverOut();
+
+    } else  {
+//      console.log("Top and Bottom White Spaces. Do reorient, or adopt the Height.");
+        shiftX = 0;
+        shiftY = (innerHeight - realY) / 2;
+
+        // do nothing with Vertical Layout
+        // possible changing orientation
+    }
+
+}
+
+if (adaptiveDesign())
+{
+    $(window).on("orientationchange", relayout);
+    $(window).on("resize", relayout);
+    relayout();
+}

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

@@ -40,7 +40,7 @@ function mouseWheelHandler(e) {
     var scroll = parseFloat(scroll_dy) + parseFloat(ori);
     var selectedBar = leftActive ? (currentChat == null ? "Online-List" : currentChat) : "Chat";
     var selectedClip = leftActive ? (currentChat == null ? "Clip-Path-Left" : "Clip-Path-Left-Chat") : "Clip-Path-Right";
-    var selectedBarShift = leftActive ? 0 : 857;
+    var selectedBarShift = leftActive ? -globalShiftX : 857;
     var limit = parseFloat(document.getElementById(selectedBar).getBBox().height) - 400;
     if (scroll > 5) scroll = 5;
     if (scroll < -limit) scroll = -limit;
@@ -61,7 +61,7 @@ function chatMessage(chatName, id, me, string) {
     var chatElement = document.getElementById(chatName);
     if (null == chatElement) createChat(chatName);
     var translate_y = parseFloat(document.getElementById(chatName).getBBox().height);
-    var x2 = 205;
+    var x2 = 205; //$("#"+container).width()+25;
     var textElement = chatText(container,id,me,string);
     var dy = translate_y == 0 ? 0 : translate_y + 10;
     var html = "<g xmlns='http://www.w3.org/2000/svg' " + 
@@ -71,6 +71,7 @@ function chatMessage(chatName, id, me, string) {
     document.getElementById(chatName).appendChild(messageElement);
     create_multiline(textElement);
     var y2 = textElement.getBBox().height + 5;
+    var rec = "<rect xmlns:data='"+container+"' xmlns='http://www.w3.org/2000/svg' >";
     var box = "<path xmlns:data='"+container+"' xmlns='http://www.w3.org/2000/svg' d='M"+x1+","+y1+
                 " L"+x2+","+y1+
             ((me == document.user) ?
@@ -143,7 +144,7 @@ function addOnlineUser(name,full_name,score,insertMode) {
     var y = (insertMode == "insertTop") ? 0 : listElement.getBBox().height;
     var html = '<g xmlns="http://www.w3.org/2000/svg" height="60" transform="translate(0, '+y+')">' +
             '<g xmlns:data="'+name+'" fill="#DBEBED" '+eventsColor+'>' +
-            '    <rect cursor="pointer" xmlns:data="'+name+'" fill="#DBEBED" id="'+name+'" x="10" y="0" width="196" height="48" ' +'>'+full_name+'</rect></g>' +
+            '    <rect cursor="pointer" xmlns:data="'+name+'" fill="#DBEBED" id="'+name+'" x="10" y="0" width="'+(adaptiveDesign()?"100%":196)+'" height="48" ' +'>'+full_name+'</rect></g>' +
             '<text xmlns:data="'+name+'" '+eventsColor+' '+
             'font-family="Exo 2" font-size="18" cursor="pointer" font-weight="normal" line-spacing="18"'+
             ' fill="#3B5998">' +
@@ -261,9 +262,9 @@ function initChat()
     page.insertBefore(svg(onlineList),settings);
     page.insertBefore(svg(onlineChat),settings);
 
-    var clipPath1 = svg('<clipPath id="myClip1"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath>');
-    var clipPath2 = svg('<clipPath id="myClip2"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath>');
-    var clipPath3 = svg('<clipPath id="myClip3"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></clipPath>');
+    var clipPath1 = svg('<clipPath id="myClip1"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left" x="0" y="0" width="'+216+globalShiftX+'" height="400"/></clipPath>');
+    var clipPath2 = svg('<clipPath id="myClip2"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Right" x="0" y="0" width="'+216+globalShiftX+'" height="400"/></clipPath>');
+    var clipPath3 = svg('<clipPath id="myClip3"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left-Chat" x="0" y="0" width="'+216+globalShiftX+'" height="400"/></clipPath>');
 
     document.getElementsByTagName('defs').item(0).appendChild(clipPath1);
     document.getElementsByTagName('defs').item(0).appendChild(clipPath2);

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

@@ -1,6 +1,8 @@
 
 function DragScope(scope) {
 
+    var currentDragTarget = null
+
     function calcShift()
     {
         var svgWidth = $svg[0].viewBox.baseVal.width;
@@ -9,9 +11,11 @@ function DragScope(scope) {
         sizeX = svgWidth / innerWidth;
         sizeY = svgHeight / innerHeight;
         size = Math.max(sizeX, sizeY) || 1;
+
     }
 
-    var currentDragTarget = null
+    $(window).on("resize", calcShift);
+    $(window).on("orientationchange", calcShift);
 
     function Draggable(root, options)
     {
@@ -37,9 +41,6 @@ function DragScope(scope) {
 
     calcShift();
 
-    $(window).on("resize", calcShift);
-    $(window).on("orientationchange", calcShift);
-
     $.inherit(Draggable, scope.Controller);
 
     $.extend(Draggable.prototype, {

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

@@ -3,6 +3,7 @@ function StartApp() { $.load(scope.CARD_SOURCE, PostLoad); }
 
 function PostLoad()
 {
+
     rightFlag = 1;
     leftFlag = 1;
 
@@ -488,4 +489,6 @@ function SetupRightMenu()
     $("#Right-Menu").trigger("click");
     $("#Left-Menu").trigger("click");
 
+//    relayout();
+
 }

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

@@ -18,6 +18,8 @@ var scope = {
     version: 2306201401
 };
 
+function adaptiveDesign() { return localStorage.getItem("adaptiveDesign"); }
+
 var $ = function(_undefind)
 {
     var isIE = window.navigator.msPointerEnabled