don't be ridiculous: use CSS @media

lichess-org · Mar 30, 2015 · d76ce83 · d76ce83
1 parent 37a165d
commit d76ce83
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/public/javascripts/big.js b/public/javascripts/big.js
@@ -551,24 +551,6 @@ lichess.storage = {
 
   $(function() {
 
-    // small layout
-    function onResize() {
-      $('#timeline, div.side_box, div.under_chat').each(function() {
-        var ol = $(this).offset().left;
-        if (ol < 3) {
-          var dec = 3 - ol;
-          var pad = $(this).outerWidth() - $(this).width();
-          $(this).css({
-            'margin-left': (dec - 30) + 'px',
-            'width': (230 - pad - dec) + 'px'
-          });
-          $(this).find('input.lichess_say').css('width', (204 - dec) + 'px');
-        }
-      });
-    }
-    $(window).resize($.fp.debounce(onResize, 200));
-    onResize();
-
     if (!lichess.StrongSocket.available) {
       $('#lichess').on('mouseover', function() {
         $('#lichess').off('mouseover');

diff --git a/public/stylesheets/board.css b/public/stylesheets/board.css
@@ -1384,6 +1384,12 @@ div.under_chat {
   width: 228px;
   margin: 10px 0 0 -30px;
 }
+@media (max-width: 1070px) {
+div.under_chat {
+  margin-left: 0px;
+  width: 198px;
+}
+}
 div.under_chat .watchtv {
   display: block;
   height: 24px;
@@ -1413,7 +1419,8 @@ div.under_chat .watchtv {
   border: 0;
   border-top: 1px solid #ccc;
   padding: 2px 20px 2px 4px;
-  width: 202px;
+  width: 100%;
+  box-sizing: border-box;
 }
 #chat a.send {
   position: absolute;

diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
@@ -749,9 +749,9 @@ div.side_box {
   margin-left: -30px;
   width: 226px;
   border: 1px solid #ccc;
+  box-sizing: border-box;
 }
 div.side_box.padded {
-  width: 212px;
   padding: 7px;
 }
 div.side_box .top {
@@ -763,6 +763,12 @@ div.side_box .top {
 div.side_box .padded {
   padding: 7px;
 }
+@media (max-width: 1070px) {
+div.side_box, #site_header a.stream {
+  margin-left: 0px!important;
+  width: 196px!important;
+}
+}
 div.chat_menu {
   margin-left: -30px;
   margin-top: 12px;

diff --git a/public/stylesheets/home.css b/public/stylesheets/home.css
@@ -621,6 +621,12 @@ div.game_config div.color_submits button.random span {
   width: 230px;
   font-size: 0.9em;
 }
+@media (max-width: 1070px) {
+#timeline {
+  margin-left: 0px;
+  width: 200px;
+}
+}
 #timeline .entries {
   height: 400px;
   overflow: hidden;