TheCoreDev/domokits
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Nouveau template default2020 avec nouveau look finalisé

Browse Source
This commit is contained in:
Laurent LE CORRE
2020-01-06 07:59:39 +01:00
parent f0b96f298b
commit ef1f0ff70e
7 changed files with 258 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
local/modules/BrandsOnHome/templates/frontOffice/default/home-body.html
View File

@@ -5,10 +5,10 @@
<div id="brands">
<div class="brands-content">
<ul class="list-unstyled row">
<ul class="list-unstyled row" style="text-align: center">
{loop type="brand" name="brand_list"}
{loop type="image" name="brand_images" brand={$ID} width=100}
<li class="item col-md-2">
<li class="item col-xs-6 col-sm-4 col-md-2">
<article class="row" itemscope itemtype="http://schema.org/Product">
<img src="{$IMAGE_URL}" alt="{$TITLE}" />
</article>

4
local/modules/HookNavigation/templates/frontOffice/default/main-navbar-primary.html
View File

@@ -11,7 +11,7 @@
</div>
<div class="collapse navbar-collapse" id="navbar-primary">
<ul class="nav navbar-nav navbar-categories">
<li><a href="{navigate to="index"}" class="home">{intl l="Home" d="hooknavigation.fo.default"}</a></li>
{*<li><a href="{navigate to="index"}" class="home">{intl l="Home" d="hooknavigation.fo.default"}</a></li>*}
{loop type="category" name="category.navigation" parent="0" need_count_child="yes"}
{if $CHILD_COUNT > 0}
<li class="dropdown">
@@ -23,7 +23,7 @@
</ul>
</li>
{else}
<li><a href="{$URL}">{$TITLE}</a></li>
<li class="top-tab"><a href="{$URL}">{$TITLE}</a></li>
{/if}
{/loop}
</ul>

4
templates/frontOffice/default2020/assets/dist/css/thelia.min.css vendored
View File

File diff suppressed because one or more lines are too long

119
templates/frontOffice/default2020/assets/src/css/thelia.css
View File

