intia-theme 0.1.51 → 0.1.52

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f905a7cf72167a88c327e3a8de72dc0bf24395f73a2786c333f89880a557fb06
-  data.tar.gz: 363c862e72c5da5ba2d0a8cd62f5f3c67de986af1624aa608661e84ea7da19e8
+  metadata.gz: 1ab00b94fabf6baf9b4494f85dc6697ee503e586e88c6e45cda41df2092fb803
+  data.tar.gz: e59fc45f360b37c9020f302dfd22b34bb52f83c0834cfe9c292f92e50c8f7c07
 SHA512:
-  metadata.gz: 929a33259fa68ca2656dc4f52dfd2cc45c676c5b9cc0356ad50c21529d3516b8ca3dceab982fa084e53e097da6dbba217598a5039cf9e7320b819fdf8a098594
-  data.tar.gz: 5a650a0bfd4ab32dfca2808849136c632f2d0eb1ab1dac9023c4546109c42199503c5af296ca13752493283c6fc8a126c3aadb179fc57e31a65e532c0dd72746
+  metadata.gz: e7239a6b15ec22c0f81a0888752e255053dd95ddd1922cbc040223913b55bf29501af4cfd1e6695c457619650623041d89d5556a1b076bd21a6017f232fe80e1
+  data.tar.gz: 61cc042ff04102b1cb5f619041e1a004d41edd24811b640a7f2bcf2209ef239294f7264e557fc0e2b6262b0203be0314444942aa684ac4c8e3382aaa1bd061a3

data/_includes/header.html

@@ -12,7 +12,26 @@
             </a>
         </div>
         <div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }">
-            <div class="navbar-end buttons">
+            <div id="SearchOverlay" class="searchbar-overlay navbar-end buttons">
+                <div class="navbar-item searchbar">
+                    <div class="field">
+                        <div id="search-container" class="control">
+                          <input class="input search-input" type="text" id="search-input" placeholder="Suchbegriff eintippen">
+                        </div>
+                    </div>
+                    <ul id="results-container" class="search-result-list"></ul>
+                </div>
+                <div class="navbar-end">
+                    <div class="navbar-item navbar-search">
+                        <a id="closeSearch">
+                            <span class="icon">
+                                <i class="fa-solid icon-remove"></i>
+                            </span>
+                        </a>  
+                    </div>
+                </div>
+            </div>
+            <div id="navmenu" class="navbar-end buttons">
                 {% if site.data.navigation %}
                 {% for item in site.data.navigation %}
                 {% if item.dropdown %}
@@ -55,7 +74,6 @@
         </div>
     </div>
 </nav>
-
 {% unless page.hide_beadcrumb %}
 <section class="breadcrumb-section green-version">
     <div class="container breadcrumb-container">
@@ -91,20 +109,6 @@
 {% else %}
 {% endunless %}
 
-
-<div id="SearchOverlay" class="overlay">
-    
-    <div class="overlay-content">
-        
-        <div class="field">
-            <div id="search-container" class="control">
-              <input class="input" type="text" id="search-input" placeholder="Suchbegriff eintippen">
-            </div>
-        </div>
-        <span class="closebtn" id="closeSearch" title="Close Overlay">×</span>
-        <ul id="results-container"></ul>
-    </div>
-</div>
   <!-- Script pointing to search-script.js -->
   <script src="/assets/js/search.js" type="text/javascript"></script>
   

data/_sass/_icons.scss

@@ -19,3 +19,11 @@
   height: 32px;
   filter: invert(35%) sepia(93%) saturate(355%) hue-rotate(124deg) brightness(93%) contrast(88%);
 }
+.icon-remove:before {
+  @extend .custom-button-icons;
+  background: url(/assets/img/icons/remove.svg) no-repeat;
+  width: 32px;
+  height: 32px;
+  filter: invert(35%) sepia(93%) saturate(355%) hue-rotate(124deg) brightness(93%) contrast(88%);
+}
+

data/_sass/_layout.scss

@@ -183,68 +183,36 @@ ul {
   padding-top: 0.5rem !important;
 }
 //Search overlay
