added navbar widget and did some cleanup to eventually get rid of bootstrap

src/Foundation.hs

@@ -207,10 +207,10 @@ submissionAccess cID = do
 
 adminAccess :: Maybe SchoolId -- ^ If @Just@, matched exactly against 'userAdminSchool'
             -> YesodDB UniWorX AuthResult
-adminAccess school = do    
+adminAccess school = do
   authId <- lift requireAuthId
-  adrights <- selectList ((UserAdminUser ==. authId) : maybe [] (\s -> [UserAdminSchool ==. s]) school) []  
+  adrights <- selectList ((UserAdminUser ==. authId) : maybe [] (\s -> [UserAdminSchool ==. s]) school) []
-  return $ if (not $ null adrights) 
+  return $ if (not $ null adrights)
     then Authorized
     else Unauthorized "No admin access"
 
@@ -218,7 +218,7 @@ lecturerAccess :: Maybe SchoolId
                -> YesodDB UniWorX AuthResult
 lecturerAccess school = do
   authId <- lift requireAuthId
-  lecrights <- selectList ((UserLecturerUser ==. authId) : maybe [] (\s -> [UserLecturerSchool ==. s]) school) []  
+  lecrights <- selectList ((UserLecturerUser ==. authId) : maybe [] (\s -> [UserLecturerSchool ==. s]) school) []
   return $ if (not $ null lecrights)
     then Authorized
     else Unauthorized "No lecturer access"
@@ -238,26 +238,26 @@ isAuthorized' :: Route UniWorX -> Bool -> Handler Bool
 isAuthorized' route isWrite = runDB $ isAuthorizedDB' route isWrite
 
 -- Define breadcrumbs.
-instance YesodBreadcrumbs UniWorX where  
+instance YesodBreadcrumbs UniWorX where
   breadcrumb TermShowR = return ("Semester", Just HomeR)
   breadcrumb TermEditR = return ("Neu", Just TermShowR)
   breadcrumb (TermEditExistR _) = return ("Editieren", Just TermShowR)
-  
+
   breadcrumb CourseListR = return ("Kurs", Just HomeR)
   breadcrumb (CourseListTermR term) = return (termToText term, Just TermShowR)
   breadcrumb (CourseShowR term course) = return (course, Just $ CourseListTermR term)
-  breadcrumb CourseEditR = return ("Neu", Just CourseListR)  
+  breadcrumb CourseEditR = return ("Neu", Just CourseListR)
   breadcrumb (CourseEditExistR _ _) = return ("Editieren", Just CourseListR)
 
   breadcrumb SubmissionListR = return ("Abgaben", Just HomeR)
   breadcrumb (SubmissionR _) = return ("Abgabe", Just SubmissionListR)
-  
+
   breadcrumb HomeR = return ("ReWorX", Nothing)
   breadcrumb (AuthR _) = return ("Login", Just HomeR)
   breadcrumb ProfileR = return ("Profile", Just HomeR)
   breadcrumb  _ = return ("home", Nothing)
 
