Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
lee
/
subline
1
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

Add new banner system to the landing page.

Lee Morgan há 5 anos atrás
pai
e4fc643f84
commit
b9b5dc259c
2 ficheiros alterados com 47 adições e 2 exclusões
Visão Dividida Mostrar Estatísticas Diff
  1. 15 1
      views/landingPage/controller.js
  2. 32 1
      views/landingPage/landing.ejs

+ 15 - 1
views/landingPage/controller.js
Ver Ficheiro 

@@ -5,7 +5,21 @@ let controller = {
 
 
     onStart: function(){
 
         if(error){
 
-            banner.createError(error);
 
+            let bannerContainer = document.getElementById("bannerContainer");
 
+            let banner = document.getElementById("banner").content.children[0].cloneNode(true);
 
+            banner.children[0].style.backgroundColor = "rgb(200, 0, 0)";
 
+            banner.children[0].children[0].style.display = "block";
 
+            banner.children[1].innerText = error;
 
+            bannerContainer.appendChild(banner);
 
+
 
+            let timer = setTimeout(()=>{
 
+                bannerContainer.removeChild(banner);
 
+            }, 10000);
 
+
 
+            banner.children[2].addEventListener("click", ()=>{
 
+                bannerContainer.removeChild(banner);
 
+                clearTimeout(timer);
 
+            });
 
         }
 
 
         publicObj.display();

+ 32 - 1
views/landingPage/landing.ejs
Ver Ficheiro 

@@ -11,7 +11,38 @@
 
     <body>
 
         <% include ../shared/header %>
 
 
-        <% include ../shared/banner %>
 
+        <div id="bannerContainer">
 
+            <template id="banner">
 
+                <div class="banner">
 
+                    <div>
 
+                        <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                            <circle cx="12" cy="12" r="10"></circle>
 
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
 
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
 
+                        </svg>
 
+
 
+                        <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                            <circle cx="12" cy="12" r="10"></circle>
 
+                            <line x1="12" y1="8" x2="12" y2="12"></line>
 
+                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
 
+                        </svg>
 
+
 
+                        <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
 
+                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
 
+                        </svg>
 
+                    </div>
 
+                    <p></p>
 
+                    <button>
 
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="rgb(200, 0, 0)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                            <circle cx="12" cy="12" r="10"></circle>
 
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
 
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
 
+                        </svg>
 
+                    </button>
 
+                </div>
 
+            </template>
 
+        </div>
 
 
         <div id="publicStrand">
 
             <div class="main-background">