diff --git a/index.php b/index.php index 5347223c09ee57ce3bb82c54bd2dcb24e921e39f..e5f74134f1ed7dfc868dfe42689246ef7bb0c614 100644 --- a/index.php +++ b/index.php @@ -33,6 +33,7 @@ <?php require_once('src/html/menu.html'); ?> <main id="mainContainer" class="container-fluid"> + <?php require_once('src/html/dashboard.html'); ?> <?php require_once('src/html/members.html'); ?> <?php require_once('src/html/member.html'); ?> <?php require_once('src/html/projects.html'); ?> diff --git a/src/html/dashboard.html b/src/html/dashboard.html new file mode 100644 index 0000000000000000000000000000000000000000..57878552a24f1ea61c146b89f00536408dd8a174 --- /dev/null +++ b/src/html/dashboard.html @@ -0,0 +1,8 @@ +<div id="dashboard" style="display: none"> + <form> + <div class="form-group"> + <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Recherche" aria-describedby="search-help" autofocus /> + <small id="search-help" class="form-text text-muted">* parmi les membres, les projets et les groupes de discussion</small> + </div> + </form> +</div> diff --git a/src/html/menu.html b/src/html/menu.html index ce388b3aca2dc9a9f9dd0039811086ebdc276a3a..50c8b364c7ec6f1587d2791a918774466037a2e9 100644 --- a/src/html/menu.html +++ b/src/html/menu.html @@ -1,30 +1,32 @@ <nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex" id="navbar"> - <div id="menu-title" class="col-4 col-md-2 pb-2">HAPPY APP</div> + <!--<ldp-router>--> + <!--<ldp-route id="menu-title" class=" pb-2" name="dashboard">HAPPY APP</ldp-route>--> + <!--</ldp-router>--> - <ldp-router id="navbar-router" class="navbar-nav d-flex flex-row justify-content-between align-self-end col-8 col-md-10" default-route="members"> - <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="search"> - <i class="fa fa-search" aria-hidden="true"></i> - <span class="d-none d-md-inline"> Home</span> + <ldp-router id="navbar-router" class="navbar-nav" default-route="members"> + <ldp-route id="menu-title" class="col-4 col-md-2 nav-item" name="dashboard"> + HAPPY DEV </ldp-route> - <ldp-route class="nav-item pl-4 pr-4 pb-2 active align-self-stretch w-25 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> - </ldp-route> - <ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/"> - Membre - </ldp-route> - <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="projects"> - <i class="fa fa-tasks" aria-hidden="true"></i> - <span class="d-none d-md-inline"> Projets</span> - </ldp-route> - <ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/"> - Projet - </ldp-route> - <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="groups"> - <i class="fa fa-comments" aria-hidden="true"></i> - <span class="d-none d-md-inline"> Groupes</span> - </ldp-route> - <!--<ldp-route class="nav-item" name="calendar">Agenda</ldp-route>--> - <!--<ldp-route class="nav-item" name="drive">Drive</ldp-route>--> + + <div id="menu-items" class="col-8 col-md-10"> + <ldp-route class="nav-item pl-4 pr-4 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> + </ldp-route> + <ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/"> + Membre + </ldp-route> + <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="projects"> + <i class="fa fa-tasks" aria-hidden="true"></i> + <span class="d-none d-md-inline"> Projets</span> + </ldp-route> + <ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/"> + Projet + </ldp-route> + <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="groups"> + <i class="fa fa-comments" aria-hidden="true"></i> + <span class="d-none d-md-inline"> Groupes</span> + </ldp-route> + </div> </ldp-router> </nav> diff --git a/src/scss/_dashboard.scss b/src/scss/_dashboard.scss new file mode 100644 index 0000000000000000000000000000000000000000..ed3af2179698b765549ec08a85ca61585cf9010e --- /dev/null +++ b/src/scss/_dashboard.scss @@ -0,0 +1,6 @@ +#dashboard { + #search-help { + font-style: italic; + padding-left: 5px; + } +} diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss index 897ac0f90d5c9e9be2b6e64981888a02bf75d561..7f8a4f7921dc7a217e007b7ee5da452011e8bace 100644 --- a/src/scss/_menu.scss +++ b/src/scss/_menu.scss @@ -1,23 +1,31 @@ #navbar { z-index: 9999; - #menu-title { - font-family: bebas; - color: $hd-color; - font-size: $menu-font-size; - } + #navbar-router { + width: 100%; + display: flex; + justify-content: space-between; + flex-direction: row; + color: $twitter-color; + #menu-title { + font-family: bebas; + color: $hd-color; + font-size: $menu-font-size; + text-align: center; + } - #navbar-router { - color: $twitter-color; + #menu-items { + display: flex; + justify-content: space-between; + } ldp-route { cursor: pointer; font-size: 18px; } - ldp-route:hover { - text-decoration: underline; - } + + #menu-title[active], ldp-route[active] { border-bottom: 2px solid $hd-color; color: $hd-color; diff --git a/src/scss/main.scss b/src/scss/main.scss index 944ba2f8b7c8d207c2a91e81d1d994749f7724d7..c5166239f5d92f7d3b0127fef33b709ccc55cf2b 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -8,3 +8,4 @@ @import "groupsList"; @import "project"; @import "projectsList"; +@import "dashboard";