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,16 +126,21 @@ GNU General Public License : http://www.gnu.org/licenses/
<div class="header__content">
<div class="header__main">
<h1 class="logo hidden-xs">
<a href="{navigate to="index"}" title="{$store_name}">
{local_media type="logo"}
<img src="{$MEDIA_URL}" alt="{$store_name}" class="logo-boutique">
{/local_media}
</a>
</h1>
{hook name="main.navbar-primary"}
<div class="custom-grid-two">
<h1 class="logo hidden-xs">
<a href="{navigate to="index"}" title="{$store_name}">
{local_media type="logo"}
<img src="{$MEDIA_URL}" alt="{$store_name}" class="logo-boutique">
{/local_media}
</a>
</h1>
</div>
{hook name="main.navbar-secondary"}
</div>
<div class="header__bottom">
<div class="header__secondary">
{hook name="main.navbar-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,43 +1,45 @@
<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 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">
{form name="thelia.front.customer.login"}
<form id="form-login-mini" action="{url path="/login"}" method="post" {form_enctype}>
{form_hidden_fields}
{form_field field="success_url"}
<input type="hidden" name="{$name}" value="{navigate to="current"}">
{/form_field}
{form_field field="email"}
<div class="form-group group-email">
<label for="{$label_attr.for}-mini">{intl l="Email address" d="hookcustomer.fo.default"}</label>
<input type="email" name="{$name}" id="{$label_attr.for}-mini" class="form-control input-sm" maxlength="255" aria-required="true" required>
</div>
{/form_field}
{form_field field="password"}
<div class="form-group group-password">
<label for="{$label_attr.for}-mini">{intl l="Password" d="hookcustomer.fo.default"}</label>
<input type="password" name="{$name}" id="{$label_attr.for}-mini" class="form-control input-sm" maxlength="255" aria-required="true" required>
</div>
{/form_field}
{form_field field="account"}
<input type="hidden" name="{$name}" value="1">
{/form_field}
<div class="form-group group-btn">
<button type="submit" class="btn btn-login-mini btn-sm btn-primary"><i class="fa fa-sign-in"></i> {intl l="Sign In" d="hookcustomer.fo.default"}</button>
<a href="{url path="/register"}" class="btn btn-register-mini btn-default btn-sm"><i class="fa fa-user-plus"></i> {intl l="Register" d="hookcustomer.fo.default"}</a>
</div>
<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 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">
{form name="thelia.front.customer.login"}
<form id="form-login-mini" action="{url path="/login"}" method="post" {form_enctype}>
{form_hidden_fields}
{form_field field="success_url"}
<input type="hidden" name="{$name}" value="{navigate to="current"}">
{/form_field}
{form_field field="email"}
<div class="form-group group-email">
<label for="{$label_attr.for}-mini">{intl l="Email address" d="hookcustomer.fo.default"}</label>
<input type="email" name="{$name}" id="{$label_attr.for}-mini" class="form-control input-sm" maxlength="255" aria-required="true" required>
</div>
{/form_field}
{form_field field="password"}
<div class="form-group group-password">
<label for="{$label_attr.for}-mini">{intl l="Password" d="hookcustomer.fo.default"}</label>
<input type="password" name="{$name}" id="{$label_attr.for}-mini" class="form-control input-sm" maxlength="255" aria-required="true" required>
</div>
{/form_field}
{form_field field="account"}
<input type="hidden" name="{$name}" value="1">
{/form_field}
<div class="form-group group-btn">
<button type="submit" class="btn btn-login-mini btn-sm btn-primary"><i class="fa fa-sign-in"></i> {intl l="Sign In" d="hookcustomer.fo.default"}</button>
<a href="{url path="/register"}" class="btn btn-register-mini btn-default btn-sm"><i class="fa fa-user-plus"></i> {intl l="Register" d="hookcustomer.fo.default"}</a>
</div>
<a href="{url path="/password"}" class="mini-forgot-password">{intl l="Forgot your Password?" d="hookcustomer.fo.default"}</a>
</form>
{/form}
</div>
</li>
{/elseloop}
</ul>
<a href="{url path="/password"}" class="mini-forgot-password">{intl l="Forgot your Password?" d="hookcustomer.fo.default"}</a>
</form>
{/form}
</div>
</li>
{/elseloop}
</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">
<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">
<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> *}
</form>
<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-">
<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>-->
</form>
</div>
</div>