From 347d972096c07c97ffb8cfbd9e334e6211e1e3bb Mon Sep 17 00:00:00 2001
From: fuentesloic <fuentes.loic@gmail.com>
Date: Mon, 14 Aug 2017 13:47:04 -0400
Subject: [PATCH 1/6] move search bar into the header

---
 static/css/search-bar.css  | 25 +++++++++++++++++++++++++
 static/css/search.css      | 33 ---------------------------------
 static/js/search.js        | 16 ++++++++++++++++
 templates/layout.html      |  5 +++++
 templates/search/list.html | 13 ++++++-------
 5 files changed, 52 insertions(+), 40 deletions(-)
 create mode 100644 static/css/search-bar.css
 create mode 100644 static/js/search.js

diff --git a/static/css/search-bar.css b/static/css/search-bar.css
new file mode 100644
index 00000000..f7508906
--- /dev/null
+++ b/static/css/search-bar.css
@@ -0,0 +1,25 @@
+#search::before {
+  font-family: FontAwesome;
+  content: '\f002';
+  font-size: 1.5rem;
+  position: relative;
+  left: 2.5rem;
+  color: #646464;
+  cursor: pointer;
+}
+#search > input:first-of-type {
+  padding: .75rem .75rem .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: #3ba777;
+  color: #fafafa;
+  cursor: pointer;
+  border-radius: 0 1rem 1rem 0;
+}
diff --git a/static/css/search.css b/static/css/search.css
index b4d84547..0f1da087 100644
--- a/static/css/search.css
+++ b/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;
diff --git a/static/js/search.js b/static/js/search.js
new file mode 100644
index 00000000..d46f5cf9
--- /dev/null
+++ b/static/js/search.js
@@ -0,0 +1,16 @@
+url = window.location.href
+
+searchField = url.split('?q=')
+
+if (searchField[1] === '') {
+  alert('no search detect', 'Fill the search field please', 2000)
+} else {
+  search = searchField[1].replace('+', ' ')
+
+  form = document.querySelectorAll('#search input')
+  form.forEach( input => {
+    if (input.placeholder) {
+      input.value = search
+    }
+  })
+}
diff --git a/templates/layout.html b/templates/layout.html
index 4d3d9d01..b598ad95 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -11,10 +11,15 @@
 <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>
+  <form id=search action="{{ url_for('search') }}" method=get>
+    <input type=search name=q placeholder="Neomads and articles">
+    <input type=submit value=search>
+  </form>
   <nav>
     <a href={{ url_for('article_list') }} title="Read nomad's adventures">Read</a>
     {% if current_user and current_user.is_authenticated %}
diff --git a/templates/search/list.html b/templates/search/list.html
index 50f24f9a..6993972f 100644
--- a/templates/search/list.html
+++ b/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 %}
@@ -44,4 +38,9 @@ <h2>{{articles|length}} articles found</h2>
   {% endif %}
   
 </section>
+
+{% block extra_js %}
+<script src={{ url_for('static', filename='js/search.js') }}></script>
+{% endblock %}
+
 {% endblock %}

From 60deb0b2fd1b9e54d182ac2b5493e7903b466399 Mon Sep 17 00:00:00 2001
From: fuentesloic <fuentes.loic@gmail.com>
Date: Mon, 14 Aug 2017 15:41:08 -0400
Subject: [PATCH 2/6] reput the search in search bar

---
 static/js/search.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/static/js/search.js b/static/js/search.js
index d46f5cf9..65e341d6 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -1,12 +1,9 @@
-url = window.location.href
+search = window.location.search.split('?q=')
 
