Update - intercalaires S6

Hemisphere-Project · Dec 7, 2021 · bd11f3c · bd11f3c
1 parent 734e040
commit bd11f3c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 14 deletions.
diff --git a/WebApps/S6-MULTIPLAYER/index.html b/WebApps/S6-MULTIPLAYER/index.html
@@ -60,28 +60,28 @@
   <div class="page" id="page_gallery_list">
     <div class="list">
       <div class="list_item btn" galleryIndex="1">
-        <div class="list_item_title title_big" >Ariane</div>
+        <div class="list_item_title title_maxi" >Ariane</div>
         <div class="list_item_legend text_small">1970 • 1986</div>
       </div>
-      <div class="list_item btn" galleryIndex="3">
-        <div class="list_item_title title_big" >Briséis</div>
+      <div class="list_item btn" galleryIndex="4">
+        <div class="list_item_title title_maxi" >Briséis</div>
         <div class="list_item_legend text_small">1975 • 1985</div>
       </div>
-      <div class="list_item btn" galleryIndex="4">
-        <div class="list_item_title title_big" >Cynthia</div>
+      <div class="list_item btn" galleryIndex="6">
+        <div class="list_item_title title_maxi" >Cynthia</div>
         <div class="list_item_legend text_small">1985 • 1994</div>
       </div>
-      <div class="list_item btn" galleryIndex="6">
-        <div class="list_item_title title_big" >Daphné</div>
+      <div class="list_item btn" galleryIndex="9">
+        <div class="list_item_title title_maxi" >Daphné</div>
         <div class="list_item_legend text_small">1986 • 2010</div>
       </div>
-      <div class="list_item btn" galleryIndex="9">
-        <div class="list_item_title title_big" >Electre</div>
+      <div class="list_item btn" galleryIndex="13">
+        <div class="list_item_title title_maxi" >Electre</div>
         <div class="list_item_legend text_small">dès 2002</div>
       </div>
     </div>
     <div class="btn" id="btn_close_gallerylist"> <img src="/assets/img/retour.png" alt=""> </div>
-    <div class="title_big" id="page_gallery_list_title">Les Fileries</div>
+    <div class="title_maxi" id="page_gallery_list_title">Les Fileries</div>
   </div>
 
 
@@ -90,6 +90,12 @@
       <div class="btn" id="btn_close_gallery"> <img src="/assets/img/retour.png" alt=""> </div>
       <div class="btn" id="btn_next"> <img src="/assets/img/next.png" alt=""> </div>
       <div class="gallery">
+        <div class="gallery_item gallery_interlayer">
+          <div class="gallery_interlayer_content">
+            <div class="title_maxi">Filerie Ariane</div>
+            <div class="text_small">1970 • 1986</div>
+          </div>
+        </div>
         <div class="gallery_item">
           <img src="/medias/S6/fileries/1 Tranche Ligne Ariane HT.jpg">
           <div class="legend text_small">Tranche Ligne Ariane HT</div>
@@ -98,10 +104,22 @@
           <img src="/medias/S6/fileries/2 Tranche ligne Ariane HT.jpg">
           <div class="legend text_small">Tranche ligne Ariane HT</div>
         </div>
+        <div class="gallery_item gallery_interlayer">
+          <div class="gallery_interlayer_content">
+            <div class="title_maxi">Filerie Briséis</div>
+            <div class="text_small">1975 • 1985</div>
+          </div>
+        </div>
         <div class="gallery_item">
           <img src="/medias/S6/fileries/3 Tranche ligne 400kV Briseis.jpg">
           <div class="legend text_small">Tranche ligne 400kV Briseis</div>
         </div>
+        <div class="gallery_item gallery_interlayer">
+          <div class="gallery_interlayer_content">
+            <div class="title_maxi">Filerie Cynthia</div>
+            <div class="text_small">1985 • 1994</div>
+          </div>
+        </div>
         <div class="gallery_item">
           <img src="/medias/S6/fileries/4 Tranche Ligne 225kV Cynthia.jpg">
           <div class="legend text_small">Tranche Ligne 225kV Cynthia</div>
@@ -110,6 +128,12 @@
           <img src="/medias/S6/fileries/5 Tranche Transformateur Cynthia 225kV.jpg">
           <div class="legend text_small">Tranche Transformateur Cynthia 225kV</div>
         </div>
+        <div class="gallery_item gallery_interlayer">
+          <div class="gallery_interlayer_content">
+            <div class="title_maxi">Filerie Daphné</div>
+            <div class="text_small">1986 • 2010</div>
+          </div>
+        </div>
         <div class="gallery_item">
           <img src="/medias/S6/fileries/6 Tranche ligne Daphne 400kV.jpg">
           <div class="legend text_small">Tranche ligne Daphne 400kV</div>
@@ -122,6 +146,12 @@
           <img src="/medias/S6/fileries/8 Tranches Ligne de Comptage Daphne.jpg">
           <div class="legend text_small">Tranches Ligne de Comptage Daphne</div>
         </div>
+        <div class="gallery_item gallery_interlayer">
+          <div class="gallery_interlayer_content">
+            <div class="title_maxi">Filerie Electre</div>
+            <div class="text_small">dès 2002</div>
+          </div>
+        </div>
         <div class="gallery_item">
           <img src="/medias/S6/fileries/9 Tranche ligne Electre.jpg">
           <div class="legend text_small">Tranche ligne Electre</div>

diff --git a/WebApps/S6-MULTIPLAYER/script.js b/WebApps/S6-MULTIPLAYER/script.js
@@ -94,6 +94,9 @@ var autoHideControls = function() {
   // document.onclick = timerReset;
   // document.onscroll = timerReset;
   // document.onkeypress = timerReset;
+
+
+
   $('body').mousemove(function(){ timerReset(); })
   $('body').click(function(){ timerReset(); })
 
@@ -127,10 +130,10 @@ $('#btn_next').click(function(){
 })
 
 function gotoIndex(index){
-  $('.gallery_item.active').fadeOut(200,function(){
+  $('.gallery_item.active').fadeOut(150,function(){
     $(this).removeClass('active');
     $('.gallery_item:nth-child('+index+')').addClass('active');
-    $('.gallery_item:nth-child('+index+')').fadeIn(200);
+    $('.gallery_item:nth-child('+index+')').fadeIn(150);
 
     resetZoom()
   })

diff --git a/WebApps/S6-MULTIPLAYER/style.css b/WebApps/S6-MULTIPLAYER/style.css
@@ -88,8 +88,8 @@
   width: 100%;
   background-color: black;
   border: 1px solid white;
-  padding-right: 60px;
-  padding-top: 45px;
+  padding-right: 45px;
+  padding-top: 60px;
   box-sizing: border-box;
 }
 #page_gallery_list .list_item_legend{
@@ -122,6 +122,18 @@
   left: 8%;
   top: 10vh;
 }
+#page_gallery .gallery .gallery_interlayer{
+  border: 1px solid white;
+  height:80vh;
+}
+#page_gallery .gallery .gallery_interlayer .gallery_interlayer_content{
+  padding-top: 22%;
+  padding-left: 100px;
+}
+#page_gallery .gallery .gallery_interlayer .gallery_interlayer_content *{
+  padding-bottom: 30px;
+}
+
 #page_gallery .gallery .gallery_item img{
   max-height: 80vh;
   user-select: none;