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

add hover-enabled list of secondary page actions

Browse Source
This commit is contained in:
Felix Hamann 2019-01-27 20:54:48 +01:00
parent 2be59326b8
commit a43515deb1
4 changed files with 55 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/widgets/asidenav.lucius
View File

@ -216,7 +216,7 @@
} }
/* small list-item-padding for medium to large screens */ /* small list-item-padding for medium to large screens */
@media (min-width: 1024px) { @media (min-width: 1025px) {
.asidenav__list-item { .asidenav__list-item {
padding-left: 10px; padding-left: 10px;
@ -297,7 +297,7 @@
} }
/* TABLET */ /* TABLET */
@media (min-width: 425px) and (max-width: 768px) { @media (min-width: 426px) and (max-width: 768px) {
.main__aside { .main__aside {
width: var(--asidenav-width-md, 50px); width: var(--asidenav-width-md, 50px);

2
templates/widgets/navbar.lucius
View File

@ -19,7 +19,7 @@
} }
} }
@media (min-width: 1024px) { @media (min-width: 1025px) {
.navbar-shadow { .navbar-shadow {
display: none; display: none;

4
templates/widgets/pageactionprime.hamlet
View File

@ -10,8 +10,8 @@ $if hasPageActions
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic> <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel} <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of _ $of _
<!-- TODO: add check if there are any PageActionSecondarys -->
<div .pagenav-secondary> <div .pagenav-secondary>
Weitere Punkte
<div .pagenav-secondary__list> <div .pagenav-secondary__list>
$forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
$case menuItemType $case menuItemType
@ -19,5 +19,5 @@ $if hasPageActions
<div .pagenav__list-item.pagenav__list-item--secondary> <div .pagenav__list-item.pagenav__list-item--secondary>
$if menuItemModal $if menuItemModal
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic> <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel} <a .pagenav__link-wrapper.pagenav__link-wrapper--secondary href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
$of _ $of _

64
templates/widgets/pageactionprime.lucius
View File

@ -1,16 +1,24 @@
.pagenav { .pagenav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-end;
} }
.pagenav-secondary { .pagenav-secondary {
float: right;
position: relative; position: relative;
flex-basis: 50px;
height: 50px;
width: 50px;
overflow: visible; overflow: visible;
&::after {
content: '\2807';
display: inline-block;
font-size: 25px;
padding: 4px 5px 2px 10px;
width: 40px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
box-sizing: border-box;
text-align: center;
}
&:hover { &:hover {
.pagenav-secondary__list { .pagenav-secondary__list {
animation: pagenav-fade-in 200ms ease-in-out; animation: pagenav-fade-in 200ms ease-in-out;
@ -32,14 +40,8 @@
top: 0; top: 0;
width: 250px; width: 250px;
text-align: right; text-align: right;
padding: 7px 13px;
background-color: white; background-color: white;
box-shadow: 0 0 6px 3px var(--color-grey-light) box-shadow: 0 0 6px 3px var(--color-grey-light);
}
.page-nav-prime {
margin: 10px 0 20px;
background-color: var(--color-lightwhite);
} }
.pagenav__list-item { .pagenav__list-item {
@ -51,10 +53,44 @@
} }
.pagenav__list-item--secondary { .pagenav__list-item--secondary {
display: block; display: flex;
margin: 0; margin: 0;
padding: 0;
box-shadow: none;
+.pagenav__list-item--secondary { &:hover {
margin-top: 10px; background-color: var(--color-grey-light);
}
}
.pagenav__link-wrapper--secondary {
flex: 1;
padding: 10px 10px 15px;
}
@media (max-width: 768px) {
.pagenav {
flex-direction: column;
}
.pagenav-secondary {
float: none;
flex-basis: auto;
height: initial;
width: initial;
overflow: visible;
margin-top: 20px;
&::after {
content: none;
}
}
.pagenav-secondary__list {
display: block;
position: relative;
width: initial;
text-align: initial;
} }
} }