WEBneo_CDS/gastroshop
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Inhaltliche Anpassung des Footers

Browse Source
This commit is contained in:
akarl 2020-01-30 15:43:12 +01:00
parent 57936a79b8
commit f39c8e5875
2 changed files with 140 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
frontend/_public/src/less/_modules/footer.less
View File

@ -4,94 +4,120 @@ footer {
display: none; } } display: none; } }
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
footer {
.footer-ribbon { .footer-ribbon {
width: 90%; display: block;
margin: 0 auto; width: 90%;
&:after { margin: 0 auto;
clear: both; &:after {
content: ''; clear: both;
display: table; } content: '';
.img--area { display: table; }
width: calc(~'50% - 400px'); .img--area {
height: 150px; width: calc(~'50% - 400px');
.wbn--foot-img{ height: 150px;
display: inline-block; .wbn--foot-img{
height: 100%; display: inline-block;
&.wbn-gabel { height: 100%;
width: 28px; &.wbn-gabel {
background: url("@{baseUrlIcon}gabel.svg") bottom center no-repeat; } width: 28px;
&.wbn-loeffel { background: url("@{baseUrlIcon}gabel.svg") bottom center no-repeat; }
margin-left: 5px; &.wbn-loeffel {
width: 28px; margin-left: 5px;
background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; } width: 28px;
&.wbn-messer { background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; }
margin-left: 5px; &.wbn-messer {
width: 18px; margin-left: 5px;
background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; } width: 18px;
&.wbn-pfannenwender { background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; }
margin-left: 40px; &.wbn-pfannenwender {
width: 48px; margin-left: 40px;
background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; } width: 48px;
&.wbn-kanne { background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; }
margin-left: 40px; &.wbn-kanne {
width: 84px; margin-left: 40px;
background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; } width: 84px;
&.wbn-mikrowelle { background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; }
margin-left: 40px; &.wbn-mikrowelle {
width: 142px; margin-left: 40px;
background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; } width: 142px;
&.wbn-mixer { background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; }
margin-right: 40px; &.wbn-mixer {
width: 75px; margin-right: 40px;
background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; } width: 75px;
&.wbn-toaster { background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; }
margin-right: 40px; &.wbn-toaster {
width: 120px; margin-right: 40px;
background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; } width: 120px;
&.wbn-wein { background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; }
margin-right: 5px; &.wbn-wein {
width: 59px; margin-right: 5px;
background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; } width: 59px;
&.wbn-sekt { background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; }
margin-right: 40px; &.wbn-sekt {
width: 46px; margin-right: 40px;
background: url("@{baseUrlIcon}sekt.svg") center 47px no-repeat; } width: 46px;
&.wbn-tasse { background: url("@{baseUrlIcon}sekt.svg") center 47px no-repeat; }
width: 82px; &.wbn-tasse {
background: url("@{baseUrlIcon}tasse.svg") bottom center no-repeat; } } } width: 82px;
.left--box, background: url("@{baseUrlIcon}tasse.svg") bottom center no-repeat; } } }
.right--box { .left--box,
float: left; } .right--box {
.center--box { float: left; }
float: left; .center--box {
width: 800px; float: left;
height: 150px; width: 800px;
.first--headline { height: 150px;
margin-top: 35px; .first--headline {
font-size: 35px; } margin-top: 35px;
.second--headline { font-size: 35px; }
font-size: 17.8px; } .second--headline {
font-size: 17.8px; }
}
} }
}
.footer--top-wrapper { .footer--top-wrapper {
background: @brand-footer;
.container {
background: @brand-footer; background: @brand-footer;
color: #fff; .container {
a, .column--headline { background: @brand-footer;
color: #fff; } } } color: #fff;
.footer--bottom-wrapper { a, .column--headline {
border-top: 2px solid #fff; color: #fff; } } }
background: @brand-payment; .footer--bottom-wrapper {
.container { border-top: 2px solid #fff;
background: @brand-payment; background: @brand-payment;
color: #fff; .container {
a, .column--headline { background: @brand-payment;
color: #fff; } } } color: #fff;
a, .column--headline {
color: #fff; } } }
.footer-main .footer--column { &.footer-main {
width: 33%; .footer--column {
} width: 33%;
.border--headline {
margin: 0 0 20px 0;
padding: 0;
span {
display: block;
width: 60px;
height: 5px;
background: #fff; } }
.footer--phone-link {
font-weight: 300;
display: block;
padding-left: 30px;
&:before {
content: 'Telefon'; } }
.footer--mail-link {
display: block;
padding-left: 30px;
&:before {
content: 'Kuvert'; } }
.footer--address-link {
display: block;
padding-left: 30px;
&:before {
content: 'Haus'; } }
} } }
} }

91
frontend/index/footer-navigation.tpl
View File

@ -1,24 +1,11 @@
{namespace name="frontend/index/menu_footer"} {namespace name="frontend/index/menu_footer"}
{* Service hotline *} {* Service Links *}
{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"} {block name="frontend_index_footer_column_service_menu"}
<div class="footer--column column--menu block"> <div class="footer--column column--menu block">
{block name="frontend_index_footer_column_service_menu_headline"} {block name="frontend_index_footer_column_service_menu_headline"}
<div class="column--headline">{s name="sFooterShopNavi1"}{/s}</div> <div class="column--headline cds--upper">{s name="sFooterShopNavi1"}{/s}</div>
<div class="border--headline"><span></span></div>
{/block} {/block}
{block name="frontend_index_footer_column_service_menu_content"} {block name="frontend_index_footer_column_service_menu_content"}
@ -56,10 +43,31 @@
</div> </div>
{/block} {/block}
{* 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 cds--upper">{s name="sFooterServiceHotlineHead"}{/s}</div>
<div class="border--headline"><span></span></div>
{/block}
{block name="frontend_index_footer_column_service_hotline_content"}
<div class="column--content">
<p class="column--desc">
{s name="sFooterServiceHotline"}{/s}
{s name="sFooterEmail"}{/s}
{s name="sFooterAdress"}{/s}
</p>
</div>
{/block}
</div>
{/block}
{block name="frontend_index_footer_column_information_menu"} {block name="frontend_index_footer_column_information_menu"}
<div class="footer--column column--menu block"> <div class="footer--column column--menu block">
{block name="frontend_index_footer_column_information_menu_headline"} {block name="frontend_index_footer_column_information_menu_headline"}
<div class="column--headline">{s name="sFooterShopNavi2"}{/s}</div> <div class="column--headline cds--upper">{s name="sFooterShopNavi2"}{/s}</div>
<div class="border--headline"><span></span></div>
{/block} {/block}
{block name="frontend_index_footer_column_information_menu_content"} {block name="frontend_index_footer_column_information_menu_content"}
@ -97,54 +105,13 @@
{/block} {/block}
{block name="frontend_index_footer_column_newsletter"} {block name="frontend_index_footer_column_newsletter"}
<div style="clear:both;"></div>
<div class="footer--column column--newsletter is--last block"> <div class="footer--column column--newsletter is--last block">
{block name="frontend_index_footer_column_newsletter_headline"} {block name="frontend_index_footer_column_newsletter_headline"}
<div class="column--headline">{s name="sFooterNewsletterHead"}{/s}</div> <div class="column--headline cds--upper">{s name="sFooterNewsletterHead"}{/s}</div>
<div class="border--headline"><span></span></div>
{/block} {/block}
{block name="frontend_index_footer_column_newsletter_content"} {block name="frontend_index_footer_column_newsletter_content"}{/block}
<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> </div>
{/block} {/block}