From 7b3915fa9564547d1051223bd65dabd0a566718a Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sun, 4 Mar 2018 22:19:25 +0100 Subject: [PATCH] moved sticky navbar to StaticR and added show-hide-elements (only HomeR) --- src/Handler/Home.hs | 37 +++++++------ static/css/show_hide.css | 36 +++++++++++++ static/css/stickybar.css | 54 +++++++++++++++++++ static/js/show_hide.js | 30 +++++++++++ .../navbar.julius => static/js/stickybar.js | 11 +++- templates/home.hamlet | 4 +- templates/widgets/navbar.hamlet | 2 +- templates/widgets/navbar.lucius | 52 ------------------ 8 files changed, 152 insertions(+), 74 deletions(-) create mode 100644 static/css/show_hide.css create mode 100644 static/css/stickybar.css create mode 100644 static/js/show_hide.js rename templates/widgets/navbar.julius => static/js/stickybar.js (70%) diff --git a/src/Handler/Home.hs b/src/Handler/Home.hs index 9054a0726..7180d87de 100644 --- a/src/Handler/Home.hs +++ b/src/Handler/Home.hs @@ -9,13 +9,13 @@ module Handler.Home where -import Import +import Import import Handler.Utils -- import Data.Time -- import qualified Data.Text as T --- import Yesod.Form.Bootstrap3 - +-- import Yesod.Form.Bootstrap3 + import Web.PathPieces (showToPathPiece, readFromPathPiece) -- import Colonnade @@ -30,29 +30,32 @@ data CreateButton = CreateMath | CreateInf -- Dummy for Example instance PathPiece CreateButton where -- for displaying the button only, not really for paths toPathPiece = showToPathPiece fromPathPiece = readFromPathPiece - + instance Button CreateButton where label CreateMath = [whamlet|Mathematik|] - label CreateInf = "Informatik" - + label CreateInf = "Informatik" + cssClass CreateMath = BCInfo - cssClass CreateInf = BCPrimary --- END Button needed here + cssClass CreateInf = BCPrimary +-- END Button needed here getHomeR :: Handler Html -getHomeR = do +getHomeR = do (btnWdgt, btnEnctype) <- generateFormPost (buttonForm :: Form CreateButton) defaultLayout $ do + addStylesheet $ StaticR css_stickybar_css + addStylesheet $ StaticR css_show_hide_css + addScript $ StaticR js_stickybar_js + addScript $ StaticR js_show_hide_js setTitle "Willkommen zum ReWorX Test!" $(widgetFile "home") - -postHomeR :: Handler Html + +postHomeR :: Handler Html postHomeR = do - ((btnResult,_), _) <- runFormPost $ buttonForm - case btnResult of - (FormSuccess CreateInf) -> setMessage "Informatik-Knopf gedrückt" + ((btnResult,_), _) <- runFormPost $ buttonForm + case btnResult of + (FormSuccess CreateInf) -> setMessage "Informatik-Knopf gedrückt" (FormSuccess CreateMath) -> addMessage "warning" "Knopf Mathematik erkannt" - _other -> return () - getHomeR - + _other -> return () + getHomeR diff --git a/static/css/show_hide.css b/static/css/show_hide.css new file mode 100644 index 000000000..cdfacd4bb --- /dev/null +++ b/static/css/show_hide.css @@ -0,0 +1,36 @@ +.js-show-hide { + border-left: 1px solid #ccb3e6; + padding: 0 20px; + position: relative; +} + +.js-show-hide-toggle:hover { + cursor: pointer; +} + +.js-show-hide-toggle::before { + content: 'v'; + position: absolute; + margin-left: -13px; + font-weight: 800; +} + +.js-show-hide-toggle:hover::before { + content: '>'; +} + +.js-show-hide.collapsed .js-show-hide-toggle::before { + content: '>'; +} + +.js-show-hide.collapsed .js-show-hide-toggle:hover::before { + content: 'v'; +} + +.js-show-hide.collapsed > .js-show-hide-target { + padding-bottom: 0; +} + +.js-show-hide.collapsed > .js-show-hide-target { + display: none; +} diff --git a/static/css/stickybar.css b/static/css/stickybar.css new file mode 100644 index 000000000..cf006fc7a --- /dev/null +++ b/static/css/stickybar.css @@ -0,0 +1,54 @@ +:root { + --header-height: 60px; + --header-height-collapsed: 50px; +} + +.js-sticky-navbar { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + height: var(--header-height); + line-height: var(--header-height); + padding: 0 10vw; + background: #663399; /* Old browsers */ + background: -moz-linear-gradient(bottom, #663399 0%, #734e99 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(bottom, #663399 0%,#734e99 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to top, #663399 0%,#734e99 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + color: white; + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); +} + +.js-sticky-navbar li > a { + display: inline-block; + height: 100%; + padding: 0 13px; + color: white; +} +.js-sticky-navbar li > a:hover { + background-color: white; + color: rebeccapurple; +} + +.js-sticky-navbar li.active { + background-color: #422063; +} + +.navbar-sticky { + position: fixed; + top: 0; + left: 0; + height: var(--header-height-collapsed); + line-height: var(--header-height-collapsed); + z-index: 100; + transition: height 0.2s ease, line-height 0.2s ease; +} +.navbar-pushdown { + display: none; + height: var(--header-height); +} +.navbar-sticky + .navbar-pushdown { + display: block; +} diff --git a/static/js/show_hide.js b/static/js/show_hide.js new file mode 100644 index 000000000..3416bc382 --- /dev/null +++ b/static/js/show_hide.js @@ -0,0 +1,30 @@ +/** + * div.js-show-hide + * div.js-show-hide-toggle + * toggle here + * div + * content here + */ + +document.addEventListener('DOMContentLoaded', function() { + + var elements = Array.from(document.querySelectorAll('.js-show-hide-toggle')), + toggles = []; + + function addEventHandler(el) { + el.addEventListener('click', function elClickListener() { + var toggle = toggles[el.dataset.index]; + toggle.collapsed = !toggle.collapsed; + toggle.parent.classList.toggle('collapsed', toggle.collapsed); + }); + } + + elements.forEach(function(el, i) { + var target = el.nextElementSibling; + el.dataset.index = i; + var coll = el.parentElement.classList.contains('collapsed'); + target.classList.add('js-show-hide-target'); + toggles.push({index: i, target: target, collapsed: coll, parent: el.parentElement}); + addEventHandler(el); + }); +}); diff --git a/templates/widgets/navbar.julius b/static/js/stickybar.js similarity index 70% rename from templates/widgets/navbar.julius rename to static/js/stickybar.js index 9bacbdef5..e9b22e141 100644 --- a/templates/widgets/navbar.julius +++ b/static/js/stickybar.js @@ -1,7 +1,14 @@ +/** + * .js-sticky-navbar + * ul + * li Item 1 + * li Item 2 + */ + document.addEventListener('DOMContentLoaded', function() { var ticking = false; - var nav = document.querySelector('.navbar'); + var nav = document.querySelector('.js-sticky-navbar'); window.addEventListener('scroll', function(e) { if (!ticking) { @@ -13,7 +20,7 @@ document.addEventListener('DOMContentLoaded', function() { // checks scroll direction and shows/hides navbar accordingly function checkScroll() { var sticky = window.scrollY > 0; - nav.classList.toggle('sticky-navbar', sticky); + nav.classList.toggle('navbar-sticky', sticky); ticking = false; } checkScroll(); diff --git a/templates/home.hamlet b/templates/home.hamlet index 2bccbbd86..0ea077d62 100644 --- a/templates/home.hamlet +++ b/templates/home.hamlet @@ -23,8 +23,8 @@ und Reihenfolge. Dies läßt sich leicht nachträglich einstellen. -
-

Teilweise funktionierende Abschnitte +
+

Teilweise funktionierende Abschnitte
  • diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet index 887c85170..cf3bd2ce7 100644 --- a/templates/widgets/navbar.hamlet +++ b/templates/widgets/navbar.hamlet @@ -1,4 +1,4 @@ -