From 1837282ca809eb17a80c0e2fc041a683a93ea1dd Mon Sep 17 00:00:00 2001 From: Alexandre Bourlier Date: Sun, 13 May 2018 05:06:10 +0200 Subject: [PATCH] Search menu icone and view set up --- deploy.sh | 4 +-- index.php | 5 +-- src/html/dependencies-dev.php | 1 + src/html/dependencies-prod.php | 1 + src/html/menu.html | 20 ++++++----- src/html/search.html | 7 ++++ src/js/hd-app.js | 26 ++++++++++++++ src/scss/_menu.scss | 66 +++++++++++++++++++++++++++++++--- src/scss/_search.scss | 12 +++++++ src/scss/main.scss | 1 + 10 files changed, 127 insertions(+), 16 deletions(-) create mode 100644 src/html/search.html create mode 100644 src/js/hd-app.js create mode 100644 src/scss/_search.scss diff --git a/deploy.sh b/deploy.sh index da29d95..7df7225 100755 --- a/deploy.sh +++ b/deploy.sh @@ -1,6 +1,6 @@ #!/bin/bash -export DN="http://app.happy-dev.fr" -export SDN="http://hd-ldp.happy-dev.fr" +export DN="https://app.happy-dev.fr" +export SDN="https://hd-ldp.happy-dev.fr" php index.php > index.html grunt ssh hd-app@ssh-hd-app.alwaysdata.net "rm -R hd-app; mkdir hd-app; cd hd-app; mkdir -p src/fonts; mkdir -p dist/css;" diff --git a/index.php b/index.php index 191f1d6..c449bb8 100644 --- a/index.php +++ b/index.php @@ -33,6 +33,7 @@ + @@ -41,7 +42,7 @@ data-authentication="anonymous" data-auto-login="true" data-bosh-service-url="https://conversejs.org/http-bind/" - data-debug="true" + data-debug="false" data-jid="nomnom.im" data-locales-url="/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json", data-room-jid="anonymous@conference.nomnom.im"> @@ -65,7 +66,7 @@ insertChatIfNeeded(); } - }, 150); + }, 15000); // Inserts a chat in the current view if needed function insertChatIfNeeded() { diff --git a/src/html/dependencies-dev.php b/src/html/dependencies-dev.php index d444715..9de2ada 100644 --- a/src/html/dependencies-dev.php +++ b/src/html/dependencies-dev.php @@ -7,6 +7,7 @@ + diff --git a/src/html/dependencies-prod.php b/src/html/dependencies-prod.php index e6dacdb..63d7b62 100644 --- a/src/html/dependencies-prod.php +++ b/src/html/dependencies-prod.php @@ -8,6 +8,7 @@ + diff --git a/src/html/menu.html b/src/html/menu.html index c1de2f3..73e1c0d 100644 --- a/src/html/menu.html +++ b/src/html/menu.html @@ -1,15 +1,12 @@ diff --git a/src/html/search.html b/src/html/search.html new file mode 100644 index 0000000..f1d281c --- /dev/null +++ b/src/html/search.html @@ -0,0 +1,7 @@ + diff --git a/src/js/hd-app.js b/src/js/hd-app.js new file mode 100644 index 0000000..4309585 --- /dev/null +++ b/src/js/hd-app.js @@ -0,0 +1,26 @@ +document.addEventListener("DOMContentLoaded", function(event) { + // Constants declaration + const navBar = document.querySelector("#navbar"); + const searchBar = navBar.querySelector("#search-bar"); + + + // Shortcuts + document.querySelector("body").addEventListener("keydown", function(e) { + // CTRL + K triggers the search feature + if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) { + e.preventDefault(); + e.stopPropagation(); + } + + else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) { + navBar.classList.remove("search-mode"); + } + }); + + + // Toggle the search bar via touch / click + searchBar.querySelector("#search-icon").addEventListener("click", function(e) { + navBar.classList.add("search-mode"); + searchBar.querySelector("#search-input").focus(); + }); +}); diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss index 75fe902..fb5a5be 100644 --- a/src/scss/_menu.scss +++ b/src/scss/_menu.scss @@ -13,16 +13,27 @@ color: $hd-color; font-size: $menu-font-size; text-align: center; + padding: 0px; } #menu-items { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; + padding-left: 30px; + padding-right: 0px; + transition-property: opacity; + transition-duration: 0.3s; + opacity: 1; } ldp-route { cursor: pointer; font-size: 18px; + padding: 0px 15px; + + &:hover { + border-bottom: 2px solid $hd-color; + } } #menu-title[active], @@ -30,9 +41,56 @@ border-bottom: 2px solid $hd-color; color: $hd-color; } + } - ldp-route:hover { - border-bottom: 2px solid $hd-color; + #search-bar { + position: absolute; + top: 4px; + right: 16px; + font-size: 18px; + text-align: right; + padding-right: 0px; + + input[type=search] { + transform: scaleX(0); + transform-origin: 100%; + transition-property: all; + transition-duration: 0.3s; + position: absolute; + top: 0px; + right: 0px; + display: block; + box-shadow: none; + } + + i { + position: relative; + z-index: 9999; + padding-top: 7px; + color: $twitter-color; + padding: 10px; + border-radius: 0 0.25rem 0.25rem 0; + } + } + + &.search-mode { + #navbar-router { + #menu-items { + opacity: 0; + } + } + + #search-bar { + width: calc(100% - 125px); + + input[type=search] { + transform: scaleX(1); + } + + i { + color: white; + background-color: $twitter-color; + } } } } diff --git a/src/scss/_search.scss b/src/scss/_search.scss new file mode 100644 index 0000000..f9e940a --- /dev/null +++ b/src/scss/_search.scss @@ -0,0 +1,12 @@ +.modal-dialog { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +.modal-content { + height: auto; + min-height: 100%; + border-radius: 0; +} diff --git a/src/scss/main.scss b/src/scss/main.scss index f8aee45..cba652d 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -14,3 +14,4 @@ @import "project"; @import "channels"; @import "channel"; +@import "search";