@@ -11013,9 +11013,8 @@ td.product .name > a:focus,
.rev_slider_wrapper {
margin-bottom: 15px !important;
}
/* Nouveau menu supérieur */
#barre-superieure {
display: none;
header a {
color: #303C6E;
}
header .header {
margin-top: 30px;
@@ -11025,19 +11024,19 @@ header .header-custom {
min-width: 100%;
display: grid;
grid-gap: 0.5rem;
grid-template-areas: "logo content" "footer footer";
-ms-flex-align: center;
align-items: center;
justify-items: left;
}
@media screen and (max-width: 992px) {
header .header-custom {
margin-bottom: 20px;
}
margin-bottom: 0px;
}
@media screen and (min-width: 992px) {
header .header-custom {
margin-bottom: 0px;
grid-template-areas: "logo content" "footer footer";
}
}
@media screen and (max-width: 992px) {
header .header-custom {
grid-template-areas: "logo" "content" "footer";
}
}
header .logo-custom {
@@ -11049,14 +11048,40 @@ header .logo-custom {
header .secondary-custom {
grid-area: content;
height: 45px;
-ms-flex-line-pack: left;
align-content: left;
}
@media screen and (max-width: 992px) {
header .secondary-custom {
width: 100%;
height: auto;
margin-bottom: 0px;
display: grid;
}
header .secondary-custom div.search-container {
padding: 0px;
}
header .secondary-custom > nav > ul,
header .secondary-custom > nav > div {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
float: left;
margin-right: 40px;
}
}
header .primary-custom {
grid-area: footer;
height: 25px;
width: 100%;
}
@media screen and (max-width: 992px) {
header .primary-custom {
z-index: 1;
}
}
@media screen and (min-width: 992px) {
header .primary-custom {
height: 25px;
}
}
header .row {
background-color: #F29D39;
}
@@ -11068,32 +11093,68 @@ header nav.navbar {
header nav.navbar .container-fluid {
background-color: #F29D39;
}
header nav.navbar .container-fluid .navbar-collapse {
padding-left: 0;
}
header nav.navbar li {
margin-right: 10px;
@media screen and (min-width: 992px) {
header nav.navbar .container-fluid .navbar-collapse {
padding-left: 0;
}
}
header nav.navbar li.dropdown,
header nav.navbar li.top-tab {
background-color: #303C6E;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
header nav.navbar li.dropdown > a,
header nav.navbar li.top-tab > a {
padding: 5px 10px;
color: white;
}
header a {
color: #303C6E;
@media screen and (max-width: 992px) {
header nav.navbar .dropdown-custom {
color: white !important;
background-color: #305587 !important;
}
header nav.navbar .dropdown-custom:hover,
header nav.navbar .dropdown-custom:focus {
background-color: #F29D39 !important;
}
}
header nav.navbar .navbar-nav > .open > a,
header nav.navbar .navbar-nav > .open > a:hover,
header nav.navbar #navbar-primary > ul > li.top-tab > a:hover {
background-color: #305587;
}
@media screen and (min-width: 992px) {
header nav.navbar .navbar-nav > .open > a,
header nav.navbar .navbar-nav > .open > a:hover,
header nav.navbar #navbar-primary > ul > li.top-tab > a:hover {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
}
@media screen and (min-width: 992px) {
header nav.navbar li {
margin-right: 10px;
}
header nav.navbar li.dropdown,
header nav.navbar li.top-tab {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
}
@media screen and (min-width: 480px) {
#barre-superieure {
display: none;
}
}
@media screen and (min-width: 480px) and (max-width: 992px) {
div.secondary-custom > nav.nav-secondary {
display: block;
}
}
/* navbar-secondary */
.navbar li > a.login:before,
.navbar li.cart-not-empty > a.cart:before {
color: #303C6E;
}
.dropdown > a:after {
.navbar-secondary .dropdown > a:after {
color: #303C6E;
}
.navbar li.cart-not-empty > a.cart > .badge {
@@ -11103,7 +11164,15 @@ header a {
background-color: #303C6E;
}
.navbar li.cart-not-empty > a.cart {
color: #303C6E;
background-color: #303C6E !important;
}
@media screen and (max-width: 992px) {
#barre-superieure button.navbar-toggle {
top: 88px;
}
.navbar-nav {
margin: 0px;
}
}
.footer-container .footer-info {
background-color: #F29D39;

122
templates/frontOffice/default2020/assets/src/less/custom.less
View File

@@ -1,4 +1,6 @@
@couleur-onglets: #303C6E;
@couleur-onglets-clair: #305587;
@couleur-fond-banniere: #F29D39;
@largeurLogo: 250px;
@hauteur-ligne-1: 50px;
@@ -10,32 +12,28 @@
}
/* Nouveau menu supérieur */
#barre-superieure {
display: none;
}
header {
a {
color: @couleur-onglets;
}
.header {
margin-top: 30px;
}
.header-custom {
height: 1%;
min-width: 100%;
display: grid;
grid-gap: 0.5rem;
grid-template-areas: "logo content" "footer footer";
align-items: center;
justify-items: left;
@media screen and (max-width: @screen-md-min) {
margin-bottom: 20px;
margin-bottom: 0px;
@media screen and (min-width: @screen-md-min) { // Grand écran
grid-template-areas: "logo content" "footer footer";
}
@media screen and (min-width: @screen-md-min) {
margin-bottom: 0px;
@media screen and (max-width: @screen-md-min) { // Petit écran
grid-template-areas: "logo" "content" "footer";
}
}
@@ -49,13 +47,34 @@ header {
.secondary-custom {
grid-area: content;
height: @hauteur-ligne-2;
align-content: left;
@media screen and (max-width: @screen-md-min) { // Petit écran
width: 100%;
height: auto;
margin-bottom: 0px;
display: grid;
div.search-container {
padding: 0px;
}
> nav > ul, > nav > div {
width: fit-content;
float: left;
margin-right: 40px;
}
}
}
.primary-custom {
grid-area: footer;
height: 25px;
width: 100%;
@media screen and (max-width: @screen-md-min) { // Petit écran
z-index: 1;
}
@media screen and (min-width: @screen-md-min) { // Grand écran
height: 25px;
}
}
.row {
@@ -70,38 +89,73 @@ header {
.container-fluid {
background-color: @couleur-fond-banniere;
.navbar-collapse {
padding-left: 0;
@media screen and (min-width: @screen-md-min) { // Grand écran
.navbar-collapse {
padding-left: 0;
}
}
}
li {
margin-right: 10px;
}
li.dropdown, li.top-tab {
background-color: @couleur-onglets;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
> a {
padding: 5px 10px;
color: white;
}
}
@media screen and (max-width: @screen-md-min) { // Petit écran
.dropdown-custom {
color: white !important;
background-color: @couleur-onglets-clair !important;
&:hover, &:focus {
background-color: @couleur-fond-banniere !important;
}
}
}
.navbar-nav>.open>a, .navbar-nav>.open>a:hover, #navbar-primary > ul > li.top-tab > a:hover {
background-color: @couleur-onglets-clair;
@media screen and (min-width: @screen-md-min) { // Grand écran
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
}
@media screen and (min-width: @screen-md-min) { // Grand écran
li { margin-right: 10px; }
li.dropdown, li.top-tab {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
}
}
}
// navbar-secondary
#barre-superieure {
@media screen and (min-width: @screen-xs-min) { // Grand écran
display: none;
}
}
header a {
color: @couleur-onglets;
div.secondary-custom > nav.nav-secondary {
@media screen and (min-width: @screen-xs-min) and (max-width: @screen-md-min) { // Petit écran
display: block;
}
}
/* navbar-secondary */
.navbar li > a.login:before, .navbar li.cart-not-empty > a.cart:before {
color: @couleur-onglets;
}
.dropdown > a:after {
.navbar-secondary .dropdown > a:after {
color: @couleur-onglets;
}
@@ -114,11 +168,23 @@ header a {
}
.navbar li.cart-not-empty>a.cart {
color: @couleur-onglets;
background-color: @couleur-onglets !important;
}
@media screen and (max-width: @screen-md-min) {
// Petit écran
#barre-superieure button.navbar-toggle {
top: 88px;
}
.navbar-nav {
margin:0px;
}
}
// -------------------------- Fin Header ----------------
// -------------------------- Footer --------------------
.footer-container .footer-info {
background-color: @couleur-fond-banniere;

20
templates/frontOffice/default2020/layout.tpl
View File

@@ -122,17 +122,14 @@ GNU General Public License : http://www.gnu.org/licenses/
{hook name="main.header-top"}
<div class="navbar navbar-default navbar-secondary" itemscope
itemtype="http://schema.org/SiteNavigationElement" id="barre-superieure">
<div class="container">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-secondary">
<span class="sr-only">{intl l="Toggle navigation"}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="{navigate to="index"}">{$store_name}</a>
</div>
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-secondary">
<span class="sr-only">{intl l="Toggle navigation"}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
@@ -149,7 +146,6 @@ GNU General Public License : http://www.gnu.org/licenses/
</h1>
<div class="secondary-custom container-fluid navbar">
{ifhook rel="main.navbar-secondary"}
{* Place everything within .nav-collapse to hide it until above 768px *}
<nav class="navbar-collapse collapse nav-secondary" role="navigation"
aria-label="{intl l="Secondary Navigation"}">
{hook name="main.navbar-secondary"}

56
templates/frontOffice/default2020/modules/HookNavigation/main-navbar-primary.html Normal file
View File

@@ -0,0 +1,56 @@
<nav class="navbar navbar-default nav-main" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary">
<span class="sr-only">{intl l="Toggle navigation" d="hooknavigation.fo.default"}</span>
<span class="icon-bar"></span>
<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>
</div>
<div class="collapse navbar-collapse" id="navbar-primary">
<ul class="nav navbar-nav navbar-categories">
{*<li><a href="{navigate to="index"}" class="home">{intl l="Home" d="hooknavigation.fo.default"}</a></li>*}
{loop type="category" name="category.navigation" parent="0" need_count_child="yes"}
{if $CHILD_COUNT > 0}
<li class="dropdown">
<a href="{$URL}" class="dropdown-toggle">{$TITLE}</a>
<ul class="dropdown-menu" role="menu">
{loop type="category" name="sub-cat" parent="{$ID}"}
<li><a href="{$URL}" class="dropdown-custom">{$TITLE}</a></li>
{/loop}
</ul>
</li>
{else}
<li class="top-tab"><a href="{$URL}">{$TITLE}</a></li>
{/if}
{/loop}
</ul>
</div>
</div>
</nav>
{* classic navbar without dropdown
<nav class="navbar navbar-default nav-main" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary">
<span class="sr-only">{intl l="Toggle navigation" d="hooknavigation.fo.default"}</span>
<span class="icon-bar"></span>
<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>
</div>
<div class="collapse navbar-collapse" id="navbar-primary">
<ul class="nav navbar-nav navbar-categories">
<li><a href="{navigate to="index"}" class="home">{intl l="Home" d="hooknavigation.fo.default"}</a></li>
{loop type="category" name="category.navigation" parent="0"}
<li><a href="{$URL}">{$TITLE}</a></li>
{/loop}
</ul>
</div>
</div>
</nav>
*}