introduced BEM for CSS and aside-navigation

2018-03-06 22:29:17 +01:00 · 2018-03-06 22:29:17 +01:00 · cd8b6d985b
commit cd8b6d985b
parent 4a6bbfed09
15 changed files with 159 additions and 103 deletions
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@ -323,6 +323,8 @@ defaultMenuLayout menu widget = do
    where
        navbar :: [MenuTypes] -> Maybe (Route UniWorX) -> Widget
        navbar menuTypes mcurrentRoute = $(widgetFile "widgets/navbar")
+        asidenav :: [MenuTypes] -> Maybe (Route UniWorX) -> Widget
+        asidenav menuTypes mcurrentRoute = $(widgetFile "widgets/asidenav")
        breadcrumbsList :: [(Route UniWorX, Text)] -> Text -> Widget
        breadcrumbsList parents title = $(widgetFile "widgets/breadcrumbs")

--- a/src/Handler/Home.hs
+++ b/src/Handler/Home.hs
@ -43,11 +43,9 @@ getHomeR :: Handler Html
 getHomeR = do
  (btnWdgt, btnEnctype) <- generateFormPost (buttonForm :: Form CreateButton)
  defaultLayout $ do
-    addStylesheet $ StaticR css_stickybar_css
    addStylesheet $ StaticR css_show_hide_css
    addStylesheet $ StaticR css_sortable_css
    addStylesheet $ StaticR css_reactive_input_css
-    addScript $ StaticR js_stickybar_js
    addScript $ StaticR js_show_hide_js
    addScript $ StaticR js_sortable_js
    addScript $ StaticR js_reactive_input_js
--- a/static/css/reactive_input.css
+++ b/static/css/reactive_input.css
@ -1,12 +1,12 @@
 .reactive-label {
  cursor: text;
-  color: #666;
+  color: #333;
  transform: translate(0, 0);
  transition: all .1s;
 }
 .reactive-label.small {
  cursor: default;
-  color: #333;
+  color: #888;
 }
