Pairing page: print pairables instead of games when no game yet

view-webapp/src/main/sass/main.scss

@@ -442,18 +442,27 @@
       margin-top: 0.1em !important;
     }
 
-    #logo, #lang, .steps, #filter-box, #footer, #pairing-left, #pairing-buttons, button, #standings-params, #logout {
+    #logo, #lang, .steps, #filter-box, #footer, #unpairables, #pairing-buttons, button, #standings-params, #logout, .pairing-stats, .result-sheets {
       display: none !important;
     }
 
-    .circular.label {
-      transform: scale(0.7);
-    }
-
-    #pairing-right {
+    body {
+      &.nogame {
+        #pairables {
+          max-height: unset !important;
           max-width: unset !important;
+          font-size: 1rem !important;
+          line-height: 1.1rem !important;
+          min-width: 60vw;
+          &::before {
+            top: 0;
           }
-
+        }
+        #paired {
+          display: none !important;
+        }
+      }
+      &:not(.nogame) {
         #paired {
           max-height: unset !important;
           max-width: unset !important;
@@ -464,6 +473,19 @@
             top: 0;
           }
         }
+        #pairables {
+          display: none !important;
+        }
+      }
+    }
+
+    .circular.label {
+      transform: scale(0.7);
+    }
+
+    #pairing-right {
+      max-width: unset !important;
+    }
 
   }
 

view-webapp/src/main/webapp/js/tour-pairing.inc.js

@@ -169,4 +169,7 @@ onLoad(()=>{
     if (store.has('unpairablesScroll')) $('#unpairables')[0].scrollTop = store('unpairablesScroll');
     if (store.has('pairedScroll')) $('#paired')[0].scrollTop = store('pairedScroll');
   }, 0);
+  if ($('#paired .listitem').length === 0) {
+    $('body').addClass('nogame');
+  }
 });

view-webapp/src/main/webapp/tour-pairing.inc.html

@@ -20,7 +20,7 @@
       <button class="ui floating choose-round prev-round button">&laquo;</button>
       <span class="active-round">$round</span>
       <button class="ui floating choose-round next-round button">&raquo;</button>
-      <span class="norbeak">( $pairables.size() pairable, $games.size() games )</span>
+      <span class="pairing-stats nobreak">( $pairables.size() pairable, $games.size() games )</span>
     </div>
     <div id="pairing-lists">
       <div id="pairing-left">