fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added hover-menus for asidenav

Browse Source
This commit is contained in:
Felix Hamann 2018-03-29 23:46:29 +02:00
parent 4466bfc965
commit b0ebc620ae
2 changed files with 57 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
templates/widgets/asidenav.hamlet
View File

@ -21,13 +21,28 @@ $newline never
<a .asidenav__link-wrapper href="/course/S2018/ixd/show"> <a .asidenav__link-wrapper href="/course/S2018/ixd/show">
<div .asidenav__link-triple>IXD <div .asidenav__link-triple>IXD
<div .asidenav__link-label>Interaction Design <div .asidenav__link-label>Interaction Design
<ul .asidenav__nested-list>
<li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ixd/ex">Übungsblätter
<li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ixd/show">Klausuren
<li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ixd/show">Übungsgruppen
<li .asidenav__list-item> <li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ffp/show"> <a .asidenav__link-wrapper href="/course/S2018/ffp/show">
<div .asidenav__link-triple>FFP <div .asidenav__link-triple>FFP
<div .asidenav__link-label>Fortgeschrittene Funktionale Programmierung <div .asidenav__link-label>Fortgeschrittene Funktionale Programmierung
<ul .asidenav__nested-list>
<li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ffp/ex">Abgaben
<li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ffp/show">Klausuren
<li .asidenav__list-item> <li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/dbs/show"> <a .asidenav__link-wrapper href="/course/S2018/dbs/show">
<div .asidenav__link-triple>DBS <div .asidenav__link-triple>DBS
<div .asidenav__link-label>Datenbanksysteme <div .asidenav__link-label>Datenbanksysteme
<ul .asidenav__nested-list>
<li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/dbs/ex">Übungsgruppen
<div .asidenav__toggler> <div .asidenav__toggler>

43
templates/widgets/asidenav.lucius
View File

@ -4,7 +4,6 @@
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1; z-index: 1;
flex: 0 0 300px; flex: 0 0 300px;
overflow: hidden;
} }
.main__aside--transitioning { .main__aside--transitioning {
transition: flex-basis .2s ease; transition: flex-basis .2s ease;
@ -19,6 +18,7 @@
.main__aside--collapsed { .main__aside--collapsed {
width: 50px; width: 50px;
flex-basis: 50px; flex-basis: 50px;
overflow: hidden;
.asidenav__box-title { .asidenav__box-title {
width: 50px; width: 50px;
@ -44,6 +44,9 @@
margin-top: 20px; margin-top: 20px;
color: white; color: white;
.js-show-hide__target {
overflow: visible;
}
.js-show-hide__toggle::before { .js-show-hide__toggle::before {
top: 14px; top: 14px;
right: 12px; right: 12px;
@ -76,6 +79,39 @@
} }
} }
.asidenav__nested-list {
position: absolute;
top: 0;
right: 0;
color: var(--fontbase);
transform: translateX(0);
opacity: 0;
transition: all .2s ease;
z-index: -1;
.asidenav__list-item {
background-color: var(--darkbase);
color: white;
&:first-child {
margin-top: 0;
}
}
.asidenav__link-wrapper {
padding-left: 13px;
padding-right: 13px;
border-left: 20px solid white;
transition: all .2s ease;
&:hover {
background-color: white;
color: var(--darkbase) !important;
border-left: 20px solid var(--darkbase);
}
}
}
.asidenav__list-item { .asidenav__list-item {
position: relative; position: relative;
background-color: white; background-color: white;
@ -86,6 +122,11 @@
color: white; color: white;
background-color: var(--darkbase); background-color: var(--darkbase);
.asidenav__nested-list {
transform: translateX(100%);
opacity: 1;
}
.asidenav__link-wrapper, .asidenav__link-wrapper,
.asidenav__link-label { .asidenav__link-label {
color: white; color: white;