compact style for embedding

app/templating/AssetHelper.scala

@@ -7,7 +7,7 @@ import play.api.templates.Html
 
 trait AssetHelper {
 
-  val assetVersion = 16
+  val assetVersion = 17
 
   def cssTag(name: String) = css("stylesheets/" + name)
 

app/views/base/layout.scala.html

@@ -105,7 +105,7 @@
       </div>
     </div>
     @jsTag("deps.min.js")
-    @signedJs.fold(jsAt, jsTagC("big.js"))
+    @signedJs.fold(jsAt, true.fold(jsTagC("big.js"), jsTag("big.js")))
     @moreJs
     @if(lang.language != "en") {
     <script src="@routes.Assets.at("trans/" + lang.language + ".js")?v=@assetVersion"></script>

public/javascripts/big.js

@@ -229,6 +229,21 @@ lichess.socketDefaults.options.debug = !lichess.onProduction;
 
 $(function() {
 
+  // small layout
+  function onResize() {
+    if($(document.body).width() < 1000) {
+      $(document.body).addClass("tight");
+      $('div.content').prepend($('div.header h1'));
+      $('#lichess h1').after($('div.header div.side_menu'));
+      // hack for gecko
+      if($('div.content').offset().top > 40) { $('div.content').css('marginTop', '-8px'); }
+    } else {
+      $(document.body).removeClass("tight");
+    }
+  }
+  $(window).resize(onResize);
+  onResize();
+
   if (!strongSocket.available) {
     setTimeout(function() {
       var inUrFaceUrl = window.opera ? '/assets/opera-websocket.html' : '/assets/browser.html';

public/stylesheets/common.css

@@ -40,6 +40,9 @@ div.header {
   float: left;
   position: relative;
 }
+body.tight div.header {
+  display: none;
+}
 div.header strong {
   font-weight: normal;
 }
@@ -49,6 +52,11 @@ div.content {
   min-height: 590px;
   margin: 30px auto 30px auto;
 }
+body.tight div.content {
+  width: auto;
+  min-width: 780px;
+  margin-top: 5px;
+}
 
 #top {
   width: 100%;
@@ -56,6 +64,9 @@ div.content {
   height: 24px;
   border-bottom: 1px solid #c4c4c4;
 }
+body.tight #top {
+  min-width: 780px;
+}
 #site_description {
   position: absolute;
   top: -100px;
@@ -64,6 +75,9 @@ div.content {
 #lichess {
   margin-left: 211px;
 }
+body.tight #lichess {
+  margin-left: 10px;
+}
 
 #site_title {
   width: 130px;
@@ -75,6 +89,9 @@ div.content {
   display: block;
   margin-bottom: 3px;
 }
+body.tight #site_title {
+  margin-left: 10px;
+}
 #site_title span.extension {
   color: #c8c8c8;
   font-weight: normal;
@@ -89,6 +106,9 @@ div.content {
   font-style: italic;
   color: #afafaf;
 }
+body.tight #site_baseline {
+  display: none;
+}
 
 div.footer_wrap {
   width: 100%;
@@ -104,6 +124,10 @@ div.footer {
   margin: auto;
   line-height: 2em;
 }
+body.tight div.footer {
+  width: auto;
+  padding: 0 10px;
+}
 
 div.footer div.right {
   float: right;
@@ -216,17 +240,20 @@ div.lichess_goodies div.box .player {
   margin: 4px 0;
 }
 
-div.side_menu {
+div.header div.side_menu {
   margin-top: 15px;
 }
-div.side_menu a {
+div.header div.side_menu a {
   padding: 8px 0 8px 8px;
   display: block;
   text-decoration: none;
   width: 203px;
   font-weight: bold;
 }
-div.side_menu a.active {
+body.tight div.side_menu a {
+  padding-right: 10px;
+}
+div.header div.side_menu a.active {
   background: white;
   border: 1px solid #dadada;
   border-right: none;