gse integratie

themes/beautifulbaking/layouts/partials/nav.html

@@ -15,6 +15,8 @@
 
     <div class="collapse navbar-collapse" id="main-navbar">
       <ul class="nav navbar-nav navbar-right">
+      {{ partial "search.html" . }}
+
       {{ range .Site.Menus.main.ByWeight }}
         {{ if .HasChildren }}
           <li class="navlinks-container">

themes/beautifulbaking/layouts/partials/search.html

@@ -0,0 +1,35 @@
+<li id="google-search-wrapper">
+	<script>
+	(function() {
+	  var cx = '015035874764642922467:uhhwew4ykvm';
+	  var gcse = document.createElement('script');
+	  gcse.type = 'text/javascript';
+	  gcse.async = true;
+	  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+	  var s = document.getElementsByTagName('script')[0];
+	  s.parentNode.insertBefore(gcse, s);
+	})();
+	</script>
+
+	<gcse:search></gcse:search>
+
+	<form onsubmit="return false;">
+		<label for="searchInput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search</span></label>
+		<input type="text" id="searchInput" placeholder="Search">
+	</form>
+
+	<script>
+	(function() {
+		document.querySelector('#searchInput').addEventListener("keypress", function(event) {
+			if(event.keyCode === 13) {
+				event.stopPropagation();
+				document.querySelector('#___gcse_0 input').value = document.querySelector('#searchInput').value;
+				document.querySelector('.gsc-search-button input').click();
+
+				var modal = document.querySelector('.gsc-modal-background-image');
+				modal.attributes['class'].value = "gsc-modal-background-image gsc-modal-background-image-visible";
+			}
+		});
+	})();
+	</script>
+</li>

themes/beautifulbaking/static/css/main.css

@@ -1,5 +1,36 @@
 @import url("pygment_highlights.css");
 
+/* --- google search stuff --- */
+.gsc-search-box {
+  display: none;
+}
+
+.gsc-control-cse {
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+}
+
+#google-search-wrapper label {
+  position: absolute;
+  left: 10px;
+  color: grey;
+}
+
+#google-search-wrapper {
+  padding-top: 10px;
+}
+
+#google-search-wrapper input {
+  background-color: #EFEFEF;
+  width: 150px;
+  border-radius: 8px;
+  border: 1px solid #c3f070;
+  padding-left: 30px;
+  color: grey;
+  font-size: 14px;
+}
+
 /* --- General --- */
 
 body {