diff --git a/assets/fraport_logo_text.svg b/assets/fraport_logo_text.svg index 27a9b6d8d..6ab688d48 100644 --- a/assets/fraport_logo_text.svg +++ b/assets/fraport_logo_text.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/app.sass b/frontend/src/app.sass index 0c159fbf7..07326f03d 100644 --- a/frontend/src/app.sass +++ b/frontend/src/app.sass @@ -34,9 +34,6 @@ // DIMENSIONS --header-height: 100px --header-height-collapsed: 60px - --asidenav-width-xl: 250px - --asidenav-width-lg: 20% - --asidenav-width-md: 60px * box-sizing: border-box @@ -207,18 +204,6 @@ h4 .main__content --current-header-height: var(--header-height) -@media (min-width: 426px) - .main__content - margin-left: var(--asidenav-width-md, 50px) - -@media (min-width: 769px) - .main__content - margin-left: var(--asidenav-width-lg, 20%) - -@media (min-width: 1200px) - .main__content - margin-left: var(--asidenav-width-xl, 250px) - .main__content-body padding: 13px @@ -1250,7 +1235,7 @@ th, td .breadcrumbs__container position: relative color: var(--color-lightwhite) - padding: 4px 20px 4px 40px + padding: 7px 13px background-color: var(--color-dark) a @@ -1258,7 +1243,7 @@ th, td @media (min-width: 426px) .breadcrumbs__container - padding: 7px 20px 7px 40px + padding: 7px 20px @media (min-width: 769px) .breadcrumbs__container @@ -1287,17 +1272,9 @@ ul.breadcrumbs__list margin-top: 1px a.breadcrumbs__home - position: absolute - left: 10px - top: 5px - width: 20px - height: 30px opacity: 0.5 - text-decoration: none - color: var(--color-lightwhite) - text-align: center - line-height: 30px - + margin-right: 7px + @media (min-width: 426px) top: 8px @@ -1515,11 +1492,11 @@ a.breadcrumbs__home min-width: calc((100vw - 40px - 8 * 7px) / 4) @media (min-width: 426px) - min-width: calc((100vw - var(--asidenav-width-md, 50px) - 40px - 8 * 7px) / 4) + min-width: calc((100vw - 40px - 8 * 7px) / 4) @media (min-width: 769px) - min-width: calc((100vw - var(--asidenav-width-lg, 20%) - 80px - 8 * 7px) / 4) + min-width: calc((100vw - 80px - 8 * 7px) / 4) @media (min-width: 1200px) - min-width: calc((100vw - var(--asidenav-width-xl, 250px) - 80px - 8 * 7px) / 4) + min-width: calc((100vw - 80px - 8 * 7px) / 4) a.active-allocations__allocation-ident white-space: nowrap diff --git a/frontend/src/utils/asidenav/asidenav.js b/frontend/src/utils/asidenav/asidenav.js deleted file mode 100644 index f4e49ad20..000000000 --- a/frontend/src/utils/asidenav/asidenav.js +++ /dev/null @@ -1,96 +0,0 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel -// -// SPDX-License-Identifier: AGPL-3.0-or-later - -import { Utility } from '../../core/utility'; -import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager'; -import './asidenav.sass'; - -const FAVORITES_BTN_CLASS = 'navbar__list-item--favorite'; -const FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active'; -const ASIDENAV_INITIALIZED_CLASS = 'asidenav--initialized'; -const ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded'; -const ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item'; -const ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper'; - -@Utility({ - selector: '[uw-asidenav]', -}) -export class Asidenav { - - _element; - _asidenavSubmenus; - _eventManager; - - constructor(element) { - if (!element) { - throw new Error('Asidenav utility cannot be setup without an element!'); - } - - this._element = element; - - this._eventManager = new EventManager(); - - if (this._element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) { - return false; - } - - this._initFavoritesButton(); - this._initAsidenavSubmenus(); - - // mark initialized - this._element.classList.add(ASIDENAV_INITIALIZED_CLASS); - } - - destroy() { - - this._eventManager.cleanUp(); - - if(this._element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) - this._element.classList.remove(ASIDENAV_INITIALIZED_CLASS); - } - - _initFavoritesButton() { - const favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS); - if (favoritesBtn) { - - const favoritesButtonEvent = new EventWrapper(EVENT_TYPE.CLICK, (event) => { - favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS); - this._element.classList.toggle(ASIDENAV_EXPANDED_CLASS); - event.preventDefault(); - }, favoritesBtn, true); - - this._eventManager.registerNewListener(favoritesButtonEvent); - } - } - - _initAsidenavSubmenus() { - this._asidenavSubmenus = Array.from(this._element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS)) - .map(function(listItem) { - const submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS); - return { listItem, submenu }; - }).filter(function(union) { - return union.submenu !== null; - }); - - this._asidenavSubmenus.forEach((union) => { - union.hoverHandler = this._createMouseoverHandler(union); - let currentHoverEvent = new EventWrapper(EVENT_TYPE.MOUSE_OVER, union.hoverHandler, union.listItem); - this._eventManager.registerNewListener(currentHoverEvent); - }); - } - - _createMouseoverHandler(union) { - return () => { - const rectListItem = union.listItem.getBoundingClientRect(); - const rectSubMenu = union.submenu.getBoundingClientRect(); - - union.submenu.style.left = (rectListItem.left + rectListItem.width) + 'px'; - if (window.innerHeight - rectListItem.top < rectSubMenu.height) { - union.submenu.style.top = (rectListItem.top + rectListItem.height - rectSubMenu.height) + 'px'; - } else { - union.submenu.style.top = rectListItem.top + 'px'; - } - }; - } -} diff --git a/frontend/src/utils/asidenav/asidenav.md b/frontend/src/utils/asidenav/asidenav.md deleted file mode 100644 index 0aa73b0f7..000000000 --- a/frontend/src/utils/asidenav/asidenav.md +++ /dev/null @@ -1,21 +0,0 @@ -# Asidenav - -Correctly positions hovered asidenav submenus and handles the favorites button on mobile - -## Attribute: `uw-asidenav` - -## Example usage: -```html -
-
-
-