responsive fixes + amélioration recherche

digicoop · Mar 21, 2024 · 768982d · 768982d
1 parent 8298193
commit 768982d
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 44 deletions.
diff --git a/_includes/tags.html b/_includes/tags.html
@@ -1,7 +1,7 @@
 <ul id="tags">
   <li><a href="{{site.baseurl}}/annuaire?q=developpement%20web">Développement Web</a></li>
   <li><a href="{{site.baseurl}}/annuaire?q=transformation%20digitale">Transformation Digitale</a></li>
-  <li><a href="{{site.baseurl}}/annuaire?q=BI">Business Intelligence</a></li>
+  <li><a href="{{site.baseurl}}/annuaire?q=business%20intelligence">Business Intelligence</a></li>
   <li><a href="{{site.baseurl}}/annuaire?q=data">Data</a></li>
   <li><a href="{{site.baseurl}}/annuaire?q=collaboration">Collaboration</a></li>
   <li><a href="{{site.baseurl}}/annuaire?q=infrastructure">Infrastructure</a></li>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -38,7 +38,7 @@
     {{content}}
     <footer>
       <div class="col">
-        <img src="{{site.baseurl}}/assets/img/logo.svg" alt="Cooptech">
+        <img src="{{site.baseurl}}/assets/img/logo-white.svg" alt="Cooptech">
       </div>
       <div class="col">
         <h4>Restons en contact</h4>

diff --git a/_members/insiders.md b/_members/insiders.md
@@ -6,7 +6,7 @@ description: Trouver les meilleurs consultants
 email: [email protected]
 address: 4 rue Pierre Semard 75009 Paris
 logo: https://insiders.coop/img/logo.ae2890e6.png
-keywords: [Expertise, Consulting, "Intégration Microsoft Azure", "Data Platform", "Data & BI", "Architecture", "Modern Data Warehouse", Infrastructure, Développement]
+keywords: [Expertise, Consulting, "Intégration Microsoft Azure", "Data Platform", "Data", "Business intelligence", "Architecture", "Modern Data Warehouse", Infrastructure, Développement]
 ---
 Insiders.coop c'est avant tout un collectif d'experts qui travaillent au quotidien en coopération avec tous nos consultants. Plusieurs d'entre eux sont distingués Microsoft Most Valuable Professional (MVP).
 Alors pourquoi opter pour un seul consultant, quand Insiders.coop est toute une communauté à votre service !
diff --git a/annuaire.html b/annuaire.html
@@ -16,6 +16,10 @@ <h1>Découvrez les coopératives tech</h1>
   </form>
 </div>
 {% include tags.html %}
+<div id="members-search-label">
+  <span></span>
+  <button onclick="clearSearch()">Effacer</button>
+</div>
 <div id="members" class="container cards">
   {% for member in site.members %}
   <a href="{{member.url|prepend:site.baseurl}}">