-  
+
 defaultLinks :: [MenuTypes]
 defaultLinks = -- Define the menu items of the header.
   [ NavbarLeft $ MenuItem
@@ -269,7 +269,7 @@ defaultLinks = -- Define the menu items of the header.
       { menuItemLabel = "Kurse"
       , menuItemRoute = CourseListR
       , menuItemAccessCallback = return True
-      }                    
+      }
   , NavbarRight $ MenuItem
       { menuItemLabel = "Profile"
       , menuItemRoute = ProfileR
@@ -309,12 +309,14 @@ defaultMenuLayout menu widget = do
     -- you to use normal widget features in default-layout.
 
     pc <- widgetToPageContent $ do
-        addStylesheet $ StaticR css_bootstrap_css
+        -- addStylesheet $ StaticR css_globals_lucius
         $(widgetFile "default-layout")
     withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
     where
-        mainMenu :: [MenuTypes] -> Maybe (Route UniWorX) -> Widget
+        navbar :: [MenuTypes] -> Maybe (Route UniWorX) -> Widget
-        mainMenu menuTypes mcurrentRoute = $(widgetFile "main-menu")
+        navbar menuTypes mcurrentRoute = $(widgetFile "widgets/navbar")
+        breadcrumbsList :: [(Route UniWorX, Text)] -> Text -> Widget
+        breadcrumbsList parents title = $(widgetFile "widgets/breadcrumbs")
 
 
 -- How to run database actions.
@@ -346,7 +348,7 @@ instance YesodAuth UniWorX where
 
       $logDebugS "auth" $ tshow ((userPlugin, userIdent), creds)
 
-      when isDummy . (throwError =<<) . lift $ 
+      when isDummy . (throwError =<<) . lift $
           maybe (UserError $ IdentifierNotFound credsIdent) (Authenticated . entityKey) <$> getBy uAuth
 
       let
@@ -356,7 +358,7 @@ instance YesodAuth UniWorX where
 
       userEmail <- maybe (throwError $ ServerError "Could not retrieve user email") return userEmail'
       userDisplayName <- maybe (throwError $ ServerError "Could not retrieve user name") return userDisplayName'
-            
+
       let
         newUser = User{..}
         userUpdate = [ UserMatrikelnummer =. userMatrikelnummer
@@ -371,13 +373,13 @@ instance YesodAuth UniWorX where
         userStudyFeatures' = [ v | (k, v) <- credsExtra, k == "dfnEduPersonFeaturesOfStudy" ]
 
       fs <- either (\err -> throwError . ServerError $ "Could not parse features of study: " <> err) return userStudyFeatures
-    
+
       lift $ deleteWhere [StudyFeaturesUser ==. userId]
 
       forM_ fs $ \StudyFeatures{..} -> do
         lift . insertMaybe studyFeaturesDegree $ StudyDegree (unStudyDegreeKey studyFeaturesDegree) Nothing Nothing
         lift . insertMaybe studyFeaturesField $ StudyTerms (unStudyTermsKey studyFeaturesField) Nothing Nothing
-              
+
       lift $ insertMany_ fs
       return $ Authenticated userId
       where
@@ -402,7 +404,7 @@ ldapConfig app@(appSettings -> settings) = LDAPConfig
   }
   where
     principalName :: IsString a => a
-    principalName = "userPrincipalName" 
+    principalName = "userPrincipalName"
     identifierModifier _ entry = case lookup principalName $ leattrs entry of
       Just [n] -> Text.pack n
       _        -> error "Could not determine user principal name"

src/Handler/Utils/Templates.hs

@@ -4,5 +4,5 @@ module Handler.Utils.Templates where
 
 import Import.NoFoundation
 
--- list :: WidgetT site IO ()
+lipsum :: WidgetT site IO ()
--- list = $(widgetFile "list") -- assumes /templates/list.hamlet
+lipsum = $(widgetFile "widgets/lipsum")

templates/default-layout-wrapper.hamlet

@@ -19,12 +19,7 @@ $newline never
     \<!--[if lt IE 9]>
     \<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     \<![endif]-->
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js">
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.min.js">
-
-    \<!-- Bootstrap-3.3.7 compiled and minified JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
-
     <script>
       /* The `defaultCsrfMiddleware` Middleware added in Foundation.hs adds a CSRF token to the request cookies. */
       /* AJAX requests should add that token to a header to be validated by the server. */
@@ -43,8 +38,6 @@ $newline never
       \  });
       }
 
-    <script>
-      document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
   <body>
     ^{pageBody pc}
 

templates/default-layout.hamlet

@@ -1,51 +1,24 @@
+<div #main.main-wrapper>
+  <!-- navigation -->
+  ^{navbar menuTypes mcurrentRoute}
 
-<!-- Static navbar -->
-<nav .navbar.navbar-default.navbar-static-top>
-    <div .container>
-        <div .navbar-header>
-            <button type="button" .navbar-toggle.collapsed data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
 
-        <div #navbar .collapse.navbar-collapse>
+  <div .content-wrapper>
-            ^{mainMenu menuTypes mcurrentRoute}
+    <!-- breadcrumbs -->
-
-            <ul .nav.navbar-nav.navbar-right>
-                $forall menuType <- menuTypes
-                  $case menuType
-                    $of NavbarRight (MenuItem label route _)
-                      <li :Just route == mcurrentRoute:.active>
-                        <a href=@{route}>#{label}
-                    $of _
-
-<!-- Page Contents -->
-
-<div .container>
     $if not $ Just HomeR == mcurrentRoute
-        <ul .breadcrumb>
+      ^{breadcrumbsList parents title}
-            $forall bc <- parents
-                <li>
-                    <a href="@{fst bc}">#{snd bc}
-
-            <li .active>#{title}
 
