From 06885a9692a2bee72bf1dfe5ced996aa1929faca Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Mon, 14 May 2018 18:41:38 +0200
Subject: [PATCH] Search view opening and closing complete
---
src/html/menu.html | 1 +
src/html/search.html | 2 +-
src/js/hd-app.js | 6 +++++-
src/scss/_menu.scss | 16 ++++++++++++++--
4 files changed, 21 insertions(+), 4 deletions(-)
diff --git a/src/html/menu.html b/src/html/menu.html
index 91570b1a..8b711a97 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -37,5 +37,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"></i>
+ <i id="close-search-icon" class="fa fa-times" aria-hidden="true"></i>
</div>
</nav>
diff --git a/src/html/search.html b/src/html/search.html
index 2703e17e..02ff6681 100644
--- a/src/html/search.html
+++ b/src/html/search.html
@@ -1,5 +1,5 @@
<div id="search-view">
- <div class="content">
+ <div class="content container-fluid">
Search results here
</div>
</div>
diff --git a/src/js/hd-app.js b/src/js/hd-app.js
index d58e4739..9d36a678 100644
--- a/src/js/hd-app.js
+++ b/src/js/hd-app.js
@@ -21,10 +21,14 @@ document.addEventListener("DOMContentLoaded", function(event) {
// 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");
}
+ searchBar.querySelector("#close-search-icon").addEventListener("click", closeSearchBar);
+ function closeSearchBar(e) {
+ navBar.classList.remove("search-mode");
+ searchView.classList.remove("search-mode");
+ }
});
diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss
index 8ad5a542..682866c1 100644
--- a/src/scss/_menu.scss
+++ b/src/scss/_menu.scss
@@ -22,7 +22,7 @@
padding-left: 30px;
padding-right: 0px;
transition-property: opacity;
- transition-duration: 0.3s;
+ transition-duration: 0.2s;
opacity: 1;
}
@@ -55,7 +55,7 @@
transform: scaleX(0);
transform-origin: 100%;
transition-property: all;
- transition-duration: 0.3s;
+ transition-duration: 0.2s;
position: absolute;
top: 0px;
right: 0px;
@@ -76,6 +76,10 @@
&:hover {
color: $hd-color;
}
+
+ &#close-search-icon {
+ display : none;
+ }
}
}
@@ -96,6 +100,14 @@
i {
color: white;
background-color: $twitter-color;
+
+ &#search-icon {
+ display : none;
+ }
+
+ &#close-search-icon {
+ display : inline-block;
+ }
}
}
}
--
GitLab