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

Merge branch 'master' into feat/file_inputs

Browse Source
This commit is contained in:
Felix Hamann 2018-03-30 01:12:28 +02:00
commit 49d5008f0e
18 changed files with 427 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/Foundation.hs
View File

@ -399,6 +399,20 @@ defaultMenuLayout menu widget = do
asidenav = $(widgetFile "widgets/asidenav") asidenav = $(widgetFile "widgets/asidenav")
breadcrumbs :: Widget breadcrumbs :: Widget
breadcrumbs = $(widgetFile "widgets/breadcrumbs") breadcrumbs = $(widgetFile "widgets/breadcrumbs")
modal :: [Char] -> [Char] -> Widget
modal modalTrigger modalContent = do
let
modalId :: Int32
modalId = 13
$(widgetFile "widgets/modal")
pageactionprime :: Widget
pageactionprime = $(widgetFile "widgets/pageactionprime")
-- functions to determine if there are page-actions
isPageActionPrime :: MenuTypes -> Bool
isPageActionPrime (PageActionPrime _) = True
isPageActionPrime _ = False
hasPageActions :: Bool
hasPageActions = any isPageActionPrime menuTypes
pc <- widgetToPageContent $ do pc <- widgetToPageContent $ do
addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"

4
src/Handler/Course.hs
View File

