#729 Create a lightweight PWA - 1st POC (add select available languages)

apihub-root/lightweight-pwa/css/main.css

@@ -83,7 +83,6 @@
 
     .page-header {
         font-size: 2rem;
-        padding: 24px 24px 0px;
     }
 
 
@@ -107,7 +106,9 @@
         font-size: 1.5rem;
     }
 
-    #leaflet-content h5 {
+    #leaflet-content h5,
+    #leaflet-content .select-lang-text,
+    #leaflet-content .languages-list {
         font-size: 1rem;
     }
 
@@ -169,10 +170,6 @@
 
 @media only screen and (max-device-width: 480px) {
 
-    .page-header {
-        padding: 24px 35px 0px;
-    }
-
     .welcome-container {
         font-size: 3rem;
     }
@@ -241,6 +238,10 @@
         padding: 5px;
     }
 
+    #leaflet-content .languages-list {
+        margin: 0px 35px;
+    }
+
     .leaflet-accordion-item.active .leaflet-accordion-item-content {
         line-height: 2.5rem;
     }
@@ -302,6 +303,10 @@ body {
     font-family: "DM Sans";
 }
 
+.page-header {
+    padding: 0px 35px;
+}
+
 .page-container {
     background: var(--olivegreen);
     color: #fff;
@@ -333,6 +338,14 @@ body {
     }
 }
 
+@keyframes animatedIcon {
+    0% {
+        background-image: url(../images/good-icon.svg);
+    }
+    55% {
+        background-image: url(../images/wrong-icon.svg);
+    }
+}
 
 .content-container {
     align-self: center;
@@ -356,70 +369,21 @@ body {
     margin-right: auto;
 }
 
-@keyframes animatedImageGood {
-    0% {
-        top: 35%;
-        left: 18%
-    }
-    60% {
-        background-image: none
-    }
-    100% {
-        top: 55%;
-        left: -49%;
-        background-image: none
-    }
-}
-
-.good-example {
-    width: 26px;
-    height: 49px;
-    background-image: url(../images/good-2dmatrix.svg);
-    animation: animatedImageGood 5s linear infinite;
-    -moz-animation: animatedImageGood 5s linear infinite;
-    -webkit-animation: animatedImageGood 5s linear infinite;
-    -ms-animation: animatedImageGood 5s linear infinite;
-    -o-animation: animatedImageGood 5s linear infinite;
-    animation-delay: 1s;
-    animation-direction: alternate;
+.icon-div {
     position: relative;
-    top: 35%;
-    left: 18%;
-    animation-fill-mode: both;
-}
-
-
-@keyframes -animatedImageWrong {
-    0% {
-        top: 35%;
-        left: 105%;
-        background-image: none;
-        content: ""
-    }
-    60% {
-        background-image: url(../images/wrong-2dmatrix.svg);
-    }
-    100% {
-        top: 52%;
-        left: 32%;
-    }
-}
-
-.wrong-example {
-    width: 38px;
-    height: 48px;
-    background-image: url(../images/wrong-2dmatrix.svg);
-    animation: -animatedImageWrong 5s linear infinite;
-    -moz-animation: -animatedImageWrong 5s linear infinite;
-    -webkit-animation: -animatedImageWrong 5s linear infinite;
-    -ms-animation: -animatedImageWrong 5s linear infinite;
-    -o-animation: -animatedImageWrong 5s linear infinite;
+    top: -32px;
+    right: -32px;
+    width: 64px;
+    height: 64px;
+    animation: animatedIcon 5s steps(1, end) infinite;
+    -moz-animation: animatedIcon 5s steps(1, end) infinite;
+    -webkit-animation: animatedIcon 5s steps(1, end) infinite;
+    -ms-animation: animatedIcon 5s steps(1, end) infinite;
+    -o-animation: animatedIcon 5s steps(1, end) infinite;
     animation-delay: 1s;
     animation-direction: alternate;
-    position: relative;
-    top: 32%;
-    left: 105%;
-    animation-fill-mode: both;
+    background-image: url(../images/good-icon.svg);
+    float: right;
 }
 
 .explain-container {
@@ -497,15 +461,27 @@ body {
     display: flex;
     flex-direction: column;
     height: 12%;
+    justify-content: center;
 }
 
 .leaflet-page .page-content, .error-page .page-content {
-    height: calc(88% - 24px);
+    height: 88%;
     position: relative;
     color: #04313B;
     background: #fff;
 }
 
+#leaflet-content .select-lang-text {
+    padding: 35px;
+}
+
+#leaflet-content .languages-list li {
+    text-underline-position: under;
+    text-decoration: underline;
+    padding: 0px 0px 55px 0px;
+    color: blue;
+}
+
 #leaflet-content h5 {
     font-weight: normal;
 }

