From 10a2dd8358bdb9abee8c0998fd6772ea56fbbcc1 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Sun, 13 May 2018 18:31:52 +0200
Subject: [PATCH] Bootstrap modal steals focus and so can't be used as the
 search view. Had to implement my own.

---
 src/html/dependencies-dev.php  |  2 +-
 src/html/dependencies-prod.php |  2 +-
 src/html/menu.html             |  4 ++--
 src/html/search.html           |  8 +++-----
 src/js/hd-app.js               | 14 +++++++++-----
 src/scss/_menu.scss            | 12 +++++++++---
 src/scss/_search.scss          | 23 +++++++++++++----------
 src/scss/_variables.scss       |  2 +-
 8 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/html/dependencies-dev.php b/src/html/dependencies-dev.php
index 9de2ada..88c48cc 100644
--- a/src/html/dependencies-dev.php
+++ b/src/html/dependencies-dev.php
@@ -7,7 +7,7 @@
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/dist/lib/webcomponentsjs/webcomponents-loader.js"></script>
-    <script type="text/javascript" src="<?php echo $dn; ?>/src/js/hd-app.js"></script>
+    <script type="text/javascript" src="<?php echo $dn; ?>/src/js/hd-app.js?v=<?php echo $v ?>"></script>
 
     <!-- Web components -->
     <link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-display.html?v=<?php echo $v ?>" />
diff --git a/src/html/dependencies-prod.php b/src/html/dependencies-prod.php
index 63d7b62..adfcc21 100644
--- a/src/html/dependencies-prod.php
+++ b/src/html/dependencies-prod.php
@@ -8,7 +8,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js" integrity="sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="<?php echo $dn; ?>/dist/js/hd-app.js"></script>
+    <script type="text/javascript" src="<?php echo $dn; ?>/dist/js/hd-app.js?v=<?php echo $v ?>"></script>
 
     <!-- Web components -->
     <link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-display.html?v=<?php echo $v ?>" />
diff --git a/src/html/menu.html b/src/html/menu.html
index 73e1c0d..91570b1 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -5,7 +5,7 @@
       HAPPY DEV
     </ldp-route>
 
-    <div id="menu-items" class="col-7 col-md-10">
+    <div id="menu-items" class="col-7 col-md-7">
       <ldp-route class="nav-item pb-2 active align-self-stretch text-center text-md-left" name="members">
         <i class="fa fa-users" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Membres</span>
@@ -36,6 +36,6 @@
 
   <div id="search-bar">
     <input id="search-input" class="form-control" type="search" placeholder="ctrl + k"/>
-    <i id="search-icon" class="fa fa-search" aria-hidden="true" data-toggle="modal" data-target="#search-view"></i>
+    <i id="search-icon" class="fa fa-search" aria-hidden="true"></i>
   </div>
 </nav>
diff --git a/src/html/search.html b/src/html/search.html
index f1d281c..2703e17 100644
--- a/src/html/search.html
+++ b/src/html/search.html
@@ -1,7 +1,5 @@
-<div class="modal fade" id="search-view" tabindex="-1" role="dialog" aria-labelledby="Search results" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      Search results here
-    </div>
+<div id="search-view">
+  <div class="content">
+    Search results here
   </div>
 </div>
diff --git a/src/js/hd-app.js b/src/js/hd-app.js
index 4309585..d58e473 100644
--- a/src/js/hd-app.js
+++ b/src/js/hd-app.js
@@ -1,7 +1,8 @@
 document.addEventListener("DOMContentLoaded", function(event) {
   // Constants declaration
-  const navBar    = document.querySelector("#navbar");
-  const searchBar = navBar.querySelector("#search-bar");
+  const navBar      = document.querySelector("#navbar");
+  const searchBar   = navBar.querySelector("#search-bar");
+  const searchView  = document.querySelector("#search-view");
 
 
   // Shortcuts
@@ -18,9 +19,12 @@ document.addEventListener("DOMContentLoaded", function(event) {
   });
 
 
-  // Toggle the search bar via touch / click
-  searchBar.querySelector("#search-icon").addEventListener("click", function(e) {
+  // Open the search bar via touch / click
+  searchBar.querySelector("#search-icon").addEventListener("click", openSearchBar);
+
+  function openSearchBar(e) {
     navBar.classList.add("search-mode");
     searchBar.querySelector("#search-input").focus();
-  });
+    searchView.classList.add("search-mode");
+  }
 });
diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss
index fb5a5be..8ad5a54 100644
--- a/src/scss/_menu.scss
+++ b/src/scss/_menu.scss
@@ -12,7 +12,7 @@
       font-family:  bebas;
       color:        $hd-color;
       font-size:    $menu-font-size;
-      text-align:   center;
+      text-align:   left;
       padding:      0px;
     }
 
@@ -66,10 +66,16 @@
     i {
       position:         relative;
       z-index:          9999;
-      padding-top:      7px;
-      color:            $twitter-color;
       padding:          10px;
+      padding-top:      9px;
+      padding-bottom:   11px;
+      color:            $twitter-color;
       border-radius:    0 0.25rem 0.25rem 0;
+      cursor:           pointer;
+
+      &:hover {
+        color:  $hd-color;
+      }
     }
   }
 
diff --git a/src/scss/_search.scss b/src/scss/_search.scss
index f9e940a..f8f52d7 100644
--- a/src/scss/_search.scss
+++ b/src/scss/_search.scss
@@ -1,12 +1,15 @@
-.modal-dialog {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
+#search-view {
+  position:           absolute;
+  top:                0px;
+  bottom:             0px;
+  left:               0px;
+  right:              0px;
+  z-index:            8888;
+  display:            none;
+  padding-top:        $menu-height;
+  background-color:   white;
 
-.modal-content {
-  height: auto;
-  min-height: 100%;
-  border-radius: 0;
+  &.search-mode {
+    display:  block;
+  }
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index d18c79c..b82659d 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -3,7 +3,7 @@ $hd-color-faded: rgba(253, 200, 21, 0.8);
 $twitter-color: #1DA1F2;
 
 $menu-height:           46px;
-$menu-font-size:        17px;
+$menu-font-size:        16px;
 $vertical-menu-width:   50px;
 $sm-with:               576px;
 $md-with:               768px;