search bar

user/themes/vocurations/images/Icone_search.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24.327" height="24.765" viewBox="0 0 24.327 24.765">
+  <g id="Groupe_2" data-name="Groupe 2" transform="translate(-1450.557 -16.647)">
+    <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(1450.557 28.385) rotate(-43)" fill="#fff" stroke="#000" stroke-width="2.5">
+      <circle cx="8.606" cy="8.606" r="8.606" stroke="none"/>
+      <circle cx="8.606" cy="8.606" r="7.356" fill="none"/>
+    </g>
+    <line id="Ligne_2" data-name="Ligne 2" y2="9.18" transform="translate(1467.416 33.845) rotate(-43)" fill="none" stroke="#000" stroke-width="2.5"/>
+  </g>
+</svg>

user/themes/vocurations/scss/theme/_extensions.scss

@@ -115,7 +115,7 @@
   }
 }
 
-.recherche, .search-results{
+.simplesearch_results{
   .section{
     // width: calc((100% / 12) * 9);
     width: 100%;
@@ -149,6 +149,10 @@
     width: 100%;
     .search-row{
       width: calc((100% / 12) * 6);
+      margin-bottom: 6rem;
+      a{
+        display: block;
+      }
       &:nth-child(odd){
         padding-right: 0.7rem;
       }
@@ -173,6 +177,7 @@
         text-transform: uppercase;
       }
       .search-image{
+        float: none;
         width: 100%;
         margin-top: 1.5rem;
         margin-bottom: 1.5rem;

user/themes/vocurations/scss/theme/_header.scss

@@ -18,6 +18,7 @@
       & > nav.dropmenu{
         & > ul{
           @include flexbox;
+          align-items: baseline;
           & > li{
             margin-right: 1.2rem;
             & > ul{

user/themes/vocurations/scss/theme/_mobile.scss

@@ -1,6 +1,13 @@
 @media screen and (max-width: 1450px) {
   html{
     font-size: 13px;
+    .navbar{
+      nav{
+        li:nth-last-child(1){
+          width: 20px;
+        }
+      }
+    }
   }
 }
 
@@ -184,13 +191,38 @@ h2{
     }
   }
 
+  .simplesearch_results{
+    .section{
+      .simplesearch{
+        .search-wrapper{
+          form{
+            display: block!important;
+            .search-input, button{
+              font-size: 2rem!important;
+              height: 50px!important;
+              text-align: left!important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
   .search-results{
+    .section{
+      .simplesearch{
+        .center{
+          width: 100%!important;
+          margin-top: 8rem!important;
+        }
+      }
+    }
     .results{
       display: block!important;
       .search-row{
         width: 100%!important;
         padding: 0!important;
-        margin-bottom: 10px;
       }
     }
   }
@@ -198,6 +230,16 @@ h2{
 }
 
 @media screen and (max-width: 440px) {
+  .navbar{
+    nav{
+      li:nth-last-child(1){
+        position: absolute!important;
+        bottom: 20px!important;
+        width: 30px!important;
+      }
+    }
+  }
+
   header{
     .desktop-menu{
       ul{

user/themes/vocurations/templates/partials/navigation.html.twig

@@ -2,4 +2,9 @@
 
 <ul {{ tree ? 'class="tree"' : '' }}>
     {{ macros.nav_loop(pages) }}
+    <li>
+      <a href="/search">
+        <img src="/user/themes/vocurations/images/Icone_search.svg" alt="">
+      </a>
+    </li>
 </ul>

user/themes/vocurations/templates/partials/simplesearch_item.html.twig

@@ -1,38 +1,39 @@
+{% set modularCollection = page.collection %}
+{% set pageCollection = search_results %}
 {% if page.template == 'modular' %}
 
   {% for item in page.collection %}
 
-
       {% set value = query|hyphenize %}
       {% set title = item.title|hyphenize %}
 
       {% if title|contains(value) == 1  %}
-      <section class="search-row">
+        <section class="search-row">
+          <a href="{{ item.header.url_news }}" target="_blank">
+            {% set banner = item.media.images|first %}
+            <div class="search-item">
 
-        <a href="{{page.url}}">
-          {% set banner = item.media.images|first %}
-          <div class="search-item">
-              <div class="search-title">
-                {% include 'partials/blog/title.html.twig' with {title_level: 'h2', page: item} %}
-              </div>
-
-              <div class="search-details">
-                {% include 'partials/blog/date.html.twig' with {page: item} %}
-              </div>
-
-              {% if banner %}
-                <div class="search-image">
-                  {{banner.cropZoom(800, 500).sizes('(max-width:100vw) 100vw, 50vw').html(item.title, 'image article')}}
+                <div class="search-title">
+                  {% include 'partials/blog/title.html.twig' with {title_level: 'h2', page: item} %}
                 </div>
-              {% endif %}
-          </div>
-        </a>
 
-      </section>
+                <div class="search-details">
+                  {% include 'partials/blog/date.html.twig' with {page: item} %}
+                </div>
 
+                {% if banner %}
+
+                  <div class="search-image">
+                    {{banner.cropZoom(800, 500).sizes('(max-width:100vw) 100vw, 50vw').html(item.title, 'image article')}}
+                  </div>
+
+                {% endif %}
+
+            </div>
+          </a>
+        </section>
       {% endif %}
 
-
   {% endfor %}
 
 {% else %}
@@ -40,9 +41,7 @@
   <section class="search-row">
 
     <a href="{{page.url}}">
-
       {% set banner = page.media.images|first %}
-
       <div class="search-item">
 
           <div class="search-title">
@@ -60,8 +59,8 @@
           {% endif %}
 
       </div>
-
     </a>
+
   </section>
 
 {% endif %}

user/themes/vocurations/templates/simplesearch_results.html.twig

@@ -16,7 +16,7 @@
             {% endif %}
         </p>
         <div class="results">
-          {% for page in search_results %}
+          {% for page in search_results.order('date', 'desc') %}
               {% include 'partials/simplesearch_item.html.twig' with {'page': page} %}
           {% endfor %}
         </div>