diff --git a/CHANGELOG.md b/CHANGELOG.md index f25abdd..d423f21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,13 @@ -# v1.0.0-RC +# v1.0.0-rc.1 +## 02/23/2016 +1. [](#bugfix) + * Added id property to navbar required to open the "hamburger" menu + * Fixed navbar dropdown menu rendering for small devices + +2.[](#new) + * Added optional highdensity-menu class useful to handle the automatic menu for webs ites that have several pages + +# v1.0.0-rc ## 02/18/2016 1. [](#new) diff --git a/blueprints.yaml b/blueprints.yaml index 7bdfcba..0f3e041 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -1,5 +1,5 @@ name: Gravstrap -version: 1.0.0-RC +version: 1.0.0-rc.1 description: "Gravstrap is a Grav plugin that provides Bootstrap components as shortcodes. It has 30+ basic, modules and bootstrap shortcodes" icon: share-alt author: diff --git a/css/gravstrap_navbar.css b/css/gravstrap_navbar.css index 50608c9..bcd7242 100644 --- a/css/gravstrap_navbar.css +++ b/css/gravstrap_navbar.css @@ -7,7 +7,7 @@ transition: all 0.5s ease; padding: 0.5rem 8rem; } -@media screen and (max-width: 550px) { +@media screen and (max-width: 768px) { .navbar { padding: 0.5rem; } @@ -83,6 +83,15 @@ -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } +@media screen and (max-width: 768px) { + .navbar .navbar-nav > li > .dropdown-menu, .navbar .dropdown-menu { + position: inherit !important; + display: none !important; + } + .navbar .navbar-nav > li > .dropdown-menu a, .navbar .dropdown-menu a { + color: #fff !important; + } +} .navbar .navbar-nav > li.open > .dropdown-menu, .navbar .open .dropdown-menu { -moz-transform: scale(1); -ms-transform: scale(1); @@ -91,6 +100,7 @@ -webkit-filter: none; filter: none; opacity: 1; + display: block !important; } .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { border-left: 11px solid transparent; @@ -101,6 +111,11 @@ left: 100%; margin-left: -90%; } +@media screen and (max-width: 768px) { + .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { + display: none !important; + } +} .navbar .navbar-right .dropdown-menu:before, .navbar .navbar-right .dropdown-menu:after { margin-left: -30%; } @@ -132,6 +147,18 @@ .navbar .dropdown.open > a, .navbar .dropdown.open > a:hover, .navbar .dropdown.open > a:focus, .navbar .dropdown.open > a:active { color: #fff; } +.navbar .navbar-toggle { + background-color: #333; +} +@media screen and (max-width: 1170px) { + .navbar .highdensity-menu { + max-width: 400px; + padding-top: 2px; + } + .navbar .highdensity-menu li a { + padding: 2px 6px; + } +} .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, @@ -139,6 +166,11 @@ background-color: transparent; } +.navbar-default .navbar-toggle:focus, +.navbar-default .navbar-toggle:hover { + background-color: #333; +} + .navbar.scrolled { background-color: #fff; border-bottom: 0; @@ -150,7 +182,7 @@ opacity: 0.9; box-shadow: 0 0.05rem 1rem #333; } -@media screen and (max-width: 550px) { +@media screen and (max-width: 768px) { .navbar.scrolled { padding: 0.5rem; } @@ -226,6 +258,15 @@ -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } +@media screen and (max-width: 768px) { + .navbar.scrolled .navbar-nav > li > .dropdown-menu, .navbar.scrolled .dropdown-menu { + position: inherit !important; + display: none !important; + } + .navbar.scrolled .navbar-nav > li > .dropdown-menu a, .navbar.scrolled .dropdown-menu a { + color: #fff !important; + } +} .navbar.scrolled .navbar-nav > li.open > .dropdown-menu, .navbar.scrolled .open .dropdown-menu { -moz-transform: scale(1); -ms-transform: scale(1); @@ -234,6 +275,7 @@ -webkit-filter: none; filter: none; opacity: 1; + display: block !important; } .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { border-left: 11px solid transparent; @@ -244,6 +286,11 @@ left: 100%; margin-left: -90%; } +@media screen and (max-width: 768px) { + .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { + display: none !important; + } +} .navbar.scrolled .navbar-right .dropdown-menu:before, .navbar.scrolled .navbar-right .dropdown-menu:after { margin-left: -30%; } @@ -275,6 +322,18 @@ .navbar.scrolled .dropdown.open > a, .navbar.scrolled .dropdown.open > a:hover, .navbar.scrolled .dropdown.open > a:focus, .navbar.scrolled .dropdown.open > a:active { color: #6e6e6e; } +.navbar.scrolled .navbar-toggle { + background-color: #333; +} +@media screen and (max-width: 1170px) { + .navbar.scrolled .highdensity-menu { + max-width: 400px; + padding-top: 2px; + } + .navbar.scrolled .highdensity-menu li a { + padding: 2px 6px; + } +} .navbar { background-color: transparent; @@ -285,7 +344,7 @@ transition: all 0.5s ease; padding: 0.5rem 8rem; } -@media screen and (max-width: 550px) { +@media screen and (max-width: 768px) { .navbar { padding: 0.5rem; } @@ -361,6 +420,15 @@ -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } +@media screen and (max-width: 768px) { + .navbar .navbar-nav > li > .dropdown-menu, .navbar .dropdown-menu { + position: inherit !important; + display: none !important; + } + .navbar .navbar-nav > li > .dropdown-menu a, .navbar .dropdown-menu a { + color: #fff !important; + } +} .navbar .navbar-nav > li.open > .dropdown-menu, .navbar .open .dropdown-menu { -moz-transform: scale(1); -ms-transform: scale(1); @@ -369,6 +437,7 @@ -webkit-filter: none; filter: none; opacity: 1; + display: block !important; } .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { border-left: 11px solid transparent; @@ -379,6 +448,11 @@ left: 100%; margin-left: -90%; } +@media screen and (max-width: 768px) { + .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { + display: none !important; + } +} .navbar .navbar-right .dropdown-menu:before, .navbar .navbar-right .dropdown-menu:after { margin-left: -30%; } @@ -410,6 +484,18 @@ .navbar .dropdown.open > a, .navbar .dropdown.open > a:hover, .navbar .dropdown.open > a:focus, .navbar .dropdown.open > a:active { color: #fff; } +.navbar .navbar-toggle { + background-color: #333; +} +@media screen and (max-width: 1170px) { + .navbar .highdensity-menu { + max-width: 400px; + padding-top: 2px; + } + .navbar .highdensity-menu li a { + padding: 2px 6px; + } +} .navbar.scrolled { background-color: #fff; @@ -422,7 +508,7 @@ opacity: 0.9; box-shadow: 0 0.05rem 1rem #333; } -@media screen and (max-width: 550px) { +@media screen and (max-width: 768px) { .navbar.scrolled { padding: 0.5rem; } @@ -498,6 +584,15 @@ -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } +@media screen and (max-width: 768px) { + .navbar.scrolled .navbar-nav > li > .dropdown-menu, .navbar.scrolled .dropdown-menu { + position: inherit !important; + display: none !important; + } + .navbar.scrolled .navbar-nav > li > .dropdown-menu a, .navbar.scrolled .dropdown-menu a { + color: #fff !important; + } +} .navbar.scrolled .navbar-nav > li.open > .dropdown-menu, .navbar.scrolled .open .dropdown-menu { -moz-transform: scale(1); -ms-transform: scale(1); @@ -506,6 +601,7 @@ -webkit-filter: none; filter: none; opacity: 1; + display: block !important; } .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { border-left: 11px solid transparent; @@ -516,6 +612,11 @@ left: 100%; margin-left: -90%; } +@media screen and (max-width: 768px) { + .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after { + display: none !important; + } +} .navbar.scrolled .navbar-right .dropdown-menu:before, .navbar.scrolled .navbar-right .dropdown-menu:after { margin-left: -30%; } @@ -547,3 +648,15 @@ .navbar.scrolled .dropdown.open > a, .navbar.scrolled .dropdown.open > a:hover, .navbar.scrolled .dropdown.open > a:focus, .navbar.scrolled .dropdown.open > a:active { color: #6e6e6e; } +.navbar.scrolled .navbar-toggle { + background-color: #333; +} +@media screen and (max-width: 1170px) { + .navbar.scrolled .highdensity-menu { + max-width: 400px; + padding-top: 2px; + } + .navbar.scrolled .highdensity-menu li a { + padding: 2px 6px; + } +} diff --git a/sass/lib/sass/mixins/_navbar.sass b/sass/lib/sass/mixins/_navbar.sass index 40fae29..4e02bca 100644 --- a/sass/lib/sass/mixins/_navbar.sass +++ b/sass/lib/sass/mixins/_navbar.sass @@ -11,7 +11,7 @@ +transition($narbar-transition) padding: $navbar-padding - @media screen and (max-width: 550px) + @media screen and (max-width: 768px) padding: 0.5rem .navbar-collapse @@ -56,7 +56,7 @@ > .active > a, > .active > a:hover background-color: $navbar-bg-color - .navbar-nav > li > .dropdown-menu, .dropdown-menu + .navbar-nav > li > .dropdown-menu, .dropdown-menu, display: block margin: 0 padding: 0 @@ -71,10 +71,18 @@ +transition(all, 100ms, cubic-bezier(0.950, 0.050, 0.795, 0.035)) +transition-timing-function(cubic-bezier(0.950, 0.050, 0.795, 0.035)) + @media screen and (max-width: 768px) + position: inherit !important + display: none !important + + a + color: #fff !important + .navbar-nav > li.open > .dropdown-menu, .open .dropdown-menu +transform(scale(1)) +filter(none) opacity: 1 + display: block !important %triangle border-left: 11px solid rgba(0, 0, 0, 0) @@ -85,6 +93,9 @@ left: 100% margin-left: -90% + @media screen and (max-width: 768px) + display: none !important + .navbar-right %triangle margin-left: -30% @@ -118,6 +129,21 @@ .dropdown.open > a, .dropdown.open > a:hover, .dropdown.open > a:focus, .dropdown.open > a:active color: $navbar-accent-color + .navbar-toggle + background-color: #333 + + + + .highdensity-menu + + @media screen and (max-width: 1170px) + max-width: 400px + padding-top: 2px + + li + a + padding: 2px 6px + .navbar +navbar() @@ -126,6 +152,10 @@ .navbar-default .navbar-nav > .open > a:focus background-color: transparent +.navbar-default .navbar-toggle:focus, +.navbar-default .navbar-toggle:hover + background-color: #333 + .navbar.scrolled +navbar(#fff, #6e6e6e, #6e6e6e, #010101, #6e6e6e, #010101, #010101) opacity: 0.9 diff --git a/shortcodes/Bootstrap/NavbarShortcode.php b/shortcodes/Bootstrap/NavbarShortcode.php index 72481a4..b1f5b85 100644 --- a/shortcodes/Bootstrap/NavbarShortcode.php +++ b/shortcodes/Bootstrap/NavbarShortcode.php @@ -65,6 +65,8 @@ protected function template() protected function renderOutput(ShortcodeInterface $shortcode) { return $this->grav['twig']->processTemplate($this->template(), [ + 'id' => $shortcode->getParameter('id'), + 'name' => $shortcode->getParameter('name'), 'fixed' => $shortcode->getParameter('fixed'), 'container' => $this->stringToBoolean($shortcode->getParameter('container')), 'brand_text' => $shortcode->getParameter('brand_text'), diff --git a/templates/bootstrap/navbar.html.twig b/templates/bootstrap/navbar.html.twig index a43d952..82fc548 100644 --- a/templates/bootstrap/navbar.html.twig +++ b/templates/bootstrap/navbar.html.twig @@ -2,7 +2,7 @@