diff --git a/src/Foundation.hs b/src/Foundation.hs index cdd887b07..149004f7d 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -519,7 +519,6 @@ instance Yesod UniWorX where addStylesheet $ StaticR css_flatpickr_css addStylesheet $ StaticR css_tabber_css addStylesheet $ StaticR css_fonts_css - addStylesheet $ StaticR css_icons_css addStylesheet $ StaticR css_fontawesome_css $(widgetFile "default-layout") $(widgetFile "standalone/modal") @@ -827,19 +826,19 @@ defaultLinks = -- Define the menu items of the header. } , NavbarRight $ MenuItem { menuItemLabel = "Profile" - , menuItemIcon = Just "profile" + , menuItemIcon = Just "cogs" , menuItemRoute = ProfileR , menuItemAccessCallback' = isJust <$> maybeAuthPair } , NavbarSecondary $ MenuItem { menuItemLabel = "Login" - , menuItemIcon = Just "login" + , menuItemIcon = Just "sign-in-alt" , menuItemRoute = AuthR LoginR , menuItemAccessCallback' = isNothing <$> maybeAuthPair } , NavbarSecondary $ MenuItem { menuItemLabel = "Logout" - , menuItemIcon = Just "logout" + , menuItemIcon = Just "sign-out-alt" , menuItemRoute = AuthR LogoutR , menuItemAccessCallback' = isJust <$> maybeAuthPair } diff --git a/static/css/fonts.css b/static/css/fonts.css index 6f409ec57..ae0be87be 100644 --- a/static/css/fonts.css +++ b/static/css/fonts.css @@ -1,13 +1,3 @@ -@font-face { - font-family: 'Glyphicons Halflings'; - src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot'); - src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), - url('../fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'), - url('../fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'), - url('../fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'), - url('../fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); -} - /*! * Font Awesome Free 5.1.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) diff --git a/static/css/icons.css b/static/css/icons.css deleted file mode 100644 index b92b25f65..000000000 --- a/static/css/icons.css +++ /dev/null @@ -1,44 +0,0 @@ -.glyphicon { - position: relative; - display: inline-block; - width: 40px; - height: 40px; -} -.glyphicon::before { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: 'Glyphicons Halflings'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.glyphicon--home::before { - content: '\e021'; -} -.glyphicon--book::before { - content: '\e043'; -} -.glyphicon--profile::before { - content: '\e019'; -} -.glyphicon--user::before { - content: '\e008'; -} -.glyphicon--group::before { - /* TODO: get updated glyphicons for group-icon */ - content: '\e284'; -} -.glyphicon--education::before { - content: '\e233'; -} -.glyphicon--login::before { - content: '\e161'; -} -.glyphicon--logout::before { - content: '\e163'; -} -.glyphicon--none::before { - content: ''; -} diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.eot b/static/fonts/glyphicons/glyphicons-halflings-regular.eot deleted file mode 100644 index 4a4ca865d..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.eot and /dev/null differ diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.svg b/static/fonts/glyphicons/glyphicons-halflings-regular.svg deleted file mode 100644 index e3e2dc739..000000000 --- a/static/fonts/glyphicons/glyphicons-halflings-regular.svg +++ /dev/null @@ -1,229 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.ttf b/static/fonts/glyphicons/glyphicons-halflings-regular.ttf deleted file mode 100644 index 67fa00bf8..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.ttf and /dev/null differ diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.woff b/static/fonts/glyphicons/glyphicons-halflings-regular.woff deleted file mode 100644 index 8c54182aa..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.woff and /dev/null differ diff --git a/static/fonts/glyphicons/glyphicons-halflings-regular.woff2 b/static/fonts/glyphicons/glyphicons-halflings-regular.woff2 deleted file mode 100644 index 64539b54c..000000000 Binary files a/static/fonts/glyphicons/glyphicons-halflings-regular.woff2 and /dev/null differ diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index 6cd69859b..ad9fe2301 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -17,7 +17,7 @@ /* DIMENSIONS */ --header-height: 100px; - --header-height-collapsed: 50px; + --header-height-collapsed: 60px; } * { @@ -124,7 +124,7 @@ h1, h2, h3, h4, h5 { } h1 { font-size: 32px; - margin: 20px 0 10px; + margin-bottom: 10px; } h2 { font-size: 24px; @@ -170,6 +170,8 @@ h4 { position: relative; background-color: white; overflow: hidden; + padding-left: 24%; + transition: padding-left .2s ease-out; > .container { margin: 20px 0; @@ -180,6 +182,27 @@ h4 { } } +@media (min-width: 1200px) { + + .main__content { + padding-left: 300px; + } +} + +@media (max-width: 768px) { + + .main__content { + padding-left: 50px; + } +} + +@media (max-width: 425px) { + + .main__content { + padding-left: 0; + } +} + .main__content-body { padding: 0 40px 60px; } @@ -187,7 +210,14 @@ h4 { @media (max-width: 768px) { .main__content-body { - padding: 10px 20px 60px; + padding: 0 20px 60px; + } +} + +@media (max-width: 425px) { + + .main__content-body { + padding: 0 10px 60px; } } @@ -289,6 +319,16 @@ a.btn.btn-info:hover, overflow: auto; } +@media (max-width: 425px) { + + .scrolltable { + margin-left: -10px; + padding-left: 10px; + margin-right: -10px; + padding-right: 10px; + } +} + /* TABLE DESIGN */ .table__td, .table__th { padding-top: 14px; diff --git a/templates/standalone/alerts.lucius b/templates/standalone/alerts.lucius index 4d080cc8d..43a3a0785 100644 --- a/templates/standalone/alerts.lucius +++ b/templates/standalone/alerts.lucius @@ -28,7 +28,7 @@ z-index: 0; max-height: 200px; transition: all .3s ease-in-out; - padding-left: 30px; + padding-left: 20px; margin-left: 20px; margin-right: 60px; box-shadow: 0 0 7px var(--color-dark); @@ -68,6 +68,7 @@ @media (min-width: 768px) { .alert { + padding-left: 30px; margin-left: 40px; min-width: 400px; } @@ -114,6 +115,14 @@ } } +@media (max-width: 768px) { + + .alert__content { + padding: 4px 7px; + padding-left: 20px; + } +} + .alert__close { cursor: pointer; text-align: right; @@ -155,6 +164,13 @@ } } +@media (max-width: 768px) { + + .alert__close { + width: 40px; + } +} + .alert-success { .alert__content { diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 19c0988a7..ad6771a38 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -140,6 +140,13 @@ option { box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05); } +@media (max-width: 425px) { + + select, option { + width: 100%; + } +} + /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */ input[type="checkbox"] { position: relative; diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius index 5ae624450..2ccec226b 100644 --- a/templates/standalone/modal.lucius +++ b/templates/standalone/modal.lucius @@ -76,8 +76,8 @@ z-index: 20; &::before { - content: '\e014'; - font-family: 'Glyphicons Halflings'; + content: '\f00d'; + font-family: 'Font Awesome 5 Free'; color: white; } } diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet index 78809b413..ec1a8ea8b 100644 --- a/templates/widgets/asidenav.hamlet +++ b/templates/widgets/asidenav.hamlet @@ -18,5 +18,3 @@ $newline never
  • #{menuItemLabel} $of _ - -
    diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius index cc8fb04a8..18b55b952 100644 --- a/templates/widgets/asidenav.julius +++ b/templates/widgets/asidenav.julius @@ -3,82 +3,16 @@ window.utils = window.utils || {}; - // Defines a function to turn an element into an interactive aside-navigation. - // If the screen is smaller than 999px the navigation is automatically - // collapsed - even when dynamically resized (e.g. switching from portatit - // to landscape). - // The can user may also manually collapse and expand the navigation by - // using the little arrow at the bottom. window.utils.aside = function(asideEl) { - var collapsed = false; - var collClass = 'main__aside--collapsed'; - // animClass used to enable transitions only when needed so that - // (potentially happening) initial collapse of the asidenav - // goes unnoticed by the user. - var animClass = 'main__aside--transitioning'; - var hoveringAboveCollapsedNav = false; - init(); function init() { - var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true'; - if (document.body.getBoundingClientRect().width < 999 || collLS) { - asideEl.classList.add(collClass); - collapsed = true; - } - addListener(); - } - - function check() { - if (collapsed && !hasCollapsedClass() || !collapsed && hasCollapsedClass()) { - asideEl.classList.add(animClass); - asideEl.classList.toggle(collClass, collapsed); - window.localStorage.setItem('asidenavCollapsed', collapsed); - } - } - - function hasCollapsedClass() { - return asideEl.classList.contains(collClass); - } - - function addListener() { - - asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) { - collapsed = !collapsed; - check(); - }, false); - - asideEl.addEventListener('transitionend', function(event) { - if (event.propertyName === 'opacity') { - asideEl.classList.remove(animClass); - } - }, false); - - window.addEventListener('resize', function() { - collapsed = document.body.getBoundingClientRect().width < 999; - check(); - }, false); - - asideEl.addEventListener('mouseover', function(event) { - if (!hasCollapsedClass()) { - return false; - } - hoveringAboveCollapsedNav = true; - window.setTimeout(function() { - if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) { - asideEl.classList.add('pseudo-hover'); - } - }, 200); - }, false); - - asideEl.addEventListener('mouseleave', function(event) { - hoveringAboveCollapsedNav = false; - window.setTimeout(function() { - if (!hoveringAboveCollapsedNav) { - asideEl.classList.remove('pseudo-hover'); - } - }, 200); - }, false); + var favoritesBtn = document.querySelector('.navbar__list-item--favorite'); + favoritesBtn.addEventListener('click', function(event) { + asideEl.classList.toggle('main__aside--expanded'); + event.preventDefault(); + }, true); } + init(); }; })(); @@ -95,7 +29,6 @@ document.addEventListener('DOMContentLoaded', function() { }); }); - // TODO: make it swipeable on mobile and narrower - // utils.aside(asidenavEl); + window.utils.aside(asidenavEl); }); diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius index 8dce6117c..33ba5f653 100644 --- a/templates/widgets/asidenav.lucius +++ b/templates/widgets/asidenav.lucius @@ -7,20 +7,34 @@ min-height: calc(100% - var(--header-height)); transition: all .2s ease-out; width: 24%; - - ~ .main__content { - padding-left: 24%; - transition: padding-left .2s ease-out; - } } /* maximum width of 300px for wide screens */ @media (min-width: 1200px) { .main__aside { width: 300px; + } +} - ~ .main__content { - padding-left: 300px; +@media (max-width: 425px) { + + .main__aside { + position: fixed; + top: var(--header-height-collapsed); + left: 0; + right: 0; + bottom: 0; + height: 100% !important; + width: 100%; + z-index: 5; + box-shadow: 0 0 13px var(--color-dark); + white-space: nowrap; + overflow: hidden; + transform: translateX(0); + transition: transform .2s ease-out; + + &:not(.main__aside--expanded) { + transform: translateX(-110%); } } } @@ -38,6 +52,9 @@ margin-top: 30px; background-color: transparent; transition: all .2s ease; + padding: 30px 13px 10px; + margin: 0; + background-color: var(--color-darker); } .asidenav__list-item { @@ -107,14 +124,6 @@ color: var(--color-lightwhite); width: 100%; z-index: 1; - - .glyphicon { - width: 50px; - } - - .glyphicon + .asidenav__link-label { - padding-left: 0; - } } .asidenav__link-shorthand { @@ -139,6 +148,13 @@ z-index: -1; } +@media (max-width: 425px) { + + .asidenav__nested-list { + display: none; + } +} + .asidenav__nested-list-item { position: relative; color: var(--color-lightwhite); @@ -158,7 +174,7 @@ } /* STATE COLLAPSED */ -@media (max-width: 768px) { +@media (max-width: 768px) and (min-width: 425px) { .main__aside { width: 50px; @@ -166,16 +182,11 @@ overflow: hidden; min-height: calc(100% - var(--header-height-collapsed)); - ~ .main__content { - padding-left: 50px; - } - .asidenav__box-title { width: 50px; - padding: 1px; font-size: 18px; text-align: center; - margin-bottom: 0; + padding: 10px 1px; } .asidenav__link-shorthand { diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius index 7f727d302..e89634895 100644 --- a/templates/widgets/breadcrumbs.lucius +++ b/templates/widgets/breadcrumbs.lucius @@ -3,6 +3,7 @@ color: var(--color-font); margin-left: 40px; margin-top: 25px; + margin-bottom: 10px; } @media (max-width: 768px) { @@ -12,6 +13,13 @@ } } +@media (max-width: 425px) { + + .breadcrumbs__container { + margin-left: 10px; + } +} + .breadcrumbs__link { &:hover { diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet index 9a67a13fe..359bd1b17 100644 --- a/templates/widgets/navbar.hamlet +++ b/templates/widgets/navbar.hamlet @@ -5,14 +5,20 @@ $newline never