@ -64,7 +64,7 @@ getCourseListTermR tidini = do
) )
] ]
let pageLinks = let pageLinks =
[ NavbarAside $ MenuItem [ PageActionPrime $ MenuItem
{ menuItemLabel = "Neuer Kurs" { menuItemLabel = "Neuer Kurs"
, menuItemIcon = Just "book" , menuItemIcon = Just "book"
, menuItemRoute = CourseNewR , menuItemRoute = CourseNewR
@ -93,7 +93,7 @@ getCourseShowR tid csh = do
let course = entityVal courseEnt let course = entityVal courseEnt
(regWidget, regEnctype) <- generateFormPost $ identifyForm "registerBtn" $ registerButton $ mbRegistered (regWidget, regEnctype) <- generateFormPost $ identifyForm "registerBtn" $ registerButton $ mbRegistered
let pageActions = let pageActions =
[ NavbarAside $ MenuItem [ PageActionPrime $ MenuItem
{ menuItemLabel = "Übungsblätter" { menuItemLabel = "Übungsblätter"
, menuItemIcon = Nothing , menuItemIcon = Nothing
, menuItemRoute = CSheetR tid csh SheetListR , menuItemRoute = CSheetR tid csh SheetListR

2
src/Handler/Term.hs
View File

@ -76,7 +76,7 @@ getTermShowR = do
, dbtIdent = "terms" :: Text , dbtIdent = "terms" :: Text
} }
let pageActions = let pageActions =
[ NavbarAside $ MenuItem [ PageActionPrime $ MenuItem
{ menuItemLabel = "Neues Semester" { menuItemLabel = "Neues Semester"
, menuItemIcon = Nothing , menuItemIcon = Nothing
, menuItemRoute = TermEditR , menuItemRoute = TermEditR

7
templates/default-layout-wrapper.hamlet
View File

@ -38,7 +38,12 @@ $newline never
\ }); \ });
} }
<body>
<body .no-js>
<!-- removes no-js class from body if client supports javascript -->
<script>
document.body.classList.remove('no-js');
^{pageBody pc} ^{pageBody pc}
$maybe analytics <- appAnalytics $ appSettings master $maybe analytics <- appAnalytics $ appSettings master

5
templates/default-layout.hamlet
View File

@ -6,6 +6,8 @@
<!-- secondary navigation at the side --> <!-- secondary navigation at the side -->
^{asidenav} ^{asidenav}
^{modal ".toggler" "<h2>Neue Veranstaltung</h2><br>Erstelle eine neue Veranstaltung! Jetzt und hier. Kostenlos."}
<div .main__content> <div .main__content>
<!-- alerts --> <!-- alerts -->
@ -13,5 +15,8 @@
$with status2 <- bool status "info" (status == "") $with status2 <- bool status "info" (status == "")
<div class="alert alert-#{status2}">#{msg} <div class="alert alert-#{status2}">#{msg}
<!-- prime page actions -->
^{pageactionprime}
<!-- actual content --> <!-- actual content -->
^{widget} ^{widget}

9
templates/default-layout.lucius
View File

@ -25,6 +25,7 @@
--lighterbase: #5F98C2; --lighterbase: #5F98C2;
--whitebase: #FCFFFA; --whitebase: #FCFFFA;
--greybase: #B1B5C0; --greybase: #B1B5C0;
--lightgreybase: #D9DEDB;
--blackbase: #1A2A36; --blackbase: #1A2A36;
--fontbase: #34303a; --fontbase: #34303a;
--fontsec: #5b5861; --fontsec: #5b5861;
@ -158,7 +159,7 @@ th {
input[type="submit"], input[type="submit"],
input[type="button"], input[type="button"],
button, button,
.btn { .btn, a.btn {
outline: 0; outline: 0;
border: 0; border: 0;
box-shadow: 0; box-shadow: 0;
@ -174,12 +175,14 @@ button,
} }
input.btn-primary, input.btn-primary,
button.btn-primary, button.btn-primary,
a.btn.btn-primary,
.btn.btn-primary { .btn.btn-primary {
background-color: var(--primarybase); background-color: var(--primarybase);
} }
input.btn-info, input.btn-info,
button.btn-info, button.btn-info,
a.btn.btn-info,
.btn.btn-info { .btn.btn-info {
background-color: var(--infobase) background-color: var(--infobase)
} }
@ -187,6 +190,7 @@ button.btn-info,
input[type="submit"][disabled], input[type="submit"][disabled],
input[type="button"][disabled], input[type="button"][disabled],
button[disabled], button[disabled],
a.btn[disabled],
.btn[disabled] { .btn[disabled] {
opacity: 0.3; opacity: 0.3;
background-color: var(--greybase); background-color: var(--greybase);
@ -196,14 +200,17 @@ button[disabled],
input[type="submit"]:not([disabled]):hover, input[type="submit"]:not([disabled]):hover,
input[type="button"]:not([disabled]):hover, input[type="button"]:not([disabled]):hover,
button:not([disabled]):hover, button:not([disabled]):hover,
a.btn:not([disabled]):hover,
.btn:not([disabled]):hover { .btn:not([disabled]):hover {
background-color: var(--lighterbase); background-color: var(--lighterbase);
text-decoration: underline; text-decoration: underline;
color: white;
} }
input[type="submit"].btn-info:hover, input[type="submit"].btn-info:hover,
input[type="button"].btn-info:hover, input[type="button"].btn-info:hover,
button.btn-info:hover, button.btn-info:hover,
a.btn.btn-info:hover,
.btn.btn-info:hover { .btn.btn-info:hover {
background-color: var(--greybase) background-color: var(--greybase)
} }

5
templates/standalone/inputs.julius
View File

@ -172,6 +172,11 @@ document.addEventListener('DOMContentLoaded', function() {
// setup reactive labels // setup reactive labels
Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) { Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
var input = document.querySelector('#' + label.getAttribute('for')); var input = document.querySelector('#' + label.getAttribute('for'));
if (!input) {
console.error('No input found for ReactiveLabel! Targeted input: \'#%s\'', label.getAttribute('for'));
return false;
}
var parent = label.parentElement; var parent = label.parentElement;
var type = input.getAttribute('type'); var type = input.getAttribute('type');
var isFileInput = /file/i.test(type); var isFileInput = /file/i.test(type);

81
templates/standalone/inputs.lucius
View File

@ -3,6 +3,53 @@ form {
margin: 20px 0; margin: 20px 0;
} }
/* FORM GROUPS */
.form-group {
position: relative;
display: flex;
display: grid;
grid-template-columns: 25% max-content;
grid-auto-columns: 25%;
grid-gap: 5px;
justify-content: flex-start;
align-items: center;
margin: 10px 0;
padding-left: 10px;
border-left: 8px solid transparent;
}
.form-group--required {
border-left: 8px solid var(--lighterbase);
}
.form-group--valid {
border-left: 8px solid var(--validbase);
}
.form-group--has-error {
border-left: 8px solid var(--errorbase) !important;
}
.form-group__label {
width: 25%;
white-space: nowrap;
font-weight: 600;
}
@media (max-width: 999px) {
.form-group {
grid-template-columns: 1fr;
grid-template-rows: 30px;
align-items: baseline;
margin-top: 17px;
flex-direction: column;
> * {
width: 100%;
}
}
}
/* TEXT INPUTS */ /* TEXT INPUTS */
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
@ -18,7 +65,7 @@ input[type="email"] {
color: var(--fontbase); color: var(--fontbase);
transition: all .1s; transition: all .1s;
font-size: 16px; font-size: 16px;
min-width: 300px; min-width: 400px;
} }
input[type="text"]:focus, input[type="text"]:focus,
@ -37,7 +84,7 @@ textarea {
outline: 0; outline: 0;
border: 0; border: 0;
padding: 7px 4px; padding: 7px 4px;
min-width: 300px; min-width: 400px;
min-height: 100px; min-height: 100px;
font-family: var(--fontfamilybase); font-family: var(--fontfamilybase);
font-size: 16px; font-size: 16px;
@ -51,30 +98,6 @@ textarea:focus {
background-color: transparent; background-color: transparent;
border-bottom-color: var(--lightbase); border-bottom-color: var(--lightbase);
} }
/* FORM GROUPS */
.form-group {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(150px, max-content));
grid-auto-columns: minmax(150px, max-content);
grid-gap: 5px;
align-items: center;
margin: 10px 0;
padding-left: 10px;
border-left: 8px solid transparent;
}
.form-group--required {
border-left: 8px solid var(--lighterbase);
}
.form-group--valid {
border-left: 8px solid var(--validbase);
}
.form-group--has-error {
border-left: 8px solid var(--errorbase) !important;
}
/* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */ /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
input[type="checkbox"] { input[type="checkbox"] {
@ -202,12 +225,6 @@ input[type="checkbox"]:checked::after {
color: var(--fontbase); color: var(--fontbase);
} }
@media (max-width: 999px) { @media (max-width: 999px) {
.form-group {
grid-template-rows: 30px;
grid-template-columns: 1fr;
align-items: baseline;
margin-top: 17px;
}
.reactive-label { .reactive-label {
position: relative; position: relative;
transform: translate(2px, 30px); transform: translate(2px, 30px);

22
templates/widgets/asidenav.hamlet
View File

@ -1,3 +1,4 @@
$newline never
<aside .main__aside> <aside .main__aside>
<div .asidenav> <div .asidenav>
<div .asidenav__box--dont-hide> <div .asidenav__box--dont-hide>
@ -10,12 +11,6 @@
$if isJust mIcon $if isJust mIcon
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}> <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
<div .asidenav__link-label>#{label} <div .asidenav__link-label>#{label}
$of PageActionPrime (MenuItem label mIcon route _)
<li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
<a .asidenav__link-wrapper href=@{route}>
$if isJust mIcon
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
<div .asidenav__link-label>#{label}
$of _ $of _
<div .asidenav__box--dont-hide> <div .asidenav__box--dont-hide>
@ -26,13 +21,28 @@
<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>

86
templates/widgets/asidenav.julius
View File

@ -3,9 +3,18 @@
window.utils = window.utils || {}; window.utils = window.utils || {};
window.utils.aside = function(asideEl, topNav) { // Defines a function to turn an element into an interactive aside-navigation.
// If the small is smaller than 999px the navigation is automatically
// collapsed - even when dynamically resized (e.g. switching from portatit
// to landscape).
// The can user may also manually collapse and expand the navigation by
// using the little arrow at the bottom.
window.utils.aside = function(asideEl) {
var collapsed = false; var collapsed = false;
var collClass = 'main__aside--collapsed'; var collClass = 'main__aside--collapsed';
// animClass used to enable transitions only when needed so that
// (potentially happening) initial collapse of the asidenav
// goes unnoticed by the user.
var animClass = 'main__aside--transitioning'; var animClass = 'main__aside--transitioning';
var aboveCollapsedNav = false; var aboveCollapsedNav = false;
@ -15,24 +24,14 @@
if (document.body.getBoundingClientRect().width < 999 || collLS) { if (document.body.getBoundingClientRect().width < 999 || collLS) {
asideEl.classList.add(collClass); asideEl.classList.add(collClass);
collapsed = true; collapsed = true;
if (topNav) {
topNav.style.paddingLeft = '90px';
window.setTimeout(function() {
topNav.classList.add('navbar--animated');
}, 200);
}
} else if (topNav) {
topNav.classList.add('navbar--animated');
} }
addListener();
} }
function check() { function check() {
if (collapsed && !hasClass() || !collapsed && hasClass()) { if (collapsed && !hasClass() || !collapsed && hasClass()) {
asideEl.classList.add(animClass); asideEl.classList.add(animClass);
asideEl.classList.toggle(collClass, collapsed); asideEl.classList.toggle(collClass, collapsed);
if (topNav) {
topNav.style.paddingLeft = collapsed ? '90px' : '';
}
window.localStorage.setItem('asidenavCollapsed', collapsed); window.localStorage.setItem('asidenavCollapsed', collapsed);
} }
} }
@ -41,41 +40,46 @@
return asideEl.classList.contains(collClass); return asideEl.classList.contains(collClass);
} }
asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) { function addListener() {
collapsed = !collapsed;
check();
}, false);
asideEl.addEventListener('transitionend', function(event) {
if (event.propertyName === 'opacity') {
asideEl.classList.remove(animClass);
}
}, false);
window.addEventListener('resize', function() {
collapsed = document.body.getBoundingClientRect().width < 999;
check();
}, false);
asideEl.addEventListener('mouseover', function(event) { asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
if (!collapsed) { collapsed = !collapsed;
return false; check();
} }, false);
aboveCollapsedNav = true;
console.log(event); asideEl.addEventListener('transitionend', function(event) {
window.setTimeout(function() { if (event.propertyName === 'opacity') {
if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) { asideEl.classList.remove(animClass);
asideEl.classList.add('pseudo-hover');
} }
}, 430); }, false);
}, false);
asideEl.addEventListener('mouseleave', function(event) { window.addEventListener('resize', function() {
aboveCollapsedNav = false; collapsed = document.body.getBoundingClientRect().width < 999;
asideEl.classList.remove('pseudo-hover'); check();
}, false); }, false);
asideEl.addEventListener('mouseover', function(event) {
if (!collapsed) {
return false;
}
aboveCollapsedNav = true;
window.setTimeout(function() {
if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
asideEl.classList.add('pseudo-hover');
}
}, 800);
}, false);
asideEl.addEventListener('mouseleave', function(event) {
aboveCollapsedNav = false;
asideEl.classList.remove('pseudo-hover');
}, false);
}
}; };
})(); })();
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
utils.aside(document.querySelector('.main__aside'), document.querySelector('.navbar')); utils.aside(document.querySelector('.main__aside'));
}); });

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;

