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;
-    }
-  }
+
 }