From cd8b6d985b2e6fb606587ebf173445af87a9242d Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Tue, 6 Mar 2018 22:29:17 +0100 Subject: [PATCH] introduced BEM for CSS and aside-navigation --- src/Foundation.hs | 2 + src/Handler/Home.hs | 2 - static/css/reactive_input.css | 4 +- static/css/show_hide.css | 20 +++---- static/css/stickybar.css | 54 ------------------ static/js/show_hide.js | 15 +++-- templates/default-layout.hamlet | 11 ++-- templates/default-layout.lucius | 26 +++++++-- templates/home.hamlet | 10 ++-- templates/widgets/asidenav.hamlet | 17 ++++++ templates/widgets/asidenav.lucius | 20 +++++++ templates/widgets/breadcrumbs.hamlet | 6 +- templates/widgets/navbar.hamlet | 18 +++--- .../widgets/navbar.julius | 2 +- templates/widgets/navbar.lucius | 55 +++++++++++++++++++ 15 files changed, 159 insertions(+), 103 deletions(-) delete mode 100644 static/css/stickybar.css create mode 100644 templates/widgets/asidenav.hamlet create mode 100644 templates/widgets/asidenav.lucius rename static/js/stickybar.js => templates/widgets/navbar.julius (91%) diff --git a/src/Foundation.hs b/src/Foundation.hs index 7b86343d7..706887de6 100644 --- 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") diff --git a/src/Handler/Home.hs b/src/Handler/Home.hs index de04b9554..736d611a0 100644 --- 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 diff --git a/static/css/reactive_input.css b/static/css/reactive_input.css index e32ac533c..d38e1f8e3 100644 --- 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 { diff --git a/static/css/show_hide.css b/static/css/show_hide.css index 84dfb6e0b..f3fc487c8 100644 --- 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; } diff --git a/static/css/stickybar.css b/static/css/stickybar.css deleted file mode 100644 index cf006fc7a..000000000 --- a/static/css/stickybar.css +++ /dev/null @@ -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; -} diff --git a/static/js/show_hide.js b/static/js/show_hide.js index 3416bc382..179e9e659 100644 --- 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); }); }); diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index 8df34eeae..da324acf4 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -1,9 +1,12 @@ -
- - ^{navbar menuTypes mcurrentRoute} + +^{navbar menuTypes mcurrentRoute} +
-
+