Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Enable Mobile Navigation to bottom #525

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

[FEATURE] Enable Mobile Navigation to bottom #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e62fe73
[TASK] add new settingst for mobile navigation align to bottom
vhusaruk92 Jul 30, 2019
ce01a93
[TASK] styling for opening & closing main navigation in mobile (bottom)
vhusaruk92 Jul 31, 2019
59dded4
[TASK] add space to bottom of footer when bottom navigation is used
vhusaruk92 Jul 31, 2019
67633ba
update less, css
vhusaruk92 Jul 31, 2019
98a23fb
[FIX] styling when showHeaderTop=0
vhusaruk92 Jul 31, 2019
babcba0
update less, css
vhusaruk92 Jul 31, 2019
22e3818
[FIX] language's box overlaying
vhusaruk92 Jul 31, 2019
901d797
update less, css
vhusaruk92 Jul 31, 2019
acabfbe
[TASK] update constant description
vhusaruk92 Aug 1, 2019
deecdcf
[TASK] update template of header
vhusaruk92 Aug 1, 2019
2f4cb2a
[TASK] styles refactoring with rewriting selectors
vhusaruk92 Aug 1, 2019
0fca02b
update less, css
vhusaruk92 Aug 1, 2019
044d931
[TASK] add functionality of btn to right bottom into existing constant
vhusaruk92 Aug 2, 2019
65726ac
[FIX] positioning of mobile menu/language when constants are follows:…
vhusaruk92 Aug 5, 2019
ee2c4f4
[TASK] update styling of header (mobile navigation)
vhusaruk92 Aug 5, 2019
92bac7e
update less, css
vhusaruk92 Aug 5, 2019
8280290
[TASK] update header sytax
vhusaruk92 Aug 5, 2019
e3f41a0
update less, css
vhusaruk92 Aug 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions Configuration/TypoScript/Library/plugin.dyncss.setupts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,15 @@ plugin.tx_dyncss.overrides {
mobile-nav-toggle-btn {
value = {$themes.configuration.less.var.mobileNavToggleBtn}
if.isTrue = {$themes.configuration.less.var.mobileNavToggleBtn}
value {
override = right
override {
if {
value = bottom_right
equals.dataWrap = {$themes.configuration.less.var.mobileNavToggleBtn}
}
}
}
}

header-middle-height = TEXT
Expand Down
2 changes: 1 addition & 1 deletion Configuration/TypoScript/Library/themes.less.constantsts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ themes.configuration.less.var.headerBorderColor =
# customsubcategory=main_menu=Main Menu
# cat=menu,advanced/main_menu; type=string; label= Navigation Height
themes.configuration.less.var.navHeight =
# cat=menu,advanced/main_menu; type=options[left,right]; label= Mobile Navigation Toggle Btn
# cat=menu,advanced/main_menu; type=options[left,right,bottom_right]; label= Mobile Navigation Toggle Btn
themes.configuration.less.var.mobileNavToggleBtn = left

# customsubcategory=header_main_menu_colors= Main Menu Colors
Expand Down
1 change: 1 addition & 0 deletions Configuration/TypoScript/Library/themes.menu.constantsts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ themes.configuration.menu.main.enableLogoInNavigation = 0
# cat=menu,advanced/main_menu; type=options[0,1]; label= Enable LangMenu in navigation menu
themes.configuration.menu.main.enableLangMenuInNavigation = 0


# Sub Menu
#############################################
# customsubcategory=menu_sub= Sub Menu
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Partials/Footer/Footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<!-- theme_t3kit: Partials/Footer/Footer.html [begin] -->


<footer class="footer" role="contentinfo">
<footer class="footer {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'', then: 'mobile-nav__bottom')}" role="contentinfo">

<f:comment>H2 is needed to provide valid HTML structure https://www.w3.org/WAI/tutorials/page-structure/headings/</f:comment>
<h2 class="sr-only"><f:translate key="footer.firstHeadline" extensionName="theme_t3kit"/></h2>
Expand Down
6 changes: 3 additions & 3 deletions Resources/Private/Partials/Header/Header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<!-- theme_t3kit: Partials/Header/Header.html [begin] -->

<header class="header">
<header class="header {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'', then: 'mobile-nav__bottom')}">
<div class="header-top-wrp">

<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.showHeaderTop')}">
Expand Down Expand Up @@ -78,7 +78,7 @@
<!-- theme_t3kit: Main menu [begin] -->

<f:if condition="{theme:constant(constant:'themes.configuration.elem.status.showHeaderTop')}==0">
<button type="button" class="main-navigation__toggle-btn js__main-navigation__toggle-btn" >
<button type="button" class="main-navigation__toggle-btn js__main-navigation__toggle-btn {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\' || {theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'right\'', then: 'navigation-toggle__mobile-right')}" >
<span>toggle menu</span>
</button>
<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLangMenuInNavigation')}">
Expand All @@ -88,7 +88,7 @@
</f:if>
</f:if>

<nav id="main-navigation" class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')}">
<nav id="main-navigation" class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')} {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\'', then: 'main-navigation__mobile-bottom')}">
<div class="main-navigation__items-wrp js__navigation__items-wrp">
<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLogoInNavigation')}">
<div class="main-navigation__logo">
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Templates/FluidStyledContent/LanguageMenuStandard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
xmlns:theme="http://typo3.org/ns/KayStrobach/Themes/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:if condition="{languages}">
<div class="header-top__language-menu">
<div class="header-top__language-menu {f:if(condition: '{theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'bottom_right\' || {theme:constant(constant:\'themes.configuration.less.var.mobileNavToggleBtn\')} == \'right\'', then: 'navigation-language__mobile-right')}">
<f:for each="{languages}" as="language">
<f:if condition="{language.active}">
<a class="header-top__language-menu-btn js__header-top__language-menu-btn" href="#">
Expand Down
54 changes: 51 additions & 3 deletions Resources/Public/css/main.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