15
templates/widgets/modal.hamlet Normal file
View File

@ -0,0 +1,15 @@
<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
<h2>Neue Veranstaltung
#{modalContent}
<form>
<div .form-group>
<label .reactive-label for="inp1">Name
<input type="text" id="inp1">
<div .form-group>
<label .reactive-label for="inp2">Kürzel
<input type="text" id="inp2">
<div .form-group>
<label .reactive-label for="inp3">Semester
<input type="text" id="inp3">
<div .form-group>
<input type="submit" value="Submit">

57
templates/widgets/modal.julius Normal file
View File

@ -0,0 +1,57 @@
document.addEventListener('DOMContentLoaded', function() {
'use strict';
window.utils = window.utils || {};
if (!window.utils.modal) {
window.utils.modal = function(modal) {
var overlay = document.createElement('div');
var closer = document.createElement('div');
var trigger = document.querySelector(modal.dataset.trigger);
var closeBound;
this.open = function openFn() {
modal.classList.add('modal--open');
overlay.classList.add('modal__overlay');
modal.parentNode.insertBefore(overlay, modal);
overlay.classList.add('modal__overlay--open');
toggleScroll(false);
if (modal.dataset.closeable === 'true') {
closer.classList.add('modal__closer');
modal.insertBefore(closer, null);
closer.addEventListener('click', closeBound, false);
overlay.addEventListener('click', closeBound, false);
}
};
this.openOnEvent = function openOnEventFn(event) {
if (event.detail.for === modal.getAttribute('id')) {
this.open();
}
};
this.close = function closeFn(event) {
if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
modal.classList.remove('modal--open');
overlay.classList.remove('modal__overlay--open');
toggleScroll(true);
closer.removeEventListener('click', closeBound, false);
}
};
document.addEventListener('modal-open', this.openOnEvent.bind(this), false);
closeBound = this.close.bind(this);
if (trigger) {
trigger.classList.add('modal__trigger');
trigger.addEventListener('click', this.open.bind(this), false);
}
}
}
function toggleScroll(scrollable) {
document.body.classList.toggle('no-scroll', !scrollable);
}
new utils.modal(document.querySelector('#modal-13')); // hashtag{modalId} scope-variable
}, false);