-.overlay {
-  height: 100%;
-  width: 100%;
-  display: none;
-  position: fixed;
-  z-index: 40;
-  top: 0;
-  left: 0;
-  background-color: #1e7d73be;
-}
-
-.overlay-content {
-  position: relative;
-  top: 46%;
-  width: 80%;
-  margin-top: 30px;
-  margin: auto;
-}
-
-.overlay .closebtn {
-  font-size: 60px;
-  cursor: pointer;
-  color: white;
-}
-
-.overlay .closebtn:hover {
-  color: #ccc;
-}
-
-.overlay input[type=text] {
-  padding: 15px;
-  font-size: 17px;
-  float: left;
-  width: 80%;
-  background: white;
-  border: 3px solid $primary-dark;
+.searchbar .field{
+  margin-bottom: 0;
 }
-
-.overlay input[type=text]:hover {
-  background: #f1f1f1;
-}
-
-.overlay button {
-  float: left;
-  width: 20%;
-  padding: 15px;
-  background: #ddd;
-  font-size: 17px;
-  border: none;
-  cursor: pointer;
+.searchbar-overlay{
+  display: none;
 }
-
-.overlay button:hover {
-  background: #bbb;
+.searchbar{
+  height: 47px;
+  width: 800px;
+  padding-top: 0 !important;
 }
-
 .search-item {
-  color: white;
+  color: black;
 }
-.overlay-content ul{
+.searchbar-overlay ul{
   list-style-type: none;
 }
+.search-result-list {
+  display: none;
+  background-color: #e7f2ea;
+  color: black;
+  border-bottom-left-radius: 45px;
+  border-bottom-right-radius: 45px;
+  border-left: 3px solid #1e7d73;
+  border-right: 3px solid #1e7d73;
+  border-bottom: 3px solid #1e7d73;
+}
+.search-input:active, .search-input:hover{
+  border-color: #1e7d73 !important ;
+}
 
 .button.is-dark.has-dropdown:hover .navbar-dropdown,
 .button.is-dark.is-hovered.has-dropdown .navbar-dropdown {
@@ -399,7 +367,6 @@ a .tooltip-popup {
 // Navi
 .navbar {
   padding-top: 0.6rem;
-  padding-bottom: 2.6rem;
 }
 
 .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
@@ -1132,9 +1099,6 @@ div.faq {
   color: #1e7d73;
   cursor: default;
 }
-.navbar {
-  padding-bottom: 2.3rem;
-}
 .hero.is-medium .hero-body {
   padding-top: 1rem;
 }
@@ -1222,7 +1186,6 @@ div.faq {
   }
   .navbar {
     padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
   }
   .navbar-brand img {
     margin: 1rem;
@@ -1341,4 +1304,10 @@ div.faq {
     image-rendering: -webkit-optimize-contrast;
     padding-bottom: 15px;
   }
+  //Searchbar
+  .searchbar{
+    height: 47px;
+    width: auto;
+    padding-top: 0 !important;
+  }
 }

data/assets/img/icons/remove.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  
+<g transform="matrix(2,0,0,2,0,0)"><path d="M.44,21.44a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l9.26-9.26a.25.25,0,0,1,.36,0l9.26,9.26a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L14.3,12.18a.25.25,0,0,1,0-.36l9.26-9.26A1.5,1.5,0,0,0,21.44.44L12.18,9.7a.25.25,0,0,1-.36,0L2.56.44A1.5,1.5,0,0,0,.44,2.56L9.7,11.82a.25.25,0,0,1,0,.36Z" style="fill: #000000"></path></g></svg>

data/assets/js/main.js

@@ -51,11 +51,32 @@ window.onscroll = function(ev) {
 
 document.getElementById("openSearch").addEventListener("click", openSearch);
 document.getElementById("closeSearch").addEventListener("click", closeSearch);
+document.getElementById("search-input").addEventListener("input", showsearchresults);
+
+var searchOverlay = document.getElementById("SearchOverlay");
+var navmenu = document.getElementById("navmenu");
+var resultsContainer = document.getElementById("results-container");
+var searchInput = document.getElementById("search-input");
 
 function openSearch() {
-    document.getElementById("SearchOverlay").style.display = "block";
+    searchOverlay.style.display = "flex";
+    navmenu.style.display = "none";
 }
   
 function closeSearch() {
-    document.getElementById("SearchOverlay").style.display = "none";
+    searchOverlay.style.display = "none";
+    navmenu.style.display = "flex";
+}
+
+
+function showsearchresults(e) {
+    if(e.target.value.length>0){
+        resultsContainer.style.display = "block";
+        searchInput.style.borderBottomLeftRadius = "0px";
+        searchInput.style.borderBottomRightRadius = "0px";
+    }else{
+        resultsContainer.style.display = "none";
+        searchInput.style.borderBottomLeftRadius = "45px";
+        searchInput.style.borderBottomRightRadius = "45px";
+    }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: intia-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.51
+  version: 0.1.52
 platform: ruby
 authors:
 - Marc Schmidt
@@ -67,6 +67,7 @@ files:
 - assets/img/icons/external.svg
 - assets/img/icons/handshake.svg
 - assets/img/icons/internal.png
+- assets/img/icons/remove.svg
 - assets/img/icons/search.svg
 - assets/img/internal-link.png
 - assets/img/logo-black.png