@@ -63,26 +67,44 @@ <h1>Découvrez les coopératives tech</h1>
   function onSearch(preventLocationChange=false) {
     const q = document.getElementById('searchbox').value.trim();
     const members = document.getElementById('members');
+    const label = document.getElementById("members-search-label");
 
     if (!q) {
-      members.classList.remove('searching');
-      window.location.search = '';
+      clearSearch();
       return;
     }
 
+    clearSearch(false);
     members.classList.add('searching');
-    for (const el of members.querySelectorAll('a.result')) {
-      el.classList.remove('result');
-    }
-
     const docs = lunrIndex.search(q);
 
+    let found = false;
     for (let doc of docs) {
       const el = members.querySelector(`a[href="${doc.ref}"]`);
       if (el) {
         el.classList.add('result');
+        found = true;
       }
     }
+
+    label.querySelector("span").innerText = found ? `Nos coopératives pour "${q}"` : `Pas de résultats pour "${q}"`;
+    label.style.display = "block";
+  }
+
+  function clearSearch(resetLocation=true) {
+    const members = document.getElementById('members');
+    const label = document.getElementById("members-search-label");
+
+    members.classList.remove('searching');
+    label.style.display = "none";
+
+    if (resetLocation) {
+      window.location.search = '';
+    }
+
+    for (const el of members.querySelectorAll('a.result')) {
+      el.classList.remove('result');
+    }
   }
 
   window.addEventListener('load', function() {
@@ -91,6 +113,7 @@ <h1>Découvrez les coopératives tech</h1>
       const q = decodeURIComponent(match[1].replace(/\+/g, ' '));
       document.getElementById('searchbox').value = q;
       onSearch();
+      document.getElementById("tags").scrollIntoView();
     }
   });
 </script>
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -62,8 +62,8 @@ header {
       text-decoration: none;
     }
     header > nav > a.active {
-      border-bottom-color: #1baac3;
-      color: #1baac3;
+      background: #1baac3;
+      color: #fff;
     }
     header > nav > a:hover {
       color: #1baac3;
@@ -90,6 +90,11 @@ header {
   header > nav > a {
     display: inline-flex;
   }
+  header > nav > a.active {
+    background: transparent;
+    border-bottom-color: #1baac3;
+    color: #1baac3;
+  }
   #nav-toggle {
     display: none;
   }
@@ -104,19 +109,14 @@ header {
 footer {
   background-color: #222;
   color: #aaa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: 2rem;
   margin-top: auto;
 }
   footer a {
     color: #aaa;
   }
-  footer .col:not(:first-child) {
-    margin-left: 2rem;
-    padding-left: 2rem;
-    border-left: 1px solid #333;
+  footer .col {
+    margin-bottom: 1rem;
   }
     footer .col h4 {
       margin-top: 0;
@@ -127,6 +127,19 @@ footer {
       margin-right: 10px;
     }
 
+@media (min-width: 600px) {
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  footer .col:not(:first-child) {
+    margin-left: 2rem;
+    padding-left: 2rem;
+    border-left: 1px solid #333;
+  }
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -137,31 +150,26 @@ footer {
  */
 
 .hero {
-  background: #e0e0e0 url(../img/hero-bg.jpg) top center no-repeat;
-  padding: 4rem 0 3rem;
+  background: #08b6d4;
+  padding: 2rem 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
-}
-@media (max-width: 850px) {
-  .hero {
-    padding: 2rem 0;
-  }
 }
   .hero > h1 {
     font-size: 3rem;
     color: #333;
   }
     .hero > h1 em {
-      color: #1baac3;
+      color: #fff;
       font-style: normal;
     }
   .hero > p {
     font-size: 1.2rem;
     line-height: 1.8rem;
-    color: #555;
+    color: #fff;
     max-width: 800px;
   }
   .hero form {
@@ -196,7 +204,29 @@ footer {
       font-weight: bold;
     }
 
+@media (min-width: 600px) {
+  .hero {
+    background: #e0e0e0 url(../img/hero-bg.jpg) top center no-repeat;
+  }
+  .hero > h1 em {
+    color: #1baac3;
+  }
+  .hero > p {
+    color: #555;
+  }
+  .hero form .input {
+    min-width: 400px;
+  }
+}
+
+@media (min-width: 850px) {
+  .hero {
+    padding: 4rem 0 3rem;
+  }
+}
+
 .btn {
+  display: inline-block;
   border: 0;
   border-radius: 5px;
   background: linear-gradient(to bottom,#1baac3 0%,#1798af 100%);
@@ -215,18 +245,18 @@ footer {
   margin: 0 auto;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: 1fr;
   gap: 3rem;
   max-width: 1200px;
 }
-@media (max-width: 900px) {
+@media (min-width: 500px) {
   .promo-blocks {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-@media (max-width: 500px) {
+@media (min-width: 900px) {
   .promo-blocks {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 }
   .promo-blocks li {
@@ -308,14 +338,13 @@ section > .promo-blocks:first-child {
 article {
   max-width: 900px;
   margin: 0 auto;
-  padding: 3rem 0;
+  padding: 3rem 0.5rem;
   line-height: 1.5rem;
 }
 
-@media (max-width: 900px) {
+@media (min-width: 900px) {
   article, section {
-    padding-left: .5rem;
-    padding-right: .5rem;
+    padding: 3rem 0;
   }
 }
 
@@ -354,11 +383,11 @@ article {
   */
 
 #home-hero {
-  padding: 8rem 0 6rem;
+  padding: 2rem 0 2rem;
 }
-@media (max-width: 850px) {
+@media (min-width: 850px) {
   #home-hero {
-    padding: 2rem 0 2rem;
+    padding: 8rem 0 6rem;
   }
 }
   #home-hero #tags {
@@ -391,13 +420,19 @@ article {
   }
     #home-members a {
       display: block;
-      width: 150px;
+      width: 100px;
       height: 100px;
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center center;
     }
 
+@media (min-width: 350px) {
+  #home-members a {
+    width: 150px;
+  }
+}
+
 #create-hero {
   background: url(../img/create-hero-bg.png) no-repeat top center;
   text-align: center;
@@ -437,18 +472,19 @@ article {
 
 .cards {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: 1fr;
   gap: 3rem;
-  padding: 3rem;
+  padding: 1rem;
 }
-@media (max-width: 900px) {
+@media (min-width: 500px) {
   .cards {
     grid-template-columns: repeat(2, 1fr);
+    padding: 3rem;
   }
 }
-@media (max-width: 500px) {
+@media (min-width: 900px) {
   .cards {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 }
   .cards > a {
@@ -496,6 +532,20 @@ article {
       overflow: hidden;
     }
 
+#members-search-label {
+  display: none;
+  margin: auto;
+  font-size: 1.5rem;
+  color: #333;
+}
+
+#members-search-label button {
+  border: 0;
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 #member-hero-logo {
   min-height: 100px;
   max-height: 200px;