86
templates/widgets/modal.lucius Normal file
View File

@ -0,0 +1,86 @@
.modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.8, 0.8);
display: block;
background-color: rgba(255, 255, 255, 0.9);
min-width: 60vw;
min-height: 100px;
max-height: calc(100vh - 30px);
border-radius: 7px;
z-index: -1;
color: var(--fontbase);
padding: 20px;
overflow: auto;
opacity: 0;
transition: all .15s ease;
&.modal--open {
opacity: 1;
z-index: 200;
transform: translate(-50%, -50%) scale(1, 1);
}
}
@media (max-width: 999px) {
.modal {
min-width: 80vw;
}
}
@media (max-width: 666px) {
.modal {
min-width: 90vw;
}
}
@media (max-width: 444px) {
.modal {
min-width: calc(100vw - 20px);
}
}
.modal__overlay {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: transparent;
z-index: -1;
opacity: 0;
transition: all .2s ease;
&.modal__overlay--open {
z-index: 199;
opacity: 1;
background-color: rgba(0, 0, 0, 0.4);
}
}
.modal__trigger {
cursor: pointer;
}
.modal__closer {
position: absolute;
top: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background-color: var(--darkbase);
border-radius: 2px;
cursor: pointer;
&::before {
content: '\e014';
font-family: 'Glyphicons Halflings';
color: white;
}
}
.no-scroll {
overflow: hidden;
}

