Merge branch 'master' into feat/exercises

messages/de.msg

@@ -16,7 +16,7 @@ CourseNewOk        tid@TermIdentifier courseShortHand@Text: Kurs #{termToText ti
 CourseEditOk       tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} wurde erfolgreich geändert.
 CourseNewDupShort  tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht erstellt werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
 CourseEditDupShort tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht geändert werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
-TermCourseListHeading tid@TermIdentifier: Kursübersicht #{termToText tid} 
+TermCourseListHeading tid@TermIdentifier: Kursübersicht #{termToText tid}
 TermCourseListTitle tid@TermIdentifier: Kurse #{termToText tid}
 CourseEditHeading: Kurs editieren/anlegen
 CourseEditTitle: Kurs editieren/anlegen
@@ -31,6 +31,9 @@ SheetDelTitle      tid@TermIdentifier courseShortHand@Text sheetName@Text: Übun
 SheetDelText       submissionNo@Int: Dies kann nicht mehr rückgängig gemacht werden! Alle Einreichungen gehen ebenfalls verloren! Es gibt #{show submissionNo} Abgaben.
 SheetDelOk         tid@TermIdentifier courseShortHand@Text sheetName@Text: #{termToText tid}-#{courseShortHand}: Übungsblatt #{sheetName} gelöscht.
 
+Deadline: Abgabe
+Done: Eingereicht
+
 Unauthorized: Sie haben hierfür keine explizite Berechtigung.
 UnauthorizedAnd l@Text r@Text: #{l} UND #{r}
 UnauthorizedOr  l@Text r@Text: #{l} ODER #{r}
@@ -83,3 +86,5 @@ SheetExercise: Aufgabenstellung
 SheetHint: Hinweise
 SheetSolution: Lösung
 SheetMarking: Korrekturhinweise
+
+MultiFileUploadInfo: (Mehrere Dateien mit Shift oder Strg auswählen)

routes

@@ -30,9 +30,10 @@
 /favicon.ico FaviconR GET                                     !free
 /robots.txt RobotsR GET                                       !free
 
-/        HomeR    GET POST                                    !free
+/        HomeR    GET                                         !free
 /profile ProfileR GET                                         !free
 /users   UsersR   GET                                         -- no tags, i.e. admins only
+/admin/test AdminTestR GET POST
 
 /terms                       TermShowR         GET            !free
 /terms/current               TermCurrentR      GET            !free

src/Application.hs

@@ -43,6 +43,7 @@ import Handler.Common
 import Handler.Home
 import Handler.Profile
 import Handler.Users
+import Handler.Admin
 import Handler.Term
 import Handler.Course
 import Handler.Sheet

src/Foundation.hs

@@ -509,6 +509,7 @@ instance Yesod UniWorX where
             addStylesheet $ StaticR css_tabber_css
             addStylesheet $ StaticR css_fonts_css
             addStylesheet $ StaticR css_icons_css
+            addStylesheet $ StaticR css_fontawesome_css
             $(widgetFile "default-layout")
             $(widgetFile "standalone/modal")
             $(widgetFile "standalone/showHide")
@@ -644,6 +645,22 @@ pageActions (TermCourseListR _) =
       , menuItemAccessCallback' = return True
       }
   ]
+pageActions (HomeR) =
+  [
+--     NavbarAside $ MenuItem
+--       { menuItemLabel = "Benutzer"
+--       , menuItemIcon = Just "users"
+--       , menuItemRoute = UsersR
+--       , menuItemAccessCallback' = return True
+--       }
+--   ,
+    NavbarAside $ MenuItem
+      { menuItemLabel = "AdminDemo"
+      , menuItemIcon  = Nothing
+      , menuItemRoute = AdminTestR
+      , menuItemAccessCallback' = return True
+      }
+  ]
 
 pageActions _ = []
 
@@ -668,6 +685,8 @@ pageHeading (CourseR tid csh CShowR)
 pageHeading CorrectionsR
   = Just $ i18nHeading MsgCorrectionsTitle
 -- TODO: add headings for more single course- and single term-pages
+pageHeading (AdminTestR)
+  = Just $ [whamlet|Internal Code Demonstration Page|]
 pageHeading _
   = Nothing
 
@@ -698,20 +717,20 @@ defaultLinks = -- Define the menu items of the header.
       , menuItemAccessCallback' = isJust <$> maybeAuthPair
       }
   , NavbarAside $ MenuItem
