Project

General

Profile

« Previous | Next » 

Revision 281dd918

Added by Guillaume Denis almost 8 years ago

responsive navbar

View differences:

ckanext/ozwillo_theme/fanstatic/off-canvas.js
1
/**
2
 *------------------------------------------------------------------------------
3
 * @package       T3 Framework for Joomla!
4
 *------------------------------------------------------------------------------
5
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
6
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
7
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github
8
 *                & Google group to become co-author)
9
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
10
 * @Link:         http://t3-framework.org
11
 *------------------------------------------------------------------------------
12
 */
13

  
14
jQuery (document).ready(function($){
15
    // fix for old ie
16
    if (/MSIE\s([\d.]+)/.test(navigator.userAgent) ? new Number(RegExp.$1) < 10 : false) {
17
        $('html').addClass ('old-ie');
18
    } else if(/constructor/i.test(window.HTMLElement)){
19
        $('html').addClass('safari');
20
    }
21

  
22
    var $wrapper = $('body'),
23
        $inner = $('.t3-wrapper'),
24
        $toggles = $('.off-canvas-toggle'),
25
        $offcanvas = $('.t3-off-canvas'),
26
        $close = $('.t3-off-canvas .close'),
27
        $btn=null,
28
        $nav=null,
29
        direction = 'left',
30
        $fixed = null;
31
    // no wrapper, just exit
32
    if (!$wrapper.length) return ;
33

  
34
    // add effect class for nav
35
    $toggles.each (function () {
36
        var $this = $(this),
37
            $nav = $($this.data('nav')),
38
            effect = $this.data('effect'),
39
            direction = ($('html').attr('dir') == 'rtl' && $this.data('pos')!='right') || ($('html').attr('dir') != 'rtl' && $this.data('pos')=='right')  ? 'right':'left';
40
        $nav.addClass (effect).addClass ('off-canvas-'+direction);
41

  
42
        // move to outside wrapper-content
43
        var inside_effect = ['off-canvas-effect-3','off-canvas-effect-16','off-canvas-effect-7','off-canvas-effect-8','off-canvas-effect-14'];
44
        if ($.inArray(effect, inside_effect) == -1) {
45
            $inner.before($nav);
46
        } else {
47
            $inner.prepend($nav);
48
        }
49
    });
50

  
51
    $toggles.on('click', function(e){
52

  
53
        stopBubble (e);
54

  
55
        if ($wrapper.hasClass ('off-canvas-open')) {
56
            oc_hide (e);
57
            return false;
58
        }
59

  
60
        $btn = $(this);
61
        $nav = $($btn.data('nav'));
62
        $fixed = $inner.find('*').filter (function() {return $(this).css("position") === 'fixed';});
63

  
64
        $nav.addClass ('off-canvas-current');
65

  
66
        direction = ($('html').attr('dir') == 'rtl' && $btn.data('pos')!='right') || ($('html').attr('dir') != 'rtl' && $btn.data('pos')=='right')  ? 'right':'left';
67

  
68
        // add direction class to body
69
        // $('html').removeClass ('off-canvas-left off-canvas-right').addClass ('off-canvas-' + direction);
70

  
71
        $offcanvas.height($(window).height());
72

  
73
        // disable scroll event
74
        var events = $(window).data('events');
75
        if (events && events.scroll && events.scroll.length) {
76
          // store current handler for scroll
77
          var handlers = [];
78
          for (var i=0; i<events.scroll.length; i++){
79
            handlers[i] = events.scroll[i].handler;
80
          }
81
          $(window).data('scroll-events', handlers);
82
          $(window).off ('scroll');
83
        }
84
        // disable scroll on page
85
        var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
86
        $('html').addClass('noscroll').css('top',-scrollTop).data('top', scrollTop);
87
        $('.t3-off-canvas').css('top',scrollTop);
88

  
89
        // make the fixed element become absolute
90
        $fixed.each (function () {
91
            var $this = $(this),
92
                $parent = $this.parent(),
93
                mtop = 0;
94
            // find none static parent
95
            while (!$parent.is($inner) && $parent.css("position") === 'static') $parent = $parent.parent();
96
            mtop = -$parent.offset().top;
97
            $this.css ({'position': 'absolute', 'margin-top': mtop});
98
        });
99

  
100
        $wrapper.scrollTop (scrollTop);
101
        // update effect class
102
        $wrapper[0].className = $wrapper[0].className.replace (/\s*off\-canvas\-effect\-\d+\s*/g, ' ').trim() +
103
            ' ' + $btn.data('effect') + ' ' + 'off-canvas-' + direction;
104

  
105
        setTimeout(oc_show, 50);
106

  
107
        return false;
108
    });
109
    var oc_show = function () {
110
        $wrapper.addClass ('off-canvas-open');
111
        $inner.on ('click', oc_hide);
112
        $close.on ('click', oc_hide);
113
        $offcanvas.on ('click', stopBubble);
114

  
115
    };
116

  
117
    var oc_hide = function () {
118

  
119
        //remove events
120
        $inner.off ('click', oc_hide);
121
        $close.off ('click', oc_hide);
122
        $offcanvas.off ('click', stopBubble);
123

  
124
        //delay for click action
125
        setTimeout(function(){
126
            $wrapper.removeClass ('off-canvas-open');
127
        }, 100);
128

  
129
        setTimeout (function (){
130
            $wrapper.removeClass ($btn.data('effect')).removeClass ('off-canvas-'+direction);
131
            $wrapper.scrollTop (0);
132
            // enable scroll
133
            $('html').removeClass ('noscroll').css('top', '');
134
            $('html,body').scrollTop ($('html').data('top'));
135
            $nav.removeClass ('off-canvas-current');
136
            // restore fixed elements
137
            $fixed.css ({'position': '', 'margin-top': ''});
138
            // re-enable scroll
139
            if ($(window).data('scroll-events')) {
140
              var handlers = $(window).data('scroll-events');
141
              for (var i=0; i<handlers.length; i++) {
142
                $(window).on ('scroll', handlers[i]);
143
              }
144
              $(window).data('scroll-events', null);
145
            }
146
        }, 550);
147

  
148
        // fix for old ie
149
        if ($('html').hasClass ('old-ie')) {
150
            var p1 = {}, p2 = {};
151
            p1['padding-'+direction] = 0;
152
            p2[direction] = -$('.t3-off-canvas').width();
153
            $inner.animate (p1);
154
            $nav.animate (p2);
155
        }
156
    };
157

  
158
    var stopBubble = function (e) {
159
        e.stopPropagation();
160
        return true;
1
document.addEventListener('DOMContentLoaded', function() {
2
  document.getElementById('toggle-toc').addEventListener('click', function() {
3
    var el = document.body, className = 'toc-open';
4
    if (el.classList) {
5
      el.classList.toggle(className);
6
    } else {
7
      var classes = el.className.split(' ');
8
      var existingIndex = classes.indexOf(className);
9

  
10
      if (existingIndex >= 0)
11
        classes.splice(existingIndex, 1);
12
      else
13
        classes.push(className);
14

  
15
      el.className = classes.join(' ');
161 16
    }
162
})
17
  });
18
});
ckanext/ozwillo_theme/fanstatic/ozwillo.css
14 14
   display: none ;
15 15
}
16 16

  
17
#t3-mainnav {
18
  border-bottom: 1px solid #ddd;
