fix: modal search bar

amagovpt · Oct 30, 2023 · 052ac59 · 052ac59
1 parent e284254
commit 052ac59
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 32 deletions.
diff --git a/exercicio/corrigido/tabela.html b/exercicio/corrigido/tabela.html
@@ -93,7 +93,7 @@ <h2>Agenda do Evento</h2>
         </section>
     </main>
     <div class="spacer mt-5"></div>
-    <section class="footer-supporters">
+    <footer class="footer-supporters">
         <h2 class="footer-supporters__title">Apoios</h2>
         <div class="apoios-logos">
             <img class="img-fluid" src="../img/republicaportuguesa_black.png" alt="Logo 1"
@@ -110,10 +110,29 @@ <h2 class="footer-supporters__title">Apoios</h2>
                 <a href="/contactos">Contactos</a>
             </div>
         </div>
-    </section>
-
+    </footer>
 
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
+        <div class="modal-content">
+            <img src="../img/close.svg" id="closeModalButton" class="close-button">
+            <h2>Pesquisar</h2>
+            <div class="search-form">
+                <input type="text" id="searchInput" placeholder="Pesquisar">
+                <button id="searchButton">Pesquisar</button>
+            </div>
+        </div>
+    </div>
 </body>
 
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
+
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
 
 </html>
diff --git a/exercicio/original/evento.html b/exercicio/original/evento.html
@@ -96,5 +96,27 @@ <h3>Apoios</h3>
             </div>
         </div>
     </footer>
+
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
+        <div class="modal-content">
+            <img src="../img/close.svg" id="closeModalButton" class="close-button">
+            <h2>Pesquisar</h2>
+            <div class="search-form">
+                <input type="text" id="searchInput" placeholder="Pesquisar">
+                <button id="searchButton">Pesquisar</button>
+            </div>
+        </div>
+    </div>
 </body>
+
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
+
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
 </html>
diff --git a/exercicio/original/home-chart - cópia.html b/exercicio/original/home-chart - cópia.html
@@ -140,6 +140,28 @@ <h1>Participação no Evento Anteriores</h1>
             }
         });
     </script>
+
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
+        <div class="modal-content">
+            <img src="../img/close.svg" id="closeModalButton" class="close-button">
+            <h2>Pesquisar</h2>
+            <div class="search-form">
+                <input type="text" id="searchInput" placeholder="Pesquisar">
+                <button id="searchButton">Pesquisar</button>
+            </div>
+        </div>
+    </div>
 </body>
 
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
+
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
+
 </html>
diff --git a/exercicio/original/home-chart.html b/exercicio/original/home-chart.html
@@ -73,6 +73,28 @@ <h1>Participação no Evento Anteriores</h1>
         });
 
     </script>
+
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
+        <div class="modal-content">
+            <img src="../img/close.svg" id="closeModalButton" class="close-button">
+            <h2>Pesquisar</h2>
+            <div class="search-form">
+                <input type="text" id="searchInput" placeholder="Pesquisar">
+                <button id="searchButton">Pesquisar</button>
+            </div>
+        </div>
+    </div>
 </body>
 
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
+
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
+
 </html>
diff --git a/exercicio/original/index-1.html b/exercicio/original/index-1.html
@@ -97,9 +97,8 @@ <h3>Apoios</h3>
         </div>
     </div>
 
-
-
-    <div class="modal" id="searchModal">
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
         <div class="modal-content">
             <img src="../img/close.svg" id="closeModalButton" class="close-button">
             <h2>Pesquisar</h2>
@@ -109,20 +108,16 @@ <h2>Pesquisar</h2>
             </div>
         </div>
     </div>
-
-
-
-
 </body>
 
-    <script>
-        document.getElementById("openModalButton").addEventListener("click", function () {
-            document.getElementById("searchModal").style.display = "block";
-        });
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
 
-        document.getElementById("closeModalButton").addEventListener("click", function () {
-            document.getElementById("searchModal").style.display = "none";
-        });
-    </script>
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
 
 </html>
