responsive navbar
This commit is contained in:
Guillaume Denis
parent
f08353dfda
commit
281dd91884
|
|
@ -1,162 +1,18 @@
|
|||
/**
|
||||
*------------------------------------------------------------------------------
|
||||
* @package T3 Framework for Joomla!
|
||||
*------------------------------------------------------------------------------
|
||||
* @copyright Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @authors JoomlArt, JoomlaBamboo, (contribute to this project at github
|
||||
* & Google group to become co-author)
|
||||
* @Google group: https://groups.google.com/forum/#!forum/t3fw
|
||||
* @Link: http://t3-framework.org
|
||||
*------------------------------------------------------------------------------
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('toggle-toc').addEventListener('click', function() {
|
||||
var el = document.body, className = 'toc-open';
|
||||
if (el.classList) {
|
||||
el.classList.toggle(className);
|
||||
} else {
|
||||
var classes = el.className.split(' ');
|
||||
var existingIndex = classes.indexOf(className);
|
||||
|
||||
jQuery (document).ready(function($){
|
||||
// fix for old ie
|
||||
if (/MSIE\s([\d.]+)/.test(navigator.userAgent) ? new Number(RegExp.$1) < 10 : false) {
|
||||
$('html').addClass ('old-ie');
|
||||
} else if(/constructor/i.test(window.HTMLElement)){
|
||||
$('html').addClass('safari');
|
||||
if (existingIndex >= 0)
|
||||
classes.splice(existingIndex, 1);
|
||||
else
|
||||
classes.push(className);
|
||||
|
||||
el.className = classes.join(' ');
|
||||
}
|
||||
|
||||
var $wrapper = $('body'),
|
||||
$inner = $('.t3-wrapper'),
|
||||
$toggles = $('.off-canvas-toggle'),
|
||||
$offcanvas = $('.t3-off-canvas'),
|
||||
$close = $('.t3-off-canvas .close'),
|
||||
$btn=null,
|
||||
$nav=null,
|
||||
direction = 'left',
|
||||
$fixed = null;
|
||||
// no wrapper, just exit
|
||||
if (!$wrapper.length) return ;
|
||||
|
||||
// add effect class for nav
|
||||
$toggles.each (function () {
|
||||
var $this = $(this),
|
||||
$nav = $($this.data('nav')),
|
||||
effect = $this.data('effect'),
|
||||
direction = ($('html').attr('dir') == 'rtl' && $this.data('pos')!='right') || ($('html').attr('dir') != 'rtl' && $this.data('pos')=='right') ? 'right':'left';
|
||||
$nav.addClass (effect).addClass ('off-canvas-'+direction);
|
||||
|
||||
// move to outside wrapper-content
|
||||
var inside_effect = ['off-canvas-effect-3','off-canvas-effect-16','off-canvas-effect-7','off-canvas-effect-8','off-canvas-effect-14'];
|
||||
if ($.inArray(effect, inside_effect) == -1) {
|
||||
$inner.before($nav);
|
||||
} else {
|
||||
$inner.prepend($nav);
|
||||
}
|
||||
});
|
||||
|
||||
$toggles.on('click', function(e){
|
||||
|
||||
stopBubble (e);
|
||||
|
||||
if ($wrapper.hasClass ('off-canvas-open')) {
|
||||
oc_hide (e);
|
||||
return false;
|
||||
}
|
||||
|
||||
$btn = $(this);
|
||||
$nav = $($btn.data('nav'));
|
||||
$fixed = $inner.find('*').filter (function() {return $(this).css("position") === 'fixed';});
|
||||
|
||||
$nav.addClass ('off-canvas-current');
|
||||
|
||||
direction = ($('html').attr('dir') == 'rtl' && $btn.data('pos')!='right') || ($('html').attr('dir') != 'rtl' && $btn.data('pos')=='right') ? 'right':'left';
|
||||
|
||||
// add direction class to body
|
||||
// $('html').removeClass ('off-canvas-left off-canvas-right').addClass ('off-canvas-' + direction);
|
||||
|
||||
$offcanvas.height($(window).height());
|
||||
|
||||
// disable scroll event
|
||||
var events = $(window).data('events');
|
||||
if (events && events.scroll && events.scroll.length) {
|
||||
// store current handler for scroll
|
||||
var handlers = [];
|
||||
for (var i=0; i<events.scroll.length; i++){
|
||||
handlers[i] = events.scroll[i].handler;
|
||||
}
|
||||
$(window).data('scroll-events', handlers);
|
||||
$(window).off ('scroll');
|
||||
}
|
||||
// disable scroll on page
|
||||
var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
|
||||
$('html').addClass('noscroll').css('top',-scrollTop).data('top', scrollTop);
|
||||
$('.t3-off-canvas').css('top',scrollTop);
|
||||
|
||||
// make the fixed element become absolute
|
||||
$fixed.each (function () {
|
||||
var $this = $(this),
|
||||
$parent = $this.parent(),
|
||||
mtop = 0;
|
||||
// find none static parent
|
||||
while (!$parent.is($inner) && $parent.css("position") === 'static') $parent = $parent.parent();
|
||||
mtop = -$parent.offset().top;
|
||||
$this.css ({'position': 'absolute', 'margin-top': mtop});
|
||||
});
|
||||
|
||||
$wrapper.scrollTop (scrollTop);
|
||||
// update effect class
|
||||
$wrapper[0].className = $wrapper[0].className.replace (/\s*off\-canvas\-effect\-\d+\s*/g, ' ').trim() +
|
||||
' ' + $btn.data('effect') + ' ' + 'off-canvas-' + direction;
|
||||
|
||||
setTimeout(oc_show, 50);
|
||||
|
||||
return false;
|
||||
});
|
||||
var oc_show = function () {
|
||||
$wrapper.addClass ('off-canvas-open');
|
||||
$inner.on ('click', oc_hide);
|
||||
$close.on ('click', oc_hide);
|
||||
$offcanvas.on ('click', stopBubble);
|
||||
|
||||
};
|
||||
|
||||
var oc_hide = function () {
|
||||
|
||||
//remove events
|
||||
$inner.off ('click', oc_hide);
|
||||
$close.off ('click', oc_hide);
|
||||
$offcanvas.off ('click', stopBubble);
|
||||
|
||||
//delay for click action
|
||||
setTimeout(function(){
|
||||
$wrapper.removeClass ('off-canvas-open');
|
||||
}, 100);
|
||||
|
||||
setTimeout (function (){
|
||||
$wrapper.removeClass ($btn.data('effect')).removeClass ('off-canvas-'+direction);
|
||||
$wrapper.scrollTop (0);
|
||||
// enable scroll
|
||||
$('html').removeClass ('noscroll').css('top', '');
|
||||
$('html,body').scrollTop ($('html').data('top'));
|
||||
$nav.removeClass ('off-canvas-current');
|
||||
// restore fixed elements
|
||||
$fixed.css ({'position': '', 'margin-top': ''});
|
||||
// re-enable scroll
|
||||
if ($(window).data('scroll-events')) {
|
||||
var handlers = $(window).data('scroll-events');
|
||||
for (var i=0; i<handlers.length; i++) {
|
||||
$(window).on ('scroll', handlers[i]);
|
||||
}
|
||||
$(window).data('scroll-events', null);
|
||||
}
|
||||
}, 550);
|
||||
|
||||
// fix for old ie
|
||||
if ($('html').hasClass ('old-ie')) {
|
||||
var p1 = {}, p2 = {};
|
||||
p1['padding-'+direction] = 0;
|
||||
p2[direction] = -$('.t3-off-canvas').width();
|
||||
$inner.animate (p1);
|
||||
$nav.animate (p2);
|
||||
}
|
||||
};
|
||||
|
||||
var stopBubble = function (e) {
|
||||
e.stopPropagation();
|
||||
return true;
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
|
@ -14,6 +14,9 @@ div a[href^="/user/edit"],
|
|||
display: none ;
|
||||
}
|
||||
|
||||
#t3-mainnav {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#t3-mainnav a.logo {
|
||||
box-shadow: none;
|
||||
|
|
@ -99,7 +102,6 @@ padding-top: 80px;
|
|||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
.navbar-lang li a {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
@ -202,10 +204,6 @@ li.media-item {
|
|||
padding: 0 15px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#t3-mainnav .off-canvas-current {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
#t3-mainnav ul.nav li, #t3-mainnav ul.nav li .dropdown-menu {
|
||||
display: block;
|
||||
float: none;
|
||||
|
|
@ -215,6 +213,92 @@ li.media-item {
|
|||
}
|
||||
}
|
||||
|
||||
/* reponsive menu */
|
||||
|
||||
#toggle-toc {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
#toggle-toc:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.container > .navbar-header {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
transition: left 0.2s ease-out;
|
||||
}
|
||||
|
||||
#off-nav {
|
||||
display: none;
|
||||
margin-bottom: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
bottom: 0;
|
||||
margin-left: -230px;
|
||||
width: 230px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border-right: 1px solid #aaa;
|
||||
background: #fff;
|
||||
transition: left 0.2s ease-out;
|
||||
}
|
||||
|
||||
#off-nav i {
|
||||
margin: 0 15px 0 8px;
|
||||
}
|
||||
|
||||
#off-nav a.logo {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
#off-nav ul ul.nav a {
|
||||
padding: 4px 4px 4px 56px;
|
||||
}
|
||||
|
||||
#off-nav li.divider {
|
||||
margin: 12px 0;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
#off-nav li.divider.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.toc-open #toggle-container, body.toc-open #off-nav {
|
||||
left: 230px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#t3-mainnav {
|
||||
display: none;
|
||||
}
|
||||
#toggle-container, #off-nav {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* fix CKAN responsive issues */
|
||||
|
||||
.homepage.layout-1 .row1 .col2, .homepage.layout-1 .row2 .col2 {
|
||||
|
|
|
|||
|
|
@ -527,9 +527,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-collapse {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.page-header h1 small {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
|
|
@ -605,51 +602,6 @@
|
|||
padding-left: 10px;
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
.nav-collapse {
|
||||
clear: both;
|
||||
}
|
||||
.nav-collapse .nav {
|
||||
float: none;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.nav-collapse .nav > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-collapse .nav > li > a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.nav-collapse .nav > .divider-vertical {
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse .nav .nav-header {
|
||||
color: #777777;
|
||||
text-shadow: none;
|
||||
}
|
||||
.nav-collapse .nav > li > a,
|
||||
.nav-collapse .dropdown-menu a {
|
||||
padding: 9px 15px;
|
||||
font-weight: bold;
|
||||
color: #777777;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.nav-collapse .btn {
|
||||
padding: 4px 10px 4px;
|
||||
font-weight: normal;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-collapse .dropdown-menu li + li a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.nav-collapse .nav > li > a:hover,
|
||||
.nav-collapse .nav > li > a:focus,
|
||||
.nav-collapse .dropdown-menu a:hover,
|
||||
.nav-collapse .dropdown-menu a:focus {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.navbar-inverse .nav-collapse .nav > li > a,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a {
|
||||
color: #999999;
|
||||
|
|
|
|||
|
|
@ -2763,26 +2763,6 @@ input[type="button"].btn-block {
|
|||
.fade.in {
|
||||
opacity: 1;
|
||||
}
|
||||
.collapse {
|
||||
display: none;
|
||||
}
|
||||
.collapse.in {
|
||||
display: block;
|
||||
}
|
||||
tr.collapse.in {
|
||||
display: table-row;
|
||||
}
|
||||
tbody.collapse.in {
|
||||
display: table-row-group;
|
||||
}
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
-webkit-transition: height 0.35s ease;
|
||||
-o-transition: height 0.35s ease;
|
||||
transition: height 0.35s ease;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
src: url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot');
|
||||
|
|
|
|||
|
|
@ -132,11 +132,7 @@
|
|||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.t3-mainnav .t3-navbar-collapse {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.t3-mainnav .t3-navbar-collapse .navbar-nav {
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
.off-canvas-toggle {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.off-canvas-toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
.t3-off-canvas {
|
||||
background: #ffffff;
|
||||
color: #636884;
|
||||
z-index: 100;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-header {
|
||||
background: #eeeeee;
|
||||
color: #636884;
|
||||
padding: 0 0 0 12px;
|
||||
height: 35px;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-header h2 {
|
||||
margin: 0;
|
||||
line-height: 35px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.t3-off-canvas .close {
|
||||
margin: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
width: 35px;
|
||||
background: #bbbbbb;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-body {
|
||||
padding: 24px 12px;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-body a {
|
||||
color: #6e418e;
|
||||
text-decoration: none;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-body a:hover,
|
||||
.t3-off-canvas .t3-off-canvas-body a:focus {
|
||||
color: #45295a;
|
||||
text-decoration: none;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-body a:focus {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-body .dropdown-menu .active a {
|
||||
background: transparent;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-body .t3-module {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.t3-off-canvas .t3-off-canvas-body .module-title {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
|
@ -1,13 +1,50 @@
|
|||
{% set current_lang = request.environ.CKAN_LANG %}
|
||||
{% set current_page = request.environ.CKAN_CURRENT_URL %}
|
||||
<div id="toggle-container">
|
||||
<button id="toggle-toc" class="btn btn-primary visible-xs-inline-block" type="button">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<nav id="off-nav">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a class="logo" href="{{ g.ozwillo_url }}/{{current_lang}}"><img src="/img/logo-h43.png" alt="{% trans %}Home{% endtrans %}"></a>
|
||||
</li>
|
||||
<li class="divider first"></li>
|
||||
<li>
|
||||
<a class="nav-apps" href="{{ g.ozwillo_portal_url }}/{{current_lang}}/store?ui_locales={{current_lang}}">{% trans %}Catalog{% endtrans %}</a>
|
||||
</li>
|
||||
{% if c.userobj %}
|
||||
<li class="deeper dropdown parent">
|
||||
<a class="nav-data" href="#">{% trans %}Data{% endtrans %}</a>
|
||||
<ul class="nav">
|
||||
<li{% if current_page.startswith('/dataset') %} class='active'{% endif %}><a href="/{{current_lang}}/dataset">{% trans %}Datasets{% endtrans %}</a></li>
|
||||
<li{% if current_page.startswith('/organization') %} class='active'{% endif %}><a href="/{{current_lang}}/organization">{% trans %}Organizations{% endtrans %}</a></li>
|
||||
<li{% if current_page.startswith('/group') %} class='active'{% endif %}><a href="/{{current_lang}}/group">{% trans %}Groups{% endtrans %}</a></li>
|
||||
<li{% if current_page.startswith('/dashboard') %} class='active'{% endif %}><a href="/{{current_lang}}/dashboard">{% trans %}Dashboard{% endtrans %}</a></li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<li class="active deeper dropdown parent">
|
||||
<a class="dropdown-toggle nav-data" href="/">{% trans %}Data{% endtrans %}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-toggle" href="{{ g.ozwillo_url }}{{ g.localized_links[current_lang]['discovering'] }}"><i class="fa fa-search"></i> {% trans %}Discover{% endtrans %}</a>
|
||||
</li>
|
||||
<li>
|
||||
{% if c.userobj %}
|
||||
<a href="{{ h.url_for('/user/slo') }}"><i class="fa fa-sign-out"></i> {% trans %}Log out{% endtrans %}</a>
|
||||
{% else %}
|
||||
<a href="{{ g.ozwillo_portal_url }}/my?ui_locales={{current_lang}}"><i class="fa fa-sign-in"></i> {% trans %}Log in{% endtrans %}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button class="btn btn-primary visible-xs-inline-block off-canvas-toggle " type="button" data-pos="left" data-nav="#t3-off-canvas" data-effect="off-canvas-effect-4">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="t3-navbar navbar-collapse collapse" id="t3-off-canvas">
|
||||
<div class="t3-navbar">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="item-107 current">
|
||||
<a class="logo" href="{{ g.ozwillo_url }}/{{current_lang}}"><img src="/img/logo-h43.png" alt="{% trans %}Home{% endtrans %}"></a>
|
||||
|
|
@ -44,7 +81,7 @@
|
|||
<a class="btn navbar-btn" href="{{ g.ozwillo_portal_url }}/my?ui_locales={{current_lang}}">{% trans %}Log in{% endtrans %}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="item-112 deeper dropdown parent hidden-menu-table"><a class="dropdown-toggle" href="/en/oz/discover" data-toggle="dropdown">{% trans %}Discover{% endtrans %} <b class="caret"></b></a>
|
||||
<li class="item-112 deeper dropdown parent hidden-menu-table"><a class="dropdown-toggle" href="#" data-toggle="dropdown">{% trans %}Discover{% endtrans %} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="{{ g.ozwillo_url }}{{ g.localized_links[current_lang]['discovering'] }}">{% trans %}Discovering the Platform{% endtrans %}</a></li>
|
||||
<li><a href="{{ g.ozwillo_url }}{{ g.localized_links[current_lang]['news'] }}">{% trans %}News{% endtrans %}</a></li>
|
||||
|
|
|
|||
Reference in New Issue