Bootstrap modal steals focus and so can't be used as the search view. Had to implement my own.
This commit is contained in:
Alexandre Bourlier
parent
1837282ca8
commit
10a2dd8358
@ -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 ?>" />
|
||||
|
||||
@ -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 ?>" />
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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");
|
||||
}
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user