Design de la page d'accueil, pour afficher le logo au centre, la recherche à gauche et le reste à droite

templates/frontOffice/custom/assets/src/css/custom.css

@@ -348,3 +348,39 @@ span.product-categorie {
 .table-steps .description {
     text-align: left;
 }
+
+
+/*   Mise en page de la page d'accueil   */
+div.header__main {
+    display: inline-grid !important;
+    align-items: center;
+    margin: auto;
+    grid-template-columns: 2fr 200px 1fr 1fr;
+    grid-template-rows: 150px;
+}
+div.custom-grid-one {
+    margin: auto;
+    grid-column: 1;
+    grid-row: 1;
+}
+div.custom-grid-two {
+    margin: auto;
+    grid-column: 2;
+    grid-row: 1;
+}
+div.custom-grid-three {
+    margin: 0 25px 0 auto;
+    grid-column: 3;
+    grid-row: 1;
+    white-space: nowrap;
+}
+div.custom-grid-four {
+    margin-right: auto;
+    grid-column: 4;
+    grid-row: 1;
+    white-space: nowrap;
+}
+.header__secondary {
+    width: 90%;
+    justify-content: center;
+}

templates/frontOffice/custom/layout.tpl

@@ -126,6 +126,7 @@ GNU General Public License : http://www.gnu.org/licenses/
 
                     <div class="header__content">
                         <div class="header__main">
+                            <div class="custom-grid-two">
                                 <h1 class="logo hidden-xs">
                                     <a href="{navigate to="index"}" title="{$store_name}">
                                         {local_media type="logo"}
@@ -133,10 +134,14 @@ GNU General Public License : http://www.gnu.org/licenses/
                                         {/local_media}
                                     </a>
                                 </h1>
-                            {hook name="main.navbar-primary"}
-                            <div class="header__secondary">
+                            </div>
                             {hook name="main.navbar-secondary"}
                         </div>
+
+                        <div class="header__bottom">
+                            <div class="header__secondary">
+                                {hook name="main.navbar-primary"}
+                            </div>
                         </div>
                     </div>
 

templates/frontOffice/custom/modules/HookCart/main-navbar-secondary.html

@@ -0,0 +1,5 @@
+<div class="custom-grid-four">
+    <ul class="nav navbar-nav navbar-cart navbar-right">
+        {hook name="mini-cart"}
+    </ul>
+</div>

templates/frontOffice/custom/modules/HookCustomer/main-navbar-secondary.html

@@ -1,3 +1,4 @@
+<div class="custom-grid-three">
     <ul class="nav navbar-nav navbar-customer navbar-right">
         {loop type="auth" name="customer_info_block" role="CUSTOMER"}
         <li><a href="{url path="/logout"}" class="logout">{intl l="Log out!" d="hookcustomer.fo.default"}</a></li>
@@ -41,3 +42,4 @@
         </li>
         {/elseloop}
     </ul>
+</div>

templates/frontOffice/custom/modules/HookNavigation/main-navbar-primary.html

@@ -7,7 +7,7 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand visible-xs-block visible-sm-block" href="{navigate to="index"}">{intl l="Categories" d="hooknavigation.fo.default"}</a>
+            <a class="navbar-brand visible-sm-block" href="{navigate to="index"}">{intl l="Categories" d="hooknavigation.fo.default"}</a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-primary">
             <ul class="nav navbar-nav navbar-categories">

templates/frontOffice/custom/modules/HookSearch/main-navbar-secondary.html

@@ -1,9 +1,11 @@
+<div class="custom-grid-one">
     <div class="search-container navbar-form navbar-left">
         <form id="form-search" action="{url path="/search"}" method="get" role="search" aria-labelledby="search-label">
             <label id="search-label" class="sr-only" for="q">{intl l="Search a product" d="hooksearch.fo.default"}</label>
-        <i class="glyphicon glyphicon-search" id="search-button">
+            <i class="glyphicon glyphicon-search" id="search-button-">
             <input type="search" name="q" id="q" placeholder="{intl l="Search..." d="hooksearch.fo.default"}" class="form-control" autocomplete="off" aria-required="true" required pattern=".{ldelim}2,{rdelim}" title="{intl l="Minimum 2 characters." d="hooksearch.fo.default"}">
             </i>
-        {* <button type="submit" class="btn btn-search"><i class="fa fa-search"></i> <span class="sr-only">{intl l="Search" d="hooksearch.fo.default"}</span></button> *}
+    <!--        <button type="submit" class="btn btn-search"><i class="fa fa-search"></i> <span class="sr-only">{intl l="Search" d="hooksearch.fo.default"}</span></button>-->
         </form>
     </div>
+</div>