-searchField = url.split('?q=')
-
-if (searchField[1] === '') {
+if (search[1] === '') {
   alert('no search detect', 'Fill the search field please', 2000)
 } else {
-  search = searchField[1].replace('+', ' ')
-
+  search = search[1].split('+').toString().replace(/,/ig, ' ')
   form = document.querySelectorAll('#search input')
   form.forEach( input => {
     if (input.placeholder) {

From 18ab8c91b9a348f917eb5785bffb82c55757c986 Mon Sep 17 00:00:00 2001
From: fuentesloic <fuentes.loic@gmail.com>
Date: Wed, 16 Aug 2017 11:56:31 -0400
Subject: [PATCH 3/6] change form animation and place

---
 static/css/main.css       |  4 ++++
 static/css/search-bar.css | 37 ++++++++++++++++++++++++++++---------
 static/js/home.js         |  1 +
 static/js/search.js       |  2 ++
 static/js/utils.js        |  9 +++++++++
 templates/layout.html     | 15 ++++++++++-----
 6 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index a698ec27..db33004b 100644
--- a/static/css/main.css
+++ b/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;
diff --git a/static/css/search-bar.css b/static/css/search-bar.css
index f7508906..b57c1e11 100644
--- a/static/css/search-bar.css
+++ b/static/css/search-bar.css
@@ -1,14 +1,18 @@
-#search::before {
-  font-family: FontAwesome;
-  content: '\f002';
-  font-size: 1.5rem;
-  position: relative;
-  left: 2.5rem;
-  color: #646464;
+
+#search {
+  display: flex;
+  padding: 0;
+  border: none;
+}
+#search > svg {
+  margin: 0 2rem;
   cursor: pointer;
 }
-#search > input:first-of-type {
-  padding: .75rem .75rem .75rem 3rem;
+#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;
@@ -23,3 +27,18 @@
   cursor: pointer;
   border-radius: 0 1rem 1rem 0;
 }
+
+#search > input.active  {
+  display: block;
+  animation: .5s active ease-in-out;
+}
+
+@keyframes active {
+    from {
+      opacity: 0;
+      padding: 0;
+    }
+    to {
+      opacity: 1;
+    }
+}
diff --git a/static/js/home.js b/static/js/home.js
index 5b3f5843..ac9b23ec 100644
--- a/static/js/home.js
+++ b/static/js/home.js
@@ -1,3 +1,4 @@
+// Button position
 const button = document.querySelector('#join-us')
 let buttonPosition = adaptButtonPosition()
 
diff --git a/static/js/search.js b/static/js/search.js
index 65e341d6..30c31882 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -6,6 +6,8 @@ if (search[1] === '') {
   search = search[1].split('+').toString().replace(/,/ig, ' ')
   form = document.querySelectorAll('#search input')
   form.forEach( input => {
+    input.setAttribute('class', 'active')
+    console.log(input);
     if (input.placeholder) {
       input.value = search
     }
diff --git a/static/js/utils.js b/static/js/utils.js
index 15887604..40a4840f 100644
--- a/static/js/utils.js
+++ b/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')
+  })
+})
diff --git a/templates/layout.html b/templates/layout.html
index b598ad95..6323bfa1 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -15,11 +15,16 @@
 {% block extra_css %}{% endblock %}
 
 <header>
-  <h1><a href="/">Neomad</a></h1>
-  <form id=search action="{{ url_for('search') }}" method=get>
-    <input type=search name=q placeholder="Neomads and articles">
-    <input type=submit value=search>
-  </form>
+  <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 %}

From 77d82cffe0a4ef1ebc9627d7aa4a1b788e7df9bb Mon Sep 17 00:00:00 2001
From: fuentesloic <fuentes.loic@gmail.com>
Date: Wed, 16 Aug 2017 12:33:23 -0400
Subject: [PATCH 4/6] change signup button behaviour

---
 static/css/home.css | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/static/css/home.css b/static/css/home.css
index 97a3daf2..5998ad3c 100644
--- a/static/css/home.css
+++ b/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;

From 26af5eb5742ab3b1fef8fbf4d6bfa32388e7808b Mon Sep 17 00:00:00 2001
From: fuentesloic <fuentes.loic@gmail.com>
Date: Wed, 16 Aug 2017 12:37:45 -0400
Subject: [PATCH 5/6] add hover effect into input search button

---
 static/css/search-bar.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/static/css/search-bar.css b/static/css/search-bar.css
index b57c1e11..274b3a33 100644
--- a/static/css/search-bar.css
+++ b/static/css/search-bar.css
@@ -7,6 +7,10 @@
 #search > svg {
   margin: 0 2rem;
   cursor: pointer;
+  fill: #279e77;
+}
+#search > svg:hover {
+  fill: #00bf6b;
 }
 #search > input {
   display: none;
@@ -22,11 +26,14 @@
   padding: .75rem;
   left: -0.8rem;
   border: none;
-  background-color: #3ba777;
+  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;

From e955524bc22116d255c2b170b8216692f3c01f15 Mon Sep 17 00:00:00 2001
From: fuentesloic <fuentes.loic@gmail.com>
Date: Wed, 16 Aug 2017 13:09:57 -0400
Subject: [PATCH 6/6] fix result presentation in /search

---
 static/css/search.css      | 8 +++++---
 static/js/search.js        | 1 -
 templates/search/list.html | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/static/css/search.css b/static/css/search.css
index 0f1da087..83b9e300 100644
--- a/static/css/search.css
+++ b/static/css/search.css
@@ -40,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%;
diff --git a/static/js/search.js b/static/js/search.js
index 30c31882..a5cb2c17 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -7,7 +7,6 @@ if (search[1] === '') {
   form = document.querySelectorAll('#search input')
   form.forEach( input => {
     input.setAttribute('class', 'active')
-    console.log(input);
     if (input.placeholder) {
       input.value = search
     }
diff --git a/templates/search/list.html b/templates/search/list.html
index 6993972f..d64af5a8 100644
--- a/templates/search/list.html
+++ b/templates/search/list.html
@@ -31,7 +31,7 @@ <h2 name=username>{{ user.username }}</h2>
   {% endif %}
   
   {% if articles %}
-  <article>
+  <article class="articles">
     <h2>{{articles|length}} articles found</h2>
     {{ article_list(articles=articles) }}
   </article>