moved sticky navbar to StaticR and added show-hide-elements (only HomeR)

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|Ma<i>thema</i>tik|]
-  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

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;
+}

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;
+}

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);
+  });
+});

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();

templates/home.hamlet

@@ -23,8 +23,8 @@
     und Reihenfolge.
     Dies läßt sich leicht nachträglich einstellen.
 
-<div>
-  <h2>Teilweise funktionierende Abschnitte
+<div .js-show-hide>
+  <h2 .js-show-hide-toggle>Teilweise funktionierende Abschnitte
 
   <ul>
     <li .list-group-item>

templates/widgets/navbar.hamlet

@@ -1,4 +1,4 @@
-<nav .navbar>
+<nav .navbar.js-sticky-navbar>
   <ul .flat>
     $forall menuType <- menuTypes
       $case menuType

templates/widgets/navbar.lucius

@@ -1,52 +0,0 @@
-@header_height: 60px;
-@header_height_collapsed: 50px;
-
-.navbar {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: #{header_height};
-  line-height: #{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);
-
-  li > a {
-    display: inline-block;
-    height: 100%;
-    padding: 0 13px;
-    color: white;
-  }
-  li > a:hover {
-    background-color: white;
-    color: rebeccapurple;
-  }
-
-  li.active {
-    background-color: #422063;
-  }
-}
-.sticky-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: #{header_height_collapsed};
-  line-height: #{header_height_collapsed};
-  z-index: 100;
-  transition: height 0.2s ease, line-height 0.2s ease;
-}
-
-.navbar-pushdown {
-  display: none;
-  height: #{header_height};
-}
-.sticky-navbar + .navbar-pushdown {
-  display: block;
-}