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

This commit is contained in:
2021-05-19 14:47:34 +02:00
parent a934b6e1c1
commit b7be47d9e7
7 changed files with 111 additions and 61 deletions

File diff suppressed because one or more lines are too long

View File

@@ -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;
}

View File

@@ -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>

View File

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

View File

@@ -1,10 +1,11 @@
<ul class="nav navbar-nav navbar-customer navbar-right">
<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>
<li><a href="{url path="/account"}" class="account">{intl l="My Account" d="hookcustomer.fo.default"}</a></li>
{/loop}
{elseloop rel="customer_info_block"}
<!-- <li><a href="{url path="/register"}" class="register">{intl l="Register!" d="hookcustomer.fo.default"}</a></li>-->
<!-- <li><a href="{url path="/register"}" class="register">{intl l="Register!" d="hookcustomer.fo.default"}</a></li>-->
<li class="dropdown">
<a href="{url path="/login"}" class="login dropdown-toggle">{* {intl l="Log In!" d="hookcustomer.fo.default"} *}<i class="fa fa-user"></i></a>
<div class="dropdown-menu">
@@ -40,4 +41,5 @@
</div>
</li>
{/elseloop}
</ul>
</ul>
</div>

View File

@@ -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">

View File

@@ -1,9 +1,11 @@
<div class="search-container navbar-form navbar-left">
<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>