Update

Smaug6739 · Mar 7, 2021 · 9d8f709 · 9d8f709
1 parent 8fac575
commit 9d8f709
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 48 deletions.
diff --git a/__frontend/pages/album/lasts.ejs b/__frontend/pages/album/lasts.ejs
@@ -10,24 +10,37 @@
     <link  rel="stylesheet" href="/static/css/album/album.css">
     <script  src="/static/js/album/album.js"></script>
     <%- include ('../include/meta'); -%>
-    <title>API Members</title>
+    <title>FGF - Album</title>
   </head>
   <body>
 
     <%- include ('../include/nav.ejs'); -%>
     <div id="container">
+      <% const tailleArray = images.length %>
+      <% const taille = Math.floor(tailleArray/4) %>
+      <% const array1 = images.slice(0,taille) %>
+      <% const array2 = images.length %>
+      <% const array3 = images.length %>
+      <% const array4 = images.length %>
     <%if(images.length){%>
+      <div class="row">
       <% images.forEach(element => { %>
-        <div class="element">
-          <div class="hvrbox">
-            <img width="480px" height="268" src="/uploads/album/<%=element.album_image%>" class="hvrbox-layer_bottom image">
-                <div class="hvrbox-layer_top hvrbox-layer_slideup">
-                <div class="hvrbox-text"><%=element.member_pseudo%></div>
-            </div>
-          </div>
-          <p class="title"><%=element.album_title%></p>
-        </div>
+            <%console.log(element)%>
+            <img class="image" src="/uploads/album/<%=element.album_image%>">
       <%});%>
+      <div id="myModal" class="modal">
+
+        <!-- The Close Button -->
+        <span class="close">&times;</span>
+      
+        <!-- Modal Content (The Image) -->
+        <img class="modal-content" id="img01">
+      
+        <!-- Modal Caption (Image Text) -->
+        <div id="caption"></div>
+      </div>
+    </div>
+
     <%}else{%>
       <h2>Aucune image sur cette page</h2>
     <%}%>
@@ -37,10 +50,7 @@
       <a href="#" class="button button-info" id="suivant">Suivant ></a>
     </div>
 
-
-
     <%- include('../include/footer.ejs') %>
     <%- include ('../include/bootstrap/bootstrap.js.ejs'); -%>
-
   </body>
 </html>
diff --git a/__frontend/public/css/album/album.css b/__frontend/public/css/album/album.css
@@ -9,11 +9,11 @@
     justify-content: space-around;
     margin-top: 15px;
 }
-.image{
+/*.image{
     box-shadow: 0px 3px 10px black;
-}
+}*/
 
-.hvrbox,
+/*.hvrbox,
 .hvrbox * {
     padding: 3px;
     box-sizing: border-box;
@@ -80,7 +80,7 @@
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
-}
+}*/
 
 
 #buttons-page{
@@ -91,11 +91,102 @@
     margin-left: 1%;
     padding: 15px;
 }
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-around;
+}
+
+
+.image {
+  height: 250px;
+  width: auto;
+  padding: 1px;
+  margin-top: 5px;
+  box-shadow: 2.5px 2.5px 2.5px black;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.3s;
+
+}
+
+.image:hover {opacity: 0.7;}
 
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+}
+
+/* Modal Content (Image) */
+.modal-content {
+  margin: auto;
+  display: block;
+  width: 80%;
+  max-width: 700px;
+}
+
+/* Caption of Modal Image (Image Text) - Same Width as the Image */
+#caption {
+  margin: auto;
+  display: block;
+  width: 80%;
+  max-width: 700px;
+  text-align: center;
+  color: #ccc;
+  padding: 10px 0;
+  height: 150px;
+}
+
+/* Add Animation - Zoom in the Modal */
+.modal-content, #caption {
+  animation-name: zoom;
+  animation-duration: 0.6s;
+}
+
+@keyframes zoom {
+  from {transform:scale(0)}
+  to {transform:scale(1)}
+}
+
+/* The Close Button */
+.close {
+  position: absolute;
+  top: 15px;
+  right: 35px;
+  color: #f1f1f1;
+  font-size: 40px;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.close:hover,
+.close:focus {
+  color: #bbb;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* 100% Image Width on Smaller Screens */
+@media only screen and (max-width: 700px){
+  .modal-content {
+    width: 100%;
+  }
+}
 @media screen and (max-width : 550px){
     .image{
         box-shadow: 0px 3px 10px black;
-        width:100%;
-        height:100%;
+        width:90%;
+        height:auto;
     }
 }
diff --git a/__frontend/public/css/articles/articles.css b/__frontend/public/css/articles/articles.css
@@ -16,8 +16,16 @@
     width: 25%;
     position: relative;
     border-radius: 0.5%;
+    padding: 1%;
+}
+.article:hover {
+    box-shadow: 1px 1px 12px #555;
+    transform: scale(1.02);
+    transition-property: all;
+    transition-duration: 0.1s;
+    transition-timing-function: ease;
+    transition-delay: 0s;
 }
-
 .article-title{
     font-weight: 630;
     color : var(--dark-red)

diff --git a/__frontend/public/css/home.css b/__frontend/public/css/home.css
@@ -4,7 +4,7 @@
     background-position: center;
     background-size: cover;
     height:95vh;
-    opacity: 0.85;
+    opacity: 1;
 }
 
 .separation{
@@ -13,8 +13,8 @@
     color : var(--dark-red);
     margin-left:1%;
 }
-a{text-decoration: none;color:var(--dark-red)}
-a:hover{color:var(--red)}
+
+/*  ANNONCES  */
 
 #annonces{
     display: flex;
@@ -31,16 +31,26 @@ a:hover{color:var(--red)}
     position: relative;
     padding: 0.5%;
 }