+    <!-- alerts -->
     $forall (status, msg) <- mmsgs
       $with status2 <- bool status "info" (status == "")
         <div class="alert alert-#{status2}">#{msg}
 
-
+    <!-- actual content -->
-$if (Just HomeR == mcurrentRoute)
     ^{widget}
-$else
-    <div .container>
-        <div .row>
-            <div .col-md-12>
-                ^{widget}
 
-<!-- Footer -->
+    <!-- a little lorem ipsum for waste of vertical space -->
-<footer .footer>
+    ^{lipsum}
-    <div .container>
+
-        <p .text-muted>
+    <!-- footer -->
-            #{appCopyright $ appSettings master}
+    <footer>
+      #{appCopyright $ appSettings master}

templates/default-layout.lucius

@@ -1,73 +1,93 @@
-.masthead,
+/* THEME 1 */
-.navbar {
+@base00: #72a85b;
-    background-color: rgb(27, 28, 29);
+@base-bg-color: #1d1c1d;
-}
+@base-font-color: #fff;
-
+@sec-font-color: #fff;
-.navbar-default .navbar-nav > .active > a {
+@box-bg-color: #3c3c3c;
-    background-color: transparent;
+/* THEME 2 */
-    border-bottom: 2px solid white;
+@base00: #38428a;
-}
+@base-bg-color: #ffffff;
-
+@base-font-color: rgb(53, 53, 53);
-.navbar-nav {
+@sec-font-color: #eaf2ff;
-    padding-bottom: 1em;
+@box-bg-color: #dddddd;
-}
+/* THEME 3 */
-
+@base00: rebeccapurple;
-.masthead {
-    margin-top: -21px;
-    color: white;
-    text-align: center;
-    min-height: 500px;
-}
-
-.masthead .header {
-    max-width: 700px;
-    margin: 0 auto;
-    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
-}
-
-.masthead h1.header {
-    margin-top: 1em;
-    margin-bottom: 0em;
-    font-size: 4.5em;
-    line-height: 1.2em;
-    font-weight: normal;
- }
-
-.masthead h2 {
-    font-size: 1.7em;
-    font-weight: normal;
-}
-
-.masthead .btn {
-    margin: 1em 0;
-}
 
 
-/* Common styles for all types */
+
-.bs-callout {
+
-  padding: 20px;
+@footer-height: 50px;
-  margin: 20px 0;
+
-  border: 1px solid #eee;
+
-  border-left-width: 5px;
+
-  border-radius: 3px;
+
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
 }
 