1
templates/widgets/navbar.hamlet
View File

@ -1,3 +1,4 @@
$newline never
<div .navbar-container> <div .navbar-container>
<nav .navbar.js-sticky-navbar> <nav .navbar.js-sticky-navbar>

66
templates/widgets/navbar.julius
View File

@ -1,28 +1,48 @@
/** (function() {
* .js-sticky-navbar 'use strict';
* ul
* li Item 1 window.utils = window.utils || {};
* li Item 2
*/ window.utils.stickynav = function(nav) {
var ticking = false;
init();
function init() {
nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
window.setTimeout(function() {
nav.classList.add('navbar--animated');
}, 200);
checkScroll();
addListener();
}
// checks scroll direction and shows/hides navbar accordingly
function checkScroll() {
var sticky = window.scrollY > 0;
nav.classList.toggle('navbar--sticky', sticky);
ticking = false;
}
function addListener() {
window.addEventListener('scroll', function(e) {
if (!ticking) {
window.requestAnimationFrame(checkScroll);
ticking = true;
}
}, false);
}
window.addEventListener('resize', function() {
nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
}, false);
}
})();
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var ticking = false; utils.stickynav(document.querySelector('.js-sticky-navbar'));
var nav = document.querySelector('.js-sticky-navbar');
window.addEventListener('scroll', function(e) {
if (!ticking) {
window.requestAnimationFrame(checkScroll);
ticking = true;
}
}, false);
// checks scroll direction and shows/hides navbar accordingly
function checkScroll() {
var sticky = window.scrollY > 0;
nav.classList.toggle('navbar--sticky', sticky);
ticking = false;
}
checkScroll();
}); });

11
templates/widgets/pageactionprime.hamlet Normal file
View File

@ -0,0 +1,11 @@
$newline never
$if hasPageActions
<div .page-nav-prime>
<h3>Aktionen:
<ul .pagenav__list>
$forall menuType <- menuTypes
$case menuType
$of PageActionPrime (MenuItem label mIcon route _)
<li .pagenav__list-item>
<a .pagenav__link-wrapper href=@{route}>#{label}
$of _

21
templates/widgets/pageactionprime.lucius Normal file
View File

@ -0,0 +1,21 @@
.page-nav-prime {
background-color: var(--lightgreybase);
box-shadow: -20px -20px 0 20px var(--lightgreybase),
20px -20px 0 20px var(--lightgreybase);
padding: 13px 0;
}
.page-nav-prime .pagenav__list {
margin: 7px 0 0;
display: block;
}
.page-nav-prime .pagenav__list-item {
display: inline-block;
border-bottom: 2px solid var(--lightbase);
margin-right: 7px;
transition: border-bottom-color .2s ease;
&:hover {
border-bottom-color: var(--lighterbase);
}
}