19
}
17 20

  
18 21
#t3-mainnav a.logo {
19 22
  box-shadow: none;
......
99 102
	color: white !important;
100 103
}
101 104

  
102

  
103 105
.navbar-lang li a {
104 106
    text-transform: capitalize;
105 107
}
......
202 204
        padding: 0 15px;
203 205
        margin-left: 20px;
204 206
    }
205
    #t3-mainnav .off-canvas-current {
206
        display: block;
207
        overflow: visible;
208
    }
209 207
    #t3-mainnav ul.nav li, #t3-mainnav ul.nav li .dropdown-menu {
210 208
        display: block;
211 209
        float: none;
......
215 213
    }
216 214
}
217 215

  
216
/* reponsive menu */
217

  
218
#toggle-toc {
219
  position: absolute;
220
  margin-top: 0;
221
  border-radius: 0;
222
  border: 0;
223
  padding: 0;
224
  width: 50px;
225
  height: 50px;
226
  line-height: 50px;
227
}
228
#toggle-toc:focus {
229
  outline: none;
230
}
231

  
232
@media (max-width: 767px) {
233
  .container > .navbar-header {
234
    margin: 0 !important;
235
  }
236
}
237

  
238
#toggle-container {
239
  display: none;
240
  position: fixed;
241
  top: 0;
