Abschluss Header (exklusive mobiles Design)
Beginn Überarbeitung Footer
This commit is contained in:
parent
55411c8279
commit
3b3f462ecd
15
frontend/_public/src/less/_modules/footer.less
Normal file
15
frontend/_public/src/less/_modules/footer.less
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.footer-main {
|
||||
background: @brand-footer;
|
||||
}
|
||||
|
||||
.footer-main .footer--column {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
@ -22,13 +22,14 @@
|
||||
|
||||
/* Suche */
|
||||
.entry--search {
|
||||
width: 60%!important;
|
||||
margin-top: 1.5em!important;
|
||||
background: @brand-primary!important;
|
||||
.main-search--form {
|
||||
box-shadow: none!important;
|
||||
label{
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
width: 70px;
|
||||
padding: .5em 1em 0 0;
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
@ -36,7 +37,7 @@
|
||||
font-size: 16px;
|
||||
color: #fff; }
|
||||
input{
|
||||
width: 80%!important;
|
||||
width: calc(~'100% - 140px')!important;
|
||||
float: left;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
@ -47,32 +48,12 @@
|
||||
padding-bottom: 0.2em!important;
|
||||
height: 2em!important; }
|
||||
button{
|
||||
width: 8% !important;
|
||||
width: 40px!important;
|
||||
float: left;
|
||||
right: 3%!important;
|
||||
right: 25px!important;
|
||||
i{
|
||||
color: #fff; } } } }
|
||||
|
||||
/* Main Navigation */
|
||||
.navigation--list-wrapper {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
.navigation--list{
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
.is--home{
|
||||
display: none; }
|
||||
li {
|
||||
.navigation--link {
|
||||
span{
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700; }
|
||||
.wbn-icon-set {
|
||||
margin-bottom: 0.5em;
|
||||
&:before {
|
||||
font-size: 35px; } } } } } }
|
||||
|
||||
/* Service Navigation */
|
||||
|
||||
.shop--navigation {
|
||||
@ -142,7 +123,9 @@
|
||||
.info--delivery {
|
||||
font-size: 12px; } }
|
||||
&.entry--delivery {
|
||||
margin-right: 1%; } } }
|
||||
margin-right: 1%; }
|
||||
&.entry--search {
|
||||
height: auto; } } }
|
||||
.entry--delivery,
|
||||
.entry--support,
|
||||
.entry--account,
|
||||
@ -160,4 +143,65 @@
|
||||
.navigation--entry {
|
||||
height: auto; } } } }
|
||||
|
||||
|
||||
/* Main Navigation */
|
||||
.navigation--list-wrapper {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
.navigation--list{
|
||||
top: 5px;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
.is--home{
|
||||
display: none; }
|
||||
li {
|
||||
.navigation--link {
|
||||
border-radius: 0;
|
||||
border-color: #fff;
|
||||
border-width: 0 1px;
|
||||
border-style: solid;
|
||||
span{
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700; }
|
||||
.wbn-icon-set {
|
||||
min-height: 35px;
|
||||
margin-bottom: 0.5em;
|
||||
&:before {
|
||||
font-size: 35px; } } } } } }
|
||||
|
||||
.navigation-main {
|
||||
.navigation--link:hover,
|
||||
.is--active .navigation--link,
|
||||
.is--hovered .navigation--link,
|
||||
.is--active .navigation--link:hover {
|
||||
background-image: linear-gradient(to bottom, #fff 0%, #fff 40%, @brand-primary 80%, @brand-primary 100%)!important;
|
||||
font-weight: 700;
|
||||
color: #fff } }
|
||||
|
||||
.advanced-menu {
|
||||
border-top: 1px solid #12428e;
|
||||
.button-container {
|
||||
background-color: @brand-primary!important; }
|
||||
.menu--list {
|
||||
width: 100%;
|
||||
display: block!important;
|
||||
.menu--list-item {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 16.6666%;
|
||||
padding: 0 0 1em 0;
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.5em 1.5em;
|
||||
.sub--nav-image {
|
||||
width: 100%;
|
||||
height: auto; }
|
||||
.sub--nav-title{
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 700; } } } } }
|
||||
|
||||
|
||||
.cssAnker {}
|
@ -18,7 +18,7 @@
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.header--navigation {
|
||||
max-width: calc(~"100% - 24em");
|
||||
margin: 0 12em;
|
||||
min-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
5
frontend/_public/src/less/_variables/variables.less
Normal file
5
frontend/_public/src/less/_variables/variables.less
Normal file
@ -0,0 +1,5 @@
|
||||
/* *** COLORS ******************************************************************************************************* */
|
||||
|
||||
@brand-footer: #1D4788;
|
||||
@brand-payment: #1A3764;
|
||||
|
@ -1,12 +1,6 @@
|
||||
@import "_modules/page";
|
||||
//@import "_modules/account";
|
||||
//@import "_modules/cart";
|
||||
//@import "_modules/confirm";
|
||||
//@import "_modules/emotion";
|
||||
//@import "_modules/finish";
|
||||
//@import "_modules/footer";
|
||||
//@import "_modules/global";
|
||||
@import "_modules/header";
|
||||
@import "_modules/footer";
|
||||
//@import "_modules/listing";
|
||||
//@import "_modules/main-navigation";
|
||||
//@import "_modules/product-box";
|
||||
@ -16,14 +10,11 @@
|
||||
//@import "_components/offcanvas-menu";
|
||||
//@import "_components/product-slider";
|
||||
|
||||
//@import "_mixins/background";
|
||||
//@import "_mixins/clear";
|
||||
//@import "_mixins/css_class";
|
||||
//@import "_mixins/flexbox";
|
||||
@import "_mixin/fonts";
|
||||
//@import "_mixins/functions";
|
||||
//@import "_mixins/margin";
|
||||
|
||||
@import "_variables/variables";
|
||||
//@import "_variables/font-sizes";
|
||||
//@import "_variables/structure";
|
||||
//@import "_variables/typography";
|
||||
|
71
frontend/home/index.tpl
Normal file
71
frontend/home/index.tpl
Normal file
@ -0,0 +1,71 @@
|
||||
{extends file='frontend/index/index.tpl'}
|
||||
|
||||
{block name="frontend_index_content_top"}{/block}
|
||||
|
||||
{* Page title *}
|
||||
{block name='frontend_index_header_title'}{strip}
|
||||
{if $sCategoryContent.metaTitle}
|
||||
{$sCategoryContent.metaTitle|escapeHtml} | {{config name=sShopname}|escapeHtml}
|
||||
{else}
|
||||
{$smarty.block.parent}
|
||||
{/if}
|
||||
{/strip}{/block}
|
||||
|
||||
{* Canonical URL *}
|
||||
{block name='frontend_index_header_canonical'}
|
||||
<link rel="canonical" href="{url controller='index'}" />
|
||||
{/block}
|
||||
|
||||
{* Main content *}
|
||||
{block name='frontend_index_content'}
|
||||
<div class="content content--home">
|
||||
|
||||
{block name='frontend_home_index_banner'}
|
||||
{* Banner *}
|
||||
{include file='frontend/listing/banner.tpl'}
|
||||
{/block}
|
||||
|
||||
{block name='frontend_home_index_text'}
|
||||
{* Category headline *}
|
||||
{if !$hasEmotion}
|
||||
{include file='frontend/listing/text.tpl'}
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{* Promotion *}
|
||||
{block name='frontend_home_index_promotions'}
|
||||
{if $hasCustomerStreamEmotion}
|
||||
{action module=frontend controller=listing action=layout sCategory=$sCategoryContent.id}
|
||||
{elseif $hasEmotion}
|
||||
<div class="content--emotions">
|
||||
{foreach $emotions as $emotion}
|
||||
{block name='frontend_home_index_emotion_wrapper'}
|
||||
{include file="frontend/_includes/emotion.tpl"}
|
||||
{/block}
|
||||
{/foreach}
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name='frontend_home_index_blog'}
|
||||
{* Blog Articles *}
|
||||
{if $sBlog.sArticles|@count}
|
||||
<div class="listing_box">
|
||||
<h2 class="headingbox_nobg largesize">{s name='WidgetsBlogHeadline'}{/s}:</h2>
|
||||
{foreach from=$sBlog.sArticles item=article key=key name="counter"}
|
||||
{include file="frontend/blog/box.tpl" sArticle=$article key=$key homepage=true}
|
||||
{/foreach}
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{* Tagcloud *}
|
||||
{block name='frontend_home_index_tagcloud'}
|
||||
{if {config name=show namespace=TagCloud } && !$isEmotionLandingPage}
|
||||
{action module=widgets controller=listing action=tag_cloud sController=index}
|
||||
{/if}
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name='frontend_index_left_last_articles'}{/block}
|
150
frontend/index/footer-navigation.tpl
Normal file
150
frontend/index/footer-navigation.tpl
Normal file
@ -0,0 +1,150 @@
|
||||
{namespace name="frontend/index/menu_footer"}
|
||||
|
||||
{* Service hotline *}
|
||||
{block name="frontend_index_footer_column_service_hotline"}
|
||||
<div class="footer--column column--hotline is--first block">
|
||||
{block name="frontend_index_footer_column_service_hotline_headline"}
|
||||
<div class="column--headline">{s name="sFooterServiceHotlineHead"}{/s}</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_service_hotline_content"}
|
||||
<div class="column--content">
|
||||
<p class="column--desc">{s name="sFooterServiceHotline"}{/s}</p>
|
||||
</div>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_service_menu"}
|
||||
<div class="footer--column column--menu block">
|
||||
{block name="frontend_index_footer_column_service_menu_headline"}
|
||||
<div class="column--headline">{s name="sFooterShopNavi1"}{/s}</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_service_menu_content"}
|
||||
<nav class="column--navigation column--content">
|
||||
<ul class="navigation--list" role="menu">
|
||||
{block name="frontend_index_footer_column_service_menu_before"}{/block}
|
||||
{foreach $sMenu.bottom as $item}
|
||||
|
||||
{block name="frontend_index_footer_column_service_menu_entry"}
|
||||
<li class="navigation--entry" role="menuitem">
|
||||
<a class="navigation--link" href="{if $item.link}{$item.link}{else}{url controller='custom' sCustom=$item.id title=$item.description}{/if}" title="{$item.description|escape}"{if $item.target} target="{$item.target}"{/if}>
|
||||
{$item.description}
|
||||
</a>
|
||||
|
||||
{* Sub categories *}
|
||||
{if $item.childrenCount > 0}
|
||||
<ul class="navigation--list is--level1" role="menu">
|
||||
{foreach $item.subPages as $subItem}
|
||||
<li class="navigation--entry" role="menuitem">
|
||||
<a class="navigation--link" href="{if $subItem.link}{$subItem.link}{else}{url controller='custom' sCustom=$subItem.id title=$subItem.description}{/if}" title="{$subItem.description|escape}"{if $subItem.target} target="{$subItem.target}"{/if}>
|
||||
{$subItem.description}
|
||||
</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
{/block}
|
||||
{/foreach}
|
||||
|
||||
{block name="frontend_index_footer_column_service_menu_after"}{/block}
|
||||
</ul>
|
||||
</nav>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_information_menu"}
|
||||
<div class="footer--column column--menu block">
|
||||
{block name="frontend_index_footer_column_information_menu_headline"}
|
||||
<div class="column--headline">{s name="sFooterShopNavi2"}{/s}</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_information_menu_content"}
|
||||
<nav class="column--navigation column--content">
|
||||
<ul class="navigation--list" role="menu">
|
||||
{block name="frontend_index_footer_column_information_menu_before"}{/block}
|
||||
{foreach $sMenu.bottom2 as $item}
|
||||
|
||||
{block name="frontend_index_footer_column_information_menu_entry"}
|
||||
<li class="navigation--entry" role="menuitem">
|
||||
<a class="navigation--link" href="{if $item.link}{$item.link}{else}{url controller='custom' sCustom=$item.id title=$item.description}{/if}" title="{$item.description|escape}"{if $item.target} target="{$item.target}"{/if}>
|
||||
{$item.description}
|
||||
</a>
|
||||
|
||||
{* Sub categories *}
|
||||
{if $item.childrenCount > 0}
|
||||
<ul class="navigation--list is--level1" role="menu">
|
||||
{foreach $item.subPages as $subItem}
|
||||
<li class="navigation--entry" role="menuitem">
|
||||
<a class="navigation--link" href="{if $subItem.link}{$subItem.link}{else}{url controller='custom' sCustom=$subItem.id title=$subItem.description}{/if}" title="{$subItem.description|escape}"{if $subItem.target} target="{$subItem.target}"{/if}>
|
||||
{$subItem.description}
|
||||
</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
{/block}
|
||||
{/foreach}
|
||||
{block name="frontend_index_footer_column_information_menu_after"}{/block}
|
||||
</ul>
|
||||
</nav>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter"}
|
||||
<div class="footer--column column--newsletter is--last block">
|
||||
{block name="frontend_index_footer_column_newsletter_headline"}
|
||||
<div class="column--headline">{s name="sFooterNewsletterHead"}{/s}</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_content"}
|
||||
<div class="column--content" data-newsletter="true">
|
||||
<p class="column--desc">
|
||||
{s name="sFooterNewsletter"}{/s}
|
||||
</p>
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_form"}
|
||||
<form class="newsletter--form" action="{url controller='newsletter'}" method="post">
|
||||
<input type="hidden" value="1" name="subscribeToNewsletter" />
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_form_field_wrapper"}
|
||||
<div class="content">
|
||||
{block name="frontend_index_footer_column_newsletter_form_field"}
|
||||
<input type="email" aria-label="{s name="IndexFooterNewsletterValue"}{/s}" name="newsletter" class="newsletter--field" placeholder="{s name="IndexFooterNewsletterValue"}{/s}" />
|
||||
{if {config name="newsletterCaptcha"} !== "nocaptcha"}
|
||||
<input type="hidden" name="redirect">
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_form_submit"}
|
||||
<button type="submit" aria-label="{s name='IndexFooterNewsletterSubmit'}{/s}" class="newsletter--button btn">
|
||||
<i class="icon--mail"></i> <span class="button--text">{s name='IndexFooterNewsletterSubmit'}{/s}</span>
|
||||
</button>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{* Data protection information *}
|
||||
{block name="frontend_index_footer_column_newsletter_privacy"}
|
||||
{if {config name=ACTDPRTEXT} || {config name=ACTDPRCHECK}}
|
||||
{$hideCheckbox=false}
|
||||
|
||||
{* If a captcha is active, the user has to accept the privacy statement on the newsletter page *}
|
||||
{if {config name=newsletterCaptcha} !== "nocaptcha"}
|
||||
{$hideCheckbox=true}
|
||||
{/if}
|
||||
|
||||
{include file="frontend/_includes/privacy.tpl" hideCheckbox=$hideCheckbox}
|
||||
{/if}
|
||||
{/block}
|
||||
</form>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
47
frontend/index/footer.tpl
Normal file
47
frontend/index/footer.tpl
Normal file
@ -0,0 +1,47 @@
|
||||
{* Footer menu *}
|
||||
{block name='frontend_index_footer_menu'}
|
||||
<div class="footer--columns block-group">
|
||||
{include file='frontend/index/footer-navigation.tpl'}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{* Copyright in the footer *}
|
||||
{block name='frontend_index_footer_copyright'}
|
||||
<div class="footer--bottom">
|
||||
|
||||
{* Vat info *}
|
||||
{block name='frontend_index_footer_vatinfo'}
|
||||
<div class="footer--vat-info">
|
||||
<p class="vat-info--text">
|
||||
{if $sOutputNet}
|
||||
{s name='FooterInfoExcludeVat' namespace="frontend/index/footer"}{/s}
|
||||
{else}
|
||||
{s name='FooterInfoIncludeVat' namespace="frontend/index/footer"}{/s}
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name='frontend_index_footer_minimal'}
|
||||
{include file="frontend/index/footer_minimal.tpl" hideCopyrightNotice=true}
|
||||
{/block}
|
||||
|
||||
{* Shopware footer *}
|
||||
{block name="frontend_index_shopware_footer"}
|
||||
|
||||
{* Copyright *}
|
||||
{block name="frontend_index_shopware_footer_copyright"}
|
||||
<div class="footer--copyright">
|
||||
{s name="IndexCopyright"}{/s}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{* Logo *}
|
||||
{block name="frontend_index_shopware_footer_logo"}
|
||||
<div class="footer--logo">
|
||||
<i class="icon--shopware"></i>
|
||||
</div>
|
||||
{/block}
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
@ -7,8 +7,6 @@
|
||||
<ul class="navigation--list container" role="menubar" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
|
||||
{strip}
|
||||
|
||||
{debug}
|
||||
|
||||
{block name='frontend_index_navigation_categories_top_home'}
|
||||
<li class="navigation--entry{if $sCategoryCurrent == $sCategoryStart && $Controller == 'index'} is--active{/if} is--home" role="menuitem">
|
||||
{block name='frontend_index_navigation_categories_top_link_home'}
|
||||
|
@ -4,7 +4,9 @@
|
||||
{$menuSizePercentage = 100 - (25 * $columnAmount * intval($hasTeaser))}
|
||||
{$columnCount = 4 - ($columnAmount * intval($hasTeaser))}
|
||||
|
||||
<ul class="menu--list menu--level-{$level} columns--{$columnCount}"{if $level === 0} style="width: {$menuSizePercentage}%;"{/if}>
|
||||
{* <ul class="menu--list menu--level-{$level} columns--{$columnCount}"{if $level === 0} style="width: {$menuSizePercentage}%;"{/if}> *}
|
||||
<ul class="menu--list menu--area-{$level} ">
|
||||
|
||||
{block name="frontend_plugins_advanced_menu_list"}
|
||||
{foreach $categories as $category}
|
||||
{if $category.hideTop}
|
||||
@ -17,7 +19,7 @@
|
||||
{/if}
|
||||
|
||||
|
||||
<li class="menu--list-item item--level-{$level}"{if $level === 0} style="width: 100%"{/if}>
|
||||
<li class="menu--list-item item--level-{$level}"{* if $level === 0} style="width: 100%"{/if *}>
|
||||
{block name="frontend_plugins_advanced_menu_list_item"}
|
||||
{if $category.media.path}
|
||||
<a class="sub--nav-link" href="{$categoryLink|escapeHtml}" title="{$category.name|escape}">
|
||||
@ -72,6 +74,7 @@
|
||||
|
||||
<div class="menu--container">
|
||||
{block name="frontend_plugins_advanced_menu_main_container"}
|
||||
{*
|
||||
<div class="button-container">
|
||||
{block name="frontend_plugins_advanced_menu_button_category"}
|
||||
<a href="{$link|escapeHtml}" class="button--category" aria-label="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}" title="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}"{if $mainCategory.external && $category.externalTarget} target="{$mainCategory.externalTarget}"{/if}>
|
||||
@ -86,6 +89,7 @@
|
||||
</span>
|
||||
{/block}
|
||||
</div>
|
||||
*}
|
||||
|
||||
{if $hasCategories || $hasTeaser}
|
||||
<div class="content--wrapper{if $hasCategories} has--content{/if}{if $hasTeaser} has--teaser{/if}">
|
||||
|
Loading…
Reference in New Issue
Block a user