From 306a3c41a6e8a9290052610772fc3349f2142df9 Mon Sep 17 00:00:00 2001
From: Claude Brisson <claude@renegat.net>
Date: Wed, 31 Jan 2024 20:39:01 +0100
Subject: [PATCH] Review layout

---
 view-webapp/src/main/sass/tour.scss           | 25 +++++++++++++--
 .../main/webapp/WEB-INF/layouts/standard.html | 32 +++++++++++++++++--
 .../src/main/webapp/tour-pairing.inc.html     |  2 +-
 view-webapp/src/main/webapp/tour.html         | 30 ++---------------
 4 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/view-webapp/src/main/sass/tour.scss b/view-webapp/src/main/sass/tour.scss
index 4b0b7db..fa03850 100644
--- a/view-webapp/src/main/sass/tour.scss
+++ b/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;
+      }
+    }
+  }
 }
diff --git a/view-webapp/src/main/webapp/WEB-INF/layouts/standard.html b/view-webapp/src/main/webapp/WEB-INF/layouts/standard.html
index 81ee8df..0b7bb58 100644
--- a/view-webapp/src/main/webapp/WEB-INF/layouts/standard.html
+++ b/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)$esc.html($tour.name)#end
-    </h1>
+#if($tour)
+    <div class="ui ordered centered unstackable steps">
+      <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>
diff --git a/view-webapp/src/main/webapp/tour-pairing.inc.html b/view-webapp/src/main/webapp/tour-pairing.inc.html
index 46fb0da..b5f2c6b 100644
--- a/view-webapp/src/main/webapp/tour-pairing.inc.html
+++ b/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">
diff --git a/view-webapp/src/main/webapp/tour.html b/view-webapp/src/main/webapp/tour.html
index bb22aec..897c1c9 100644
--- a/view-webapp/src/main/webapp/tour.html
+++ b/view-webapp/src/main/webapp/tour.html
@@ -30,33 +30,9 @@
 #end
 <div class="section">
 #if($tour)
-  <div class="ui ordered centered steps">
-    <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>
+  <h1 id="title">
+    $esc.html($tour.name)
+  </h1>
 #end
 #translate('tour-information.inc.html')
 #if($tour)