WIP: move search bar into the header

static/css/home.css

@@ -48,12 +48,24 @@ section:first-child > div > h2 {
 #join-us:hover,
 #join-us.sticky:hover {
   background-color: #11c374;
+  color: #fff;
 }
 #join-us.sticky {
   position: fixed;
-  top: 1rem;
+  top: 0;
+  left: 0;
   z-index: 9;
-  padding: 0.5rem auto;
+  padding: 0.5rem;
+  background: #fff;
+  padding: 1rem;
+  text-decoration: inherit;
+  color: #333;
+  font-family: 'Poppins';
+  font-weight: 300;
+  font-size: 1.5rem;
+  border-radius: 0;
+  width: 16rem;
+  text-align: center;
 }
 #arrow-down {
   display: flex;

static/css/main.css

@@ -64,6 +64,10 @@ body > header {
   align-items: center;
   z-index: 9;
 }
+body > header div {
+  display: flex;
+  align-items: center;
+}
 body > header h1 {
   margin: 0;
   font-weight: 300;

static/css/search-bar.css

@@ -0,0 +1,51 @@
+
+#search {
+  display: flex;
+  padding: 0;
+  border: none;
+}
+#search > svg {
+  margin: 0 2rem;
+  cursor: pointer;
+  fill: #279e77;
+}
+#search > svg:hover {
+  fill: #00bf6b;
+}
+#search > input {
+  display: none;
+}
+#search > input:first-of-type {  
+  padding: .75rem 3rem;
+  background: rgba(50, 50, 50, 0.2);
+  border: none;
+  border-radius: 1rem 0 0 1rem;
+}
+#search > input:last-of-type {
+  position: relative;
+  padding: .75rem;
+  left: -0.8rem;
+  border: none;
+  background-color: #279e77;
+  color: #fafafa;
+  cursor: pointer;
+  border-radius: 0 1rem 1rem 0;
+}
+#search > input:last-of-type:hover {
+  background-color: #00bf6b;
+}
+
+#search > input.active  {
+  display: block;
+  animation: .5s active ease-in-out;
+}
+
+@keyframes active {
+    from {
+      opacity: 0;
+      padding: 0;
+    }
+    to {
+      opacity: 1;
+    }
+}

static/css/search.css

@@ -12,39 +12,6 @@ main > header {
   border-radius: 0.75rem;
 }
 
-form {
-  margin: 4.5rem auto;
-}
-form::before {
-  font-family: FontAwesome;
-  content: '\f002';
-  font-size: 2.5rem;
-  position: relative;
-  left: 4rem;
-  color: #646464;
-  cursor: pointer;
-}
-input {
-  font-size: 2rem;
-}
-input:first-of-type {
-  padding: 1rem 1.5rem 1rem 5rem;
-  background: rgba(50, 50, 50, 0.2);
-  border: 0 solid #dbdbdb;
-  width: 40%;
-  border-radius: 1rem 0 0 1rem;
-}
-input:last-of-type {
-  position: relative;
-  padding: 0.8rem 1.5rem;
-  left: -0.8rem;
-  border: 0.2rem solid #3ba777;
-  background-color: #3ba777;
-  color: #fafafa;
-  cursor: pointer;
-  border-radius: 0 1rem 1rem 0;
-}
-
 main > section {
   display: flex;
   justify-content: space-around;
@@ -73,15 +40,17 @@ ul {
   padding: 0 0 2.5rem;
   margin: 0;  
 }
-
+.profiles {
+  margin-bottom: 2rem;
+}
 .profiles,
 .articles {
   width: 85%;
   display: flex;
   justify-content: center;
 }
-.profiles {
-  margin: 2.5rem 0;
+.articles {
+  padding: 0 5rem;
 }
 .profiles a {
   width: 100%;

static/js/home.js

@@ -1,3 +1,4 @@
+// Button position
 const button = document.querySelector('#join-us')
 let buttonPosition = adaptButtonPosition()
 

static/js/search.js

@@ -0,0 +1,14 @@
+search = window.location.search.split('?q=')
+
+if (search[1] === '') {
+  alert('no search detect', 'Fill the search field please', 2000)
+} else {
+  search = search[1].split('+').toString().replace(/,/ig, ' ')
+  form = document.querySelectorAll('#search input')
+  form.forEach( input => {
+    input.setAttribute('class', 'active')
+    if (input.placeholder) {
+      input.value = search
+    }
+  })
+}

static/js/utils.js

@@ -37,3 +37,12 @@ window.onload = _ => {
     menu.classList.toggle('active')
   })
 }
+
+// Glass search
+const glass = document.querySelector('#search svg')
+const inputs = document.querySelectorAll('#search input')
+glass.addEventListener('click', _ => {
+  inputs.forEach( input => {
+    input.classList.toggle('active')
+  })
+})

templates/layout.html

@@ -11,10 +11,20 @@
 <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>
 <link href="https://fonts.googleapis.com/css?family=Raleway:600|Crimson+Text|Libre+Baskerville|Libre+Franklin|Poppins|Lora|Roboto|Oxygen|Open+Sans:600" rel=stylesheet>
 <link rel=stylesheet href={{ url_for('static', filename='css/edit.css') }}>
+<link rel=stylesheet href={{ url_for('static', filename='css/search-bar.css') }}>
 {% block extra_css %}{% endblock %}
 
 <header>
-  <h1><a href="/">Neomad</a></h1>
+  <div>
+    <h1><a href="/">Neomad</a></h1>
+    <form id=search action="{{ url_for('search') }}" method=get>
+      <svg width=35 height=35 fill=#68BEBC viewBox="0 0 25 25">
+        <path d="M20.067 18.933l-4.157-4.157a6 6 0 1 0-.884.884l4.157 4.157a.624.624 0 1 0 .884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"></path>
+      </svg>
+      <input type=search name=q placeholder="Neomads and articles...">
+      <input type=submit value=search>
+    </form>
+  </div>
   <nav>
     <a href={{ url_for('article_list') }} title="Read nomad's adventures">Read</a>
     {% if current_user and current_user.is_authenticated %}

templates/search/list.html

@@ -1,21 +1,15 @@
 {% from 'blog/macros.html' import article_list with context %}
+
 {% extends 'layout.html' %}
 
 {% block title %}Search results{% endblock %}
 
 {% block extra_css %}
-<link rel=stylesheet href=//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css>
 <link rel=stylesheet href={{ url_for('static', filename='css/search.css') }}>
 <link rel=stylesheet href={{ url_for('static', filename='css/_article_list.css') }}>
 {% endblock %}
 
 {% block main %}
-<header>
-  <form action="{{ url_for('search') }}" method=get>
-    <input id=search type=search name=q placeholder="search for neomads and articles">
-    <input type=submit value=search>
-  </form>
-</header>
 
 <section>
   {% if users %}
@@ -37,11 +31,16 @@ <h2 name=username>{{ user.username }}</h2>
   {% endif %}
 
   {% if articles %}
-  <article>
+  <article class="articles">
     <h2>{{articles|length}} articles found</h2>
     {{ article_list(articles=articles) }}
   </article>
   {% endif %}
 
 </section>
+
+{% block extra_js %}
+<script src={{ url_for('static', filename='js/search.js') }}></script>
+{% endblock %}
+
 {% endblock %}