merge develop

2021-04-06 10:24:46 +02:00
parent 9c91aaa758 6e7b1f3ef6
commit 052da2281d
90 changed files with 3634 additions and 294 deletions
@@ -1,3 +1,4 @@
 index.html
 index.tmpl.html.tmp
-style.*.css
+/js/
+style.*.css
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <script src="/iframe_api.js" ></script>
+    <script>
+        // Note: this is a huge XSS flow as we allow anyone to load a Javascript file in our domain.
+        // This file must ABSOLUTELY be removed from the Docker images/deployments and is only here
+        // for development purpose (because dynamically generated iframes are not working with
+        // webpack hot reload due to an issue with rights)
+        const urlParams = new URLSearchParams(window.location.search);
+        const scriptUrl = urlParams.get('script');
+        const script = document.createElement('script');
+        script.src = scriptUrl;
+        document.head.append(script);
+    </script>
+    </head>
+</html>
@@ -76,11 +76,11 @@
                </aside>
                <main id="cowebsite-main">
                </main>
-                <button class="top-right-btn" id="cowebsite-fullscreen">
-                    <img id="cowebsite-fullscreen-open" src="resources/logos/monitor.svg"/>
-                    <img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/monitor-close.svg"/>
+                <button class="top-right-btn" id="cowebsite-fullscreen" alt="fullscreen mode">
+                    <img id="cowebsite-fullscreen-open" src="resources/logos/fullscreen.svg"/>
+                    <img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/fullscreen-exit.svg"/>
                </button>
-                <button class="top-right-btn" id="cowebsite-close">
+                <button class="top-right-btn" id="cowebsite-close" alt="close the iframe">
                    <img src="resources/logos/close.svg"/>
                </button>
            </div>
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-fullscreen-exit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M4 12 L12 12 12 4 M20 4 L20 12 28 12 M4 20 L12 20 12 28 M28 20 L20 20 20 28" />
+</svg>
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-fullscreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M4 12 L4 4 12 4 M20 4 L28 4 28 12 M4 20 L4 28 12 28 M28 20 L28 28 20 28" />
+</svg>
@@ -35,9 +35,8 @@
    cursor: url('/resources/logos/cursor_pointer.png'), pointer;

    img {
-      height: 20px;
-      background-color: rgba(0,0.0,0,0.3);
-      padding: 5px;
+      height: 25px;
+      padding: 4px;
      border-radius: 3px;
    }

@@ -78,31 +77,13 @@
    }

    .top-right-btn{
-      top: 10px;
-      right: -100px;
-      animation: right .2s ease;
-
-      img {
-        right: 15px;
+      left: -6px;
+      &#cowebsite-close {
+        top: 0px;
+      }
+      &#cowebsite-fullscreen {
+        top: 25px;
      }
-    }
-
-    #cowebsite-close {
-      right: -140px;
-    }
-    #cowebsite-fullscreen {
-      right: -100px;
-    }
-
-  }
-
-  #cowebsite:hover {
-    #cowebsite-close{
-      right: 10px;
-    }
-
-    #cowebsite-fullscreen{
-      right: 45px;
    }
  }
 }
@@ -139,32 +120,13 @@
      }
    }

-    .top-right-btn{
-      top: 10px;
-      right: -100px;
-      animation: right .2s ease;
-
-      img {
-        right: 15px;
+    .top-right-btn {
+      &#cowebsite-close {
+        right: 0px;
+      }
+      &#cowebsite-fullscreen {
+        right: 25px;
      }
    }
-
-    #cowebsite-close {
-      right: -140px;
-    }
-    #cowebsite-fullscreen {
-      right: -100px;
-    }
-
  }
-
-  #cowebsite:hover {
-    #cowebsite-close{
-      right: 10px;
-    }
-
-    #cowebsite-fullscreen{
-      right: 45px;
-    }
-  }  
 }
@@ -1123,6 +1123,31 @@ div.action p.action-body{
    margin-left: calc(50% - 75px);
    border-radius: 15px;
 }
+.popUpElement{
+    font-family: 'Press Start 2P';
+    text-align: left;
+    color: white;
+}
+.popUpElement div {
+    font-family: 'Press Start 2P';
+    font-size: 10px;
+    background-color: #727678;
+}
+
+.popUpElement button {
+    position: relative;
+    font-size: 10px;
+    border-image-repeat: revert;
+    margin-right: 5px;
+}
+
+.popUpElement .buttonContainer {
+    float: right;
+    background-color: inherit;
+
+}
+
+
@keyframes mymove {
    0% {bottom: 40px;}
    50% {bottom: 30px;}