From cbad02a5bfd62d898a34643b9c852b9a2846ec2a Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 4 Oct 2017 21:17:14 +0200 Subject: [PATCH] #1719 --- js/libs/fluidbook/fluidbook.nav.js | 9 +- style/mmenu/mmenu.less | 651 +++++++++++++++-------------- style/nav-horizontal.less | 184 ++++---- 3 files changed, 431 insertions(+), 413 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index dba2e237..eef9251e 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -225,6 +225,11 @@ FluidbookNav.prototype = { var $this = this, navOrder = this.fluidbook.datas.navOrder; // Default desktop order, maybe be overridden later + var v2 = ''; + if (this.fluidbook.datas.iconSet < 15) { + v2 = ' class="v2"'; + } + // MMenu specific elements if (navType == 'menu') { @@ -237,7 +242,7 @@ FluidbookNav.prototype = { $('#main header').append(menuOpener); // Add holder list element for menu items - $nav.append(''); + $nav.append(''); // Add Search form, or if disabled, add "Menu" label in its place var searchElement = (this.fluidbook.datas.search) ? this.getSearch() : '' + this.fluidbook.l10n.__('Menu') + ''; @@ -246,7 +251,7 @@ FluidbookNav.prototype = { // Horizontal icon nav } else if (navType == 'horizontalNav') { - $nav.append(''); + $nav.append(''); } diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less index 2890cc81..4042da62 100644 --- a/style/mmenu/mmenu.less +++ b/style/mmenu/mmenu.less @@ -5,402 +5,407 @@ // MMenu overrides .mm-menu { - &.mm-offcanvas { - max-width: 320px; - width: 100%; // Max-width will limit overall width but this allows it to take up more space on very narrow screens - } - - .mm-navbar { - height: auto; - - a, >* { - color: @menu-text; - } - } + &.mm-offcanvas { + max-width: 320px; + width: 100%; // Max-width will limit overall width but this allows it to take up more space on very narrow screens + } + + .mm-navbar { + height: auto; + + a, > * { + color: @menu-text; + } + } } // Menu title bar .mm-navbar .mm-title { - line-height: 60px; - padding: 0 !important; + line-height: 60px; + padding: 0 !important; } // < Title bar back arrow .mm-btn.mm-prev { - height: 60px; + height: 60px; } // Make menu items sit properly under title bar -.mm-panels>.mm-panel>.mm-listview:first-child, .mm-panels>.mm-panel>.mm-navbar+.mm-listview { - margin-top: 0; +.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview { + margin-top: 0; } // Submenu arrows < > -.mm-menu .mm-btn:after, .mm-menu .mm-btn:before, .mm-menu .mm-listview>li .mm-next:after { - border-color: @menu-text; +.mm-menu .mm-btn:after, .mm-menu .mm-btn:before, .mm-menu .mm-listview > li .mm-next:after { + border-color: @menu-text; } // Main list settings .mm-listview { - font-size: 16px; - line-height: 40px; + font-size: 16px; + line-height: 40px; } // Disable borders between list items -.mm-listview>li:not(.mm-divider):after, .mm-navbar { - border: none; +.mm-listview > li:not(.mm-divider):after, .mm-navbar { + border: none; } // Extra padding for submenus with title bars -.mm-panels>.mm-panel.mm-hasnavbar { - padding-top: 60px; +.mm-panels > .mm-panel.mm-hasnavbar { + padding-top: 60px; } // Page overlay opacity #mm-blocker { - background-color: #000; - opacity: 0; + background-color: #000; + opacity: 0; } -html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { - opacity: 0.5; - transition: opacity .4s ease 0s; // No delay before fading in the overlay + +html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { + opacity: 0.5; + transition: opacity .4s ease 0s; // No delay before fading in the overlay } // Selected menu item -.mm-menu .mm-listview>li.mm-selected>a:not(.mm-next), .mm-menu .mm-listview>li.mm-selected>span { - background: rgba(255,255,255,.2); +.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span { + background: rgba(255, 255, 255, .2); } - // Fluidbook menu styles #menu { - //position: relative; - //white-space: nowrap; - background-color: @menu-background; - color: @menu-text; - box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from - - a, li > span { - padding: 10px 10px 10px 29px; - - .rtl & { - padding: 10px 29px 10px 10px !important; - } - - img { - display: inline-block; - vertical-align: middle; - margin-right: 0.7em; - } - } - - //> a { - // vertical-align: top; - // display: inline-block; - //} + //position: relative; + //white-space: nowrap; + background-color: @menu-background; + color: @menu-text; + box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from + + a, li > span { + padding: 10px 10px 10px 29px; + + .rtl & { + padding: 10px 29px 10px 10px !important; + } + + img { + display: inline-block; + vertical-align: middle; + margin-right: 0.7em; + } + } + + //> a { + // vertical-align: top; + // display: inline-block; + //} } #menuOpener { - display: none; - - @media all and (max-width: @menu-breakpoint) { - position: absolute; - top: 50%; - transform: translateY(-50%); - height: 100%; - font-size: 16px; - line-height: 1; - color: @icon-color; - display: flex; - align-items: center; - } - - // Positioning for left-to-right Fluidbooks + inverted menu on RTL - .ltr &, .rtl.menu-inverted & { - left: 9px; - right: auto; - flex-direction: row; - } - - // Positioning for right-to-left Fluidbooks + inverted menu on LTR - .rtl &, .ltr.menu-inverted & { - right: 9px; - left: auto; - flex-direction: row-reverse; // Swap text and icon positions - } - - .label { - margin: 0 9px; - } - - .svg-icon { - width: 20px; - vertical-align: middle; - margin: 0 9px; - } + display: none; + + @media all and (max-width: @menu-breakpoint) { + position: absolute; + top: 50%; + transform: translateY(-50%); + height: 100%; + font-size: 16px; + line-height: 1; + color: @icon-color; + display: flex; + align-items: center; + } + + // Positioning for left-to-right Fluidbooks + inverted menu on RTL + .ltr &, .rtl.menu-inverted & { + left: 9px; + right: auto; + flex-direction: row; + } + + // Positioning for right-to-left Fluidbooks + inverted menu on LTR + .rtl &, .ltr.menu-inverted & { + right: 9px; + left: auto; + flex-direction: row-reverse; // Swap text and icon positions + } + + .label { + margin: 0 9px; + } + + .svg-icon { + width: 20px; + vertical-align: middle; + margin: 0 9px; + } } #menuSearch { - position: fixed; // So we can scroll the other items below... - top: 0; - left: 0; - width: 100%; - z-index: 2; // Ensure search box sits above #shareLinks - - &:after { - border: none; - } + position: fixed; // So we can scroll the other items below... + top: 0; + left: 0; + width: 100%; + z-index: 2; // Ensure search box sits above #shareLinks + + &:after { + border: none; + } } // Main menu with icons #menuList { - overflow: hidden; - position: relative; - height: 100%; - - &:before { - height: 0; // Fix spacing with search box - } - - > ul { - margin-top: 60px; // Spacing for search box - margin-bottom: 0; - padding-top: 20px; - padding-bottom: 20px; - } - - .svg-icon { - width: 26px; - height: 26px; - vertical-align: middle; - } - - // The "extra" image in the menu - .nav-icon { - margin-right: 0; - } + overflow: hidden; + position: relative; + height: 100%; + + &:before { + height: 0; // Fix spacing with search box + } + + > ul { + margin-top: 60px; // Spacing for search box + margin-bottom: 0; + padding-top: 20px; + padding-bottom: 20px; + } + + .svg-icon { + width: 26px; + height: 26px; + vertical-align: middle; + } + + .v2 { + .svg-icon { + width: auto; + height: 20px; + } + } + + // The "extra" image in the menu + .nav-icon { + margin-right: 0; + } } #menu #menuClose { // Extra specificity needed to override MMenu RTL styles - position: absolute; - top: 0; - right: 0; - width: 60px; - height: 60px; - padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element - color: @menu-text; - background-color: @menu-button-background; - - .rtl & { - right: auto; - left: 0; - } + position: absolute; + top: 0; + right: 0; + width: 60px; + height: 60px; + padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element + color: @menu-text; + background-color: @menu-button-background; + + .rtl & { + right: auto; + left: 0; + } } - #searchForm { - //position: fixed; - //top: 0; - //left: 0; - position: relative; - padding: 0; - text-align: left; - - .rtl & { - text-align: right; - } + //position: fixed; + //top: 0; + //left: 0; + position: relative; + padding: 0; + text-align: left; + + .rtl & { + text-align: right; + } } #q { - background-color: @menu-field-background; - color: @menu-field-text; - -webkit-appearance: none; - border: none; - border-radius: 0; - height: 60px; - font-size: 16px; - padding: 0 1em 0 70px; - width: 260px; - - .rtl & { - padding: 0 70px 0 1em; - } + background-color: @menu-field-background; + color: @menu-field-text; + -webkit-appearance: none; + border: none; + border-radius: 0; + height: 60px; + font-size: 16px; + padding: 0 1em 0 70px; + width: 260px; + + .rtl & { + padding: 0 70px 0 1em; + } } #submitSearch { - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - color: @menu-background; - - .svg-icon { - width: 25px; - height: 25px; - } - - .ltr & { - margin: 0; - } - - .rtl & { - left: auto; - right: 0; - } + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + color: @menu-background; + + .svg-icon { + width: 25px; + height: 25px; + } + + .ltr & { + margin: 0; + } + + .rtl & { + left: auto; + right: 0; + } } .menu-item-title { - margin: 0 10px; + margin: 0 10px; } #menuSearchResults, #menuSearchHints { - display: none; // Hidden by default, displayed via JS + display: none; // Hidden by default, displayed via JS } #menuSearchHints { - padding: 15px 0; - - .hint { - padding: 13px 30px; - font-size: 16px; - display: block; - width: 100%; - height: auto; - position: relative; - - // > arrow - &:after { - content: ''; - position: absolute; - border-top: 2px solid transparent; - border-left: 2px solid transparent; - border-color: currentColor; - display: block; - width: 8px; - height: 8px; - margin: auto; - top: 0; - bottom: 0; - right: 25px; - transform: rotate(135deg); - - // Reverse arrow position and direction for RTL screens - .rtl & { - right: auto; - left: 25px; - transform: rotate(315deg); - } - } - - em { - font-style: normal; - } - } + padding: 15px 0; + + .hint { + padding: 13px 30px; + font-size: 16px; + display: block; + width: 100%; + height: auto; + position: relative; + + // > arrow + &:after { + content: ''; + position: absolute; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-color: currentColor; + display: block; + width: 8px; + height: 8px; + margin: auto; + top: 0; + bottom: 0; + right: 25px; + transform: rotate(135deg); + + // Reverse arrow position and direction for RTL screens + .rtl & { + right: auto; + left: 25px; + transform: rotate(315deg); + } + } + + em { + font-style: normal; + } + } } #menu #menuSearchResults { - position: relative; - height: 100%; - // Max height is now handled via JS - //max-height: ~"calc(100vh - 60px - 100px)"; // 100vh - search form height - results margins - margin: 50px auto 0 0; - width: 295px; // To make 25px gap to right of scrollbar (320px - 25px) - - .rtl & { - margin-right: 0; - margin-left: auto; - } - - a { - padding: 0 !important; - } - - .doubleThumb { - display: block !important; - margin: 0 auto 40px auto !important; - &:not(.simple), &.simple .thumb img { - box-shadow: 10px 4px 10px 0px rgba(68, 68, 68, 0.5); - } - } - - .hits { - font-size: 16px !important; - } - - .padding { - display: none !important; - } - - .no-results { - padding: 5px 25px; - } - - // Perfect Scrollbar mods - .ps__scrollbar-y-rail { - background: rgba(0, 0, 0, 0.1); - width: 6px; - opacity: 1; - } - - .ps__scrollbar-y { - right: 0; - background-color: @menu-text; - } - - .ps:hover>.ps__scrollbar-y-rail:hover { - width: 11px; - } + position: relative; + height: 100%; + // Max height is now handled via JS + //max-height: ~"calc(100vh - 60px - 100px)"; // 100vh - search form height - results margins + margin: 50px auto 0 0; + width: 295px; // To make 25px gap to right of scrollbar (320px - 25px) + + .rtl & { + margin-right: 0; + margin-left: auto; + } + + a { + padding: 0 !important; + } + + .doubleThumb { + display: block !important; + margin: 0 auto 40px auto !important; + &:not(.simple), &.simple .thumb img { + box-shadow: 10px 4px 10px 0px rgba(68, 68, 68, 0.5); + } + } + + .hits { + font-size: 16px !important; + } + + .padding { + display: none !important; + } + + .no-results { + padding: 5px 25px; + } + + // Perfect Scrollbar mods + .ps__scrollbar-y-rail { + background: rgba(0, 0, 0, 0.1); + width: 6px; + opacity: 1; + } + + .ps__scrollbar-y { + right: 0; + background-color: @menu-text; + } + + .ps:hover > .ps__scrollbar-y-rail:hover { + width: 11px; + } } - #menu #shareLinks { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - background-color: @menu-button-background; - line-height: 1; - padding: 20px 0; - - .svg-icon { - margin: 0; - } - - .share-icons { - padding-left: 29px; - white-space: nowrap; - - .rtl & { - padding-left: 0; - padding-right: 29px; - } - } - - .shareList { - padding: 0; - } - - li { - display: inline-block; - padding: 0; - - &:not(:last-of-type) { - margin-right: 33px; - - .rtl & { - margin-right: 0; - margin-left: 33px; - } - } - - a { - padding: 0 !important; - } - - img { - margin: 0; - } - } + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background-color: @menu-button-background; + line-height: 1; + padding: 20px 0; + + .svg-icon { + margin: 0; + } + + .share-icons { + padding-left: 29px; + white-space: nowrap; + + .rtl & { + padding-left: 0; + padding-right: 29px; + } + } + + .shareList { + padding: 0; + } + + li { + display: inline-block; + padding: 0; + + &:not(:last-of-type) { + margin-right: 33px; + + .rtl & { + margin-right: 0; + margin-left: 33px; + } + } + + a { + padding: 0 !important; + } + + img { + margin: 0; + } + } } \ No newline at end of file diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less index 3c4aaa13..dd526777 100644 --- a/style/nav-horizontal.less +++ b/style/nav-horizontal.less @@ -1,97 +1,105 @@ #horizontalNav { - position: absolute; - top: 50%; - transform: translateY(-50%); - - @media all and (max-width: @menu-breakpoint) { - display: none; - } - - // Positioning for left-to-right Fluidbooks + inverted menu on RTL - .ltr &, .rtl.menu-inverted & { - left: 0; - right: auto; - } - - // Positioning for right-to-left Fluidbooks + inverted menu on LTR - .rtl &, .ltr.menu-inverted & { - right: 0; - left: auto; - } - - // Locales icon + text link - &_locales { - border-left: 1px solid; - margin-right: 1.5em; - margin-left: 14px; - - .rtl & { - border-left: none; - border-right: 1px solid; - } - - .svg-icon { - margin: 0 7px 0 30px !important; - - .rtl & { - margin: 0 30px 0 7px !important; - } - } - } - - // Optional extra image - &_extra { - img { - vertical-align: middle; - } - } + position: absolute; + top: 50%; + transform: translateY(-50%); + + @media all and (max-width: @menu-breakpoint) { + display: none; + } + + // Positioning for left-to-right Fluidbooks + inverted menu on RTL + .ltr &, .rtl.menu-inverted & { + left: 0; + right: auto; + } + + // Positioning for right-to-left Fluidbooks + inverted menu on LTR + .rtl &, .ltr.menu-inverted & { + right: 0; + left: auto; + } + + // Locales icon + text link + &_locales { + border-left: 1px solid; + margin-right: 1.5em; + margin-left: 14px; + + .rtl & { + border-left: none; + border-right: 1px solid; + } + + .svg-icon { + margin: 0 7px 0 30px !important; + + .rtl & { + margin: 0 30px 0 7px !important; + } + } + } + + // Optional extra image + &_extra { + img { + vertical-align: middle; + } + } } #iconList { - list-style-type: none; - margin: 0; - padding: 0; - - li { - display: inline-block; - } - - a { - color: @icon-color; - display: inline-block; - - // Styling when help overlay is open - .help & { - color: #ccc; - } - } - - .svg-icon { - width: 25px; - height: 25px; - margin: 0 17px; - color: @icon-color; - vertical-align: middle; - - .help & { - color: #ccc; - } - } + list-style-type: none; + margin: 0; + padding: 0; + + li { + display: inline-block; + } + + a { + color: @icon-color; + display: inline-block; + + // Styling when help overlay is open + .help & { + color: #ccc; + } + } + + .svg-icon { + width: 25px; + height: 25px; + + margin: 0 17px; + color: @icon-color; + vertical-align: middle; + + .help & { + color: #ccc; + } + } + + &.v2 { + .svg-icon { + width: auto; + height: 20px; + } + } } // Small dropdown arrow after locale name .icon-locales .menu-item-title:after { - content: ''; - width: 6px; - height: 6px; - vertical-align: middle; - margin: -3px 0 0 10px; - border-style: solid; - border-width: 0 2px 2px 0; // Make right angle for arrow - transform: rotate(45deg); // Rotate to downwards position - display: inline-block; - - .rtl & { - margin-right: 10px; - } + content: ''; + width: 6px; + height: 6px; + vertical-align: middle; + margin: -3px 0 0 10px; + border-style: solid; + border-width: 0 2px 2px 0; // Make right angle for arrow + transform: rotate(45deg); // Rotate to downwards position + display: inline-block; + + .rtl & { + margin-right: 10px; + } } \ No newline at end of file -- 2.39.5