242
  left: 0;
243
  z-index: 1000;
244
  width: 100%;
245
  height: 50px;
246
  background: #fff;
247
  border-bottom: 1px solid #ddd;
248
  transition: left 0.2s ease-out;
249
}
250

  
251
#off-nav {
252
  display: none;
253
  margin-bottom: 0;
254
  position: fixed;
255
  left: 0;
256
  top: 0;
257
  z-index: 1000;
258
  bottom: 0;
259
  margin-left: -230px;
260
  width: 230px;
261
  box-sizing: border-box;
262
  overflow-y: auto;
263
  -webkit-overflow-scrolling: touch;
264
  border-right: 1px solid #aaa;
265
  background: #fff;
266
  transition: left 0.2s ease-out;
267
}
268

  
269
#off-nav i {
270
  margin: 0 15px 0 8px;
271
}
272

  
273
#off-nav a.logo {
274
  padding-bottom: 12px;
275
}
276

  
277
#off-nav ul ul.nav a {
278
  padding: 4px 4px 4px 56px;
279
}
280

  
281
#off-nav li.divider {
282
  margin: 12px 0;
283
  border-bottom: 2px solid #eee;
284
}
285

  
286
#off-nav li.divider.first {
287
  margin-top: 0;
288
}
289

  
290
body.toc-open #toggle-container, body.toc-open #off-nav {
291
  left: 230px;
292
}
293
@media (max-width: 768px) {
294
  #t3-mainnav {
295
    display: none;
296
  }
297
  #toggle-container, #off-nav {
298
    display: block;
299
  }
