chore(ui): remove asidenav
This commit is contained in:
Steffen Jost
parent
acb52c51f4
commit
18af47b6d5
7
assets/fraport_logo_text.svg.rej
Normal file
7
assets/fraport_logo_text.svg.rej
Normal file
@ -0,0 +1,7 @@
|
||||
diff a/assets/fraport_logo_text.svg b/assets/fraport_logo_text.svg (rejected hunks)
|
||||
@@ -1,3 +1,3 @@
|
||||
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 458 198" fill="#000091" >
|
||||
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 458 198" fill="white" >
|
||||
<path d="M339.546747 135.234341c3.7591 0 6.68688 1.363909 8.785357 4.085673 2.098478 2.7258 3.145699 6.593571 3.145699 11.60533 0 3.922246-.708236 7.681065-2.124709 11.276458-1.416472 3.595392-3.40599 6.72875-5.964519 9.396039-1.963287 2.070074-4.059747 3.663991-6.293415 4.779733-2.233668 1.11776-4.576296 1.676639-7.025865 1.676639-4.033516 0-7.520218-1.470842-10.462122-4.414544L315.194317 197.5h-9.72362l11.358011-61.285097h9.723619l-1.388224 7.436934c2.615026-2.994143 5.052489-5.148957 7.314406-6.454355 2.259899-1.307416 4.616651-1.963141 7.068238-1.963141zm-52.381232.002018c4.356359 0 7.65339 1.880418 9.887058 5.639237l.897907-4.658676h9.80433l-7.592858 40.856732h-9.806347l1.224784-6.210223c-1.470952 1.363908-2.81882 2.491756-4.045623 3.391613-1.226802.899857-2.385 1.636287-3.472577 2.207272-1.091612.570986-2.19533.980562-3.311155 1.224693-1.117843.244132-2.276041.369224-3.474595.369224-3.593643 0-6.414481-1.38812-8.456462-4.166378-2.04198-2.778258-3.064988-6.646028-3.064988-11.603312 0-3.595392.585153-7.027357 1.757475-10.297914 1.170305-3.268538 2.736092-6.141624 4.697362-8.619257 1.963287-2.47965 4.237311-4.452879 6.824088-5.925739 2.586777-1.470842 5.298656-2.207272 8.131601-2.207272zm91.527929 0c2.453605 0 4.713504.464051 6.783733 1.38812 2.068211.928103 3.866042 2.207272 5.393491 3.841541 1.523414 1.63427 2.709861 3.593375 3.555306 5.88337.841409 2.287977 1.26514 4.793856 1.26514 7.517638 0 3.379508-.601295 6.537077-1.799848 9.478762-1.198554 2.941685-2.818821 5.504057-4.860801 7.681066-2.043998 2.179025-4.441105 3.896017-7.191322 5.148957-2.750216 1.250922-5.677996 1.880418-8.785357 1.880418-2.562565 0-4.919316-.464052-7.068238-1.38812-2.152958-.926086-4.005268-2.233501-5.558948-3.922246-1.551663-1.688745-2.764341-3.676097-3.636017-5.964074-.873693-2.289995-1.307513-4.793857-1.307513-7.519657 0-3.320996.613402-6.440231 1.840204-9.355687 1.224785-2.913438 2.887425-5.461687 4.983885-7.640713 2.096459-2.177008 4.550064-3.893999 7.356778-5.148957 2.804696-1.250922 5.815205-1.880418 9.029507-1.880418zm71.671085-11.35918l-2.288148 12.337724H457.8l-1.065381 5.639237H447.011l-3.595661 18.957524c-.274416 1.25294-.490317 2.465527-.653757 3.637762-.163439 1.170218-.244149 2.057969-.244149 2.653166 0 1.254957.310736 2.316223.940279 3.187834.625508.87161 1.674747 1.305397 3.145699 1.305397 1.089594 0 2.723985-.379311 4.905191-1.14197l.571029 5.393088c-1.579912.710201-3.282907 1.25294-5.106969 1.634269-1.826079.379312-3.529074.573003-5.106968.573003-3.105344 0-5.462095-.681954-7.068238-2.043845-1.60816-1.361891-2.411231-3.349243-2.411231-5.966092 0-.435805.014124-.800993.042373-1.101618.026231-.298607.08071-.696078.163439-1.186359.08071-.49028.18967-1.156094.326878-2.001475.133173-.843364.338985-2.001475.613401-3.472318l3.757082-20.428366h-4.983884l1.061345-5.639237h5.066613l1.880559-10.130452 10.050498-2.207272zm-187.303259 11.35918c1.089595 0 2.070229.193691 2.941905.573003.871675.379312 1.85231 1.117759 2.941904 2.205254l-4.659024 7.925198c-1.361993-.599232-2.562564-.89784-3.595661-.89784-1.579911 0-3.050864.38133-4.412856 1.143989-1.361993.762659-2.615026 2.12455-3.7591 4.083655-.708236 1.143989-1.295407 2.54825-1.755458 4.208748-.464086 1.662516-.914048 3.772943-1.349886 6.333298l-3.022615 16.261988h-9.806347l7.600928-40.856732h9.723619l-1.470952 7.844493 2.368859-3.349243c1.416472-1.961124 2.711878-3.363367 3.882183-4.208748 1.172323-.843364 2.629151-1.267063 4.372501-1.267063zm160.822084 0c1.089595 0 2.070229.193691 2.941905.573003.871675.379312 1.85231 1.117759 2.941904 2.205254l-4.659024 7.925198c-1.361993-.599232-2.562564-.89784-3.595661-.89784-1.579911 0-3.050864.38133-4.412856 1.143989-1.361993.762659-2.615026 2.12455-3.7591 4.083655-.708237 1.143989-1.295407 2.54825-1.755458 4.208748-.464086 1.662516-.914048 3.772943-1.349886 6.333298l-3.022615 16.261988h-9.806347l7.600928-40.856732h9.723619l-1.470952 7.844493 2.368858-3.349243c1.416473-1.961124 2.711879-3.363367 3.882184-4.208748 1.172323-.843364 2.629151-1.267063 4.372501-1.267063zM91.57327 112.856958c8.738949 2.043845 15.008151 6.664187 18.632061 13.7278
|
||||
-</svg>
|
||||
+</svg>
|
||||
@ -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
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>
|
||||
//
|
||||
// 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';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
# Asidenav
|
||||
|
||||
Correctly positions hovered asidenav submenus and handles the favorites button on mobile
|
||||
|
||||
## Attribute: `uw-asidenav`
|
||||
|
||||
## Example usage:
|
||||
```html
|
||||
<div uw-asidenav>
|
||||
<div .asidenav>
|
||||
<div .asidenav__box>
|
||||
<ul .asidenav__list.list--iconless>
|
||||
<li .asidenav__list-item>
|
||||
<a .asidenav__link-wrapper href='#'>
|
||||
<div .asidenav__link-shorthand>EIP
|
||||
<div .asidenav__link-label>Einführung in die Programmierung
|
||||
<div .asidenav__nested-list-wrapper>
|
||||
<ul .asidenav__nested-list.list--iconless>
|
||||
Übungsblätter
|
||||
...
|
||||
```
|
||||
@ -1,3 +0,0 @@
|
||||
SPDX-FileCopyrightText: 2022 Sarah Vaupel <vaupel.sarah@campus.lmu.de>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
@ -1,376 +0,0 @@
|
||||
// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
|
||||
|
||||
@use "../../common" as *
|
||||
@use "../../app" as *
|
||||
|
||||
.main__aside
|
||||
position: fixed
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
|
||||
top: 0
|
||||
left: 0
|
||||
width: var(--asidenav-width-lg, 20%)
|
||||
height: 100%
|
||||
flex: 0 0 0
|
||||
flex-basis: var(--asidenav-width-lg, 20%)
|
||||
transition: all .2s ease-out
|
||||
z-index: 20
|
||||
|
||||
&::after
|
||||
content: ''
|
||||
position: absolute
|
||||
z-index: -2
|
||||
left: 0
|
||||
top: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: var(--color-grey-light)
|
||||
|
||||
@media (max-width: 425px)
|
||||
.main__aside
|
||||
position: fixed
|
||||
top: var(--header-height-collapsed)
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
height: 100% !important
|
||||
width: 100%
|
||||
z-index: 5
|
||||
overflow: hidden
|
||||
transform: translateX(-110%)
|
||||
transition: transform .2s ease-out
|
||||
|
||||
&.main__aside--expanded
|
||||
transform: translateX(0%)
|
||||
|
||||
.asidenav__box-subtitle
|
||||
display: inherit
|
||||
|
||||
.asidenav__box-title
|
||||
font-size: 18px
|
||||
padding-left: 10px
|
||||
|
||||
.asidenav__box-subtitle
|
||||
display: none
|
||||
|
||||
@media (min-width: 1200px)
|
||||
.main__aside
|
||||
width: var(--asidenav-width-xl, 250px)
|
||||
|
||||
.asidenav
|
||||
color: var(--color-font)
|
||||
min-height: calc(100% - var(--header-height))
|
||||
height: 400px
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
|
||||
&::-webkit-scrollbar
|
||||
width: 0
|
||||
|
||||
.asidenav__box
|
||||
transition: opacity .2s ease
|
||||
|
||||
+ .asidenav__box
|
||||
margin-top: 10px
|
||||
|
||||
.asidenav__box-title
|
||||
padding: 7px 13px
|
||||
margin-top: 30px
|
||||
background-color: transparent
|
||||
transition: all .2s ease
|
||||
padding: 10px 13px
|
||||
margin: 0
|
||||
border-bottom: 1px solid var(--color-grey)
|
||||
height: 44px
|
||||
|
||||
.asidenav-term-identifier--long
|
||||
display: inherit
|
||||
|
||||
.asidenav-term-identifier--short
|
||||
display: none
|
||||
|
||||
.asidenav__box-subtitle
|
||||
color: var(--color-fontsec)
|
||||
font-size: 0.9rem
|
||||
font-weight: 600
|
||||
padding: 0 13px
|
||||
margin: 3px 0
|
||||
|
||||
.asidenav__box-explanation
|
||||
@extend .explanation
|
||||
padding: 0 13px
|
||||
margin: 3px 0
|
||||
opacity: .66
|
||||
font-size: .7rem
|
||||
|
||||
/* transition: opacity .2s ease, font-size .2s ease
|
||||
/* &:hover
|
||||
/* font-size: .9rem
|
||||
/* opacity: 1
|
||||
|
||||
// LOGO
|
||||
|
||||
.asidenav__logo
|
||||
height: var(--header-height)
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
@media (max-width: 768px)
|
||||
.asidenav__logo
|
||||
display: none
|
||||
|
||||
.asidenav__logo-link
|
||||
flex: 1
|
||||
top: 10px
|
||||
left: 20px
|
||||
height: 80px
|
||||
padding: 0 20px
|
||||
display: flex
|
||||
flex-basis: var(--asidenav-width-xl, 250px)
|
||||
font-size: 16px
|
||||
align-items: center
|
||||
color: var(--color-dark)
|
||||
transform-origin: left
|
||||
|
||||
&:hover
|
||||
color: var(--color-primary)
|
||||
|
||||
.asidenav__logo-lmu
|
||||
width: 160px
|
||||
height: 100%
|
||||
|
||||
.asidenav__logo-uni2work
|
||||
display: flex
|
||||
align-items: flex-end
|
||||
min-width: 70px
|
||||
margin-left: 12px
|
||||
text-transform: uppercase
|
||||
width: 100%
|
||||
height: 100%
|
||||
padding: 2px 4px
|
||||
border: 1px solid currentColor
|
||||
letter-spacing: 2px
|
||||
background-color: white
|
||||
transition: background-color .3s ease
|
||||
|
||||
@media (max-width: 1199px)
|
||||
.asidenav__logo-link
|
||||
flex-basis: var(--asidenav-width-lg, 20%)
|
||||
font-size: 16px
|
||||
|
||||
.asidenav__logo-lmu
|
||||
display: none
|
||||
|
||||
.asidenav__logo-uni2work
|
||||
margin-left: 0
|
||||
|
||||
// SEAL
|
||||
|
||||
.asidenav__sigillum
|
||||
position: absolute
|
||||
bottom: -40px
|
||||
right: 25px
|
||||
opacity: 0.1
|
||||
|
||||
> img
|
||||
width: 350px
|
||||
|
||||
@media (max-width: 768px)
|
||||
.asidenav__sigillum
|
||||
right: auto
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
// LIST-ITEM
|
||||
|
||||
.asidenav__list-item
|
||||
color: var(--color-font)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
|
||||
&:not(.asidenav__list-item--active):hover
|
||||
background-color: var(--color-lightwhite)
|
||||
|
||||
> .asidenav__link-wrapper
|
||||
color: var(--color-font)
|
||||
|
||||
&:hover
|
||||
.asidenav__link-shorthand
|
||||
// transform: scale(1.05, 1.0);
|
||||
// transform-origin: right;
|
||||
text-shadow: none
|
||||
|
||||
.asidenav__nested-list-wrapper
|
||||
display: block
|
||||
|
||||
// small list-item-padding for medium to large screens
|
||||
@media (min-width: 769px)
|
||||
.asidenav__list-item
|
||||
padding-left: 10px
|
||||
|
||||
.asidenav__list-item--active
|
||||
background-color: var(--color-lightwhite)
|
||||
|
||||
.asidenav__link-wrapper
|
||||
color: var(--color-link)
|
||||
|
||||
.asidenav__link-shorthand
|
||||
transform: scale(1.05, 1)
|
||||
transform-origin: right
|
||||
text-shadow: none
|
||||
|
||||
.asidenav__link-wrapper
|
||||
position: relative
|
||||
display: flex
|
||||
flex: 1
|
||||
align-items: center
|
||||
padding: 8px 3px
|
||||
justify-content: flex-start
|
||||
color: var(--color-font)
|
||||
width: 100%
|
||||
z-index: 1
|
||||
|
||||
.asidenav__link-shorthand
|
||||
display: none
|
||||
|
||||
.asidenav__link-favourite-toggle
|
||||
opacity: .33
|
||||
|
||||
&:hover
|
||||
opacity: 1
|
||||
|
||||
button
|
||||
display: flex
|
||||
text-decoration: none
|
||||
|
||||
.asidenav__link-label
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
line-height: 1
|
||||
|
||||
& > .asidenav__link-label-text
|
||||
word-break: break-word
|
||||
flex: 1 1 auto
|
||||
|
||||
& > .asidenav__link-favourite-toggle
|
||||
flex: 0 0 $fa-fw-width
|
||||
margin: 0 5px
|
||||
|
||||
// hover sub-menus
|
||||
.asidenav__nested-list-wrapper
|
||||
position: absolute
|
||||
z-index: 22
|
||||
display: none
|
||||
color: var(--color-font)
|
||||
background-color: var(--color-grey-light)
|
||||
box-shadow: 1px 1px 1px 0px var(--color-grey)
|
||||
|
||||
.asidenav__nested-list
|
||||
min-width: 200px
|
||||
|
||||
.asidenav__nested-list--unavailable
|
||||
font-size: 0.9rem
|
||||
color: var(--color-fontsec)
|
||||
font-weight: 600
|
||||
padding: 7px
|
||||
min-width: 200px
|
||||
|
||||
@media (max-width: 425px)
|
||||
.asidenav__list-item
|
||||
padding-left: 10px
|
||||
|
||||
.asidenav__nested-list
|
||||
display: none
|
||||
|
||||
.asidenav__nested-list--unavailable
|
||||
display: none
|
||||
|
||||
.asidenav__nested-list-item
|
||||
position: relative
|
||||
|
||||
&:hover
|
||||
background-color: var(--color-lightwhite)
|
||||
|
||||
.asidenav__link-wrapper
|
||||
padding-left: 13px
|
||||
padding-right: 13px
|
||||
transition: all .2s ease
|
||||
color: var(--color-font)
|
||||
|
||||
// TABLET
|
||||
@media (min-width: 426px) and (max-width: 768px)
|
||||
.main__aside
|
||||
width: var(--asidenav-width-md, 50px)
|
||||
flex-basis: var(--asidenav-width-md, 50px)
|
||||
overflow: hidden
|
||||
min-height: calc(100% - var(--header-height-collapsed))
|
||||
top: var(--header-height-collapsed)
|
||||
|
||||
.navbar__container-radio:checked ~ &
|
||||
min-height: calc(100% - var(--header-height-collapsed) - 30px)
|
||||
top: calc(var(--header-height-collapsed) + 30px)
|
||||
|
||||
.asidenav__box-title
|
||||
width: var(--asidenav-width-md, 50px)
|
||||
font-size: 18px
|
||||
text-align: center
|
||||
padding: 10px 1px
|
||||
word-break: break-all
|
||||
background-color: var(--color-dark)
|
||||
color: var(--color-lightwhite)
|
||||
border: none
|
||||
|
||||
&:hover
|
||||
background-color: var(--color-darker)
|
||||
|
||||
&::before
|
||||
display: none
|
||||
|
||||
.asidenav-term-identifier--long
|
||||
display: none
|
||||
|
||||
.asidenav-term-identifier--short
|
||||
display: inherit
|
||||
|
||||
.asidenav__box-subtitle
|
||||
padding: 0 3px
|
||||
font-size: 0.85rem
|
||||
|
||||
.asidenav__link-shorthand
|
||||
display: flex
|
||||
position: static
|
||||
height: 50px
|
||||
width: var(--asidenav-width-md, 50px)
|
||||
text-align: center
|
||||
opacity: 1
|
||||
font-size: 15px
|
||||
line-height: 1em
|
||||
margin-right: 13px
|
||||
flex-shrink: 0
|
||||
padding: 1px
|
||||
outline: 1px solid white
|
||||
word-break: break-all
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
.asidenav__list-item
|
||||
padding-left: 0
|
||||
|
||||
+ .asidenav__list-item
|
||||
margin: 0
|
||||
|
||||
.asidenav__link-wrapper
|
||||
color: var(--color-font)
|
||||
padding: 0
|
||||
|
||||
.asidenav__nested-list, .asidenav__link-label, .asidenav__nested-list--unavailable
|
||||
display: none
|
||||
|
||||
.asidenav__list-item--active
|
||||
.asidenav__link-wrapper
|
||||
background-color: var(--color-lightwhite)
|
||||
@ -1,31 +0,0 @@
|
||||
// SPDX-FileCopyrightText: 2022 Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
import { Asidenav, ASIDENAV_INITIALIZED_CLASS } from './asidenav';
|
||||
|
||||
describe('Asidenav', () => {
|
||||
|
||||
let asidenav;
|
||||
|
||||
beforeEach(() => {
|
||||
const element = document.createElement('div');
|
||||
asidenav = new Asidenav(element);
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(asidenav).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should destory asidenav', () => {
|
||||
asidenav.destroy();
|
||||
expect(asidenav._eventManager._registeredListeners.length).toBe(0);
|
||||
expect(asidenav._element.classList).not.toContain(ASIDENAV_INITIALIZED_CLASS);
|
||||
});
|
||||
|
||||
it('should throw if called without an element', () => {
|
||||
expect(() => {
|
||||
new Asidenav();
|
||||
}).toThrow();
|
||||
});
|
||||
});
|
||||
@ -10,7 +10,7 @@
|
||||
position: fixed
|
||||
right: 0
|
||||
top: 0
|
||||
left: var(--asidenav-width-xl)
|
||||
left: 0
|
||||
min-height: var(--header-height)
|
||||
background-color: var(--color-primary)
|
||||
color: white
|
||||
@ -21,9 +21,6 @@
|
||||
margin: 0
|
||||
padding: 10px 0
|
||||
|
||||
@media (max-width: 1199px)
|
||||
left: var(--asidenav-width-lg)
|
||||
|
||||
@media (max-width: 768px), (max-height: 500px)
|
||||
min-height: var(--header-height-collapsed)
|
||||
padding: 0
|
||||
@ -42,6 +39,8 @@
|
||||
& > *
|
||||
flex-grow: 1
|
||||
|
||||
// LIST WRAPPER
|
||||
|
||||
.navbar__list-wrapper
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
@ -137,6 +136,18 @@
|
||||
&:hover
|
||||
transform: scale(1.4)
|
||||
|
||||
// LOGO
|
||||
|
||||
.navbar__logo
|
||||
margin-right: 40px
|
||||
|
||||
@media (max-width: 1199px)
|
||||
display: none
|
||||
|
||||
.navbar__logo-lmu
|
||||
height: 100%
|
||||
width: 160px
|
||||
|
||||
// links
|
||||
.navbar__link-wrapper
|
||||
display: flex
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
import { Alerts } from './alerts/alerts';
|
||||
import { Asidenav } from './asidenav/asidenav';
|
||||
import { AsyncForm } from './async-form/async-form';
|
||||
import { ShowHide } from './show-hide/show-hide';
|
||||
import { AsyncTable } from './async-table/async-table';
|
||||
@ -22,7 +21,6 @@ import { SortTable } from './sort-table/sort-table';
|
||||
|
||||
export const Utils = [
|
||||
Alerts,
|
||||
Asidenav,
|
||||
AsyncForm,
|
||||
AsyncTable,
|
||||
CheckAll,
|
||||
|
||||
@ -461,10 +461,7 @@ siteLayout' overrideHeading widget = do
|
||||
toWidget $(cassiusFile "templates/widgets/navbar/container-radio.cassius")
|
||||
where isNavHeaderPrimary = has $ _1 . _navHeaderRole . only NavHeaderPrimary
|
||||
isNavHeaderSecondary = has $ _1 . _navHeaderRole . only NavHeaderSecondary
|
||||
asidenav :: WidgetFor UniWorX ()
|
||||
asidenav = $(widgetFile "widgets/asidenav/asidenav")
|
||||
where
|
||||
logo = preEscapedToMarkup $ decodeUtf8 $(embedFile "assets/fraport_logo_text.svg")
|
||||
logo = preEscapedToMarkup $ decodeUtf8 $(embedFile "assets/fraport_logo_text.svg")
|
||||
footer :: WidgetFor UniWorX ()
|
||||
footer = $(widgetFile "widgets/footer/footer")
|
||||
where isNavFooter = has $ _1 . _NavFooter
|
||||
|
||||
@ -11,8 +11,6 @@ $if not isModal
|
||||
$forall (_, containerIdent, _, _) <- containers
|
||||
<input name=nav-container type=radio .navbar__container-radio ##{containerIdent}-radio uw-no-radiobox>
|
||||
|
||||
<!-- secondary navigation at the side -->
|
||||
^{asidenav}
|
||||
<!-- navigation -->
|
||||
^{navbar}
|
||||
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
$newline never
|
||||
|
||||
$# SPDX-FileCopyrightText: 2022 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
|
||||
$#
|
||||
$# SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
<aside .main__aside uw-asidenav>
|
||||
<div .asidenav__logo>
|
||||
<a href="/" .asidenav__logo-link>
|
||||
<div .asidenav__logo-lmu >
|
||||
#{logo}
|
||||
|
||||
|
||||
<div .asidenav>
|
||||
$if null favouriteTerms && is _Just muid
|
||||
<div .asidenav__box-explanation>
|
||||
_{MsgFavouritesEmptyTip}
|
||||
$else
|
||||
$forall tid <- favouriteTerms
|
||||
<div .asidenav__box>
|
||||
<h3 .asidenav__box-title uw-show-hide data-show-hide-id="#{termToText tid}" data-show-hide-align=right>
|
||||
<div .asidenav-term-identifier--long>
|
||||
_{ShortTermIdentifier tid}
|
||||
<div .asidenav-term-identifier--short>
|
||||
#{toPathPiece tid}
|
||||
$forall favReason <- sortOn Down universeF
|
||||
$if not (null $ favouriteTermReason tid favReason)
|
||||
<h3 .asidenav__box-subtitle>
|
||||
_{favReason}
|
||||
<ul .asidenav__list.list--iconless>
|
||||
$forall ((cName, _, _, csh), courseRoute, mPageActions, _, courseVisible, _, mayEdit) <- favouriteTermReason tid favReason
|
||||
<li .asidenav__list-item :highlight courseRoute:.asidenav__list-item--active>
|
||||
<a .asidenav__link-wrapper href=@{courseRoute}>
|
||||
<div .asidenav__link-shorthand>#{csh}
|
||||
<div .asidenav__link-label>
|
||||
<div .asidenav__link-label-text>
|
||||
#{cName}
|
||||
$if mayEdit && not courseVisible
|
||||
\ #{iconInvisible}
|
||||
$if showFavToggle favReason
|
||||
<div .asidenav__link-favourite-toggle>
|
||||
^{favouriteToggleWgt}
|
||||
<div .asidenav__nested-list-wrapper>
|
||||
$maybe pageActions <- mPageActions
|
||||
<ul .asidenav__nested-list.list--iconless>
|
||||
$forall (label, route) <- pageActions
|
||||
<li .asidenav__nested-list-item>
|
||||
<a .asidenav__link-wrapper href=#{route}>#{label}
|
||||
$nothing
|
||||
<p .asidenav__nested-list--unavailable>
|
||||
_{MsgFavouritesUnavailableTip}
|
||||
$if anyFavToggle
|
||||
<div .asidenav__box-explanation>
|
||||
_{MsgFavouritesToggleTip}
|
||||
|
||||
@ -5,9 +5,11 @@ $#
|
||||
$# SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
<div .breadcrumbs__container>
|
||||
<a .breadcrumbs__home href=@{NewsR}>
|
||||
<i .fas .fa-fw .fa-#{iconText IconBreadcrumbsHome}>
|
||||
<ul .breadcrumbs__list.list--inline>
|
||||
|
||||
<a .breadcrumbs__link.breadcrumbs__home href=@{NewsR}>
|
||||
<i .fas .fa-fw .fa-#{iconText IconBreadcrumbsHome}>
|
||||
|
||||
$forall (bcRoute, bcTitle, hasAccess) <- parents
|
||||
<li .breadcrumbs__item>
|
||||
$if hasAccess
|
||||
|
||||
@ -9,6 +9,11 @@ $# SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
<div .navbar__stack>
|
||||
<div .navbar__list-wrapper>
|
||||
<ul .navbar__list.navbar__list-left>
|
||||
|
||||
<a .navbar__list-item.navbar__logo href="/">
|
||||
<div .navbar__logo-lmu >
|
||||
#{logo}
|
||||
|
||||
$# manually add favorites to navbar for small screens
|
||||
<li .navbar__list-item.navbar__list-item--favorite>
|
||||
<a .navbar__link-wrapper href="#">
|
||||
|
||||
Reference in New Issue
Block a user