-.bs-callout p:last-child {
+body {
-  margin-bottom: 0;
+  background-color: white;
+  color: #333;
+  font-family: "Source Sans Pro", Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  overflow-y: scroll;
 }
 
-.bs-callout-info {
+a,
-  border-left-color: #1b809e;
+a:visited {
+  color: rebeccapurple;
+  text-decoration: none;
+  font-weight: 600;
+  transition: color .2s ease, background-color .2s ease;
+}
+a:hover {
+  color: #422063;
 }
 
-/* Space things out */
+ul {
-.bs-docs-section {
+  list-style-type: none;
-  margin-bottom: 60px;
 }
-.bs-docs-section:last-child {
+ul.flat > li {
-  margin-bottom: 0;
+  display: inline-block;
 }
 
-#message {
+h1, h2, h3, h4, h5 {
-    margin-bottom: 40px;
+  font-weight: 600;
+}
+h1 {
+  font-size: 32px;
+  margin: 20px 0 10px;
+}
+h2 {
+  font-size: 24px;
+  margin: 10px 0 5px;
+}
+h3 {
+  font-size: 20px;
+  margin: 5px 0 0;
+}
+h4 {
+  font-size: 16px;
+  margin: 0;
+}
+
+th, td {
+  text-align: left;
+  padding: 0 2px 0 4px;
+}
+
+.content-wrapper {
+  padding: 0 10vw;
+
+  div {
+    margin: 20px 0;
+  }
+
+  p {
+    margin: 10px 0;
+  }
 }

templates/home.hamlet

@@ -1,74 +1,42 @@
-<div .masthead>
+<div>
-    <div .container>
+  <h1>ReWorX - Demo
-        <div .row>
+  <h3>
-            <h1 .header>
+    Testumgebung für die Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
-                ReWorX - Demo
-            <h3>
-                Testumgebung für die Re-Implementierung von 
-                <a href="https://uniworx.ifi.lmu.de/">
-                  UniWorX
 
-<div .container>
+<div>
-    <!-- Starting
+  <h2>Übersicht
-        ================================================== -->
+  <p>
-    <div .bs-docs-section>
+    Die Reimplementierung von
-        <div .row>
+    UniWorX ist noch nicht abgeschlossen.
-            <div .col-lg-12>
-                <div .page-header>
-                    <h2 #start>Übersicht
-                    
-                    <p>
-                        Die Reimplementierung von 
-                        UniWorX ist noch nicht abgeschlossen.
-                        
-                        <div .alert .alert-danger>
-                          Das System ist noch nicht produktiv
-                          einsetzbar
-                          
-    <div .bs-docs-section>
-        <div .row>
-            <div .col-lg-12>
-                <div .page-header>
-                    <h2 #design>Design 
-                    
-                    <p>
-                        Wir konzentrieren uns derzeit 
-                        ausschließlich auf die Funktionalität.
-                    <p>                        
-                        Insbesondere Formulare zeigen
-                        alle Eingabefelder und Knöpfe
-                        ohne eine gezielte Anordnung 
-                        und Reihenfolge. 
-                        Dies läßt sich leicht nachträglich einstellen.
-                    <p>    
-                        Momentan werden noch keine speziellen Grafiken oder CSS verwendet;
-                        sondern nur gewöhnliches Bootstrap3.
-                        
-    <div .bs-docs-section>
-        <div .row>
-            <div .col-lg-12>
-                <div .page-header>
-                    <h2 #design>Teilweise funktionierende Abschnitte
-                                          
-                    <ul .list-group>
 
-                      <li .list-group-item>
+  <p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
-                        <a href=@{TermShowR}>Semester Verwaltung
-                        
-                      <li .list-group-item>
-                        <a href=@{CourseEditR}>Kurse anlegen
-                        editieren und anzeigen
 
-                    <h2 #design>Funktionen zum Testen 
+<div>
-                                          
+  <h2>Design
-                    <ul .list-group>
+  <p>
+    Wir konzentrieren uns derzeit
+    ausschließlich auf die Funktionalität.
+  <p>
+    Insbesondere Formulare zeigen
+    alle Eingabefelder und Knöpfe
+    ohne eine gezielte Anordnung
+    und Reihenfolge.
+    Dies läßt sich leicht nachträglich einstellen.
 
-                      <li .list-group-item>
+<div>
-                        Institut einmalig in Datenbank einfügen:
+  <h2>Teilweise funktionierende Abschnitte
-                          <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
+
-                            ^{btnWdgt}
+  <ul>
-                        
+    <li>
-                      <li .list-group-item>
+      <a href=@{TermShowR}>Semester Verwaltung
-                        <a href=@{CourseEditR}>Kurse anlegen
+    <li>
-                        editieren und anzeigen
+      <a href=@{CourseEditR}>Kurse anlegen, editieren und anzeigen
-    
+
+<div>
+  <h2>Funktionen zum Testen
+
+  <ul>
+    <li>
+      Institut einmalig in Datenbank einfügen:
+        <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
+          ^{btnWdgt}

templates/main-menu.hamlet

@@ -1,7 +0,0 @@
-<ul .nav.navbar-nav>
-    $forall menuType <- menuTypes
-      $case menuType
-        $of NavbarLeft (MenuItem label route _)
-          <li :Just route == mcurrentRoute:.active>
-            <a href=@{route}>#{label}
-        $of _

templates/widgets/breadcrumbs.hamlet

@@ -0,0 +1,5 @@
+<div>
+  <ul .breadcrumbs.flat>
+    $forall bc <- parents
+      <li><a href="@{fst bc}">#{snd bc}</a> &gt;
+    <li .active>#{title}

templates/widgets/lipsum.hamlet

@@ -0,0 +1,10 @@
+<div>
+  <h2>A little lorem ipsum to make the page scrollable
+  Aute velit consectetur consequat excepteur ut in qui do reprehenderit sit consequat occaecat incididunt sint eu. Nulla cillum quis et sit labore aliquip et ad excepteur duis elit deserunt aute. Anim esse reprehenderit et ipsum et sit quis minim enim sint et pariatur duis nostrud. Do minim dolore adipisicing ullamco ad aute veniam id magna est proident tempor labore non. Mollit et laboris duis esse commodo ex tempor.
+  Elit labore qui dolor ea non ut anim occaecat do aliqua cillum qui esse. Aliqua nisi non veniam labore esse irure velit qui veniam labore consectetur ut. Tempor laboris anim officia veniam nostrud cupidatat reprehenderit aute incididunt nostrud dolore occaecat deserunt pariatur in non dolore.
+  Proident anim pariatur eu laborum Lorem duis cillum est anim magna sit pariatur eu. Nulla consectetur quis ea sunt proident sint laborum. Esse est ea Lorem mollit aute excepteur fugiat ipsum ipsum ad irure do reprehenderit voluptate. Sint tempor nulla mollit voluptate pariatur aliquip culpa amet ullamco fugiat incididunt minim sint ipsum exercitation eiusmod ad. Nostrud ipsum nulla cillum ex aute elit voluptate proident proident magna ut. Ipsum officia cillum officia nostrud enim fugiat ut. Voluptate laboris aute dolore incididunt aliquip sit sit. Ea ut laboris Lorem ea ad non nostrud aute tempor non nisi.
+  Qui cupidatat nisi id et excepteur sint aliquip fugiat sint reprehenderit aliquip enim anim aliqua sint dolore proident. Voluptate labore tempor laboris nisi eiusmod sunt occaecat deserunt adipisicing. Consectetur fugiat quis non ad laboris aliqua voluptate in eu id. Duis velit cillum aliquip dolor non ea mollit incididunt elit ex excepteur aute consequat amet.
+  Aute velit consectetur consequat excepteur ut in qui do reprehenderit sit consequat occaecat incididunt sint eu. Nulla cillum quis et sit labore aliquip et ad excepteur duis elit deserunt aute. Anim esse reprehenderit et ipsum et sit quis minim enim sint et pariatur duis nostrud. Do minim dolore adipisicing ullamco ad aute veniam id magna est proident tempor labore non. Mollit et laboris duis esse commodo ex tempor.
+  Elit labore qui dolor ea non ut anim occaecat do aliqua cillum qui esse. Aliqua nisi non veniam labore esse irure velit qui veniam labore consectetur ut. Tempor laboris anim officia veniam nostrud cupidatat reprehenderit aute incididunt nostrud dolore occaecat deserunt pariatur in non dolore.
+  Proident anim pariatur eu laborum Lorem duis cillum est anim magna sit pariatur eu. Nulla consectetur quis ea sunt proident sint laborum. Esse est ea Lorem mollit aute excepteur fugiat ipsum ipsum ad irure do reprehenderit voluptate. Sint tempor nulla mollit voluptate pariatur aliquip culpa amet ullamco fugiat incididunt minim sint ipsum exercitation eiusmod ad. Nostrud ipsum nulla cillum ex aute elit voluptate proident proident magna ut. Ipsum officia cillum officia nostrud enim fugiat ut. Voluptate laboris aute dolore incididunt aliquip sit sit. Ea ut laboris Lorem ea ad non nostrud aute tempor non nisi.
+  Qui cupidatat nisi id et excepteur sint aliquip fugiat sint reprehenderit aliquip enim anim aliqua sint dolore proident. Voluptate labore tempor laboris nisi eiusmod sunt occaecat deserunt adipisicing. Consectetur fugiat quis non ad laboris aliqua voluptate in eu id. Duis velit cillum aliquip dolor non ea mollit incididunt elit ex excepteur aute consequat amet.

templates/widgets/navbar.hamlet

@@ -0,0 +1,18 @@
+<nav .navbar>
+  <ul .flat>
+    $forall menuType <- menuTypes
+      $case menuType
+        $of NavbarLeft (MenuItem label route _)
+          <li :Just route == mcurrentRoute:.active>
+            <a href=@{route}>#{label}
+        $of _
+
+  <ul .flat>
+    $forall menuType <- menuTypes
+      $case menuType
+        $of NavbarRight (MenuItem label route _)
+          <li :Just route == mcurrentRoute:.active>
+            <a href=@{route}>#{label}
+        $of _
+
+<div .navbar-pushdown>

templates/widgets/navbar.julius

@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+  var ticking = false;
+  var nav = document.querySelector('.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('sticky-navbar', sticky);
+      ticking = false;
+  }
+  checkScroll();
+
+});

templates/widgets/navbar.lucius

@@ -0,0 +1,52 @@
+@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;
+}