icons, responsive navigation, breadcrumbs, design

src/Handler/Utils/Templates.hs

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

static/css/icons.css

@@ -1,3 +1,9 @@
+.glyphicon {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
 .glyphicon::before {
   position: absolute;
   left: 4px;

templates/course.hamlet

@@ -25,7 +25,7 @@
       <h4>#{schoolName school}
 
 
-<div>
+<div .container>
   $maybe descr <- courseDescription course
     <h2 #description>Beschreibung
     <p> #{descr}

templates/courses.hamlet

@@ -1,6 +1,6 @@
-<div>
+<div .container>
   <h1>Kursübersicht für Semester #{termToText $ unTermKey tidini}
   ^{coursesTable}
 
-<div>
+<div .container>
   <a href=@{CourseEditR}>Neuen Kurs anlegen

templates/default-layout.hamlet

@@ -3,12 +3,10 @@
 
 <div .main>
 
+  <!-- secondary navigation at the side -->
   ^{asidenav}
 
   <div .main__content>
-    <!-- breadcrumbs -->
-    $if not $ Just HomeR == mcurrentRoute
-      ^{breadcrumbs}
 
     <!-- alerts -->
     $forall (status, msg) <- mmsgs

templates/default-layout.lucius

@@ -42,7 +42,7 @@
   --fontfamilybase: "Source Sans Pro", Helvetica, sans-serif;
 
   /* DIMENSIONS */
-  --header-height: 60px;
+  --header-height: 80px;
   --header-height-collapsed: 50px;
 }
 
@@ -124,13 +124,14 @@ th {
 }
 
 .main__content {
+  position: relative;
   background-color: white;
-  padding: 20px 40px;
+  padding: 0 40px;
   padding-right: 0;
   flex: 1;
   z-index: 0;
 
-  > div {
+  > .container {
     margin: 20px 0;
   }
 

templates/formPage.hamlet

@@ -10,4 +10,4 @@
             <div .col-md-10 .col-lg-9>
                 <div .bs-callout bs-callout-info well>
                     <form .form-horizontal method=post action=@{actionUrl}#forms enctype=#{formEnctype}>
-                        ^{formWidget}                        
+                        ^{formWidget}

templates/home.hamlet

@@ -1,4 +1,4 @@
-<div>
+<div .container>
   <h1>ReWorX - Demo
   <h3>
     Testumgebung für die Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
@@ -9,7 +9,7 @@
   <p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
 
 <hr>
-<div>
+<div .container>
   <h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte
 
   <ul>
@@ -27,7 +27,7 @@
       <a href=@{SubmissionListR}>Dateien hochladen und abrufen
 
 <hr>
-<div>
+<div .container>
   <h2 .js-show-hide__toggle data-collapsed=true>Tabellen
   <table .js-sortable>
     <thead>
@@ -59,7 +59,7 @@
         <td>35
 
 <hr>
-<div>
+<div .container>
   <h2>Funktionen zum Testen
 
   <ul>

templates/standalone/inputs.lucius

@@ -1,4 +1,7 @@
 /* GENERAL STYLES FOR FORMS */
+form {
+  margin: 20px 0;
+}
 
 /* TEXT INPUTS */
 input[type="text"],
@@ -57,7 +60,6 @@ textarea:focus {
   grid-gap: 5px;
   align-items: center;
   margin: 10px 0;
-  margin-left: -20px;
   padding-left: 10px;
   border-left: 8px solid transparent;
 }

templates/submission-list.hamlet

@@ -1,6 +1,8 @@
-<form method=POST enctype=#{uploadEnctype} action=@{SubmissionListR}>
-  ^{uploadWidget}
+<div .container>
+  <form method=POST enctype=#{uploadEnctype} action=@{SubmissionListR}>
+    ^{uploadWidget}
 
-<form method=POST enctype=#{selectEncoding} target=_blank action=@{SubmissionDownloadMultiArchiveR}>
-  ^{subTable}
-  <button .btn .btn-default type=submit >Markierte herunterladen
+<div .container>
+  <form method=POST enctype=#{selectEncoding} target=_blank action=@{SubmissionDownloadMultiArchiveR}>
+    ^{subTable}
+    <button .btn .btn-default type=submit >Markierte herunterladen

templates/widgets/asidenav.lucius

@@ -53,23 +53,42 @@
   padding: 0 13px;
 }
 
-.asidenav__list-item--active .asidenav__link {
+.asidenav__list-item {
+  position: relative;
+  background-color: white;
+  color: var(--darkbase);
+
+  .glyphicon {
+    position: absolute;
+    z-index: 1;
+    top: 5px;
+  }
+
+  &:not(.asidenav__list-item--active):hover {
+    color: white;
+    background-color: var(--darkbase);
+
+    .asidenav__link {
+      color: white;
+    }
+  }
+}
+.asidenav__list-item--active {
   background-color: var(--darkbase);
   color: white;
+
+  .asidenav__link {
+    pointer-events: none;
+    color: white;
+  }
 }
 
 .asidenav__link {
   position: relative;
   display: block;
-  padding: 4px 7px;
-  line-height: 40px;
+  line-height: 50px;
   margin: 4px 0;
   padding-left: 54px;
-  background-color: white;
   color: var(--darkbase);
-}
-
-.asidenav .asidenav__link:hover {
-  color: white;
-  background-color: var(--darkbase);
+  z-index: 1;
 }

templates/widgets/breadcrumbs.hamlet

@@ -1,5 +1,7 @@
-<div>
-  <ul .breadcrumbs.list--inline>
+<div .breadcrumbs__container>
+  <ul .breadcrumbs__list.list--inline>
     $forall bc <- parents
-      <li .breadcrumbs__item><a .breadcrumbs__link href="@{fst bc}">#{snd bc}</a> &gt;
+      <li .breadcrumbs__item>
+        <a .breadcrumbs__link href="@{fst bc}">#{snd bc}
+        &gt;
     <li .breadcrumbs__item--active>#{title}

templates/widgets/breadcrumbs.lucius

@@ -0,0 +1,17 @@
+.breadcrumbs__container {
+  position: absolute;
+  color: white;
+  left: 340px;
+  top: 7px;
+  z-index: 100;
+  transition: left .2s ease;
+}
+.breadcrumbs__container .breadcrumbs__link {
+  color: white;
+}
+
+@media (max-width: 999px) {
+  .breadcrumbs__container {
+    left: 90px;
+  }
+}

templates/widgets/navbar.hamlet

@@ -4,12 +4,20 @@
     <ul .navbar__list.list--inline>
       $forall menuType <- menuTypes
         $case menuType
-          $of NavbarRight (MenuItem label icon route _)
+          $of NavbarRight (MenuItem label mIcon route _)
             <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
-              <a .navbar__link :isJust icon:.glyphicon :isJust icon:.glyphicon--#{iconToText icon} href=@{route}>#{label}
-          $of NavbarSecondary (MenuItem label icon route _)
+              $if isJust mIcon
+                <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+              <a .navbar__link href=@{route}>#{label}
+          $of NavbarSecondary (MenuItem label mIcon route _)
             <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
-              <a .navbar__link :isJust icon:.glyphicon :isJust icon:.glyphicon--#{iconToText icon} href=@{route}>#{label}
+              $if isJust mIcon
+                <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+              <a .navbar__link href=@{route}>#{label}
           $of _
 
+    <!-- breadcrumbs -->
+    $if not $ Just HomeR == mcurrentRoute
+      ^{breadcrumbs}
+
   <div .navbar__pushdown>

templates/widgets/navbar.lucius

@@ -7,7 +7,7 @@
   width: 100%;
   height: var(--header-height);
   line-height: var(--header-height);
-  padding: 0 5vw;
+  padding-right: 5vw;
   background: var(--darkbase); /* Old browsers */
   background: -moz-linear-gradient(bottom, var(--darkbase) 0%, #425d79 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(bottom, var(--darkbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */
@@ -15,6 +15,7 @@
   color: white;
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
   z-index: 10;
+  overflow: hidden;
 }
 
 .navbar .navbar__link {
@@ -26,32 +27,63 @@
   text-transform: uppercase;
 }
 
-.navbar .navbar__link.glyphicon {
-  padding-left: 50px;
+.navbar .navbar__link.glyphicon::before {
+  left: 50%;
+  top: -20px;
+  transform: translateX(-50%);
+  margin: 0;
+}
+
+.navbar__list-item {
+  position: relative;
+  padding-top: 13px;
+
+  > .glyphicon {
+    position: absolute;
+    width: 100%;
+  }
+
+  > .glyphicon::before {
+    height: 40px;
+    margin: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 
 .navbar__list-item--secondary {
   margin-left: 20px;
-  color: var(--fontsec);
+  color: var(--greybase);
 }
 .navbar__list-item--secondary + .navbar__list-item--secondary {
   margin-left: 0;
   border-left: 0;
 }
 
-.navbar__list-item--active > .navbar__link {
+.navbar__list-item--active {
   background-color: white;
   color: var(--darkbase);
 }
+.navbar__list-item--active > .navbar__link {
+  color: var(--darkbase);
+  pointer-events: none;
+}
 
-.navbar .navbar__list-item > .navbar__link:hover {
-  color: var(--whitebase);
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover {
   background-color: var(--darkbase);
+  color: var(--whitebase);
+}
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover > .navbar__link {
+  color: var(--whitebase);
 }
 .navbar__list-item--secondary > .navbar__link {
   color: var(--greybase);
 }
 
+.navbar__link {
+  transition: opacity .2s ease;
+}
+
 .navbar--sticky {
   position: fixed;
   top: 0;
@@ -60,6 +92,14 @@
   line-height: var(--header-height-collapsed);
   z-index: 100;
   transition: height 0.2s ease, line-height 0.2s ease;
+
+  .navbar__link {
+    opacity: 0;
+  }
+
+  .breadcrumbs__container {
+    top: 0px;
+  }
 }
 .navbar__pushdown {
   display: none;