Popup for touch devices

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

@@ -733,6 +733,9 @@
     #standings-table {
       font-size: 0.70rem;
     }
+    .title-popup {
+      display: none;
+    }
   }
 
 }

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

@@ -405,6 +405,14 @@
     margin-top: 0.2em;
   }
 
+  .bottom-pairing-actions {
+    margin-top: 0.2em;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    gap: 0.2em;
+  }
+
   .tables-exclusion {
     margin-top: 0.2em;
   }
@@ -476,6 +484,19 @@
     max-width: 95vw;
   }
 
+  td.game-result {
+    position: relative;
+    .title-popup {
+      position: absolute;
+      top: 90%;
+      background: silver;
+      padding: 4px;
+      left: 10%;
+      white-space: nowrap;
+      z-index: 2;
+    }
+  }
+
   .ui.steps {
     margin-top: 0.2em;
     .step {

view-webapp/src/main/webapp/js/main.js

@@ -194,6 +194,12 @@ function downloadFile(blob, filename) {
   document.body.removeChild(link);
 }
 
+function isTouchDevice() {
+  return (('ontouchstart' in window) ||
+    (navigator.maxTouchPoints > 0) ||
+    (navigator.msMaxTouchPoints > 0));
+}
+
 onLoad(() => {
   $('button.close').on('click', e => {
     close_modal();
@@ -342,4 +348,17 @@ onLoad(() => {
     let dialog = e.target.closest('.popup');
     if (!dialog) close_modal();
   });
+
+  if (isTouchDevice()) {
+    $("[title]").on('click', e => {
+      let item = e.target.closest('[title]');
+      let title = item.getAttribute('title');
+      let popup = item.find('.title-popup')
+      if (popup.length === 0) {
+        item.insertAdjacentHTML('beforeend', `<span class="title-popup">${title}</span>`);
+      } else {
+        item.removeChild(popup[0]);
+      }
+    });
+  }
 });

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

@@ -85,7 +85,7 @@
     #elseif($rst.contains('-'))
       #set($rst = "<i>$rst</i>")
     #end
-          <td class="nobreak" #if($opponent)title="$esc.html($opponent.name)#if($opponent.firstname) $esc.html($opponent.firstname)#end #rank($opponent.rank)#if($opponent.country) $opponent.country#end"#end>$rst</td>
+          <td class="nobreak game-result" #if($opponent)title="$esc.html($opponent.name)#if($opponent.firstname) $esc.html($opponent.firstname)#end #rank($opponent.rank)#if($opponent.country) $opponent.country#end"#end>$rst</td>
   #end
   #foreach($crit in $tour.pairing.placement)
           <td>$number.format('0.#', $part[$crit])</td>