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 9de2adab..88c48cca 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 63d7b62c..adfcc21f 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 73e1c0de..91570b1a 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 f1d281cc..2703e17e 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 4309585e..d58e4739 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 fb5a5bea..8ad5a542 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 f9e940af..f8f52d7c 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 d18c79c8..b82659d2 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;
--
GitLab