apihub-root/lightweight-pwa/html/error.html

@@ -1,11 +1,10 @@
 <head>
     <link href="../css/main.css" rel="stylesheet">
-    <script src="../js/translations.js"></script>
     <script src="../js/controllers/ErrorController.js" type="module"></script>
 
 </head>
 
-<body onload="translate()">
+<body>
 <div class="page-container error-page">
     <div class="page-header">
         <span class="header-title" translate="error-title"></span>
@@ -19,3 +18,8 @@
 </div>
 
 </body>
+<script type="module">
+  import {translate} from "../js/translations.js";
+
+  document.getElementsByTagName("body").onload = translate()
+</script>

apihub-root/lightweight-pwa/html/index.html

@@ -1,23 +1,17 @@
 <head>
     <link href="../css/main.css" rel="stylesheet">
-    <script src="../js/translations.js"></script>
     <script src="../js/controllers/MainController.js" type="module"></script>
 
 </head>
-<body onload="translate()">
+<body>
 <div class="page-container">
     <div class="icon-container"></div>
     <div class="welcome-container">
         <span translate="welcome"></span>
     </div>
 
     <div class="content-container">
-
-        <div class="good-example">
-        </div>
-        <div class="wrong-example">
-
-        </div>
+        <div class="icon-div"></div>
     </div>
     <div class="explain-container">
         <span translate="scan_explain"></span>
@@ -28,3 +22,8 @@
 </div>
 
 </body>
+<script type="module">
+  import {translate} from "../js/translations.js";
+
+  document.getElementsByTagName("body").onload = translate()
+</script>

apihub-root/lightweight-pwa/html/leaflet.html

@@ -1,15 +1,14 @@
 <head>
     <link href="../css/main.css" rel="stylesheet">
-    <script src="../js/translations.js"></script>
     <script src="../js/controllers/LeafletController.js" type="module"></script>
 
 </head>
 
-<body onload="translate()">
+<body>
 <div class="page-container leaflet-page">
     <div class="page-header">
-        <span class="product-name">Product name</span>
-        <span class="product-description">product description</span>
+        <span class="product-name"></span>
+        <span class="product-description"></span>
     </div>
     <div class="page-content">
         <div id="leaflet-content">
@@ -28,3 +27,8 @@
     </div>
 </div>
 </body>
+<script type="module">
+  import {translate} from "../js/translations.js";
+
+  document.getElementsByTagName("body").onload = translate()
+</script>

apihub-root/lightweight-pwa/html/scan.html

@@ -1,10 +1,9 @@
 <head>
     <link href="../css/main.css" rel="stylesheet">
-    <script src="../js/translations.js"></script>
     <script src="../js/controllers/ScanController.js" type="module"></script>
 
 </head>
-<body onload="translate()">
+<body>
 <div class="page-container scan-page">
     <div class="scan-header">
         <div class="scan-cancel" translate="cancel" onclick="scanController.cancelHandler()" ></div>
@@ -18,3 +17,8 @@
 
 </div>
 </body>
+<script type="module">
+  import {translate} from "../js/translations.js";
+
+  document.getElementsByTagName("body").onload = translate()
+</script>