From 04889107788282ac85f0138ac82b66d352a6d264 Mon Sep 17 00:00:00 2001
From: Israel Cefrin <israel.cefrin@gmail.com>
Date: Thu, 25 Jan 2024 21:53:10 -0500
Subject: [PATCH 1/2] pkp/pkp-lib#5199 Set the current page on the top menu -
OMP 3.4
---
plugins/themes/default/DefaultThemePlugin.php | 57 +-
plugins/themes/default/styles/head.less | 1032 +++++++++--------
2 files changed, 582 insertions(+), 507 deletions(-)
diff --git a/plugins/themes/default/DefaultThemePlugin.php b/plugins/themes/default/DefaultThemePlugin.php
index 8c8a3008e04..504bd340ff9 100644
--- 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
{
/**
@@ -211,6 +216,8 @@ public function init()
// Add navigation menu areas for this theme
$this->addMenuArea(['primary', 'user']);
+
+ Hook::add('TemplateManager::display', array($this, 'checkCurrentPage'));
}
/**
@@ -254,8 +261,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;
+ }
+
}
if (!PKP_STRICT_MODE) {
class_alias('\APP\plugins\themes\default\DefaultThemePlugin', '\DefaultThemePlugin');
-}
+}
\ No newline at end of file
diff --git a/plugins/themes/default/styles/head.less b/plugins/themes/default/styles/head.less
index 2c2540fabef..ac45175d793 100644
--- a/plugins/themes/default/styles/head.less
+++ b/plugins/themes/default/styles/head.less
@@ -9,506 +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;
- }
-
- // 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 8bffcd4b973a9aaa455410ab79909b93d1ce1a88 Mon Sep 17 00:00:00 2001
From: Jonas Raoni Soares da Silva <github@raoni.org>
Date: Fri, 26 Jan 2024 21:53:13 +0300
Subject: [PATCH 2/2] pkp/pkp-lib#5199 Formatting
---
plugins/themes/default/DefaultThemePlugin.php | 87 +-
plugins/themes/default/styles/head.less | 1061 +++++++++--------
2 files changed, 576 insertions(+), 572 deletions(-)
diff --git a/plugins/themes/default/DefaultThemePlugin.php b/plugins/themes/default/DefaultThemePlugin.php
index 504bd340ff9..44e685569c6 100644
--- 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
{
@@ -217,7 +214,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']);
}
/**
@@ -263,48 +260,52 @@ public function getDescription()
}
- /**
- * @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;
+ /**
+ * @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']);
+ }
+ }
- // Retrieve URL and its components for a menu item
- $itemUrl = $navigationMenuItem->getUrl();
+ /**
+ * @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;
+ }
- if ($currentUrl === $itemUrl) return $activeMarker;
+ // Retrieve URL and its components for a menu item
+ $itemUrl = $navigationMenuItem->getUrl();
- return $emptyMarker;
- }
+ if ($currentUrl === $itemUrl) {
+ return $activeMarker;
+ }
+ return $emptyMarker;
+ }
}
if (!PKP_STRICT_MODE) {
class_alias('\APP\plugins\themes\default\DefaultThemePlugin', '\DefaultThemePlugin');
-}
\ No newline at end of file
+}
diff --git a/plugins/themes/default/styles/head.less b/plugins/themes/default/styles/head.less
index ac45175d793..7c2be737f6a 100644
--- 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;
+ }
+ }
+ }
+}