Abschluss Header (exklusive mobiles Design)

Beginn Überarbeitung Footer
This commit is contained in:
akarl 2020-01-23 17:24:27 +01:00
parent 55411c8279
commit 3b3f462ecd
10 changed files with 367 additions and 42 deletions

View File

@ -0,0 +1,15 @@
@media screen and (min-width: 48em) {
.footer-main {
background: @brand-footer;
}
.footer-main .footer--column {
width: 33%;
}
}

View File

@ -22,13 +22,14 @@
/* Suche */ /* Suche */
.entry--search { .entry--search {
width: 60%!important;
margin-top: 1.5em!important; margin-top: 1.5em!important;
background: @brand-primary!important; background: @brand-primary!important;
.main-search--form { .main-search--form {
box-shadow: none!important; box-shadow: none!important;
label{ label{
display: inline-block; display: inline-block;
width: auto; width: 70px;
padding: .5em 1em 0 0; padding: .5em 1em 0 0;
float: left; float: left;
text-transform: uppercase; text-transform: uppercase;
@ -36,7 +37,7 @@
font-size: 16px; font-size: 16px;
color: #fff; } color: #fff; }
input{ input{
width: 80%!important; width: calc(~'100% - 140px')!important;
float: left; float: left;
border: none; border: none;
border-radius: 0; border-radius: 0;
@ -47,32 +48,12 @@
padding-bottom: 0.2em!important; padding-bottom: 0.2em!important;
height: 2em!important; } height: 2em!important; }
button{ button{
width: 8% !important; width: 40px!important;
float: left; float: left;
right: 3%!important; right: 25px!important;
i{ i{
color: #fff; } } } } 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 */ /* Service Navigation */
.shop--navigation { .shop--navigation {
@ -142,7 +123,9 @@
.info--delivery { .info--delivery {
font-size: 12px; } } font-size: 12px; } }
&.entry--delivery { &.entry--delivery {
margin-right: 1%; } } } margin-right: 1%; }
&.entry--search {
height: auto; } } }
.entry--delivery, .entry--delivery,
.entry--support, .entry--support,
.entry--account, .entry--account,
@ -160,4 +143,65 @@
.navigation--entry { .navigation--entry {
height: auto; } } } } 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 {} .cssAnker {}

View File

@ -18,7 +18,7 @@
@media (min-width: 48em) { @media (min-width: 48em) {
.header--navigation { .header--navigation {
max-width: calc(~"100% - 24em"); min-width: 90%;
margin: 0 12em; margin: 0 auto;
} }
} }

View File

@ -0,0 +1,5 @@
/* *** COLORS ******************************************************************************************************* */
@brand-footer: #1D4788;
@brand-payment: #1A3764;

View File

@ -1,12 +1,6 @@
@import "_modules/page"; @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/header";
@import "_modules/footer";
//@import "_modules/listing"; //@import "_modules/listing";
//@import "_modules/main-navigation"; //@import "_modules/main-navigation";
//@import "_modules/product-box"; //@import "_modules/product-box";
@ -16,14 +10,11 @@
//@import "_components/offcanvas-menu"; //@import "_components/offcanvas-menu";
//@import "_components/product-slider"; //@import "_components/product-slider";
//@import "_mixins/background";
//@import "_mixins/clear";
//@import "_mixins/css_class";
//@import "_mixins/flexbox";
@import "_mixin/fonts"; @import "_mixin/fonts";
//@import "_mixins/functions"; //@import "_mixins/functions";
//@import "_mixins/margin"; //@import "_mixins/margin";
@import "_variables/variables";
//@import "_variables/font-sizes"; //@import "_variables/font-sizes";
//@import "_variables/structure"; //@import "_variables/structure";
//@import "_variables/typography"; //@import "_variables/typography";

71
frontend/home/index.tpl Normal file
View 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}

View 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
View 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}

View File

@ -7,8 +7,6 @@
<ul class="navigation--list container" role="menubar" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"> <ul class="navigation--list container" role="menubar" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
{strip} {strip}
{debug}
{block name='frontend_index_navigation_categories_top_home'} {block name='frontend_index_navigation_categories_top_home'}
<li class="navigation--entry{if $sCategoryCurrent == $sCategoryStart && $Controller == 'index'} is--active{/if} is--home" role="menuitem"> <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'} {block name='frontend_index_navigation_categories_top_link_home'}

View File

@ -4,7 +4,9 @@
{$menuSizePercentage = 100 - (25 * $columnAmount * intval($hasTeaser))} {$menuSizePercentage = 100 - (25 * $columnAmount * intval($hasTeaser))}
{$columnCount = 4 - ($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"} {block name="frontend_plugins_advanced_menu_list"}
{foreach $categories as $category} {foreach $categories as $category}
{if $category.hideTop} {if $category.hideTop}
@ -17,7 +19,7 @@
{/if} {/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"} {block name="frontend_plugins_advanced_menu_list_item"}
{if $category.media.path} {if $category.media.path}
<a class="sub--nav-link" href="{$categoryLink|escapeHtml}" title="{$category.name|escape}"> <a class="sub--nav-link" href="{$categoryLink|escapeHtml}" title="{$category.name|escape}">
@ -72,6 +74,7 @@
<div class="menu--container"> <div class="menu--container">
{block name="frontend_plugins_advanced_menu_main_container"} {block name="frontend_plugins_advanced_menu_main_container"}
{*
<div class="button-container"> <div class="button-container">
{block name="frontend_plugins_advanced_menu_button_category"} {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}> <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> </span>
{/block} {/block}
</div> </div>
*}
{if $hasCategories || $hasTeaser} {if $hasCategories || $hasTeaser}
<div class="content--wrapper{if $hasCategories} has--content{/if}{if $hasTeaser} has--teaser{/if}"> <div class="content--wrapper{if $hasCategories} has--content{/if}{if $hasTeaser} has--teaser{/if}">