76 changes: 73 additions & 3 deletions Resources/Public/less/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2682,11 +2682,12 @@
display: block;
}

.main-navigation-mobile__language-menu .header-top__language-menu .header-top__language-menu-box {
width: auto;
min-width: 150px;
.main-navigation-mobile__language-menu .header-top__language-menu-box {
background: @header-top-bg-color;
top: 1px;
left: auto;
right: auto;
width: 100vw;
}

.main-navigation .header-top__language-menu-box-close-btn {
Expand Down Expand Up @@ -3602,6 +3603,16 @@
transition-delay: 0, 0.2s;
}

@media (max-width: @screen-sm-max) {
.main-navigation-mobile__language-menu .navigation-language__mobile-right {
right: unset;
}

.navigation-toggle__mobile-right span {
left: unset;
}
}

@media (min-width: @screen-md-min) {
.main-navigation__toggle-btn {
display: none;
Expand Down Expand Up @@ -3685,6 +3696,54 @@
margin-left: 2px;
display: block;
}
// =================================
// === Mobile bottom toggle menu ==
// =================================

@media (max-width: @screen-sm-max) {
.mobile-nav__bottom {
& > .main-navigation__toggle-btn {
top: auto;
bottom: 0;
z-index: 5001;
}

.header-top-wrp {
position: static;
padding-bottom: 0;
}

.header-top {
bottom: 0;
}

.main-navigation__mobile-bottom {
transform: translateY(100vh);
transition: transform 0.3s ease;
height: calc(~"100vh - @{header-top-height}");
min-height: calc(~"100vh - @{header-top-height}");
z-index: 5000;
top: 0;
}

.header-top__language-menu-box {
top: auto;
bottom: 0;
}

.navigation-language__mobile-right {
top: unset;
bottom: 0;
}
}

.mobile-menu-opened {
.main-navigation__mobile-bottom {
transform: translateY(0);
top: 0;
}
}
}


// FOOTER
Expand Down Expand Up @@ -3743,6 +3802,17 @@
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------

// === Footer space mobile navigation is placed on bottom ===========
// ==================================================================
@media (max-width: @screen-sm-max) {
.footer.mobile-nav__bottom {
margin-bottom: @header-top-height;
}
}

// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------

// === Footer Quick Links===========
// =================================
.footer {
Expand Down
11 changes: 11 additions & 0 deletions felayout_t3kit/dev/styles/main/footer/footer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,17 @@
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------

// === Footer space mobile navigation is placed on bottom ===========
// ==================================================================
@media (max-width: @screen-sm-max) {
.footer.mobile-nav__bottom {
margin-bottom: @header-top-height;
}
}

// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------

// === Footer Quick Links===========
// =================================
.footer {
Expand Down
65 changes: 62 additions & 3 deletions felayout_t3kit/dev/styles/main/header/header.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,11 +384,12 @@
display: block;
}

.main-navigation-mobile__language-menu .header-top__language-menu .header-top__language-menu-box {
width: auto;
min-width: 150px;
.main-navigation-mobile__language-menu .header-top__language-menu-box {
background: @header-top-bg-color;
top: 1px;
left: auto;
right: auto;
width: 100vw;
}

.main-navigation .header-top__language-menu-box-close-btn {
Expand Down Expand Up @@ -1304,6 +1305,16 @@
transition-delay: 0, 0.2s;
}

@media (max-width: @screen-sm-max) {
.main-navigation-mobile__language-menu .navigation-language__mobile-right {
right: unset;
}

.navigation-toggle__mobile-right span {
left: unset;
}
}

@media (min-width: @screen-md-min) {
.main-navigation__toggle-btn {
display: none;
Expand Down Expand Up @@ -1387,3 +1398,51 @@
margin-left: 2px;
display: block;
}
// =================================
// === Mobile bottom toggle menu ==
// =================================

@media (max-width: @screen-sm-max) {
.mobile-nav__bottom {
& > .main-navigation__toggle-btn {
top: auto;
bottom: 0;
z-index: 5001;
}

.header-top-wrp {
position: static;
padding-bottom: 0;
}

.header-top {
bottom: 0;
}

.main-navigation__mobile-bottom {
transform: translateY(100vh);
transition: transform 0.3s ease;
height: calc(~"100vh - @{header-top-height}");
min-height: calc(~"100vh - @{header-top-height}");
z-index: 5000;
top: 0;
}

.header-top__language-menu-box {
top: auto;
bottom: 0;
}

.navigation-language__mobile-right {
top: unset;
bottom: 0;
}
}

.mobile-menu-opened {
.main-navigation__mobile-bottom {
transform: translateY(0);
top: 0;
}
}
}