Players page in progress

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

@@ -57,6 +57,7 @@
   }
 
   #center {
+    position: relative;
     flex: 1;
     overflow: auto;
     #inner {
@@ -199,6 +200,8 @@
   }
 
   .form-actions {
+    position: sticky;
+    bottom: 1em;
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
@@ -264,4 +267,63 @@
     border: solid 2px red;
     color: red;
   }
+
+  .popup {
+    /* display: none; */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: max(90vw, 800px);
+    max-height: 90vh;
+    margin: auto;
+    z-index: 100;
+    border-radius: 3px;
+    pointer-events: none;
+    div.close {
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      top: -10px;
+      right: -10px;
+      cursor: pointer;
+      .icon {
+        background-color: white;
+        box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 34%);
+      }
+    }
+    .popup-body {
+      max-height: 70vh;
+      max-width: 100vw;
+      transform: rotate3d(1, 0, 0, 90deg);
+      .popup-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: start;
+        padding: 2em;
+        text-align: justify;
+        max-height: inherit;
+        overflow: auto;
+      }
+      .popup-footer {
+        position: relative;
+        color: rgba(255, 255, 255, 0.6);
+        padding: 2em;
+        text-align: justify;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+        gap: 2em;
+        align-items: center;
+      }
+    }
+    &.shown {
+      transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650);
+      display: block;
+      .popup-body {
+        transform: rotate3d(1, 0, 0, 0deg);
+      }
+    }
+  }
 }

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

@@ -13,7 +13,7 @@
 
   /* information section */
 
-  #tournament-infos {
+  form {
     input, select, .edit {
       display: none;
     }
@@ -36,12 +36,5 @@
 
   /* registration section */
 
-  #registration {
+
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    > .roundbox {
-      flex: 1;
-    }
-  }
 }

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

@@ -89,6 +89,14 @@
           $('#lang-list').removeClass('shown');
         }
       });
+      $('.popup .close').on('click', e => {
+        console.log('click');
+        let popup = e.target.closest('.popup');
+        if (popup) {
+          popup.classList.remove('shown');
+        }
+      });
+
     });
 
     // syntaxic sugar for IMask

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

@@ -1,15 +1,44 @@
 <div class="tab-content" id="registration">
+  <div id="reg-view">
     <div id="players-list" class="roundbox">
-    Players list
+#set($parts = $api.get("tour/${params.id}/part"))
+$parts
+    </div>
+    <div class="form-actions">
+      <button id="add" class="ui blue right labeled icon floating info button">
+        <i class="plus icon"></i>
+        Add player
+      </button>
+    </div>
+  </div>
+</div>
+<div id="player" class="popup">
+  <div class="popup-body">
+    <div class="close">
+      <i class="ui circular times icon"></i>
+    </div>
+    <div class="popup-content">
+      <form id="player-form" class="edit">
+        <div class="two fields">
+          <div class="field">
+            <label>Family name</label>
+            <span class="info"></span>
+            <input type="text" name="name" placeholder="last name"/>
+          </div>
+          <div class="field">
+            <label>Given name</label>
+            <span class="info"></span>
+            <input type="text" name="name" placeholder="first name"/>
+          </div>
         </div>
-  <div class="roundbox">
-    <form id="player-form">
-      
       </form>
     </div>
+  </div>
 </div>
 <script type="text/javascript">
   onLoad(() => {
-
+    $('#add').on('click', e => {
+      $('#player').addClass('shown');
+    });
   });
 </script>

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

@@ -23,7 +23,7 @@
   <h1 class="centered title">#if($tour)$tour.name#{else}New Tournament#end</h1>
 #if($tour)
   <div class="ui ordered centered steps">
-    <div class="active step" data-step="information">
+    <div class="step" data-step="information">
       <div class="content">
         <div class="title">Information</div>
       </div>
@@ -49,12 +49,14 @@
       </div>
     </div>
   </div>
+#end
+#translate('tour-information.inc.html')
+#if($tour)
   #translate('tour-registration.inc.html')
   #translate('tour-pairing.inc.html')
   #translate('tour-results.inc.html')
   #translate('tour-standings.inc.html')
 #end
-#translate('tour-information.inc.html')
 </div>
 <!-- error messages included as html elements so that they are translated -->
 <div id="required_field" class="hidden">Required field</div>