added menu-icons and asidenavbar-styling

src/Foundation.hs

@@ -82,6 +82,7 @@ mkYesodData "UniWorX" $(parseRoutesFile "routes")
 
 data MenuItem = MenuItem
     { menuItemLabel :: Text
+    , menuItemIcon :: Maybe Text
     , menuItemRoute :: Route UniWorX
     , menuItemAccessCallback :: Handler Bool
     }
@@ -280,31 +281,37 @@ defaultLinks :: [MenuTypes]
 defaultLinks = -- Define the menu items of the header.
   [ NavbarRight $ MenuItem
       { menuItemLabel = "Home"
+      , menuItemIcon = Just "home"
       , menuItemRoute = HomeR
       , menuItemAccessCallback = return True
       }
   , NavbarLeft $ MenuItem
       { menuItemLabel = "Kurse"
+      , menuItemIcon = Just "book"
       , menuItemRoute = CourseListR
       , menuItemAccessCallback = return True
       }
   , NavbarLeft $ MenuItem
       { menuItemLabel = "Users"
+      , menuItemIcon = Just "user"
       , menuItemRoute = UsersR
       , menuItemAccessCallback = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
       }
   , NavbarRight $ MenuItem
       { menuItemLabel = "Profile"
+      , menuItemIcon = Just "user"
       , menuItemRoute = ProfileR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
   , NavbarSecondary $ MenuItem
       { menuItemLabel = "Login"
+      , menuItemIcon = Just "login"
       , menuItemRoute = AuthR LoginR
       , menuItemAccessCallback = isNothing <$> maybeAuthPair
       }
   , NavbarSecondary $ MenuItem
       { menuItemLabel = "Logout"
+      , menuItemIcon = Just "logout"
       , menuItemRoute = AuthR LogoutR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
@@ -341,11 +348,19 @@ defaultMenuLayout menu widget = do
 
     pc <- widgetToPageContent $ do
         addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"
+        addStylesheet $ StaticR css_fonts_css
+        addStylesheet $ StaticR css_icons_css
         $(widgetFile "default-layout")
         $(widgetFile "standalone/showHide")
         $(widgetFile "standalone/sortable")
         $(widgetFile "standalone/inputs")
     withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
+    where
+      iconToText :: Maybe Text -> Text
+      iconToText mText =
+          "" ++ case mText of
+                   Nothing  -> ""
+                   Just text -> text
 
 -- How to run database actions.
 instance YesodPersist UniWorX where

src/Handler/Course.hs

@@ -66,6 +66,7 @@ getCourseListTermR tidini = do
   let pageLinks =
         [ NavbarLeft $ MenuItem
           { menuItemLabel = "Neuer Kurs"
+          , menuItemIcon = Just "book"
           , menuItemRoute = CourseEditR
           , menuItemAccessCallback = (== Authorized) <$> isAuthorized CourseEditR False
           }

static/css/fonts.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'Glyphicons Halflings';
+  src: url('../fonts/glyphicons-halflings-regular.eot');
+  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
+       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
+       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
+       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+}

static/css/icons.css

@@ -0,0 +1,24 @@
+.glyphicon::before {
+  position: absolute;
+  left: 4px;
+  margin: 0 13px;
+  font-family: 'Glyphicons Halflings';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.glyphicon--home::before {
+  content: '\e021';
+}
+.glyphicon--book::before {
+  content: '\e043';
+}
+.glyphicon--user::before {
+  content: '\e008';
+}
+.glyphicon--login::before {
+  content: '\e161';
+}
+.glyphicon--logout::before {
+  content: '\e163';
+}

templates/widgets/asidenav.hamlet

@@ -6,13 +6,13 @@
           $case menuType
             $of NavbarLeft (MenuItem label icon route _)
               <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
-                <a .asidenav__link.asidenav__icon--#{icon} href=@{route}>#{label}
+                <a .asidenav__link :isJust icon:.glyphicon :isJust icon:.glyphicon--#{iconToText icon} href=@{route}>#{label}
             $of _
 
     <div .asidenav__box>
       <h3 .asidenav__box-title>WiSe 17/18
-      <ul .asidenav__list>
+      <ul .asidenav__list.asidenav__list--padded>
-        <li>CD
+        <li>Vorlesung 1
-        <li>IxD
+        <li>Vorlesung 2
-        <li>Funktionale Programmierung
+        <li>Vorlesung 3
-        <li>Programmierung und Modellierung
+        <li>Vorlesung 4

templates/widgets/asidenav.lucius

@@ -13,10 +13,12 @@
   transition: opacity .2s ease;
 }
 
+.main__aside--collapsed:hover {
+  overflow: visible;
+}
 .main__aside--collapsed {
   width: 50px;
 }
-
 .main__aside--collapsed .asidenav__box {
   opacity: 0;
 }
@@ -25,12 +27,10 @@
 }
 
 .main__aside--collapsed:not(.main__aside--transitioning) .asidenav__box {
-  visibility: hidden;
-  pointer-events: none;
-  z-index: -10;
   height: 0;
   padding: 0;
   margin: 0;
+  visibility: hidden;
 }
 
 .asidenav {
@@ -42,21 +42,31 @@
   margin: 10px 0;
   padding: 10px 0;
   border-bottom: 4px solid var(--whitebase);
+  background-color: var(--darkbase);
 }
 
 .asidenav__box-title {
-  margin-left: -10px;
+  padding: 7px 13px;
 }
 
-.asidenav .asidenav__link {
+.asidenav__list--padded {
+  padding: 0 13px;
+}
+
+.asidenav__list-item--active .asidenav__link {
+  background-color: var(--darkbase);
+  color: white;
+}
+
+.asidenav__link {
   position: relative;
   display: block;
   padding: 4px 7px;
   line-height: 40px;
   margin: 4px 0;
-  padding-left: 60px;
+  padding-left: 54px;
-  color: var(--darkbase);
   background-color: white;
+  color: var(--darkbase);
 }
 
 .asidenav .asidenav__link:hover {

templates/widgets/navbar.hamlet

@@ -6,10 +6,10 @@
         $case menuType
           $of NavbarRight (MenuItem label icon route _)
             <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
-              <a .navbar__link href=@{route}>#{label}
+              <a .navbar__link :isJust icon:.glyphicon :isJust icon:.glyphicon--#{iconToText icon} href=@{route}>#{label}
           $of NavbarSecondary (MenuItem label icon route _)
             <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
-              <a .navbar__link href=@{route}>#{label}
+              <a .navbar__link :isJust icon:.glyphicon :isJust icon:.glyphicon--#{iconToText icon} href=@{route}>#{label}
           $of _
 
   <div .navbar__pushdown>

templates/widgets/navbar.lucius

@@ -18,6 +18,7 @@
 }
 
 .navbar .navbar__link {
+  position: relative;
   display: inline-block;
   height: 100%;
   padding: 0 13px;
@@ -25,9 +26,13 @@
   text-transform: uppercase;
 }
 
+.navbar .navbar__link.glyphicon {
+  padding-left: 50px;
+}
+
 .navbar__list-item--secondary {
   margin-left: 20px;
-  background-color: var(--fontsec);
+  color: var(--fontsec);
 }
 .navbar__list-item--secondary + .navbar__list-item--secondary {
   margin-left: 0;
@@ -43,6 +48,9 @@
   color: var(--whitebase);
   background-color: var(--darkbase);
 }
+.navbar__list-item--secondary > .navbar__link {
+  color: var(--greybase);
+}
 
 .navbar--sticky {
   position: fixed;