-      { menuItemLabel = "Veranstaltungen"
+      { menuItemLabel = "Kurse"
-      , menuItemIcon = Just "book"
+      , menuItemIcon = Just "calendar-alt"
       , menuItemRoute = CourseListR -- should be CourseListActiveR or similar in the future
       , menuItemAccessCallback' = return True
       }
   , NavbarAside $ MenuItem
       { menuItemLabel = "Semester"
-      , menuItemIcon = Nothing
+      , menuItemIcon = Just "graduation-cap"
       , menuItemRoute = TermShowR
       , menuItemAccessCallback' = return True
       }
   , NavbarAside $ MenuItem
       { menuItemLabel = "Benutzer"
-      , menuItemIcon = Just "user"
+      , menuItemIcon = Just "users"
       , menuItemRoute = UsersR
       , menuItemAccessCallback' = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
       }

src/Handler/Admin.hs

@@ -0,0 +1,60 @@
+{-# LANGUAGE RecordWildCards #-}
+{-# LANGUAGE NoImplicitPrelude #-}
+{-# LANGUAGE OverloadedStrings #-}
+{-# LANGUAGE ViewPatterns #-}
+{-# LANGUAGE TemplateHaskell #-}
+{-# LANGUAGE QuasiQuotes #-}
+{-# LANGUAGE MultiParamTypeClasses #-}
+{-# LANGUAGE TypeFamilies #-}
+{-# LANGUAGE FlexibleContexts #-}
+
+module Handler.Admin where
+
+import Import
+import Handler.Utils
+
+-- import Data.Time
+-- import qualified Data.Text as T
+-- import Data.Function ((&))
+-- import Yesod.Form.Bootstrap3
+
+import Web.PathPieces (showToPathPiece, readFromPathPiece)
+
+-- import Colonnade hiding (fromMaybe)
+-- import Yesod.Colonnade
+
+-- import qualified Data.UUID.Cryptographic as UUID
+
+-- BEGIN - Buttons needed only here
+data CreateButton = CreateMath | CreateInf  -- Dummy for Example
+  deriving (Enum, Eq, Ord, Bounded, Read, Show)
+
+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"
+
+  cssClass CreateMath = BCInfo
+  cssClass CreateInf  = BCPrimary
+-- END Button needed here
+
+
+getAdminTestR :: Handler Html -- Demo Page. Referenzimplementierungen sollte hier gezeigt werden!
+getAdminTestR = do
+  (btnWdgt, btnEnctype) <- generateFormPost (buttonForm :: Form CreateButton)
+  defaultLayout $ do
+    -- setTitle "UniWorkY Admin Testpage"
+    $(widgetFile "adminTest")
+
+postAdminTestR :: Handler Html
+postAdminTestR = do
+  ((btnResult,_), _) <- runFormPost $ buttonForm
+  case btnResult of
+    (FormSuccess CreateInf)  -> setMessage "Informatik-Knopf gedrückt"
+    (FormSuccess CreateMath) -> addMessage "warning" "Knopf Mathematik erkannt"
+    _other -> return ()
+  getAdminTestR
+

src/Handler/Home.hs

@@ -1,57 +1,131 @@
 {-# LANGUAGE RecordWildCards #-}
 {-# LANGUAGE NoImplicitPrelude #-}
 {-# LANGUAGE OverloadedStrings #-}
+{-# LANGUAGE OverloadedLists #-}
 {-# LANGUAGE TemplateHaskell #-}
 {-# LANGUAGE QuasiQuotes #-}
 {-# LANGUAGE MultiParamTypeClasses #-}
+{-# LANGUAGE IncoherentInstances #-} -- why is this needed? Instance for "display deadline" ought to be clear
 {-# LANGUAGE TypeFamilies #-}
 {-# LANGUAGE FlexibleContexts #-}
+{-# LANGUAGE PartialTypeSignatures #-}
 
 module Handler.Home where
 
 import Import
 import Handler.Utils
 
--- import Data.Time
+import Data.Time
 -- import qualified Data.Text as T
 -- import Yesod.Form.Bootstrap3
 
-import Web.PathPieces (showToPathPiece, readFromPathPiece)
+-- import Web.PathPieces (showToPathPiece, readFromPathPiece)
 
--- import Colonnade
+-- import Control.Lens
--- import Yesod.Colonnade
+import Colonnade hiding (fromMaybe, singleton)
+import Yesod.Colonnade
+import qualified Database.Esqueleto as E
 
 -- import qualified Data.UUID.Cryptographic as UUID
 
--- BEGIN - Buttons needed only here
-data CreateButton = CreateMath | CreateInf  -- Dummy for Example
-  deriving (Enum, Eq, Ord, Bounded, Read, Show)
 
-instance PathPiece CreateButton where    -- for displaying the button only, not really for paths
+-- Some constants:
-  toPathPiece   = showToPathPiece
+nrSheetDeadlines :: Int64
-  fromPathPiece = readFromPathPiece
+nrSheetDeadlines   = 10
+offSheetDeadlines :: NominalDiffTime
+offSheetDeadlines   = 15
+--nrExamDeadlines    = 10
+--offExamDeadlines    = 15
+--nrCourseDeadlines  = 10
+--offCourseDeadlines  = 15
 
-instance Button CreateButton where
-  label CreateMath = [whamlet|Ma<i>thema</i>tik|]
-  label CreateInf  = "Informatik"
 
-  cssClass CreateMath = BCInfo
-  cssClass CreateInf  = BCPrimary
--- END Button needed here
 
 getHomeR :: Handler Html
 getHomeR = do
-  (btnWdgt, btnEnctype) <- generateFormPost (buttonForm :: Form CreateButton)
+  muid <- maybeAuthId
+  -- let uid = fromMaybe (Key 1) muid -- TODO: delete me
+  cTime <- liftIO getCurrentTime
+  let fTime = addUTCTime (offSheetDeadlines * nominalDay) cTime
+
+      tableData :: (Maybe (Key User))
+                  -> E.InnerJoin (E.InnerJoin (E.SqlExpr (Entity CourseParticipant))
+                                            (E.SqlExpr (Entity Course           )))
+                                            (E.SqlExpr (Entity Sheet            ))
+                  -> E.SqlQuery ( E.SqlExpr (E.Value (Key Term))
+                                , E.SqlExpr (E.Value Text)
+                                , E.SqlExpr (E.Value Text)
+                                , E.SqlExpr (E.Value UTCTime))
+
+--       tableData Nothing    (                          course `E.InnerJoin` sheet) = do
+--         E.on $ course E.^. CourseId E.==. sheet E.^. SheetCourse
+--         E.where_ $ sheet E.^. SheetActiveTo E.<=. E.val fTime
+--              E.&&. sheet E.^. SheetActiveTo E.>=. E.val cTime
+--         E.limit nrSheetDeadlines
+--         E.orderBy [ E.asc  $ sheet  E.^. SheetActiveTo
+--                   , E.desc $ sheet  E.^. SheetName
+--                   , E.desc $ course E.^. CourseShorthand
+--                   ]
+--         E.limit nrSheetDeadlines
+--         return
+--           ( course  E.^. CourseTerm
+--           , course  E.^. CourseShorthand
+--           , sheet   E.^. SheetName
+--           , sheet   E.^. SheetActiveTo
+--           )
+
+      tableData (Just uid) (participant `E.InnerJoin` course `E.InnerJoin` sheet) = do
+        E.on $ course E.^. CourseId E.==. sheet E.^. SheetCourse
+        E.on $ course E.^. CourseId E.==. participant E.^. CourseParticipantCourse
+        E.where_ $ participant E.^. CourseParticipantUser E.==. E.val uid
+             E.&&. sheet E.^. SheetActiveTo E.<=. E.val fTime
+             E.&&. sheet E.^. SheetActiveTo E.>=. E.val cTime
+        E.orderBy [ E.asc  $ sheet  E.^. SheetActiveTo
+                  , E.desc $ sheet  E.^. SheetName
+                  , E.desc $ course E.^. CourseShorthand
+                  ]
+        E.limit nrSheetDeadlines
+        return
+          ( course  E.^. CourseTerm
+          , course  E.^. CourseShorthand
+          , sheet   E.^. SheetName
+          , sheet   E.^. SheetActiveTo
+          )
+
+      colonnade :: Colonnade Sortable (DBRow (E.Value (Key Term), E.Value Text, E.Value Text, E.Value UTCTime)) (Cell UniWorX)
+      colonnade = mconcat
+        [ -- dbRow
+          sortable (Just "course") (i18nCell MsgCourse) $ \DBRow{ dbrOutput=(E.Value tid, E.Value csh, _, _) } ->
+            cell [whamlet|<a href=@{CourseR tid csh CShowR}>#{display csh}|]
+        , sortable (Just "sheet") (i18nCell MsgSheet) $ \DBRow{ dbrOutput=(E.Value tid, E.Value csh, E.Value shn, _) } ->
+            cell [whamlet|<a href=@{CSheetR tid csh shn SShowR}>#{display shn}|]
+        , sortable (Just "deadline") (i18nCell MsgDeadline) $ \DBRow{ dbrOutput=(_, _, _, E.Value deadline) } ->
+            textCell $ display deadline
+        , sortable (Just "done") (i18nCell MsgDone) $ \DBRow{ dbrOutput=(_, _, _, _) } ->
+            textCell $ "?"
+        ]
+  sheetTable <- dbTable def $ DBTable
+    { dbtSQLQuery  = tableData muid
+    , dbtColonnade = colonnade
+    , dbtSorting   =  [ ( "term"
+                        , SortColumn $ \(_ `E.InnerJoin` course `E.InnerJoin` _ ) -> course E.^. CourseTerm
+                        )
+                      , ( "course"
+                        , SortColumn $ \(_ `E.InnerJoin` course `E.InnerJoin` _ ) -> course E.^. CourseShorthand
+                        )
+                        -- TODO
+                      ]
+    , dbtFilter    =  mempty {- [ ( "term"
+                        , FilterColumn $ \(course `E.InnerJoin` _ `E.InnerJoin` _ ) tids -> if
+                            | Set.null tids -> E.val True :: E.SqlExpr (E.Value Bool)
+                            | otherwise     -> course E.^. CourseTerm `E.in_` E.valList (Set.toList tids)
+                        )
+                        ] -}
+    , dbtAttrs     = tableDefault
+    , dbtIdent     = "upcomingdeadlines" :: Text
+    }
+
+
   defaultLayout $ do
     setTitle "Willkommen zum Uniworky Test!"
     $(widgetFile "home")
-
-
-postHomeR :: Handler Html
-postHomeR = do
-  ((btnResult,_), _) <- runFormPost $ buttonForm
-  case btnResult of
-    (FormSuccess CreateInf)  -> setMessage "Informatik-Knopf gedrückt"
-    (FormSuccess CreateMath) -> addMessage "warning" "Knopf Mathematik erkannt"
-    _other -> return ()
-  getHomeR

src/Handler/Utils/Form.hs

@@ -14,7 +14,7 @@
 module Handler.Utils.Form where
 
 import Handler.Utils.Form.Types
-
+import Handler.Utils.Templates
 
 import Handler.Utils.DateTime
 

static/css/fonts.css

@@ -1,9 +1,29 @@
 @font-face {
   font-family: 'Glyphicons Halflings';
-  src: url('../fonts/glyphicons-halflings-regular.eot');
+  src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot');
-  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
+  src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
-       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
+       url('../fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'),
-       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
+       url('../fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'),
-       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
+       url('../fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'),
-       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+       url('../fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+}
+
+/*!
+ * Font Awesome Free 5.1.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+ @font-face{
+  font-family:"Font Awesome 5 Free";
+  font-style:normal;
+  font-weight:900;
+  src:url(../fonts/fontawesome/fa-solid-900.eot);
+  src:url(../fonts/fontawesome/fa-solid-900.eot?#iefix) format("embedded-opentype"),
+      url(../fonts/fontawesome/fa-solid-900.woff2) format("woff2"),
+      url(../fonts/fontawesome/fa-solid-900.woff) format("woff"),
+      url(../fonts/fontawesome/fa-solid-900.ttf) format("truetype"),
+      url(../fonts/fontawesome/fa-solid-900.svg#fontawesome) format("svg");
+}
+.fa,.fas{
+  font-family:"Font Awesome 5 Free";
+  font-weight:900;
 }

static/css/icons.css

@@ -26,6 +26,13 @@
 .glyphicon--user::before {
   content: '\e008';
 }
+.glyphicon--group::before {
+  /* TODO: get updated glyphicons for group-icon */
+  content: '\e284';
+}
+.glyphicon--education::before {
+  content: '\e233';
+}
 .glyphicon--login::before {
   content: '\e161';
 }

templates/adminTest.hamlet

@@ -0,0 +1,44 @@
+<div .container>
+  <h1>Uniworky - Admin Demopage
+
+  <p>
+    Diese interne Seite dient lediglich zum Testen diverser Funktionalitäten
+    und zur Demonstration der verschiedenen Hilfsfunktionen/Module.
+
+    Der Handler sollte jeweils aktuelle Beispiele für alle möglichen Funktionalitäten enthalten, so dass man immer weiß, wo man nachschlagen kann.
+
+
+<div .container>
+  <h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte
+
+  <ul>
+    <li .list-group-item>
+      <a href=@{UsersR}>Benutzer Verwaltung
+
+    <li .list-group-item>
+      <a href=@{TermShowR}>Semester Verwaltung
+      <a href=@{TermEditR}>Neues Semester anlegen
+
+    <li .list-group-item>
+                        <a href=@{CourseNewR}>Kurse anlegen
+
+    <li .list-group-item>
+      <a href=@{SubmissionListR}>Dateien hochladen und abrufen
+
+<hr>
+<div .container>
+  <h2>Funktionen zum Testen
+
+  <ul>
+    <li>
+      Knopf-Test:
+        <form .form-inline method=post action=@{AdminTestR} enctype=#{btnEnctype}>
+          ^{btnWdgt}
+    <li><br>
+      Modals:
+      ^{modal ".toggler1" Nothing}
+      <a href="/" .btn.toggler1>Klick mich für Ajax-Test
+        <noscript>(Für Modals bitte JS aktivieren)</noscript>
+      ^{modal ".toggler2" (Just "Test Inhalt für Modal")}
+      <div .btn.toggler2>Klick mich für Content-Test
+        <noscript>(Für Modals bitte JS aktivieren)</noscript>

templates/course.hamlet

@@ -14,7 +14,7 @@
       <tr>
         <th #website>Website
         <td>
-          <a href=#{link}>#{link}
+          <a href=#{link} target="_blank" rel="noopener" title="Website des Kurses">#{link}
     <tr>
       <th #participants>Teilnehmer
       <td>
@@ -35,7 +35,7 @@
         $# if allowed to register
         <div .course__registration.container>
           <button class="btn btn-primary">
-            <a href="#">Anmelden
+            <a href="#">TODO: Kurs-Anmeldung
 
   $# <form method=post action=@{CourseR tid csh CShow} enctype=#{regEnctype}>
   $#   ^{regWidget}
@@ -45,52 +45,10 @@
     <div .tab data-tab-name="Übungsblätter">
       ^{modal "#modal-toggler__new-sheet" Nothing}
       <h3 .tab-title>Übungsblätter
-      <table .table.table-striped.table-hover>
+      <h1>TODO: Sortierbare Tabelle der bisherigen Übungsblätter
-        <thead>
-          <tr>
-            <th>Blatt
-            <th>Abgabe ab
-            <th>Abgabe bis
-            <th>Bewertung</th>
-        <tbody>
-          <tr>
-            <td>
-              <a href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 1
-            <td>Do 08.04.18
-            <td>Do 11.04.18
-            <td>NotGraded
-          <tr>
-            <td>
-              <a href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 2
-            <td>Do 15.04.18
-            <td>Do 18.04.18
-            <td>NotGraded
     <div .tab data-tab-name="Übungsgruppen">
       <h3 .tab-title>Übungsgruppen
-      <table .table.table-striped.table-hover>
+      <h1>TODO: Sortierbare Tabelle der Übungsgruppen
-        <thead>
-          <tr>
-            <th>Name
-            <th>Termin
-            <th>Raum
-            <th>Studenten
-            <th>Tutor
-            <th>Anmeldung bis
-        <tbody>
-          <tr>
-            <td>Gruppe 1
-            <td>Montag 10:00 - 12:00
-            <td>N/A
-            <td>2/10
-            <td>Tutor1 Tutoren
-            <td>Do 21.02.2019, 19:00
-          <tr>
-            <td>Gruppe 2
-            <td>Montag 12:00 - 14:00
-            <td>N/A
-            <td>0/10
-            <td>Assistant1 Assistant
-            <td>Di 21.02.2017, 19:00
     <div .tab data-tab-name="Klausuren">
       <h3 .tab-title>Klausuren
       <div>...

templates/default-layout.hamlet

@@ -14,9 +14,11 @@
 
     <div .main__content-body>
 
-      $maybe headline <- contentHeadline
+      <h1>
-        <h1>
+        $maybe headline <- contentHeadline
           ^{headline}
+        $nothing
+          HEADLINE MISSING!
 
       <!-- prime page actions -->
       ^{pageactionprime}

templates/default-layout.lucius

@@ -129,6 +129,21 @@ h4 {
   margin: 0;
 }
 
+@media (max-width: 768px) {
+
+  h1 {
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+}
+
 /* LAYOUT */
 .main {
   min-height: calc(100vh - var(--header-height));
@@ -157,7 +172,7 @@ h4 {
 }
 
 .main__content-body {
-  padding: 10px 40px 60px;
+  padding: 0 40px 60px;
 }
 
 @media (max-width: 768px) {

templates/home.hamlet

@@ -1,46 +1,21 @@
 <div .container>
-  <h1>Uniworky - Demo
   <h3>
-    Testumgebung für die Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
+    Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
-  <p>
-    Die Reimplementierung von
-    UniWorX ist noch nicht abgeschlossen.
 
   <div .alert .alert-danger>
-    <div .alert__content>Das System ist noch nicht produktiv einsetzbar
+    <div .alert__content>
+      Vorabversion!
+      Die Implementierung von
+      UniWorkY ist noch nicht abgeschlossen.
 
-<hr>
+  <h1>Anstehende Übungsblätter
-<div .container>
+    <div .container>
-  <h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte
+      $maybe _ <- muid
+        ^{sheetTable}
 
-  <ul>
+  <h1>Anstehende Klausuren
-    <li .list-group-item>
+    TODO
-      <a href=@{UsersR}>Benutzer Verwaltung
 
-    <li .list-group-item>
+  <h1>Anstehende Kursanmeldungen
-      <a href=@{TermShowR}>Semester Verwaltung
+    TODO
-      <a href=@{TermEditR}>Neues Semester anlegen
 
-    <li .list-group-item>
-                        <a href=@{CourseNewR}>Kurse anlegen
-
-    <li .list-group-item>
-      <a href=@{SubmissionListR}>Dateien hochladen und abrufen
-
-<hr>
-<div .container>
-  <h2>Funktionen zum Testen
-
-  <ul>
-    <li>
-      Knopf-Test:
-        <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
-          ^{btnWdgt}
-    <li><br>
-      Modals:
-      ^{modal ".toggler1" Nothing}
-      <a href="/" .btn.toggler1>Klick mich für Ajax-Test
-        <noscript>(Für Modals bitte JS aktivieren)</noscript>
-      ^{modal ".toggler2" (Just "Test Inhalt für Modal")}
-      <div .btn.toggler2>Klick mich für Content-Test
-        <noscript>(Für Modals bitte JS aktivieren)</noscript>

templates/multiFileField.hamlet

@@ -7,8 +7,15 @@ $forall FileUploadInfo{..} <- fileInfos
       <label for=#{fuiHtmlId}>
 
 $# new files
-<input type="file" name=#{fieldName} multiple>
+<input type="file" name=#{fieldName} id=#{fieldId} multiple :req:required="required">
+
+<div .file-input__multi-info>
+    _{MsgMultiFileUploadInfo}
 
 <div .file-input__unpack>
-  <label for=#{fieldId}_zip>ZIPs entpacken
+  <label for=#{fieldId}_zip>ZIPs automatisch entpacken
-  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips} :req:required>
+  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
+  <span .unpack-zip-info-toggler>?
+
+$# TODO: make modal available in this scope
+    ^{modal ".unpack-zip-info-toggler" (Just "Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.")}

templates/multiFileField.lucius

@@ -0,0 +1,38 @@
+.file-input__unpack {
+  font-size: .9rem;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+
+  .checkbox {
+    display: inline-block;
+    margin-left: 5px;
+  }
+}
+
+.file-input__multi-info {
+  font-size: .9rem;
+  font-style: italic;
+  margin-top: 10px;
+  color: var(--color-fontsec);
+}
+
+.unpack-zip-info-toggler {
+  background-color: var(--color-dark);
+  border-radius: 50%;
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 1.2rem;
+  color: white;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 10px;
+}
+
+.file-input__list {
+  margin-left: 15px;
+  margin-top: 10px;
+  font-weight: 600;
+}

templates/standalone/inputs.julius

@@ -4,133 +4,67 @@
   window.utils = window.utils || {};
 
   // allows for multiple file uploads with separate inputs
-  window.utils.reactiveFileUpload = function(input, formGroup) {
+  window.utils.initializeFileUpload = function(input) {
-    var currValidInputCount = 0;
+    var isMulti = input.hasAttribute('multiple');
-    var addMore = false;
+    var fileList = isMulti ? addFileList() : null;
-    var inputName = input.getAttribute('name');
+    var label = addFileLabel();
-    var isMulti = input.hasAttribute('multiple') ? true : false;
-    var wrapper = formGroup;
-    // FileInput PseudoClass
-    function FileInput(container, input, label, remover) {
-      this.container = container;
-      this.input = input;
-      this.label = label;
-      this.remover = remover;
-      addListener(this);
 
-      this.addTo = function(parentElement) {
+    function renderFileList(files) {
-        parentElement.appendChild(this.container);
+      fileList.innerHTML = '';
-      }
+      Array.from(files).forEach(function(file, index) {
-      this.remove = function() {
+        var fileDisplayEl = document.createElement('li');
-        this.container.remove();
+        fileDisplayEl.innerHTML = file.name;
-      }
+        fileList.appendChild(fileDisplayEl);
-      this.wasValid = function() {
+      });
-        return this.container.classList.contains('file-input__container--valid');
-      }
     }
-    function addNextInput() {
+
-      var inputs = wrapper.querySelectorAll('.file-input__container');
+    function updateLabel(files) {
-      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
+      if (files.length) {
-        makeInput(inputName).addTo(wrapper);
-      }
-    }
-    // updates submitbutton and form-group-stripe
-    function updateForm() {
-      var submitBtn = formGroup.parentElement.querySelector('[type=submit]');
-      formGroup.classList.remove('form-group--has-error');
-      if (currValidInputCount > 0) {
-        if (formGroup.classList.contains('form-group')) {
-          formGroup.classList.add('form-group--valid')
-        }
         if (isMulti) {
-          addNextInput();
+          label.innerText = files.length + ' Dateien ausgwählt';
+        } else {
+          label.innerHTML = files[0].name;
         }
       } else {
-        if (formGroup.classList.contains('form-group')) {
+        resetFileLabel();
-          formGroup.classList.remove('form-group--valid')
-        }
       }
     }
-    // addseventlistener destInput
-    function addListener(fileInput) {
-      fileInput.input.addEventListener('change', function(event) {
-        if (fileInput.input.value.length > 0) {
-          // update label
-          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
-          var fileName = filePath[filePath.length - 1];
-          fileInput.label.innerHTML = fileName;
-          // increase count if this field was empty previously
-          if (!fileInput.wasValid()) {
-            currValidInputCount++;
-          }
-          fileInput.container.classList.add('file-input__container--valid')
-          // show next input
-        } else {
-          if (isMulti) {
-            currValidInputCount--;
-          }
-          clearInput(fileInput);
-        }
-        updateForm();
-      });
-      fileInput.input.addEventListener('focus', function() {
-        fileInput.container.classList.add('pseudo-focus');
-      });
-      fileInput.input.addEventListener('blur', function() {
-        fileInput.container.classList.remove('pseudo-focus');
-      });
-      fileInput.remover.addEventListener('click', function() {
-        if (fileInput.wasValid()) {
-          currValidInputCount--;
-        }
-        clearInput(fileInput);
-      });
-    }
 
-    // clears or removes fileinput based on multi-file or not
+    function addFileList() {
-    function clearInput(fileInput) {
+      var list = document.createElement('ol');
-      if (isMulti) {
+      list.classList.add('file-input__list');
-        fileInput.remove();
+      var unpackEl = input.parentElement.querySelector('.file-input__unpack');
+      if (unpackEl) {
+        input.parentElement.insertBefore(list, unpackEl);
       } else {
-        fileInput.container.classList.remove('file-input__container--valid')
+        input.parentElement.appendChild(list);
-        fileInput.label.innerHTML = '';
       }
-      updateForm();
+      return list;
     }
-    // create new wrapped input element with name name
+
-    function makeInput(name) {
+    function addFileLabel() {
-      var cont =      document.createElement('div');
+      var label = document.createElement('label');
-      var desc =      document.createElement('label');
+      label.classList.add('file-input__label');
-      var nextInput = document.createElement('input');
+      label.setAttribute('for', input.id);
-      var remover =   document.createElement('div');
+      input.parentElement.insertBefore(label, input);
-      cont.classList.add('file-input__container');
+      return label;
-      desc.classList.add('file-input__label', 'btn');
-      nextInput.classList.add('js-file-input');
-      desc.setAttribute('for', name + '-' + currValidInputCount);
-      remover.classList.add('file-input__remover');
-      nextInput.setAttribute('id', name + '-' + currValidInputCount);
-      nextInput.setAttribute('name', name);
-      nextInput.setAttribute('type', 'file');
-      cont.appendChild(nextInput);
-      cont.appendChild(desc);
-      cont.appendChild(remover);
-      return new FileInput(cont, nextInput, desc, remover);
     }
+
+    function resetFileLabel() {
+      // interpolate translated String here
+      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
+    }
+
     // initial setup
-    function setup() {
+    resetFileLabel();
-      var newInput = makeInput(inputName);
+    input.classList.add('file-input__input--hidden');
+    input.addEventListener('change', function() {
       if (isMulti) {
-        wrapper = document.createElement('div');
+        renderFileList(input.files);
-        wrapper.classList.add('file-input__wrapper');
-        console.log(wrapper);
-        // TODO: fix file input
-        formGroup.insertBefore(wrapper, input);
       }
-      input.remove();
+
-      newInput.addTo(wrapper);
+      updateLabel(input.files);
-      updateForm();
+    });
-    }
-    setup();
   }
 
   // to remove previously uploaded files
@@ -167,6 +101,7 @@
 
     if (!input.parentElement.classList.contains(type)) {
       var parentEl = input.parentElement;
+      var siblingEl = input.nextElementSibling;
       var wrapperEl = document.createElement('div');
       var labelEl = document.createElement('label');
       wrapperEl.classList.add(type);
@@ -174,7 +109,11 @@
       wrapperEl.appendChild(input);
       wrapperEl.appendChild(labelEl);
 
-      parentEl.appendChild(wrapperEl);
+      if (siblingEl) {
+        parentEl.insertBefore(wrapperEl, siblingEl);
+      } else {
+        parentEl.appendChild(wrapperEl);
+      }
     }
   }
 
@@ -194,11 +133,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // initialize file-upload-fields
   Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
-    var formGroup = inp.parentNode;
+    window.utils.initializeFileUpload(inp);
-    while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
-      formGroup = formGroup.parentNode;
-    }
-    window.utils.reactiveFileUpload(inp, formGroup);
   });
 
   // initialize file-checkbox-fields

templates/standalone/inputs.lucius

@@ -11,16 +11,34 @@ form {
   grid-template-columns: 1fr 3fr;
   grid-gap: 5px;
   justify-content: flex-start;
-  align-items: baseline;
+  align-items: flex-start;
+  padding: 4px;
   border-left: 2px solid transparent;
 
   + .form-group {
-    margin-top: 17px;
+    margin-top: 13px;
   }
 }
 
 .form-group__label {
   font-weight: 600;
+  padding-top: 6px;
+}
+
+.form-group--required {
+
+  .form-group__label::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+}
+
+.form-group--has-error {
+  background-color: rgba(255, 0, 0, 0.1);
+
+  input, textarea {
+    border-color: var(--color-error) !important;
+  }
 }
 
 @media (max-width: 768px) {
@@ -63,33 +81,6 @@ input[type*="time"] {
   min-width: 240px;
 }
 
-.form-group--required {
-
-  .form-group__label::before {
-    content: '*';
-    position: absolute;
-    left: -14px;
-  }
-
-  input, textarea {
-    border-bottom-color: var(--color-primary);
-  }
-}
-
-.form-group--valid {
-
-  input, textarea {
-    border-bottom-color: var(--color-success);
-  }
-}
-
-.form-group--has-error {
-
-  input, textarea {
-    border-bottom-color: var(--color-error);
-  }
-}
-
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="url"]:focus,
@@ -120,6 +111,7 @@ textarea {
   border: 1px solid #dbdbdb;
   border-radius: 2px;
   box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+  vertical-align: top;
 }
 
 textarea:focus {
@@ -128,6 +120,20 @@ textarea:focus {
   outline: 0;
 }
 
+/* OPTIONS */
+select,
+option {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 4px 13px;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  outline: 0;
+  color: #363636;
+  background-color: #f3f3f3;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+}
+
 /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
 input[type="checkbox"] {
   position: relative;
@@ -176,9 +182,10 @@ input[type="checkbox"]:checked::after {
 
   label {
     display: block;
-    height: 30px;
+    height: 24px;
-    width: 30px;
+    width: 24px;
-    background-color: var(--color-grey);
+    background-color: #f3f3f3;
+    box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
     border-radius: 4px;
     color: white;
     cursor: pointer;
@@ -188,25 +195,14 @@ input[type="checkbox"]:checked::after {
   label::after {
     content: '';
     position: absolute;
-    top: 14px;
+    top: 11px;
-    left: 5px;
+    left: 3px;
     display: block;
-    width: 20px;
+    width: 18px;
-    height: 20px;
+    height: 2px;
-    background-color: white;
+    background-color: var(--color-font);
     transition: all .2s;
-  }
+    transform: scale(0.5, 0.1);
-
-  label::before {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.1, 0.1);
-  }
-
-  label::after {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.1, 0.1);
   }
 
   :checked + label {
@@ -215,10 +211,12 @@ input[type="checkbox"]:checked::after {
   }
 
   :checked + label::before {
+    background-color: white;
     transform: scale(1, 1) rotate(45deg);
   }
 
   :checked + label::after {
+    background-color: white;
     transform: scale(1, 1) rotate(-45deg);
   }
 }
@@ -243,114 +241,17 @@ input[type="checkbox"]:checked::after {
 }
 
 /* CUSTOM FILE INPUT */
-input[type="file"].js-file-input {
+.file-input__label {
-  color: white;
-  width: 0.1px;
-  height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
-  outline: 0;
-  border: 0;
-}
-.file-input__wrapper {
-  grid-column-start: 2;
-}
-.file-input__container,
-.file-checkbox__container,
-.file-input__unpack {
-  grid-column-start: 2;
-  margin: 4px 0;
-}
-.file-input__label,
-.file-input__remover,
-.file-checkbox__label,
-.file-checkbox__remover {
-  display: block;
-  border-radius: 2px;
-  padding: 5px 13px;
-  color: var(--color-lightwhite);
   cursor: pointer;
-}
+  display: inline-block;
-.file-input__label,
-.file-checkbox__label {
-  text-align: left;
-  position: relative;
-  height: 30px;
-}
-.file-checkbox__label {
-  background-color: var(--color-grey);
-  text-decoration: line-through;
-}
-.file-input__label.btn,
-.file-checkbox__label.btn {
-  padding: 5px 13px;
-}
-.file-input__label::after,
-.file-input__label::before {
-  position: absolute;
-  content: '';
-  background-color: white;
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  top: 50%;
-  left: 12px;
-  left: 50%;
-}
-
-.file-input__label::after {
-  transform: translate(-50%, -50%) rotate(90deg);
-}
-.file-input__label::before {
-  transform: translate(-50%, -50%);
-}
-.file-checkbox__checkbox {
-  margin-left: 10px;
-}
-.file-input__remover {
-  display: none;
-  width: 40px;
-  height: 30px;
-  text-align: center;
-  background-color: var(--color-warning);
-  position: relative;
-  margin-left: 10px;
-}
-.file-input__remover::before {
-  position: absolute;
-  content: '';
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  left: 12px;
-  background-color: white;
-}
-.file-input__container--valid > .file-input__label {
   background-color: var(--color-light);
+  color: white;
+  padding: 10px 17px;
+  border-radius: 3px;
 }
-.file-checkbox__container--checked > .file-checkbox__label {
+.file-input__list {
-  text-decoration: none;
-  background-color: var(--color-lighter);
 
-  &.btn:hover {
-    background-color: var(--color-lighter);
-    text-decoration: line-through;
-  }
 }
-.file-input__container--valid > .file-input__label::before,
+.file-input__input--hidden {
-.file-input__container--valid > .file-input__label::after {
+  display: none;
-  content: none;
-}
-.file-input__container--valid > .file-input__remover {
-  display: block;
-}
-@media (max-width: 768px) {
-  .file-input__wrapper,
-  .file-input__container,
-  .file-checkbox__container,
-  .file-input__unpack {
-    grid-column-start: 1;
-  }
 }

templates/table/colonnade.lucius

@@ -49,13 +49,20 @@
     font-size: 16px;
     color: #fff;
     line-height: 1.4;
-    padding-top: 20px;
+    padding-top: 10px;
-    padding-bottom: 15px;
+    padding-bottom: 10px;
     font-weight: bold;
     text-align: left;
   }
 }
 
+@media (max-width: 1200px) {
+
+  .table th {
+    padding: 4px 6px;
+  }
+}
+
 .table__td-content {
   max-height: 100px;
   overflow-y: auto;

templates/widgets/asidenav.hamlet

@@ -1,19 +1,9 @@
 $newline never
 <aside .main__aside>
   <div .asidenav>
-    <div .asidenav__box>
-      <ul .asidenav__list>
-        $forall menuType <- menuTypes
-          $case menuType
-            $of NavbarAside (MenuItem label mIcon route _)
-              <li .asidenav__list-item :highlight route:.asidenav__list-item--active>
-                <a .asidenav__link-wrapper href=@{route}>
-                  <div .glyphicon.glyphicon--#{fromMaybe "none" mIcon}>
-                  <div .asidenav__link-label>#{label}
-            $of _
-
     <div .asidenav__box>
       <h3 .asidenav__box-title>
+        $# TODO: this has to come from favourites somehow. Show favourites from older terms?
         WiSe 17/18
       <ul .asidenav__list>
         $forall (Course{..}, courseRoute, pageActions) <- favourites

templates/widgets/asidenav.lucius

@@ -6,16 +6,26 @@
   flex: 0 0 300px;
   min-height: calc(100% - 80px);
   transition: all .2s ease-out;
-  width: 300px;
+  width: 24%;
 
   ~ .main__content {
-    padding-left: 300px;
+    padding-left: 24%;
     transition: padding-left .2s ease-out;
   }
 }
 
+/* maximum width of 300px for wide screens */
+@media (min-width: 1200px) {
+  .main__aside {
+    width: 300px;
+
+    ~ .main__content {
+      padding-left: 300px;
+    }
+  }
+}
+
 .asidenav {
-  width: 300px;
   color: white;
 }
 
@@ -33,7 +43,6 @@
 .asidenav__list-item {
   position: relative;
   color: var(--color-lightwhite);
-  padding-left: 10px;
 
   &:hover {
     color: var(--color-link);
@@ -61,6 +70,14 @@
   }
 }
 
+/* small list-item-padding for medium to large screens */
+@media (min-width: 1024px) {
+
+  .asidenav__list-item {
+    padding-left: 10px;
+  }
+}
+
 .asidenav__list-item--active {
   background-color: var(--color-lightwhite);
 
@@ -79,7 +96,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 7px 0;
+  padding: 7px 10px;
   justify-content: flex-start;
   color: var(--color-lightwhite);
   z-index: 1;
@@ -100,7 +117,6 @@
 
 .asidenav__link-label {
   line-height: 1;
-  padding-left: 13px;
 }
 
 /* hover sub-menus */
@@ -153,11 +169,6 @@
       padding-left: 50px;
     }
 
-    &.pseudo-hover {
-      overflow: visible;
-      flex-basis: 300px;
-    }
-
     .asidenav__box-title {
       width: 50px;
       padding: 1px;
@@ -193,22 +204,14 @@
       }
     }
 
-    .asidenav__list-item:hover {
-
-      > .asidenav__link-wrapper {
-        color: var(--color-dark);
-        background-color: var(--color-lightwhite);
-      }
-    }
-
     .asidenav__link-wrapper {
       color: var(--color-lightwhite);
       padding: 0;
-      // background-color: var(--color-dark);
     }
 
+    .asidenav__nested-list,
     .asidenav__link-label {
-      padding-left: 0;
+      display: none;
     }
 
     .asidenav__list-item--active {
@@ -218,5 +221,6 @@
         color: var(--color-dark);
       }
     }
+
   }
 }

templates/widgets/breadcrumbs.hamlet

@@ -4,4 +4,4 @@ $newline never
     $forall bc <- parents
       <li .breadcrumbs__item>
         <a .breadcrumbs__link href="@{fst bc}">#{snd bc}
-    <li ..breadcrumbs__item.breadcrumbs__last-item>#{title}
+    <li .breadcrumbs__item>#{title}

templates/widgets/breadcrumbs.lucius

@@ -1,30 +1,42 @@
 .breadcrumbs__container {
   position: relative;
-  align-self: flex-end;
+  color: var(--color-font);
-  background-color: var(--color-dark);
+  margin-left: 40px;
-  color: white;
+  margin-top: 25px;
-  transition: margin-bottom .2s ease;
 }
 
-.breadcrumbs__container--animated {
+@media (max-width: 768px) {
-  transition: left .2s ease;
+
+  .breadcrumbs__container {
+    margin-left: 20px;
+  }
 }
 
 .breadcrumbs__link {
-  color: var(--color-lightwhite);
 
   &:hover {
-    color: var(--color-lightwhite);
+    color: var(--color-fontsec);
   }
 }
 
 .breadcrumbs__item {
-  padding-left: 25px;
   padding-right: 14px;
   position: relative;
   line-height: 28px;
   opacity: 0.8;
   z-index: 1;
+  margin-right: 10px;
+
+  &:last-child {
+    margin-right: 0;
+    font-weight: 800;
+    color: var(--color-dark);
+    top: 1px;
+
+    &::after {
+      content: none;
+    }
+  }
 
   --color-separator: var(--color-primary);
 
@@ -36,37 +48,13 @@
   &::after {
     content: '';
     position: absolute;
-    top: 4px;
+    top: 11px;
-    right: -13px;
+    right: 0;
-    width: 18px;
+    width: 7px;
-    height: 18px;
+    height: 7px;
-    border-bottom: 2px solid var(--color-separator);
+    border-bottom: 1px solid var(--color-separator);
-    border-right: 2px solid var(--color-separator);
+    border-right: 1px solid var(--color-separator);
     transform: rotate(-45deg);
     z-index: 10;
   }
 }
-
-.breadcrumbs__last-item {
-  padding-right: 20px;
-  background-color: var(--color-separator);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: -8px;
-    width: 18px;
-    height: 18px;
-    background-color: var(--color-dark);
-    border-bottom: 2px solid var(--color-primary);
-    border-right: 2px solid var(--color-primary);
-    transform: rotate(-45deg);
-    z-index: 10;
-  }
-
-  &::after {
-    background-color: var(--color-separator);
-    right: -8px;
-  }
-}

templates/widgets/form.hamlet

@@ -6,7 +6,6 @@ $case formLayout
       <div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
         $if not (Blaze.null $ fvLabel view)
           <label .form-group__label for=#{fvId view}>#{fvLabel view}
-        $# TODO: inputs should have proper placeholders
         <div .form-group__input>
           $# FIXME: file-input does not have `required` attribute, although set on form-group
           ^{fvInput view}

templates/widgets/form.julius

@@ -3,23 +3,25 @@
 
   window.utils = window.utils || {};
 
-  // registers input-listener for each element in <elements> (array) and
+  // registers input-listener for each element in <inputs> (array) and
-  // enables <button> if <validation> for these elements returns true
+  // enables <button> if <validation> for these inputs returns true
-  window.utils.reactiveButton = function(elements, button, validation) {
+  window.utils.reactiveButton = function(form, button, validation) {
-    if (elements.length == 0) {
+    var requireds = Array.from(form.querySelectorAll('[required]'));
+    if (requireds.length == 0) {
       return false;
     }
-    var checkboxes = elements[0].getAttribute('type') === 'checkbox';
-    var eventType = checkboxes ? 'change' : 'input';
     updateButtonState();
-    elements.forEach(function(el) {
+
+    requireds.forEach(function(el) {
+      var checkbox = el.getAttribute('type') === 'checkbox';
+      var eventType = checkbox ? 'change' : 'input';
       el.addEventListener(eventType, function() {
         updateButtonState();
       });
     });
 
     function updateButtonState() {
-      if (validation.call(null, elements) === true) {
+      if (validation.call(null, requireds) === true) {
         button.removeAttribute('disabled');
       } else {
         button.setAttribute('disabled', 'true');
@@ -33,19 +35,21 @@ document.addEventListener('DOMContentLoaded', function() {
   // auto reactiveButton submit-buttons with required fields
   var forms = document.querySelectorAll('form');
   Array.from(forms).forEach(function(form) {
-    var requireds = form.querySelectorAll('[required]');
     var submitBtn = form.querySelector('[type=submit]');
-    if (submitBtn && requireds) {
+    if (submitBtn) {
-      window.utils.reactiveButton(Array.from(requireds), submitBtn, function validateForm(inputs) {
+      window.utils.reactiveButton(form, submitBtn, validateForm);
-        var done = true;
-        inputs.forEach(function(inp) {
-          var len = inp.value.trim().length;
-          if (done && len === 0) {
-            done = false;
-          }
-        });
-        return done;
-      });
     }
   });
+
+  function validateForm(inputs) {
+    var done = true;
+    inputs.forEach(function(inp) {
+      var len = inp.value.trim().length;
+      if (done && len === 0) {
+        done = false;
+      }
+    });
+    return done;
+  }
+
 });

templates/widgets/navbar.hamlet

@@ -2,7 +2,17 @@ $newline never
 <div .navbar-container>
   <nav .navbar.js-sticky-navbar>
 
-    <div .navbar__logo>
+    <a href="/" .navbar__logo>
+
+    <ul .navbar__list.list--inline>
+        $forall menuType <- menuTypes
+          $case menuType
+            $of NavbarAside (MenuItem label mIcon route _)
+              <li .navbar__list-item :highlight route:.navbar__list-item--active>
+                <a .navbar__link-wrapper href=@{route}>
+                  <i .fas.fa-#{fromMaybe "none" mIcon}>
+                  <div .navbar__link-label>#{label}
+            $of _
 
     <ul .navbar__list.list--inline>
       $forall menuType <- menuTypes

templates/widgets/navbar.julius

@@ -8,32 +8,23 @@
 
     init();
     function init() {
-      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;
-      sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 100);
-      nav.classList.toggle('navbar--sticky', sticky);
-      ticking = false;
-    }
-
-    function addListener() {
       window.addEventListener('scroll', function (e) {
         if (!ticking) {
-          window.requestAnimationFrame(checkScroll);
+          window.requestAnimationFrame(update);
           ticking = true;
         }
       }, false);
+      update();
+    }
+
+    function update() {
+      var sticky = window.scrollY > 0;
+      sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 200);
+      nav.classList.toggle('navbar--sticky', sticky);
+      ticking = false;
     }
   }
 
-
 })();
 
 document.addEventListener('DOMContentLoaded', function () {

templates/widgets/navbar.lucius

@@ -6,8 +6,8 @@
   justify-content: space-between;
   width: 100%;
   height: var(--header-height);
-  padding-right: 5vw;
+  padding-right: 2vw;
-  padding-left: 20px;
+  padding-left: calc(24% + 40px);
   background: var(--color-darker); /* Old browsers */
   background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */
@@ -17,28 +17,36 @@
   top: 0;
   left: 0;
   overflow: hidden;
-  transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1);
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
+}
+
+@media (min-width: 1200px) {
+
+  .navbar {
+    padding-left: 340px;
+  }
 }
 
 @media (max-width: 768px) {
 
   .navbar {
-    padding-left: 90px;
+    padding: 0px;
-  }
-}
-
-@media (max-width: 500px) {
-
-  .navbar {
-    padding-left: 20px;
   }
 }
 
 .navbar__logo {
+  position: absolute;
+  top: 15px;
+  left: 20px;
   transition: all .2s ease;
   transform-origin: left;
   width: 0px;
+  color: var(--color-lightwhite);
+
+  &:hover {
+    color: var(--color-lightwhite);
+  }
 
   &::before {
     content: 'UniWorkY';
@@ -49,43 +57,21 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
 
   .navbar__logo {
     transform: scale(0.7);
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 768px) {
 
   .navbar__logo {
-    transform: scale(0.3);
+    display: none;
   }
 }
 
-.navbar__list {
+/* links */
-  align-self: flex-end;
-  white-space: nowrap;
-}
-
-.navbar__list-item {
-  position: relative;
-  transition: background-color .1s ease;
-
-  .glyphicon {
-    position: relative;
-    width: 100%;
-    height: 20px;
-  }
-
-  .glyphicon::before {
-    height: 20px;
-  }
-}
-.navbar :last-child {
-  margin-left: auto;
-}
-
 .navbar__link-wrapper {
   display: flex;
   flex-direction: column;
@@ -99,14 +85,67 @@
 .navbar__link-label {
   transition: opacity .2s ease;
   padding: 0 13px;
-  color: var(--color-lightwhite);
   text-transform: uppercase;
 }
 
+@media (max-width: 768px) {
+
+  .navbar__link-label {
+    padding: 0 7px;
+  }
+}
+
+@media (max-width: 500px) {
+
+  .navbar__link-label {
+    display: none;
+  }
+}
+
+/* navbar list */
+.navbar__list {
+  white-space: nowrap;
+}
+
+/* list item */
+.navbar__list-item {
+  position: relative;
+  transition: background-color .1s ease;
+
+  .glyphicon {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .glyphicon::before {
+    height: 20px;
+  }
+
+  .fas {
+    height: 20px;
+  }
+}
+
+@media (max-width: 500px) {
+
+  .navbar__list-item {
+    width: 50px;
+  }
+}
+
 .navbar__list-item--secondary {
   margin-left: 20px;
   color: var(--color-grey);
 }
+
+@media (max-width: 768px) {
+
+  .navbar__list-item--secondary {
+    margin-left: 0;
+  }
+}
+
 .navbar__list-item--secondary + .navbar__list-item--secondary {
   margin-left: 0;
   border-left: 0;
@@ -120,27 +159,21 @@
     color: var(--color-dark);
   }
 }
+
 .navbar__list-item--active .navbar__link-wrapper {
-  pointer-events: none;
-}
-.navbar__list-item--active .navbar__link-label {
   color: var(--color-dark);
 }
 
-.navbar .navbar__list-item:not(.navbar__list-item--active):hover {
-  background-color: var(--color-darker);
-}
 .navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
+  background-color: var(--color-darker);
   color: var(--color-lightwhite);
 }
-.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label {
+
-  color: var(--color-lightwhite);
+.navbar__list-item--secondary .navbar__link-wrapper {
-}
-.navbar__list-item--secondary .navbar__link-wrapper,
-.navbar__list-item--secondary .navbar__link-label {
   color: var(--color-grey);
 }
 
+/* sticky state */
 .navbar--sticky {
   height: var(--header-height-collapsed);
   z-index: 100;
@@ -148,10 +181,10 @@
   .navbar__link-wrapper {
     height: var(--header-height-collapsed);
   }
-}
 
-.navbar--animated {
+  .navbar__logo {
-  transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
+    top: 5px;
+  }
 }
 
 .navbar__pushdown {

templates/widgets/pageactionprime.lucius

@@ -1,5 +1,5 @@
 .page-nav-prime {
-  margin-top: 13px;
+  margin: 13px 0;
 }
 
 .pagenav__list {