Merge branch 'feat/lmu-theme' into 'master'

Add LMU corporate design Closes #75 See merge request !37
2018-07-01 01:43:08 +02:00 · 2018-07-01 01:43:08 +02:00 · cb25009493
commit cb25009493
parent 842aa81f33 1e70ba5ffa
5 changed files with 141 additions and 67 deletions
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@ -725,7 +725,7 @@ pageActions (HomeR) =
 --   ,
    NavbarAside $ MenuItem
      { menuItemLabel = "AdminDemo"
-      , menuItemIcon  = Nothing
+      , menuItemIcon  = Just "book"
      , menuItemRoute = AdminTestR
      , menuItemAccessCallback' = return True
      }
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@ -16,7 +16,7 @@
  --font-logo: "Roboto", var(--font-base);

  /* DIMENSIONS */
-  --header-height: 80px;
+  --header-height: 100px;
  --header-height-collapsed: 50px;
 }

@ -38,15 +38,25 @@ body {
 /* THEMES */

 body {
-  /* DEFAULT THEME */
-  --color-primary: #4C7A9C;
-  --color-light: #598EB5;
-  --color-lighter: #5F98C2;
-  --color-dark: #425d79;
-  --color-darker: #274a65;
-  --color-link: var(--color-dark);
-  --color-link-hover: var(--color-darker);
+  /* DEFAULT LMU THEME */
+  --color-primary: #0a9342;
+  --color-light: #31cc72;
+  --color-lighter: #35db7a;
+  --color-dark: #087536;
+  --color-darker: #075728;
+  --color-link: var(--color-font);
+  --color-link-hover: var(--color-font);
+  --color-lmu-box-border: var(--color-lightwhite);

+  &.theme--lavender {
+    --color-primary: #4C7A9C;
+    --color-light: #598EB5;
+    --color-lighter: #5F98C2;
+    --color-dark: #425d79;
+    --color-darker: #274a65;
+    --color-link: var(--color-dark);
+    --color-link-hover: var(--color-darker);
+  }

  &.theme--neutral-blue {
    --color-primary: #3E606F;
--- a/templates/profile.hamlet
+++ b/templates/profile.hamlet
@ -3,71 +3,71 @@
  <div .scrolltable>
    <table .table.table--striped.table--hover.table--vertical>
      <tr.table__row>
-        <th> _{MsgName}
-        <td> #{display userDisplayName}
+        <th .table__th> _{MsgName}
+        <td .table__td> #{display userDisplayName}
      <tr.table__row>
-        <th> _{MsgMatrikelNr}
-        <td> #{display userMatrikelnummer}
+        <th .table__th> _{MsgMatrikelNr}
+        <td .table__td> #{display userMatrikelnummer}
      <tr.table__row>
-        <th> _{MsgEMail}
-        <td> #{display userEmail}
+        <th .table__th> _{MsgEMail}
+        <td .table__td> #{display userEmail}
      <tr.table__row>
-        <th> _{MsgIdent}
-        <td> #{display userIdent}
+        <th .table__th> _{MsgIdent}
+        <td .table__td> #{display userIdent}
      <tr.table__row>
-        <th> _{MsgPlugin}
-        <td> #{display userPlugin}
+        <th .table__th> _{MsgPlugin}
+        <td .table__td> #{display userPlugin}
      $if not $ null admin_rights
        <tr.table__row>
-          <th> Administrator
-          <td>
+          <th .table__th> Administrator
+          <td .table__td>
            <ul>
              $forall institute <- admin_rights
                <li>#{display institute}
      $if not $ null lecturer_rights
        <tr.table__row>
-          <th> Lehrberechtigt
-          <td>
+          <th .table__th> Lehrberechtigt
+          <td .table__td>
            <ul>
              $forall institute <- lecturer_rights
                <li>#{display institute}
      $if not $ null lecture_owner
        <tr.table__row>
-          <th> Eigene Kurse
-          <td>
+          <th .table__th> Eigene Kurse
+          <td .table__td>
            <ul>
              $forall (E.Value csh, E.Value tid) <- lecture_owner
                <li>
                  <a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
      $if not $ null lecture_corrector
        <tr.table__row>
-          <th> Korrektor
-          <td>
+          <th .table__th> Korrektor
+          <td .table__td>
            <ul>
              $forall (E.Value csh, E.Value tid) <- lecture_corrector
                <li>
                  <a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
      $if not $ null studies
        <tr.table__row>
-          <th> Studiengänge
-          <td>
+          <th .table__th> Studiengänge
+          <td .table__td>
            <table .table .table-striped .table-hover>
              <tr.table__row>
-                <th> Abschluss
-                <th> Studiengang
-                <th> Studienart
-                <th> Semester
+                <th .table__th> Abschluss
+                <th .table__th> Studiengang
+                <th .table__th> Studienart
+                <th .table__th> Semester

              $forall (degree,field,fieldtype,semester) <- studies
                <tr.table__row>
-                  <td> #{display degree}
-                  <td> #{display field}
-                  <td> #{display fieldtype}
-                  <td> #{display semester}
+                  <td .table__td> #{display degree}
+                  <td .table__td> #{display field}
+                  <td .table__td> #{display fieldtype}
+                  <td .table__td> #{display semester}
      $if not $ null participant
        <tr.table__row>
-          <th> Teilnehmer
-          <td>
+          <th .table__th> Teilnehmer
+          <td .table__td>
            <ul>
              $forall (E.Value csh, E.Value tid, regSince) <- participant
                <li>
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@ -4,7 +4,7 @@ $newline never

    <a href="/" .navbar__logo>

-    <ul .navbar__list.list--inline>
+    <ul .navbar__list.list--inline.navbar__list-left>
        $forall menuType <- menuTypes
          $case menuType
            $of NavbarAside (MenuItem label mIcon route _)
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@ -3,11 +3,10 @@
  display: flex;
  flex-direction: row;
  align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
  width: 100%;
  height: var(--header-height);
  padding-right: 2vw;
-  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 */
@ -21,13 +20,6 @@
  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 {
@ -36,31 +28,67 @@
 }

 .navbar__logo {
-  position: absolute;
-  top: 15px;
+  top: 10px;
  left: 20px;
-  transition: all .2s ease;
-  transform-origin: left;
-  width: 0px;
+  height: 80px;
+  padding: 0 20px;
+  display: flex;
+  flex-basis: 300px;
+  font-size: 16px;
+  align-items: center;
  color: var(--color-lightwhite);
+  transform-origin: left;
+  transition: all .2s ease;

  &:hover {
    color: var(--color-lightwhite);
  }

  &::before {
-    content: 'Uni2work';
+    content: 'LMU';
    font-family: var(--font-logo);
-    font-size: 42px;
    font-weight: bold;
    letter-spacing: 2px;
+    display: flex;
+    align-items: flex-end;
+    font-size: 30px;
+    min-width: 70px;
+    height: calc(100% - 4px);
+    padding: 0 6px 4px;
+    box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+  }
+
+  &::after {
+    content: 'Uni2work';
+    margin-left: 12px;
+    font-weight: normal;
+    letter-spacing: 2px;
+    display: flex;
+    align-items: flex-end;
+    text-transform: uppercase;
+    width: 100%;
+    height: calc(100% - 4px);
+    padding: 0 6px 4px;
+    box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+  }
+}
+
+@media (max-width: 1200px) {
+
+  .navbar__logo {
+    flex-basis: 24%;
+    font-size: 16px;
  }
 }

@media (max-width: 1024px) {

  .navbar__logo {
-    transform: scale(0.7);
+    font-size: 14px;
+
+    &::before {
+      content: none;
+    }
  }
 }

@ -75,21 +103,30 @@
 .navbar__link-wrapper {
  display: flex;
  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: var(--header-height);
+  justify-content: flex-end;
+  align-items: flex-start;
+  height: 80px;
+  min-width: 90px;
  color: var(--color-lightwhite);
  transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
+  box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
 }

 .navbar__link-label {
  transition: opacity .2s ease;
-  padding: 0 13px;
+  padding: 4px 6px;
  text-transform: uppercase;
 }

@media (max-width: 768px) {

+  .navbar__link-wrapper {
+    box-shadow: none;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
  .navbar__link-label {
    padding: 0 7px;
  }
@ -112,6 +149,10 @@
  position: relative;
  transition: background-color .1s ease;

+  + .navbar__list-item {
+    margin-left: 12px;
+  }
+
  .glyphicon {
    position: relative;
    width: 20px;
@ -120,10 +161,22 @@

  .glyphicon::before {
    height: 20px;
+    margin-left: 6px;
  }

  .fas {
    height: 20px;
+    margin-left: 8px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .navbar__list-item {
+
+    .fas {
+      margin-left: 0;
+    }
  }
 }

@ -134,15 +187,29 @@
  }
 }

+.navbar__list-left {
+  flex: 5;
+  padding-left: 40px;
+}
+
 .navbar__list-item--secondary {
  margin-left: 20px;
  color: var(--color-grey);
+
+  .navbar__link-wrapper {
+    color: var(--color-grey);
+    box-shadow: 0 0 0 1px inset var(--color-grey);
+  }
 }

@media (max-width: 768px) {

  .navbar__list-item--secondary {
    margin-left: 0;
+
+    .navbar__link-wrapper {
+      box-shadow: none;
+    }
  }
 }

@ -169,10 +236,6 @@
  color: var(--color-lightwhite);
 }

-.navbar__list-item--secondary .navbar__link-wrapper {
-  color: var(--color-grey);
-}
-
 /* sticky state */
 .navbar--sticky {
  height: var(--header-height-collapsed);
@ -209,7 +272,7 @@
  }
 }

-@media (max-height: 768px) {
+@media (max-height: 500px) {

  .navbar,
  .navbar__pushdown {
@ -222,5 +285,6 @@

  .navbar__logo {
    top: 5px;
+    height: var(--header-height-collapsed);
  }
 }