+.annonce:hover {
+  box-shadow: 1px 1px 12px #555;
+  transform: scale(1.02);
+  transition-property: all;
+  transition-duration: 0.1s;
+  transition-timing-function: ease;
+  transition-delay: 0s;
+}
+
+
+/*  ARTICLES  */
+
+
 #container-articles{
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     align-items: stretch;
 }
-.date{
-    font-size: smaller;
-    font-weight: 430;
-} 
+
 .article{
     background-color: #ffffff;
     margin-left: 1%;
@@ -50,30 +60,25 @@ a:hover{color:var(--red)}
     position: relative;
     padding: 0.5%;
 }
-
-.article-title{
-    font-weight: 630;
-    color : var(--dark-red)
+.article:hover {
+  box-shadow: 1px 1px 12px #555;
+  transform: scale(1.02);
+  transition-property: all;
+  transition-duration: 0.1s;
+  transition-timing-function: ease;
+  transition-delay: 0s;
 }
+.date{font-size: smaller;font-weight: 430;}
+.article-title{font-weight: 630;color : var(--dark-red);}
+.content{text-align: justify;}
 
-.content{
-    text-align: justify;
-}
+.card-img-top{width: 100%;max-height: 220px;}
+.card-intro {overflow: hidden;}
 
-.card-img-top{
-    width: 100%;
-    max-height: 220px;
-}
-.card-intro {
-    overflow: hidden;
-}
-#container-description{
-    padding: 1%;
-}
 
 
+/*  ALBUM  */
 
-* {box-sizing: border-box}
 .mySlides1, .mySlides2 {display: none;}
 
 /* Slideshow container */
@@ -113,7 +118,6 @@ a:hover{color:var(--red)}
 
 
 
-* {box-sizing:border-box}
 
 /* Slideshow container */
 .slideshow-container {
@@ -208,8 +212,9 @@ a:hover{color:var(--red)}
 
 
 
-
-
+#container-description{
+  padding: 1%;
+}
 
 
 

diff --git a/__frontend/public/images/elements_site/accueil-pc.png b/__frontend/public/images/elements_site/accueil-pc.png
diff --git a/__frontend/public/js/album/album.js b/__frontend/public/js/album/album.js
@@ -5,4 +5,29 @@ window.onload = function(){
     const pagePrecedente = parseInt(page) - 1
     document.getElementById("suivant").setAttribute("href", `/album/${pageSuivante}`)
     document.getElementById("precedent").setAttribute("href", `/album/${pagePrecedente}`)
+
+    /* ALBUM */
+    var modal = document.getElementById("myModal");
+
+    // Get the image and insert it inside the modal - use its "alt" text as a caption
+    var imgs = document.getElementsByClassName("image")
+    const imgsArray = Array.from(imgs)
+    var modalImg = document.getElementById("img01");
+    var captionText = document.getElementById("caption");
+    imgsArray.forEach(function(img) {
+    img.onclick = function(){
+    modal.style.display = "block";
+    modalImg.src = this.src;
+    captionText.innerHTML = this.alt;
+    }
+    });
+
+
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() {
+    modal.style.display = "none";
+    }
 }