diff --git a/exercicio/original/index.html b/exercicio/original/index.html
@@ -111,6 +111,28 @@ <h3>Apoios</h3>
 });
 
     </script>
+
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
+        <div class="modal-content">
+            <img src="../img/close.svg" id="closeModalButton" class="close-button">
+            <h2>Pesquisar</h2>
+            <div class="search-form">
+                <input type="text" id="searchInput" placeholder="Pesquisar">
+                <button id="searchButton">Pesquisar</button>
+            </div>
+        </div>
+    </div>
 </body>
 
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
+
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
+
 </html>
diff --git a/exercicio/original/inscricao.html b/exercicio/original/inscricao.html
@@ -105,7 +105,7 @@ <h2>Formulário de Inscrição</h2>
 
 
 
-        <div class="footer-supporters">
+        <footer class="footer-supporters">
             <h3>Apoios</h3>
             <div class="apoios-logos">
                 <img src="../img/republicaportuguesa_black.png" alt="Logo 1"
@@ -122,11 +122,11 @@ <h3>Apoios</h3>
                     <a href="/contactos">Contactos</a>
                 </div>
             </div>
-        </div>
-
+        </footer>
 
 
-        <div class="modal" id="searchModal">
+        <!-- Modal - Search -->
+        <div class="modal" style="display: none;" id="searchModal">
             <div class="modal-content">
                 <img src="../img/close.svg" id="closeModalButton" class="close-button">
                 <h2>Pesquisar</h2>
@@ -144,7 +144,7 @@ <h2>Pesquisar</h2>
 
     <script>
         document.getElementById("openModalButton").addEventListener("click", function () {
-            document.getElementById("searchModal").style.display = "block";
+            document.getElementById("searchModal").style.display = "flex";
         });
 
         document.getElementById("closeModalButton").addEventListener("click", function () {

diff --git a/exercicio/original/tabela.html b/exercicio/original/tabela.html
@@ -110,8 +110,27 @@ <h3>Apoios</h3>
         </div>
     </div>
 
-
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
+        <div class="modal-content">
+            <img src="../img/close.svg" id="closeModalButton" class="close-button">
+            <h2>Pesquisar</h2>
+            <div class="search-form">
+                <input type="text" id="searchInput" placeholder="Pesquisar">
+                <button id="searchButton">Pesquisar</button>
+            </div>
+        </div>
+    </div>
 </body>
 
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
+
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
 
 </html>
diff --git a/exercicio/original/videos.html b/exercicio/original/videos.html
@@ -74,12 +74,27 @@ <h3 class="margin-bottom-xxlarge">Videos anteriores</h3>
         <hr>
     </div>
 
+    <!-- Modal - Search -->
+    <div class="modal" style="display: none;" id="searchModal">
+        <div class="modal-content">
+            <img src="../img/close.svg" id="closeModalButton" class="close-button">
+            <h2>Pesquisar</h2>
+            <div class="search-form">
+                <input type="text" id="searchInput" placeholder="Pesquisar">
+                <button id="searchButton">Pesquisar</button>
+            </div>
+        </div>
+    </div>
+</body>
 
+<script>
+    document.getElementById("openModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "flex";
+    });
 
-
-
-
-
-</body>
+    document.getElementById("closeModalButton").addEventListener("click", function () {
+        document.getElementById("searchModal").style.display = "none";
+    });
+</script>
 
 </html>
diff --git a/exercicio/styles.css b/exercicio/styles.css
@@ -187,10 +187,10 @@ button {
 }
 
 .modal-content {
-  display: block;
+  display: block !important;
   background-color: #fff;
   padding: 20px;
-  width: 60%;
+  width: 60% !important;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -314,7 +314,7 @@ border: 0;
 
 .image-section {
   width: 100%;
-  height: 50vw;
+  min-height: 50vw;
   background-image: url('img/Banner- site-900x450px (1).png'); 
   background-size: cover; 
   background-position: center center;