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

asidenav with distinguishable title and active-state

Browse Source
This commit is contained in:
Felix Hamann 2018-04-12 23:31:01 +02:00
parent 4f6d0ffbf7
commit 174297c2ba
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
templates/widgets/asidenav.hamlet
View File

@ -18,10 +18,11 @@ $newline never
WiSe 17/18 WiSe 17/18
<ul .asidenav__list> <ul .asidenav__list>
$forall (Entity _ Course{..}) <- favourites $forall (Entity _ Course{..}) <- favourites
<li .asidenav__list-item> $with route <- CourseR courseTermId courseShorthand CourseShowR
<a .asidenav__link-wrapper href=@{CourseR courseTermId courseShorthand CourseShowR}> <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
<div .asidenav__link-shorthand>#{courseShorthand} <a .asidenav__link-wrapper href=@{route}>
<div .asidenav__link-label>#{courseName} <div .asidenav__link-shorthand>#{courseShorthand}
<div .asidenav__link-label>#{courseName}
<li .asidenav__list-item> <li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ixd/show"> <a .asidenav__link-wrapper href="/course/S2018/ixd/show">

19
templates/widgets/asidenav.lucius
View File

@ -1,6 +1,6 @@
.main__aside { .main__aside {
position: relative; position: relative;
background-color: var(--darkbase); background-color: #425d79;
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;
@ -22,7 +22,11 @@
.asidenav__box-title { .asidenav__box-title {
width: 50px; width: 50px;
padding: 0; padding: 1px;
font-size: 18px;
text-align: center;
margin-bottom: 0;
background-color: var(--fontsec);
} }
.asidenav__link-wrapper { .asidenav__link-wrapper {
@ -35,10 +39,11 @@
width: 50px; width: 50px;
text-align: center; text-align: center;
opacity: 1; opacity: 1;
font-size: 16px; font-size: 15px;
line-height: 1em; line-height: 1em;
margin-right: 13px; margin-right: 13px;
flex-shrink: 0; flex-shrink: 0;
padding: 1px;
outline: 1px solid white; outline: 1px solid white;
text-transform: uppercase; text-transform: uppercase;
word-break: break-all; word-break: break-all;
@ -78,6 +83,9 @@
.asidenav__box-title { .asidenav__box-title {
padding: 7px 13px; padding: 7px 13px;
margin-top: 13px;
background-color: transparent;
transition: all .2s ease;
a { a {
color: white; color: white;
@ -155,6 +163,11 @@
pointer-events: none; pointer-events: none;
color: white; color: white;
} }
.asidenav__link-shorthand {
transform: scale(1.05, 1.0);
transform-origin: right;
}
} }
.asidenav__link-wrapper { .asidenav__link-wrapper {