@media (max-width: 768px) {
  .reactive-label {
--- a/static/css/show_hide.css
+++ b/static/css/show_hide.css
@ -2,15 +2,15 @@
  position: relative;
 }

-.js-show-hide-toggle {
+.js-show-hide__toggle {
  position: relative;
 }

-.js-show-hide-toggle:hover {
+.js-show-hide__toggle:hover {
  cursor: pointer;
 }

-.js-show-hide-toggle::before {
+.js-show-hide__toggle::before {
  content: '';
  position: absolute;
  width: 0;
@ -19,26 +19,26 @@
  border-bottom: 8px solid transparent;
 }

-.js-show-hide-toggle::before,
-.js-show-hide.collapsed .js-show-hide-toggle:hover::before {
+.js-show-hide__toggle::before,
+.js-show-hide--collapsed .js-show-hide__toggle:hover::before {
  left: -28px;
  top: 10px;
  border-left: 8px solid transparent;
  border-top: 8px solid rebeccapurple;
 }

-.js-show-hide-toggle:hover::before,
-.js-show-hide.collapsed .js-show-hide-toggle::before {
+.js-show-hide__toggle:hover::before,
+.js-show-hide--collapsed .js-show-hide__toggle::before {
  border-left: 8px solid rebeccapurple;
  border-top: 8px solid transparent;
  top: 5px;
  left: -22px;
 }

-.js-show-hide.collapsed > .js-show-hide-target {
-  padding-bottom: 0;
+.js-show-hide__target {
+
 }

-.js-show-hide.collapsed > .js-show-hide-target {
+.js-show-hide--collapsed > .js-show-hide__target {
  display: none;
 }
--- a/static/css/stickybar.css
+++ b/static/css/stickybar.css
@ -1,54 +0,0 @@
-:root {
-    --header-height: 60px;
-    --header-height-collapsed: 50px;
-}
-
-.js-sticky-navbar {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: var(--header-height);
-  line-height: var(--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);
-}
-
-.js-sticky-navbar li > a {
-  display: inline-block;
-  height: 100%;
-  padding: 0 13px;
-  color: white;
-}
-.js-sticky-navbar li > a:hover {
-  background-color: white;
-  color: rebeccapurple;
-}
-
-.js-sticky-navbar li.active {
-  background-color: #422063;
-}
-
-.navbar-sticky {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: var(--header-height-collapsed);
-  line-height: var(--header-height-collapsed);
-  z-index: 100;
-  transition: height 0.2s ease, line-height 0.2s ease;
-}
-.navbar-pushdown {
-  display: none;
-  height: var(--header-height);
-}
-.navbar-sticky + .navbar-pushdown {
-  display: block;
-}
--- a/static/js/show_hide.js
+++ b/static/js/show_hide.js
@ -8,23 +8,26 @@

 document.addEventListener('DOMContentLoaded', function() {

-  var elements = Array.from(document.querySelectorAll('.js-show-hide-toggle')),
+  var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
      toggles = [];

  function addEventHandler(el) {
    el.addEventListener('click', function elClickListener() {
      var toggle = toggles[el.dataset.index];
      toggle.collapsed = !toggle.collapsed;
-      toggle.parent.classList.toggle('collapsed', toggle.collapsed);
+      toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
    });
  }

  elements.forEach(function(el, i) {
-    var target = el.nextElementSibling;
    el.dataset.index = i;
-    var coll = el.parentElement.classList.contains('collapsed');
-    target.classList.add('js-show-hide-target');
-    toggles.push({index: i, target: target, collapsed: coll, parent: el.parentElement});
+    var coll = el.parentElement.classList.contains('js-show-hide--collapsed');
+    Array.from(el.parentElement.children).forEach(function(el) {
+      if (!el.classList.contains('js-show-hide__toggle')) {
+        el.classList.add('js-show-hide__target');
+      }
+    });
+    toggles.push({index: i, collapsed: coll, parent: el.parentElement});
    addEventHandler(el);
  });
 });
--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@ -1,9 +1,12 @@
-<div #main.main-wrapper>
-  <!-- navigation -->
-  ^{navbar menuTypes mcurrentRoute}
+<!-- navigation -->
+^{navbar menuTypes mcurrentRoute}

+<div .main>

-  <div .content-wrapper>
+  <aside .main__aside>
+    ^{asidenav menuTypes mcurrentRoute}
+
+  <div .main__content>
    <!-- breadcrumbs -->
    $if not $ Just HomeR == mcurrentRoute
      ^{breadcrumbsList parents title}
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@ -47,7 +47,8 @@ a:hover {
 ul {
  list-style-type: none;
 }
-ul.flat > li {
+
+.list--inline > li {
  display: inline-block;
 }

@ -64,7 +65,7 @@ h2 {
 }
 h3 {
  font-size: 20px;
-  margin: 5px 0 0;
+  margin: 5px 0;
 }
 h4 {
  font-size: 16px;
@ -76,8 +77,20 @@ th, td {
  padding: 0 2px 0 4px;
 }

-.content-wrapper {
+/* LAYOUT */
+.main {
+  display: flex;
  padding: 0 10vw;
+}
+
+.main__aside {
+  flex: 0 0 200px;
+  margin-right: 40px;
+}
+
+.main__content {
+  /*padding: 0 10vw;*/
+  flex: 1;

  div {
    margin: 20px 0;
@ -91,9 +104,11 @@ th, td {
 /* FORMS */
 input[type="text"],
 input[type="password"],
+input[type="url"],
+input[type="number"],
 input[type="email"] {
  background-color: rgba(0, 0, 0, 0.05);
-  padding: 13px 3px 4px;
+  padding: 7px 3px 7px;
  border: none;
  outline: 0;
  border-bottom: 2px solid rebeccapurple;
@ -105,6 +120,8 @@ input[type="email"] {

 input[type="text"]:focus,
 input[type="password"]:focus,
+input[type="url"]:focus,
+input[type="number"]:focus,
 input[type="email"]:focus {
  border-bottom-color: red;
  background-color: rgba(0, 0, 0, 0.02);
@ -138,7 +155,6 @@ input[type="button"]:not([disabled]):hover,
 button:not([disabled]):hover {
  background-color: var(--base-bg-color);
  color: var(--base-font-color);
-  transform: scale(1.1);
 }

 .form-group {
--- a/templates/home.hamlet
+++ b/templates/home.hamlet
@ -11,7 +11,7 @@
 <!-- SHOW-HIDE-TEST -->
 <hr>
 <div .js-show-hide>
-  <h2 .js-show-hide-toggle>Teilweise funktionierende Abschnitte
+  <h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte

  <ul>
    <li .list-group-item>
@ -27,8 +27,8 @@
      <a href=@{SubmissionListR}>Dateien hochladen und abrufen

 <hr>
-<div>
-  <h2>Sortierbare Tabelle
+<div .js-show-hide.js-show-hide--collapsed>
+  <h2 .js-show-hide__toggle>Tabellen
  <table .js-sortable>
    <thead>
      <tr>
@ -59,8 +59,8 @@
        <td>35

 <hr>
-<div>
-  <h2>form-Tests
+<div .js-show-hide.js-show-hide--collapsed>
+  <h2 .js-show-hide__toggle>Formulare
  <p>(Senden-Button wird aktiviert, sobald alle benötigten Felder ausgefüllt sind.)
  <form method=post action=@{HomeR}>
    <div .form-group>
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@ -0,0 +1,17 @@
+<div .asidenav>
+  <div .asidenav__box>
+    <h3 .asidenav__box-title>NavbarLefts
+    <ul .asidenav__list>
+      $forall menuType <- menuTypes
+        $case menuType
+          $of NavbarLeft (MenuItem label route _)
+            <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
+              <a .asidenav__link href=@{route}>#{label}
+          $of _
+  <div .asidenav__box>
+    <h3 .asidenav__box-title>WiSe 17/18
+    <ul .asidenav__list>
+      <li>CD
+      <li>IxD
+      <li>Funktionale Programmierung
+      <li>Programmierung und Modellierung
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@ -0,0 +1,20 @@
+.asidenav {
+  margin-top: 20px;
+}
+.asidenav__box {
+  margin: 10px 0;
+  padding: 10px;
+  border-bottom: 4px solid rebeccapurple;
+}
+.asidenav__box-title {
+  margin-left: -10px;
+}
+.asidenav__link {
+  padding: 4px 7px;
+  display: block;
+}
+
+.asidenav__link:hover {
+  color: white;
+  background-color: rebeccapurple;
+}
--- a/templates/widgets/breadcrumbs.hamlet
+++ b/templates/widgets/breadcrumbs.hamlet
@ -1,5 +1,5 @@
 <div>
-  <ul .breadcrumbs.flat>
+  <ul .breadcrumbs.list--inline>
    $forall bc <- parents
-      <li><a href="@{fst bc}">#{snd bc}</a> &gt;
-    <li .active>#{title}
+      <li .breadcrumbs__item><a .breadcrumbs__link href="@{fst bc}">#{snd bc}</a> &gt;
+    <li .breadcrumbs__item--active>#{title}
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@ -1,18 +1,14 @@
 <nav .navbar.js-sticky-navbar>
-  <ul .flat>
+
+  <ul .navbar__list.list--inline>
    $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
+          <li :Just route == mcurrentRoute:.navbar__list-item--active>
+            <a .navbar__link href=@{route}>#{label}
        $of NavbarRight (MenuItem label route _)
-          <li :Just route == mcurrentRoute:.active>
-            <a href=@{route}>#{label}
+          <li :Just route == mcurrentRoute:.navbar__list-item--active>
+            <a .navbar__link href=@{route}>#{label}
        $of _

-<div .navbar-pushdown>
+<div .navbar__pushdown>
--- a/templates/widgets/navbar.julius
+++ b/templates/widgets/navbar.julius
@ -20,7 +20,7 @@ document.addEventListener('DOMContentLoaded', function() {
  // checks scroll direction and shows/hides navbar accordingly
  function checkScroll() {
      var sticky = window.scrollY > 0;
-      nav.classList.toggle('navbar-sticky', sticky);
+      nav.classList.toggle('navbar--sticky', sticky);
      ticking = false;
  }
  checkScroll();
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@ -0,0 +1,55 @@
+:root {
+    --header-height: 60px;
+    --header-height-collapsed: 50px;
+}
+
+.navbar {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  height: var(--header-height);
+  line-height: var(--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);
+}
+
+.navbar .navbar__link {
+  display: inline-block;
+  height: 100%;
+  padding: 0 13px;
+  color: white;
+}
+
+.navbar .navbar__link:hover {
+  background-color: white;
+  color: rebeccapurple;
+}
+
+.navbar__list-item--active {
+  background-color: #422063;
+}
+
+.navbar--sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: var(--header-height-collapsed);
+  line-height: var(--header-height-collapsed);
+  z-index: 100;
+  transition: height 0.2s ease, line-height 0.2s ease;
+}
+.navbar__pushdown {
+  display: none;
+  height: var(--header-height);
+}
+.navbar--sticky + .navbar__pushdown {
+  display: block;
+}