diff --git a/src/html/dependencies-dev.php b/src/html/dependencies-dev.php
index 9de2adab0ff291b67f2a33736d9a4f2ef7c4ac76..88c48cca07bac88765ef94abfa283fa309e8fff2 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 63d7b62ca4b76139c4a41cc317e2c4e2e54e00ce..adfcc21f64ead5f1de488957d9c0d66bd42cc081 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 73e1c0de08035cf0d944ec2104d836df03d76847..91570b1a49790630e6c2369e268ea30710df56a8 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 f1d281cc83e63ebab7d05339e0f692f6c6787b37..2703e17ee4215c2f6c18b487b6f1ab06ca6e7c4f 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 4309585e6d10f890de4705cb5a9443ee0e5e9973..d58e4739e873c5c19f01a34c5c692c520bbe01e4 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 fb5a5bead179c3bcc6d8b2f633dcd2b6c5983acb..8ad5a542b70c48466c1f63cf5351e94db6972fae 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 f9e940af8af3b4528aaa259ece979c0499785bf4..f8f52d7c103a32dc438355d1a39be4c9357f12c8 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 d18c79c8618109c6df0a87fc0b3200b23365b15b..b82659d26da7ebe31c52667fa670cdaedbbbdb24 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;