Review layout

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

@@ -12,7 +12,7 @@
   }
 
   .active-round-box {
-    padding: 1em;
+    padding: 0.2em 1em;
     font-weight: bold;
   }
 
@@ -172,11 +172,11 @@
     flex-flow: column;
     justify-content: start;
     align-items: center;
-    gap: 1em;
   }
 
   #pairing-lists {
     margin-top: 1em;
+    flex-grow: 2;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
@@ -342,4 +342,25 @@
     max-width: 95vw;
     overflow-x: auto;
   }
+
+  .ui.steps {
+    margin-top: 0.2em;
+    .step {
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+    }
+  }
+
+  @media( max-width: 1400px) {
+    .ui.steps > .step {
+      padding-left: 1.2em;
+      padding-right: 0.8em;
+      &::before {
+        margin-right: 0;
+      }
+      .content > .title {
+        display: none;
+      }
+    }
+  }
 }

view-webapp/src/main/webapp/WEB-INF/layouts/standard.html

@@ -40,9 +40,35 @@
     <div id="logo">
       <a href="/"><img src="/img/logov2.svg"/></a>
     </div>
-    <h1 id="title">
+#if($tour)
-      #if($tour)$esc.html($tour.name)#end
+    <div class="ui ordered centered unstackable steps">
-    </h1>
+      <div class="step" data-step="information">
+        <div class="content">
+          <div class="title">Information</div>
+        </div>
+      </div>
+      <div class="step" data-step="registration">
+        <div class="content">
+          <div class="title">Registration</div>
+        </div>
+      </div>
+      <div class="step" data-step="pairing">
+        <div class="content">
+          <div class="title">Pairing</div>
+        </div>
+      </div>
+      <div class="step" data-step="results">
+        <div class="content">
+          <div class="title">Results</div>
+        </div>
+      </div>
+      <div class="step" data-step="standings">
+        <div class="content">
+          <div class="title">Standings</div>
+        </div>
+      </div>
+    </div>
+#end
     <div id="header-right">
       <div id="lang">
         <i class="$translate.flags[$request.lang] flag"></i>

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

@@ -20,8 +20,8 @@
       <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="pairing-stats nobreak">( $pairables.size() pairable, $games.size() games )</span>
     </div>
+    <div class="pairing-stats nobreak">( $pairables.size() pairable, $games.size() games )</div>
     <div id="pairing-lists">
       <div id="pairing-left">
         <div id="pairables" class="multi-select" title="pairable players">

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

@@ -30,33 +30,9 @@
 #end
 <div class="section">
 #if($tour)
-  <div class="ui ordered centered steps">
+  <h1 id="title">
-    <div class="step" data-step="information">
+    $esc.html($tour.name)
-      <div class="content">
+  </h1>
-        <div class="title">Information</div>
-      </div>
-    </div>
-    <div class="step" data-step="registration">
-      <div class="content">
-        <div class="title">Registration</div>
-      </div>
-    </div>
-    <div class="step" data-step="pairing">
-      <div class="content">
-        <div class="title">Pairing</div>
-      </div>
-    </div>
-    <div class="step" data-step="results">
-      <div class="content">
-        <div class="title">Results</div>
-      </div>
-    </div>
-    <div class="step" data-step="standings">
-      <div class="content">
-        <div class="title">Standings</div>
-      </div>
-    </div>
-  </div>
 #end
 #translate('tour-information.inc.html')
 #if($tour)