From 13c282b72bdf1b6042ca7c996247280c6fffcc84 Mon Sep 17 00:00:00 2001 From: Israel Cefrin Date: Thu, 25 Jan 2024 21:30:47 -0500 Subject: [PATCH 1/2] pkp/pkp-lib#5199 Set the current page on the top menu - OPS 3.4 --- plugins/themes/default/DefaultThemePlugin.php | 55 +- plugins/themes/default/styles/head.less | 1039 +++++++++-------- 2 files changed, 581 insertions(+), 513 deletions(-) diff --git a/plugins/themes/default/DefaultThemePlugin.php b/plugins/themes/default/DefaultThemePlugin.php index a8ea2a5ab6..6411d3dd23 100755 --- a/plugins/themes/default/DefaultThemePlugin.php +++ b/plugins/themes/default/DefaultThemePlugin.php @@ -3,8 +3,8 @@ /** * @file plugins/themes/default/DefaultThemePlugin.php * - * Copyright (c) 2014-2022 Simon Fraser University - * Copyright (c) 2003-2022 John Willinsky + * Copyright (c) 2014-2024 Simon Fraser University + * Copyright (c) 2003-2024 John Willinsky * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING. * * @class DefaultThemePlugin @@ -17,9 +17,14 @@ use APP\core\Application; use APP\file\PublicFileManager; use PKP\config\Config; -use PKP\plugins\ThemePlugin; use PKP\session\SessionManager; +use APP\facades\Repo; +use APP\issue\Collector; +use APP\services\NavigationMenuService; +use PKP\plugins\ThemePlugin; +use PKP\plugins\Hook; + class DefaultThemePlugin extends ThemePlugin { /** @@ -210,6 +215,9 @@ public function init() // Add navigation menu areas for this theme $this->addMenuArea(['primary', 'user']); + + + Hook::add('TemplateManager::display', array($this, 'checkCurrentPage')); } /** @@ -253,6 +261,47 @@ public function getDescription() { return __('plugins.themes.default.description'); } + + /** + * @param $hookname string + * @param $args array + */ + public function checkCurrentPage($hookname, $args) { + $templateMgr = $args[0]; + // TODO check the issue with multiple calls of the hook on settings/website + if (!isset($templateMgr->registered_plugins["function"]["default_item_active"])) { + $templateMgr->registerPlugin('function', 'default_item_active', array($this, 'isActiveItem')); + } + + } + + /** + * @param $params array + * @param $smarty Smarty_Internal_Template + * @return string + */ + public function isActiveItem($params, $smarty) { + + $navigationMenuItem = $params['item']; + $emptyMarker = ''; + $activeMarker = ' active'; + + // Get URL of the current page + $request = $this->getRequest(); + $currentUrl = $request->getCompleteUrl(); + $currentPage = $request->getRequestedPage(); + + // Do not add an active marker if it's a dropdown menu + if ($navigationMenuItem->getIsChildVisible()) return $emptyMarker; + + // Retrieve URL and its components for a menu item + $itemUrl = $navigationMenuItem->getUrl(); + + if ($currentUrl === $itemUrl) return $activeMarker; + + return $emptyMarker; + } + } if (!PKP_STRICT_MODE) { diff --git a/plugins/themes/default/styles/head.less b/plugins/themes/default/styles/head.less index c1e7172a45..ac45175d79 100755 --- a/plugins/themes/default/styles/head.less +++ b/plugins/themes/default/styles/head.less @@ -9,513 +9,532 @@ * * @brief Classes for the page header structural elements */ -@nav-menu-height: @quadruple; - -// Structural components of the header layout -.pkp_structure_head { - background-color: @bg-base; - border-bottom: @bg-border; -} - -.pkp_head_wrapper { - position: relative; -} - -.pkp_site_name_wrapper { - height: @nav-menu-height; - - @media (min-width: @screen-desktop) { - height: auto; - } -} - -// Site logo/name -.pkp_site_name { - position: absolute; - left: @nav-menu-height; - right: 0; - margin-top: 0; - margin-bottom: 0; - padding-left: @base; - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: @text-bg-base; - font-family: @font-site-title; - font-size: @font-sml; - - > a { - padding-top: @base; - padding-bottom: @base; - - &:focus { - outline: 0; - } - } - - .is_img { - display: inline-block; - margin-top: @half; - margin-bottom: @half; - padding: 0; - - &:focus { - outline: 1px solid @text-bg-base; - } - - img { - display: block; - max-height: @nav-menu-height - @base; - max-width: 100%; - width: auto; - height: auto; - } - } - - .is_text { - font-family: @font-site-title; - font-size: @font-sml; - font-weight: @bold; - line-height: @nav-menu-height; - color: @text-bg-base; - text-decoration: none; - - &:focus { - text-decoration: underline; - } - } -} - -.pkp_navigation_primary_wrapper { - padding-left: 0; - padding-right: 0; -} - -// Mobile navigation menu -.pkp_site_nav_menu { - position: absolute; - width: 100%; - top: 100%; - background:@bg-base; - left: 0; - padding: @base; - z-index: 9999; - - .pkp_nav_list { - padding-left: 0; - margin-left: 0; - } - - ul { - &:extend(.pkp_unstyled_list); - - ul { - padding-left: 0.5rem; - } - } - - a { - display: inline-block; - padding: 0.125rem 0; - color: @text-bg-base; - text-decoration: none; - - &:hover, - &:focus { - color: @text-bg-base; - text-decoration: underline; - } - } - - #siteNav { - position: absolute; - top: 0; - height: 0; - } -} - -.pkp_navigation_user { - - &.pkp_navigation_user { - margin-left: auto; - margin-right: auto; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid @bg-base-border-color; - } - - .task_count { - display: inline-block; - width: @double; - height: @double; - margin-left: 0.5em; - border-radius: 50%; - background: @bg-base-border-color; - line-height: @double; - text-align: center; - font-size: 0.857rem; - position: relative; - } - - // Hide the top-level task count in mobile nav - > li > a .task_count { - display: none; - } - - > li > ul a { - .task_count { - display: inline-block; - background: @bg-base-border-color; - color: @text-bg-base; - } - - &:hover .task_count, - &:focus .task_count { - background: @text; - } - } -} - -.pkp_navigation_search_wrapper { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid @bg-base-border-color; -} - -// The padding to apply to top-level items in the navigation row -// Total height - line height (divided by 2 since it will be applied to top and bottom) -@pkp_nav_primary_row_el_padding: @base; - -@media (min-width: @screen-desktop) { - .pkp_head_wrapper { - padding-top: @triple * 2; // Make room for the user nav at the top - } - - .pkp_site_nav_toggle { - display: none; - } - - .pkp_site_name { - position: relative; - width: 100%; - left: auto; - right: auto; - padding: 0; - white-space: normal; - font-size: 2em; // Prevents extra vertical space after logos - background: transparent; - overflow: visible; - - .is_text { - font-family: @font-site-title; - font-size: @font-header; - line-height: @line-header; - } - - .is_img img { - max-height: 80px; // must match height - padding of .is_img - } - } - - .pkp_site_nav_menu { - display: block; - position: static; - top: auto; - padding: 0; - - ul ul { - padding-left: 0; - } - } - - // Site logo/nav on same line on larger screens - .has_site_logo .pkp_head_wrapper { - padding-top: @triple; - } - - .pkp_nav_list { - margin: 0; - padding: 0; - list-style: none; - - li { - position: relative; - display: inline-block; - } - - a { - display: inline-block; - padding-left: @base; - padding-right: @base; - text-decoration: none; - padding-top: @half; - padding-bottom: @half; - - &:hover, - &:focus { - text-decoration: none; - } - } - - ul { - position: absolute; - top: 100%; - left: -9999px; - z-index: 1000; - width: 15em; - margin: 0; - padding: 0; - background: @bg; - border-radius: @radius; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - - li { - display: block; - } - - a { - display: block; - padding-left: @half; - border-left: @half solid transparent; - color: @primary; - - &:hover, - &:focus { - outline: 0; - background: @bg-shade; - border-color: @primary; - color: @primary; - } - } - - li:first-child a { - border-top-left-radius: @radius; - border-top-right-radius: @radius; - } - - li:last-child a { - border-bottom-left-radius: @radius; - border-bottom-right-radius: @radius; - } - } - - > li:hover ul { - left: 0; - } - - [aria-haspopup]:after { - position: relative; - display: inline-block; - content: ""; - width: 0; - height: 0; - margin-left: 0.25em; - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - vertical-align: middle; - overflow: hidden; - } - } - - // Primary site navigation menu - .pkp_navigation_primary { - text-align: center; - - > li { - > a { - margin: @half 0.5em 0; - padding: @half 0.5em - calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size - border-bottom: 2px solid transparent; - color: @text-bg-base; - text-decoration: none; - - &:hover { - color: @text-bg-base; - outline: 0; - border-color: @text-bg-base; - } - - &:focus { - background: @text-bg-base; - color: @bg-base; - outline: 0; - } - } - - &:first-child { - a { - margin-left: -0.5em; - } - } - - &:last-child { - a { - margin-right: -0.5em; - } - } - } - - // Reproduce positioning of dropdown menu from Popper.js - > li:hover ul { - position: absolute; - transform: translate3d(7px, 40px, 0px); - top: 0; - left: 0; - will-change: transform; - } - - ul a { - padding-top: @base; - padding-bottom: @base; - } - - [aria-haspopup]:hover { - border-color: transparent; - } - - .dropdown-menu a:focus, - .dropdown-menu a:hover { - border-color: @primary; - } - - @media (min-width: @screen-desktop) { - display: inline-block; - max-width: 80%; - text-align: left; - } - } - - // Bootstrap dropdown components - .dropdown-menu { - display: none; - - &.show { - display: block; - } - } - - [data-toggle="dropdown"]:hover + .dropdown-menu, - .dropdown-menu:hover { - display: block; - } - - // User-focused navigation menu - .pkp_navigation_user_wrapper { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - padding-left: @base; - padding-right: @base; - text-align: right; - padding-top: 0; - margin-top: 0; - border-top: none; - z-index: 1000; - } - - .pkp_navigation_user { - text-align: right; - font-size: @font-sml; - padding-right: @double; - - &.pkp_navigation_user { - margin: 0; - padding: 0; - border: none; - } - - li { - text-align: left; - } - - a { - padding-top: @half; - padding-bottom: @half; - line-height: @line-sml; - } - - > li > a:focus { - outline: 0; - background: @text-bg-base; - color: @bg-base; - } - - ul { - width: 10em; - } - - // Reproduce positioning of dropdown menu from Popper.js - // There can still be some shifting when the parent item is focused - // because Popper.js will adjust if it is too close to the edge of - // the screen. - > li:hover ul { - position: absolute; - top: 0; - left: 0; - transform: translate3d(0px, 30px, 0px); - will-change: transform; - } - - > li > a, - > li.in_focus > a, - > li > a:hover, - > li > a:focus { - color: @text-bg-base; - } - - // Align to the right edge of the container - > li:last-child > a { - margin-right: -@base; - } - - // Show the top-level task count in desktop nav - > li > a .task_count { - display: inline-block; - } - - > li > a:focus .task_count { - background: @bg-base; - color: @text-bg-base; - } - - > li > ul a { - .task_count { - display: none; - } - } - } - - .pkp_navigation_search_wrapper { - float: right; - margin: 0; - padding: 0; - border: none; - - a { - margin: @half 0.5em 0; - padding: @half 0.5em - calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size - border-bottom: 2px solid transparent; - color: @text-bg-base; - text-decoration: none; - - &:hover { - color: @text-bg-base; - outline: 0; - border-color: @text-bg-base; - text-decoration: none; - } - - &:focus { - background: @text-bg-base; - color: @bg-base; - outline: 0; - text-decoration: none; - } - } - } -} \ No newline at end of file + @nav-menu-height: @quadruple; + + // Structural components of the header layout + .pkp_structure_head { + background-color: @bg-base; + border-bottom: @bg-border; + } + + .pkp_head_wrapper { + position: relative; + } + + .pkp_site_name_wrapper { + height: @nav-menu-height; + + @media (min-width: @screen-desktop) { + height: auto; + } + } + + // Site logo/name + .pkp_site_name { + position: absolute; + left: @nav-menu-height; + right: 0; + margin-top: 0; + margin-bottom: 0; + padding-left: @base; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: @text-bg-base; + font-family: @font-site-title; + font-size: @font-sml; + + > a { + padding-top: @base; + padding-bottom: @base; + + &:focus { + outline: 0; + } + } + + .is_img { + display: inline-block; + margin-top: @half; + margin-bottom: @half; + padding: 0; + + &:focus { + outline: 1px solid @text-bg-base; + } + + img { + display: block; + max-height: @nav-menu-height - @base; + max-width: 100%; + width: auto; + height: auto; + } + } + + .is_text { + font-family: @font-site-title; + font-size: @font-sml; + font-weight: @bold; + line-height: @nav-menu-height; + color: @text-bg-base; + text-decoration: none; + + &:focus { + text-decoration: underline; + } + } + } + + .pkp_navigation_primary_wrapper { + padding-left: 0; + padding-right: 0; + } + + // Mobile navigation menu + .pkp_site_nav_menu { + position: absolute; + width: 100%; + top: 100%; + background:@bg-base; + left: 0; + padding: @base; + z-index: 9999; + + .pkp_nav_list { + padding-left: 0; + margin-left: 0; + } + + ul { + &:extend(.pkp_unstyled_list); + + ul { + padding-left: 0.5rem; + } + } + + a { + display: inline-block; + padding: 0.86rem 0; + color: @text-bg-base; + text-decoration: none; + + &:hover, + &:focus { + color: @text-bg-base; + text-decoration: underline; + } + } + @media (max-width: @screen-desktop) { + + .active { + background-color: @bg-base-border-color; + + } + .active a { + font-weight: bold; + + } + } + + + #siteNav { + position: absolute; + top: 0; + height: 0; + } + } + + .pkp_navigation_user { + + &.pkp_navigation_user { + margin-left: auto; + margin-right: auto; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid @bg-base-border-color; + } + + .task_count { + display: inline-block; + width: @double; + height: @double; + margin-left: 0.5em; + border-radius: 50%; + background: @bg-base-border-color; + line-height: @double; + text-align: center; + font-size: 0.857rem; + position: relative; + } + + // Hide the top-level task count in mobile nav + > li > a .task_count { + display: none; + } + + > li > ul a { + .task_count { + display: inline-block; + background: @bg-base-border-color; + color: @text-bg-base; + } + + &:hover .task_count, + &:focus .task_count { + background: @text; + } + } + } + + .pkp_navigation_search_wrapper { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid @bg-base-border-color; + } + + // The padding to apply to top-level items in the navigation row + // Total height - line height (divided by 2 since it will be applied to top and bottom) + @pkp_nav_primary_row_el_padding: @base; + + @media (min-width: @screen-desktop) { + .pkp_head_wrapper { + padding-top: @triple * 2; // Make room for the user nav at the top + } + + .pkp_site_nav_toggle { + display: none; + } + + .pkp_site_name { + position: relative; + width: 100%; + left: auto; + right: auto; + padding: 0; + white-space: normal; + font-size: 2em; // Prevents extra vertical space after logos + background: transparent; + overflow: visible; + + .is_text { + font-family: @font-site-title; + font-size: @font-header; + line-height: @line-header; + } + + .is_img img { + max-height: 80px; // must match height - padding of .is_img + } + } + + .pkp_site_nav_menu { + display: block; + position: static; + top: auto; + padding: 0; + + ul ul { + padding-left: 0; + } + } + + // Site logo/nav on same line on larger screens + .has_site_logo .pkp_head_wrapper { + padding-top: @triple; + } + + .pkp_nav_list { + margin: 0; + padding: 0; + list-style: none; + + li { + position: relative; + display: inline-block; + } + + a { + display: inline-block; + padding-left: @base; + padding-right: @base; + text-decoration: none; + padding-top: @half; + padding-bottom: @half; + + &:hover, + &:focus { + text-decoration: none; + } + } + + ul { + position: absolute; + top: 100%; + left: -9999px; + z-index: 1000; + width: 15em; + margin: 0; + padding: 0; + background: @bg; + border-radius: @radius; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + + li { + display: block; + } + + a { + display: block; + padding-left: @half; + border-left: @half solid transparent; + color: @primary; + + &:hover, + &:focus { + outline: 0; + background: @bg-shade; + border-color: @primary; + color: @primary; + } + } + + li:first-child a { + border-top-left-radius: @radius; + border-top-right-radius: @radius; + } + + li:last-child a { + border-bottom-left-radius: @radius; + border-bottom-right-radius: @radius; + } + } + + > li:hover ul { + left: 0; + } + + [aria-haspopup]:after { + position: relative; + display: inline-block; + content: ""; + width: 0; + height: 0; + margin-left: 0.25em; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + vertical-align: middle; + overflow: hidden; + } + } + + // Primary site navigation menu + .pkp_navigation_primary { + text-align: center; + + > li { + > a { + margin: @half 0.5em 0; + padding: @half 0.5em + calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size + border-bottom: 2px solid transparent; + color: @text-bg-base; + text-decoration: none; + + &:hover { + color: @text-bg-base; + outline: 0; + border-color: @text-bg-base; + } + + &:focus { + background: @text-bg-base; + color: @bg-base; + outline: 0; + } + } + + &:first-child { + a { + margin-left: -0.5em; + } + } + + &:last-child { + a { + margin-right: -0.5em; + } + } + } + + // Visualy highlighting the current menu item + > li.active { + > a { + //background: @primary-lift; + border-color: @text-bg-base; + outline: 0; + } + &:hover { + color: @bg-base; + border-color: red; + } + } + + // Reproduce positioning of dropdown menu from Popper.js + > li:hover ul { + position: absolute; + transform: translate3d(7px, 40px, 0px); + top: 0; + left: 0; + will-change: transform; + } + + ul a { + padding-top: @base; + padding-bottom: @base; + } + + [aria-haspopup]:hover { + border-color: transparent; + } + + .dropdown-menu a:focus, + .dropdown-menu a:hover, + .dropdown-menu li.active a { + border-color: @primary; + } + + @media (min-width: @screen-desktop) { + display: inline-block; + max-width: 80%; + text-align: left; + } + } + + // Bootstrap dropdown components + .dropdown-menu { + display: none; + + &.show { + display: block; + } + } + + [data-toggle="dropdown"]:hover + .dropdown-menu, + .dropdown-menu:hover { + display: block; + } + + // User-focused navigation menu + .pkp_navigation_user_wrapper { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + padding-left: @base; + padding-right: @base; + text-align: right; + padding-top: 0; + margin-top: 0; + border-top: none; + z-index: 1000; + } + + .pkp_navigation_user { + text-align: right; + font-size: @font-sml; + padding-right: @double; + + &.pkp_navigation_user { + margin: 0; + padding: 0; + border: none; + } + + li { + text-align: left; + } + + a { + padding-top: @half; + padding-bottom: @half; + line-height: @line-sml; + } + + > li > a:focus { + outline: 0; + background: @text-bg-base; + color: @bg-base; + } + + ul { + width: 10em; + } + + // Reproduce positioning of dropdown menu from Popper.js + // There can still be some shifting when the parent item is focused + // because Popper.js will adjust if it is too close to the edge of + // the screen. + > li:hover ul { + position: absolute; + top: 0; + left: 0; + transform: translate3d(0px, 30px, 0px); + will-change: transform; + } + + // Align to the right edge of the container + > li:last-child > a { + margin-right: -@base; + } + + // Show the top-level task count in desktop nav + > li > a .task_count { + display: inline-block; + } + + > li > a:focus .task_count { + background: @bg-base; + color: @text-bg-base; + } + + > li > ul a { + .task_count { + display: none; + } + } + } + + .pkp_navigation_search_wrapper { + float: right; + margin: 0; + padding: 0; + border: none; + + a { + margin: @half 0.5em 0; + padding: @half 0.5em + calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size + border-bottom: 2px solid transparent; + color: @text-bg-base; + text-decoration: none; + + &:hover { + color: @text-bg-base; + outline: 0; + border-color: @text-bg-base; + text-decoration: none; + } + + &:focus { + background: @text-bg-base; + color: @bg-base; + outline: 0; + text-decoration: none; + } + } + } + } \ No newline at end of file From 0c53a9a29d503565461276f3572cc9f572a0420f Mon Sep 17 00:00:00 2001 From: Jonas Raoni Soares da Silva Date: Fri, 26 Jan 2024 22:00:34 +0300 Subject: [PATCH 2/2] pkp/pkp-lib#5199 Formatting --- plugins/themes/default/DefaultThemePlugin.php | 92 +- plugins/themes/default/styles/head.less | 1061 +++++++++-------- 2 files changed, 578 insertions(+), 575 deletions(-) diff --git a/plugins/themes/default/DefaultThemePlugin.php b/plugins/themes/default/DefaultThemePlugin.php index 6411d3dd23..0102a4361d 100755 --- a/plugins/themes/default/DefaultThemePlugin.php +++ b/plugins/themes/default/DefaultThemePlugin.php @@ -17,13 +17,10 @@ use APP\core\Application; use APP\file\PublicFileManager; use PKP\config\Config; -use PKP\session\SessionManager; +use PKP\plugins\Hook; -use APP\facades\Repo; -use APP\issue\Collector; -use APP\services\NavigationMenuService; use PKP\plugins\ThemePlugin; -use PKP\plugins\Hook; +use PKP\session\SessionManager; class DefaultThemePlugin extends ThemePlugin { @@ -216,8 +213,7 @@ public function init() // Add navigation menu areas for this theme $this->addMenuArea(['primary', 'user']); - - Hook::add('TemplateManager::display', array($this, 'checkCurrentPage')); + Hook::add('TemplateManager::display', [$this, 'checkCurrentPage']); } /** @@ -262,46 +258,50 @@ public function getDescription() return __('plugins.themes.default.description'); } - /** - * @param $hookname string - * @param $args array - */ - public function checkCurrentPage($hookname, $args) { - $templateMgr = $args[0]; - // TODO check the issue with multiple calls of the hook on settings/website - if (!isset($templateMgr->registered_plugins["function"]["default_item_active"])) { - $templateMgr->registerPlugin('function', 'default_item_active', array($this, 'isActiveItem')); - } - - } - - /** - * @param $params array - * @param $smarty Smarty_Internal_Template - * @return string - */ - public function isActiveItem($params, $smarty) { - - $navigationMenuItem = $params['item']; - $emptyMarker = ''; - $activeMarker = ' active'; - - // Get URL of the current page - $request = $this->getRequest(); - $currentUrl = $request->getCompleteUrl(); - $currentPage = $request->getRequestedPage(); - - // Do not add an active marker if it's a dropdown menu - if ($navigationMenuItem->getIsChildVisible()) return $emptyMarker; - - // Retrieve URL and its components for a menu item - $itemUrl = $navigationMenuItem->getUrl(); - - if ($currentUrl === $itemUrl) return $activeMarker; - - return $emptyMarker; - } + /** + * @param $hookname string + * @param $args array + */ + public function checkCurrentPage($hookname, $args) + { + $templateMgr = $args[0]; + // TODO check the issue with multiple calls of the hook on settings/website + if (!isset($templateMgr->registered_plugins['function']['default_item_active'])) { + $templateMgr->registerPlugin('function', 'default_item_active', [$this, 'isActiveItem']); + } + } + /** + * @param $params array + * @param $smarty Smarty_Internal_Template + * + * @return string + */ + public function isActiveItem($params, $smarty) + { + $navigationMenuItem = $params['item']; + $emptyMarker = ''; + $activeMarker = ' active'; + + // Get URL of the current page + $request = $this->getRequest(); + $currentUrl = $request->getCompleteUrl(); + $currentPage = $request->getRequestedPage(); + + // Do not add an active marker if it's a dropdown menu + if ($navigationMenuItem->getIsChildVisible()) { + return $emptyMarker; + } + + // Retrieve URL and its components for a menu item + $itemUrl = $navigationMenuItem->getUrl(); + + if ($currentUrl === $itemUrl) { + return $activeMarker; + } + + return $emptyMarker; + } } if (!PKP_STRICT_MODE) { diff --git a/plugins/themes/default/styles/head.less b/plugins/themes/default/styles/head.less index ac45175d79..7c2be737f6 100755 --- a/plugins/themes/default/styles/head.less +++ b/plugins/themes/default/styles/head.less @@ -9,532 +9,535 @@ * * @brief Classes for the page header structural elements */ - @nav-menu-height: @quadruple; - - // Structural components of the header layout - .pkp_structure_head { - background-color: @bg-base; - border-bottom: @bg-border; - } - - .pkp_head_wrapper { - position: relative; - } - - .pkp_site_name_wrapper { - height: @nav-menu-height; - - @media (min-width: @screen-desktop) { - height: auto; - } - } - - // Site logo/name - .pkp_site_name { - position: absolute; - left: @nav-menu-height; - right: 0; - margin-top: 0; - margin-bottom: 0; - padding-left: @base; - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: @text-bg-base; - font-family: @font-site-title; - font-size: @font-sml; - - > a { - padding-top: @base; - padding-bottom: @base; - - &:focus { - outline: 0; - } - } - - .is_img { - display: inline-block; - margin-top: @half; - margin-bottom: @half; - padding: 0; - - &:focus { - outline: 1px solid @text-bg-base; - } - - img { - display: block; - max-height: @nav-menu-height - @base; - max-width: 100%; - width: auto; - height: auto; - } - } - - .is_text { - font-family: @font-site-title; - font-size: @font-sml; - font-weight: @bold; - line-height: @nav-menu-height; - color: @text-bg-base; - text-decoration: none; - - &:focus { - text-decoration: underline; - } - } - } - - .pkp_navigation_primary_wrapper { - padding-left: 0; - padding-right: 0; - } - - // Mobile navigation menu - .pkp_site_nav_menu { - position: absolute; - width: 100%; - top: 100%; - background:@bg-base; - left: 0; - padding: @base; - z-index: 9999; - - .pkp_nav_list { - padding-left: 0; - margin-left: 0; - } - - ul { - &:extend(.pkp_unstyled_list); - - ul { - padding-left: 0.5rem; - } - } - - a { - display: inline-block; - padding: 0.86rem 0; - color: @text-bg-base; - text-decoration: none; - - &:hover, - &:focus { - color: @text-bg-base; - text-decoration: underline; - } - } - @media (max-width: @screen-desktop) { - - .active { - background-color: @bg-base-border-color; - - } - .active a { - font-weight: bold; - - } - } - - - #siteNav { - position: absolute; - top: 0; - height: 0; - } - } - - .pkp_navigation_user { - - &.pkp_navigation_user { - margin-left: auto; - margin-right: auto; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid @bg-base-border-color; - } - - .task_count { - display: inline-block; - width: @double; - height: @double; - margin-left: 0.5em; - border-radius: 50%; - background: @bg-base-border-color; - line-height: @double; - text-align: center; - font-size: 0.857rem; - position: relative; - } - - // Hide the top-level task count in mobile nav - > li > a .task_count { - display: none; - } - - > li > ul a { - .task_count { - display: inline-block; - background: @bg-base-border-color; - color: @text-bg-base; - } - - &:hover .task_count, - &:focus .task_count { - background: @text; - } - } - } - - .pkp_navigation_search_wrapper { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid @bg-base-border-color; - } - - // The padding to apply to top-level items in the navigation row - // Total height - line height (divided by 2 since it will be applied to top and bottom) - @pkp_nav_primary_row_el_padding: @base; - - @media (min-width: @screen-desktop) { - .pkp_head_wrapper { - padding-top: @triple * 2; // Make room for the user nav at the top - } - - .pkp_site_nav_toggle { - display: none; - } - - .pkp_site_name { - position: relative; - width: 100%; - left: auto; - right: auto; - padding: 0; - white-space: normal; - font-size: 2em; // Prevents extra vertical space after logos - background: transparent; - overflow: visible; - - .is_text { - font-family: @font-site-title; - font-size: @font-header; - line-height: @line-header; - } - - .is_img img { - max-height: 80px; // must match height - padding of .is_img - } - } - - .pkp_site_nav_menu { - display: block; - position: static; - top: auto; - padding: 0; - - ul ul { - padding-left: 0; - } - } - - // Site logo/nav on same line on larger screens - .has_site_logo .pkp_head_wrapper { - padding-top: @triple; - } - - .pkp_nav_list { - margin: 0; - padding: 0; - list-style: none; - - li { - position: relative; - display: inline-block; - } - - a { - display: inline-block; - padding-left: @base; - padding-right: @base; - text-decoration: none; - padding-top: @half; - padding-bottom: @half; - - &:hover, - &:focus { - text-decoration: none; - } - } - - ul { - position: absolute; - top: 100%; - left: -9999px; - z-index: 1000; - width: 15em; - margin: 0; - padding: 0; - background: @bg; - border-radius: @radius; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - - li { - display: block; - } - - a { - display: block; - padding-left: @half; - border-left: @half solid transparent; - color: @primary; - - &:hover, - &:focus { - outline: 0; - background: @bg-shade; - border-color: @primary; - color: @primary; - } - } - - li:first-child a { - border-top-left-radius: @radius; - border-top-right-radius: @radius; - } - - li:last-child a { - border-bottom-left-radius: @radius; - border-bottom-right-radius: @radius; - } - } - - > li:hover ul { - left: 0; - } - - [aria-haspopup]:after { - position: relative; - display: inline-block; - content: ""; - width: 0; - height: 0; - margin-left: 0.25em; - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - vertical-align: middle; - overflow: hidden; - } - } - - // Primary site navigation menu - .pkp_navigation_primary { - text-align: center; - - > li { - > a { - margin: @half 0.5em 0; - padding: @half 0.5em - calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size - border-bottom: 2px solid transparent; - color: @text-bg-base; - text-decoration: none; - - &:hover { - color: @text-bg-base; - outline: 0; - border-color: @text-bg-base; - } - - &:focus { - background: @text-bg-base; - color: @bg-base; - outline: 0; - } - } - - &:first-child { - a { - margin-left: -0.5em; - } - } - - &:last-child { - a { - margin-right: -0.5em; - } - } - } - - // Visualy highlighting the current menu item - > li.active { - > a { - //background: @primary-lift; - border-color: @text-bg-base; - outline: 0; - } - &:hover { - color: @bg-base; - border-color: red; - } - } - - // Reproduce positioning of dropdown menu from Popper.js - > li:hover ul { - position: absolute; - transform: translate3d(7px, 40px, 0px); - top: 0; - left: 0; - will-change: transform; - } - - ul a { - padding-top: @base; - padding-bottom: @base; - } - - [aria-haspopup]:hover { - border-color: transparent; - } - - .dropdown-menu a:focus, - .dropdown-menu a:hover, - .dropdown-menu li.active a { - border-color: @primary; - } - - @media (min-width: @screen-desktop) { - display: inline-block; - max-width: 80%; - text-align: left; - } - } - - // Bootstrap dropdown components - .dropdown-menu { - display: none; - - &.show { - display: block; - } - } - - [data-toggle="dropdown"]:hover + .dropdown-menu, - .dropdown-menu:hover { - display: block; - } - - // User-focused navigation menu - .pkp_navigation_user_wrapper { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - padding-left: @base; - padding-right: @base; - text-align: right; - padding-top: 0; - margin-top: 0; - border-top: none; - z-index: 1000; - } - - .pkp_navigation_user { - text-align: right; - font-size: @font-sml; - padding-right: @double; - - &.pkp_navigation_user { - margin: 0; - padding: 0; - border: none; - } - - li { - text-align: left; - } - - a { - padding-top: @half; - padding-bottom: @half; - line-height: @line-sml; - } - - > li > a:focus { - outline: 0; - background: @text-bg-base; - color: @bg-base; - } - - ul { - width: 10em; - } - - // Reproduce positioning of dropdown menu from Popper.js - // There can still be some shifting when the parent item is focused - // because Popper.js will adjust if it is too close to the edge of - // the screen. - > li:hover ul { - position: absolute; - top: 0; - left: 0; - transform: translate3d(0px, 30px, 0px); - will-change: transform; - } - - // Align to the right edge of the container - > li:last-child > a { - margin-right: -@base; - } - - // Show the top-level task count in desktop nav - > li > a .task_count { - display: inline-block; - } - - > li > a:focus .task_count { - background: @bg-base; - color: @text-bg-base; - } - - > li > ul a { - .task_count { - display: none; - } - } - } - - .pkp_navigation_search_wrapper { - float: right; - margin: 0; - padding: 0; - border: none; - - a { - margin: @half 0.5em 0; - padding: @half 0.5em - calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size - border-bottom: 2px solid transparent; - color: @text-bg-base; - text-decoration: none; - - &:hover { - color: @text-bg-base; - outline: 0; - border-color: @text-bg-base; - text-decoration: none; - } - - &:focus { - background: @text-bg-base; - color: @bg-base; - outline: 0; - text-decoration: none; - } - } - } - } \ No newline at end of file +@nav-menu-height: @quadruple; + +// Structural components of the header layout +.pkp_structure_head { + background-color: @bg-base; + border-bottom: @bg-border; +} + +.pkp_head_wrapper { + position: relative; +} + +.pkp_site_name_wrapper { + height: @nav-menu-height; + + @media (min-width: @screen-desktop) { + height: auto; + } +} + +// Site logo/name +.pkp_site_name { + position: absolute; + left: @nav-menu-height; + right: 0; + margin-top: 0; + margin-bottom: 0; + padding-left: @base; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: @text-bg-base; + font-family: @font-site-title; + font-size: @font-sml; + + > a { + padding-top: @base; + padding-bottom: @base; + + &:focus { + outline: 0; + } + } + + .is_img { + display: inline-block; + margin-top: @half; + margin-bottom: @half; + padding: 0; + + &:focus { + outline: 1px solid @text-bg-base; + } + + img { + display: block; + max-height: @nav-menu-height - @base; + max-width: 100%; + width: auto; + height: auto; + } + } + + .is_text { + font-family: @font-site-title; + font-size: @font-sml; + font-weight: @bold; + line-height: @nav-menu-height; + color: @text-bg-base; + text-decoration: none; + + &:focus { + text-decoration: underline; + } + } +} + +.pkp_navigation_primary_wrapper { + padding-left: 0; + padding-right: 0; +} + +// Mobile navigation menu +.pkp_site_nav_menu { + position: absolute; + width: 100%; + top: 100%; + background: @bg-base; + left: 0; + padding: @base; + z-index: 9999; + + .pkp_nav_list { + padding-left: 0; + margin-left: 0; + } + + ul { + &:extend(.pkp_unstyled_list); + + ul { + padding-left: 0.5rem; + } + } + + a { + display: inline-block; + padding: 0.86rem 0; + color: @text-bg-base; + text-decoration: none; + + &:hover, + &:focus { + color: @text-bg-base; + text-decoration: underline; + } + } + + @media (max-width: @screen-desktop) { + + .active { + background-color: @bg-base-border-color; + + } + + .active a { + font-weight: bold; + + } + } + + + #siteNav { + position: absolute; + top: 0; + height: 0; + } +} + +.pkp_navigation_user { + + &.pkp_navigation_user { + margin-left: auto; + margin-right: auto; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid @bg-base-border-color; + } + + .task_count { + display: inline-block; + width: @double; + height: @double; + margin-left: 0.5em; + border-radius: 50%; + background: @bg-base-border-color; + line-height: @double; + text-align: center; + font-size: 0.857rem; + position: relative; + } + + // Hide the top-level task count in mobile nav + > li > a .task_count { + display: none; + } + + > li > ul a { + .task_count { + display: inline-block; + background: @bg-base-border-color; + color: @text-bg-base; + } + + &:hover .task_count, + &:focus .task_count { + background: @text; + } + } +} + +.pkp_navigation_search_wrapper { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid @bg-base-border-color; +} + +// The padding to apply to top-level items in the navigation row +// Total height - line height (divided by 2 since it will be applied to top and bottom) +@pkp_nav_primary_row_el_padding: @base; + +@media (min-width: @screen-desktop) { + .pkp_head_wrapper { + padding-top: @triple * 2; // Make room for the user nav at the top + } + + .pkp_site_nav_toggle { + display: none; + } + + .pkp_site_name { + position: relative; + width: 100%; + left: auto; + right: auto; + padding: 0; + white-space: normal; + font-size: 2em; // Prevents extra vertical space after logos + background: transparent; + overflow: visible; + + .is_text { + font-family: @font-site-title; + font-size: @font-header; + line-height: @line-header; + } + + .is_img img { + max-height: 80px; // must match height - padding of .is_img + } + } + + .pkp_site_nav_menu { + display: block; + position: static; + top: auto; + padding: 0; + + ul ul { + padding-left: 0; + } + } + + // Site logo/nav on same line on larger screens + .has_site_logo .pkp_head_wrapper { + padding-top: @triple; + } + + .pkp_nav_list { + margin: 0; + padding: 0; + list-style: none; + + li { + position: relative; + display: inline-block; + } + + a { + display: inline-block; + padding-left: @base; + padding-right: @base; + text-decoration: none; + padding-top: @half; + padding-bottom: @half; + + &:hover, + &:focus { + text-decoration: none; + } + } + + ul { + position: absolute; + top: 100%; + left: -9999px; + z-index: 1000; + width: 15em; + margin: 0; + padding: 0; + background: @bg; + border-radius: @radius; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + + li { + display: block; + } + + a { + display: block; + padding-left: @half; + border-left: @half solid transparent; + color: @primary; + + &:hover, + &:focus { + outline: 0; + background: @bg-shade; + border-color: @primary; + color: @primary; + } + } + + li:first-child a { + border-top-left-radius: @radius; + border-top-right-radius: @radius; + } + + li:last-child a { + border-bottom-left-radius: @radius; + border-bottom-right-radius: @radius; + } + } + + > li:hover ul { + left: 0; + } + + [aria-haspopup]:after { + position: relative; + display: inline-block; + content: ""; + width: 0; + height: 0; + margin-left: 0.25em; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + vertical-align: middle; + overflow: hidden; + } + } + + // Primary site navigation menu + .pkp_navigation_primary { + text-align: center; + + > li { + > a { + margin: @half 0.5em 0; + padding: @half 0.5em + calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size + border-bottom: 2px solid transparent; + color: @text-bg-base; + text-decoration: none; + + &:hover { + color: @text-bg-base; + outline: 0; + border-color: @text-bg-base; + } + + &:focus { + background: @text-bg-base; + color: @bg-base; + outline: 0; + } + } + + &:first-child { + a { + margin-left: -0.5em; + } + } + + &:last-child { + a { + margin-right: -0.5em; + } + } + } + + // Visualy highlighting the current menu item + > li.active { + > a { + //background: @primary-lift; + border-color: @text-bg-base; + outline: 0; + } + + &:hover { + color: @bg-base; + border-color: red; + } + } + + // Reproduce positioning of dropdown menu from Popper.js + > li:hover ul { + position: absolute; + transform: translate3d(7px, 40px, 0px); + top: 0; + left: 0; + will-change: transform; + } + + ul a { + padding-top: @base; + padding-bottom: @base; + } + + [aria-haspopup]:hover { + border-color: transparent; + } + + .dropdown-menu a:focus, + .dropdown-menu a:hover, + .dropdown-menu li.active a { + border-color: @primary; + } + + @media (min-width: @screen-desktop) { + display: inline-block; + max-width: 80%; + text-align: left; + } + } + + // Bootstrap dropdown components + .dropdown-menu { + display: none; + + &.show { + display: block; + } + } + + [data-toggle="dropdown"]:hover + .dropdown-menu, + .dropdown-menu:hover { + display: block; + } + + // User-focused navigation menu + .pkp_navigation_user_wrapper { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + padding-left: @base; + padding-right: @base; + text-align: right; + padding-top: 0; + margin-top: 0; + border-top: none; + z-index: 1000; + } + + .pkp_navigation_user { + text-align: right; + font-size: @font-sml; + padding-right: @double; + + &.pkp_navigation_user { + margin: 0; + padding: 0; + border: none; + } + + li { + text-align: left; + } + + a { + padding-top: @half; + padding-bottom: @half; + line-height: @line-sml; + } + + > li > a:focus { + outline: 0; + background: @text-bg-base; + color: @bg-base; + } + + ul { + width: 10em; + } + + // Reproduce positioning of dropdown menu from Popper.js + // There can still be some shifting when the parent item is focused + // because Popper.js will adjust if it is too close to the edge of + // the screen. + > li:hover ul { + position: absolute; + top: 0; + left: 0; + transform: translate3d(0px, 30px, 0px); + will-change: transform; + } + + // Align to the right edge of the container + > li:last-child > a { + margin-right: -@base; + } + + // Show the top-level task count in desktop nav + > li > a .task_count { + display: inline-block; + } + + > li > a:focus .task_count { + background: @bg-base; + color: @text-bg-base; + } + + > li > ul a { + .task_count { + display: none; + } + } + } + + .pkp_navigation_search_wrapper { + float: right; + margin: 0; + padding: 0; + border: none; + + a { + margin: @half 0.5em 0; + padding: @half 0.5em + calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size + border-bottom: 2px solid transparent; + color: @text-bg-base; + text-decoration: none; + + &:hover { + color: @text-bg-base; + outline: 0; + border-color: @text-bg-base; + text-decoration: none; + } + + &:focus { + background: @text-bg-base; + color: @bg-base; + outline: 0; + text-decoration: none; + } + } + } +}