300
}
301

  
218 302
/* fix CKAN responsive issues */
219 303

  
220 304
.homepage.layout-1 .row1 .col2, .homepage.layout-1 .row2 .col2 {
ckanext/ozwillo_theme/fanstatic/responsive.css
527 527
}
528 528

  
529 529
@media (max-width: 480px) {
530
  .nav-collapse {
531
    -webkit-transform: translate3d(0, 0, 0);
532
  }
533 530
  .page-header h1 small {
534 531
    display: block;
535 532
    line-height: 20px;
......
605 602
    padding-left: 10px;
606 603
    margin: 0 0 0 -5px;
607 604
  }
608
  .nav-collapse {
609
    clear: both;
610
  }
611
  .nav-collapse .nav {
612
    float: none;
613
    margin: 0 0 10px;
614
  }
615
  .nav-collapse .nav > li {
616
    float: none;
617
  }
618
  .nav-collapse .nav > li > a {
619
    margin-bottom: 2px;
620
  }
621
  .nav-collapse .nav > .divider-vertical {
622
    display: none;
623
  }
624
  .nav-collapse .nav .nav-header {
625
    color: #777777;
626
    text-shadow: none;
627
  }
628
  .nav-collapse .nav > li > a,
629
  .nav-collapse .dropdown-menu a {
630
    padding: 9px 15px;
631
    font-weight: bold;
632
    color: #777777;
633
    -webkit-border-radius: 3px;
634
       -moz-border-radius: 3px;
635
            border-radius: 3px;
636
  }
637
  .nav-collapse .btn {
638
    padding: 4px 10px 4px;
639
    font-weight: normal;
640
    -webkit-border-radius: 4px;
641
       -moz-border-radius: 4px;
642
            border-radius: 4px;
643
  }
644
  .nav-collapse .dropdown-menu li + li a {
645
    margin-bottom: 2px;
646
  }
647
  .nav-collapse .nav > li > a:hover,
648
  .nav-collapse .nav > li > a:focus,
649
  .nav-collapse .dropdown-menu a:hover,
650
  .nav-collapse .dropdown-menu a:focus {
651
    background-color: #f2f2f2;
652
  }
653 605
  .navbar-inverse .nav-collapse .nav > li > a,
654 606
  .navbar-inverse .nav-collapse .dropdown-menu a {
655 607
    color: #999999;
ckanext/ozwillo_theme/fanstatic/templates.t3_bs3_blank.less.bootstrap.less.css
2763 2763
.fade.in {
2764 2764
  opacity: 1;
2765 2765
}
2766
.collapse {
2767
  display: none;
2768
}
2769
.collapse.in {
2770
  display: block;
2771
}
2772
tr.collapse.in {
2773
  display: table-row;
2774
}
2775
tbody.collapse.in {
2776
  display: table-row-group;
2777
}
2778
.collapsing {
2779
  position: relative;
2780
  height: 0;
2781
  overflow: hidden;
2782
  -webkit-transition: height 0.35s ease;
2783
  -o-transition: height 0.35s ease;
2784
  transition: height 0.35s ease;
2785
}
2786 2766
@font-face {
2787 2767
  font-family: 'Glyphicons Halflings';
2788 2768
  src: url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot');
ckanext/ozwillo_theme/fanstatic/templates.t3_bs3_blank.less.navbar.less.css
132 132
  padding-left: 0;
133 133
  padding-right: 0;
134 134
}
135
@media (min-width: 768px) {
136
  .t3-mainnav .t3-navbar-collapse {
137
    display: none !important;
138
  }
139
}
135

  
140 136
.t3-mainnav .t3-navbar-collapse .navbar-nav {
141 137
  margin: 0 -15px;
142 138
}
ckanext/ozwillo_theme/fanstatic/templates.t3_bs3_blank.less.off-canvas.less.css
1
.off-canvas-toggle {
2
  border-radius: 0;
3
  border: 0;
4
  padding: 0;
5
  width: 50px;
6
  height: 50px;
7
  line-height: 50px;
8
}
9
.off-canvas-toggle:focus {
10
  outline: none;
11
}
12
.t3-off-canvas {
13
  background: #ffffff;
14
  color: #636884;
15
  z-index: 100;
16
}
17
.t3-off-canvas .t3-off-canvas-header {
18
  background: #eeeeee;
19
  color: #636884;
20
  padding: 0 0 0 12px;
21
  height: 35px;
22
}
23
.t3-off-canvas .t3-off-canvas-header h2 {
24
  margin: 0;
25
  line-height: 35px;
26
  font-size: 16px;
27
  font-weight: bold;
28
  text-transform: uppercase;
29
}
30
.t3-off-canvas .close {
31
  margin: 0;
32
  height: 35px;
33
  line-height: 35px;
34
  width: 35px;
35
  background: #bbbbbb;
36
  position: absolute;
37
  top: 0;
38
  right: 0;
39
}
40
.t3-off-canvas .t3-off-canvas-body {
41
  padding: 24px 12px;
42
}
43
.t3-off-canvas .t3-off-canvas-body a {
44
  color: #6e418e;
45
  text-decoration: none;
46
}
47
.t3-off-canvas .t3-off-canvas-body a:hover,
48
.t3-off-canvas .t3-off-canvas-body a:focus {
49
  color: #45295a;
50
  text-decoration: none;
51
}
52
.t3-off-canvas .t3-off-canvas-body a:focus {
53
  outline: thin dotted;
54
  outline: 5px auto -webkit-focus-ring-color;
55
  outline-offset: -2px;
56
}
57
.t3-off-canvas .t3-off-canvas-body .dropdown-menu .active a {
58
  background: transparent;
59
}
60
.t3-off-canvas .t3-off-canvas-body .t3-module {
61
  margin-bottom: 22px;
62
}
63
.t3-off-canvas .t3-off-canvas-body .module-title {
64
  margin-bottom: 11px;
65
}
ckanext/ozwillo_theme/templates/header.html
1 1
{% set current_lang = request.environ.CKAN_LANG %}
2 2
{% set current_page = request.environ.CKAN_CURRENT_URL %}
3
<div id="toggle-container">
4
  <button id="toggle-toc" class="btn btn-primary visible-xs-inline-block" type="button">
5
    <i class="fa fa-bars"></i>
6
  </button>
7
</div>
8
<nav id="off-nav">
9
  <ul class="nav">
10
    <li>
11
      <a class="logo" href="{{ g.ozwillo_url }}/{{current_lang}}"><img src="/img/logo-h43.png" alt="{% trans %}Home{% endtrans %}"></a>
12
    </li>
13
    <li class="divider first"></li>
14
    <li>
15
      <a class="nav-apps" href="{{ g.ozwillo_portal_url }}/{{current_lang}}/store?ui_locales={{current_lang}}">{% trans %}Catalog{% endtrans %}</a>
16
    </li>
17
    {% if c.userobj %}
18
    <li class="deeper dropdown parent">
19
      <a class="nav-data" href="#">{% trans %}Data{% endtrans %}</a>
20
      <ul class="nav">
21
        <li{% if current_page.startswith('/dataset') %} class='active'{% endif %}><a href="/{{current_lang}}/dataset">{% trans %}Datasets{% endtrans %}</a></li>
22
        <li{% if current_page.startswith('/organization') %} class='active'{% endif %}><a href="/{{current_lang}}/organization">{% trans %}Organizations{% endtrans %}</a></li>
23
        <li{% if current_page.startswith('/group') %} class='active'{% endif %}><a href="/{{current_lang}}/group">{% trans %}Groups{% endtrans %}</a></li>
24
        <li{% if current_page.startswith('/dashboard') %} class='active'{% endif %}><a href="/{{current_lang}}/dashboard">{% trans %}Dashboard{% endtrans %}</a></li>
25
      </ul>
26
    {% else %}
27
    <li class="active deeper dropdown parent">
28
      <a class="dropdown-toggle nav-data" href="/">{% trans %}Data{% endtrans %}</a>
29
    {% endif %}
30
    </li>
31
    <li class="divider"></li>
32
    <li>
33
      <a class="dropdown-toggle" href="{{ g.ozwillo_url }}{{ g.localized_links[current_lang]['discovering'] }}"><i class="fa fa-search"></i> {% trans %}Discover{% endtrans %}</a>
34
    </li>
35
    <li>
36
      {% if c.userobj %}
37
      <a href="{{ h.url_for('/user/slo') }}"><i class="fa fa-sign-out"></i> {% trans %}Log out{% endtrans %}</a>
38
      {% else %}
39
      <a href="{{ g.ozwillo_portal_url }}/my?ui_locales={{current_lang}}"><i class="fa fa-sign-in"></i> {% trans %}Log in{% endtrans %}</a>
40
      {% endif %}
41
    </li>
42
    <li class="divider"></li>
43
  </ul>
44
</nav>
3 45
<nav id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav">
4 46
	<div class="container">
5
		<div class="navbar-header">
6
      <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">
7
        <i class="fa fa-bars"></i>
8
      </button>
9
		</div>
10
		<div class="t3-navbar navbar-collapse collapse" id="t3-off-canvas">
47
		<div class="t3-navbar">
11 48
			<ul class="nav navbar-nav">
12 49
  			<li class="item-107 current">
13 50
          <a class="logo" href="{{ g.ozwillo_url }}/{{current_lang}}"><img src="/img/logo-h43.png" alt="{% trans %}Home{% endtrans %}"></a>
......
44 81
        <a class="btn navbar-btn" href="{{ g.ozwillo_portal_url }}/my?ui_locales={{current_lang}}">{% trans %}Log in{% endtrans %}</a>
45 82
        {% endif %}
46 83
        </li>
47
        <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>
84
        <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>
48 85
          <ul class="dropdown-menu">
49 86
            <li><a href="{{ g.ozwillo_url }}{{ g.localized_links[current_lang]['discovering'] }}">{% trans %}Discovering the Platform{% endtrans %}</a></li>
50 87
            <li><a href="{{ g.ozwillo_url }}{{ g.localized_links[current_lang]['news'] }}">{% trans %}News{% endtrans %}</a></li>

Also available in: Unified diff