close salles

user/themes/lecampus/images/croix.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="30"
+   viewBox="0 0 7.9374996 7.9375002"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="croix.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.3838887"
+     inkscape:cx="29.986085"
+     inkscape:cy="14.972295"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1029"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-289.06249)">
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.51259172;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 7.678614,289.32146 0.25888453,296.7411"
+       id="path4547"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4549"
+       d="M 7.678614,296.7411 0.25888453,289.32146"
+       style="fill:#00000c;fill-opacity:1;stroke:#ffffff;stroke-width:0.51259172;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>

user/themes/lecampus/js/site.js

@@ -141,7 +141,7 @@ function mapsalles() {
   var $salles = $('.fond svg path');
   var $content = $('.content .content_salle');
   arrayid = [];
-  $('.content .content_salle:not(#salle_trois_becs)').css("display", "none");
+  $('.content .content_salle#salle_trois_becs').css("visibility", "visible");
   $('.fond svg path#salle_trois_becs').css("fill", "#0093a3");
 
   $salles.on('click', function() {
@@ -149,11 +149,16 @@ function mapsalles() {
     arrayid.push(idsalle);
     $salles.css("fill", "white");
     $(this).css("fill", "#0093a3");
-    $('.content .content_salle').css("display", "none");
-    $('.content .content_salle#'+arrayid).css("display", "block");
+    $('.content .content_salle').css("visibility", "hidden");
+    $('.content .content_salle#'+arrayid).css("visibility", "visible");
     arrayid.length = 0;
   });
 
+  var $close = $('.content_salle .header-salles img');
+  $close.on('click', function () {
+    console.log('close');
+    $(this).parents('.content_salle').css("visibility", "hidden");
+  })
 };
 
 function burger() {
@@ -166,11 +171,11 @@ function burger() {
 
 jQuery(document).ready(function(){
   addclass();
+  mapsalles();
   clickbutton();
   links();
   slide();
   filteritem();
   map();
-  mapsalles();
   burger();
 });

user/themes/lecampus/scss/theme/_blog.scss

@@ -932,6 +932,9 @@
     width: 30%;
   }
   .content_salle{
+    // display: none;
+    visibility: hidden;
+    
     position: absolute;
     left: 50%;
     top: 300px;
@@ -940,11 +943,18 @@
     & > p{
       padding-left: 10px;
     }
-    h3{
+    .header-salles{
       background: $light-blue;
       padding: 5px 10px;
       color: white;
       margin-top: 0;
+      width: 100%;
+      h3{
+        width: 100%;
+      }
+      img{
+        display: none;
+      }
     }
     h4{
       background: $green;

user/themes/lecampus/scss/theme/_mobile.scss

@@ -495,10 +495,28 @@
     }
   }
   #sublog {
+    .bandeau{
+      img{
+        width: 100%;
+      }
+    }
+    .title_gal{
+      display: none;
+    }
     .content_salle{
       width: 90%!important;
       left: 5%!important;
       top: 250px!important;
+      .header-salles{
+        display: inline-flex;
+        justify-content: space-between;
+        img{
+          display: block!important;
+          margin: auto;
+          width: 20px;
+          height: 20px;
+        }
+      }
       p{
         padding: 0px 10px!important;
       }

user/themes/lecampus/templates/sublog.html.twig

@@ -1001,7 +1001,10 @@
         {% for item in page.collection %}
           <div class="content_salle" id="{{ macro.pageLinkName(item.title) }}">
             {% set child_image = item.media.images %}
-            <h3>{{item.title}}</h3>
+            <div class="header-salles">
+              <h3>{{item.title}}</h3>
+              <img src="/user/themes/lecampus/images/croix.svg" alt="">
+          </div>
             {% if image %}
             <div class="gal-salles">
               {% for img in child_image %}