Control navigation: Only expand/collapse on arrow click

This commit is contained in:
Raphael Michel
2016-10-01 12:59:48 +02:00
parent 4feeab35e4
commit 1593787302
6 changed files with 124 additions and 16 deletions

View File

@@ -19,7 +19,7 @@
<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
<script type="text/javascript" src="{% static "charts/raphael-min.js" %}"></script>
<script type="text/javascript" src="{% static "charts/morris.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/metisMenu.min.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/menu.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/sb-admin-2.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/main.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/quota.js" %}"></script>

View File

@@ -20,9 +20,12 @@
{% endif %}
{% if request.eventperm.can_change_items %}
<li>
<a href="#">
<a href="{% url 'control:event.items' organizer=request.event.organizer.slug event=request.event.slug %}"
class="has-children">
<i class="fa fa-ticket fa-fw"></i>
{% trans "Products" %}
</a>
<a href="#" class="arrow">
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
@@ -54,9 +57,12 @@
{% endif %}
{% if request.eventperm.can_view_orders %}
<li>
<a href="#">
<a href="{% url 'control:event.orders' organizer=request.event.organizer.slug event=request.event.slug %}"
class="has-children">
<i class="fa fa-shopping-cart fa-fw"></i>
{% trans "Orders" %}
</a>
<a href="#" class="arrow">
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">

View File

@@ -0,0 +1,86 @@
/*
* Based on:
* metismenu - v1.1.3
* Easy menu jQuery plugin for Twitter Bootstrap 3
* https://github.com/onokumus/metisMenu
*
* Made by Osman Nuri Okumus
* Under MIT License
* Modified by Raphael Michel
*/
;(function($, window, document, undefined) {
var pluginName = "metisMenu",
defaults = {
toggle: true,
};
function Plugin(element, options) {
this.element = $(element);
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var $this = this.element,
$toggle = this.settings.toggle,
obj = this;
if (this.isIE() <= 9) {
$this.find("li.active").has("ul").children("ul").collapse("show");
$this.find("li").not(".active").has("ul").children("ul").collapse("hide");
} else {
$this.find("li.active").has("ul").children("ul").addClass("collapse in");
$this.find("li").not(".active").has("ul").children("ul").addClass("collapse");
}
$this.find("li").has("ul").children("a.arrow").on("click" + "." + pluginName, function(e) {
e.preventDefault();
$(this).blur();
$(this).parent("li").toggleClass("active").children("ul").collapse("toggle");
if ($toggle) {
$(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
}
});
},
isIE: function() { //https://gist.github.com/padolsey/527683
var undef,
v = 3,
div = document.createElement("div"),
all = div.getElementsByTagName("i");
while (
div.innerHTML = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->",
all[0]
) {
return v > 4 ? v : undef;
}
},
remove: function() {
this.element.off("." + pluginName);
this.element.removeData(pluginName);
}
};
$.fn[pluginName] = function(options) {
this.each(function () {
var el = $(this);
if (el.data(pluginName)) {
el.data(pluginName).remove();
}
el.data(pluginName, new Plugin(this, options));
});
return this;
};
})(jQuery, window, document);

View File

@@ -1,9 +0,0 @@
/*
* metismenu - v1.1.3
* Easy menu jQuery plugin for Twitter Bootstrap 3
* https://github.com/onokumus/metisMenu
*
* Made by Osman Nuri Okumus
* Under MIT License
*/
!function(a,b,c){function d(b,c){this.element=a(b),this.settings=a.extend({},f,c),this._defaults=f,this._name=e,this.init()}var e="metisMenu",f={toggle:!0,doubleTapToGo:!1};d.prototype={init:function(){var b=this.element,d=this.settings.toggle,f=this;this.isIE()<=9?(b.find("li.active").has("ul").children("ul").collapse("show"),b.find("li").not(".active").has("ul").children("ul").collapse("hide")):(b.find("li.active").has("ul").children("ul").addClass("collapse in"),b.find("li").not(".active").has("ul").children("ul").addClass("collapse")),f.settings.doubleTapToGo&&b.find("li.active").has("ul").children("a").addClass("doubleTapToGo"),b.find("li").has("ul").children("a").on("click."+e,function(b){return b.preventDefault(),f.settings.doubleTapToGo&&f.doubleTapToGo(a(this))&&"#"!==a(this).attr("href")&&""!==a(this).attr("href")?(b.stopPropagation(),void(c.location=a(this).attr("href"))):(a(this).parent("li").toggleClass("active").children("ul").collapse("toggle"),void(d&&a(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide")))})},isIE:function(){for(var a,b=3,d=c.createElement("div"),e=d.getElementsByTagName("i");d.innerHTML="<!--[if gt IE "+ ++b+"]><i></i><![endif]-->",e[0];)return b>4?b:a},doubleTapToGo:function(a){var b=this.element;return a.hasClass("doubleTapToGo")?(a.removeClass("doubleTapToGo"),!0):a.parent().children("ul").length?(b.find(".doubleTapToGo").removeClass("doubleTapToGo"),a.addClass("doubleTapToGo"),!1):void 0},remove:function(){this.element.off("."+e),this.element.removeData(e)}},a.fn[e]=function(b){return this.each(function(){var c=a(this);c.data(e)&&c.data(e).remove(),c.data(e,new d(this,b))}),this}}(jQuery,window,document);

View File

@@ -1,4 +1,10 @@
/*global $ */
/*
Based on https://github.com/BlackrockDigital/startbootstrap-sb-admin-2
Copyright 2013-2016 Blackrock Digital LLC
MIT License
Modified by Raphael Michel
*/
//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
@@ -23,5 +29,7 @@ $(function () {
});
$('ul.nav ul.nav-second-level a.active').parent().parent().addClass('in').parent().addClass('active');
$('#side-menu').metisMenu({'toggle': false});
$('#side-menu').metisMenu({
'toggle': false,
});
});

View File

@@ -1,4 +1,9 @@
/*
Based on https://github.com/BlackrockDigital/startbootstrap-sb-admin-2
Copyright 2013-2016 Blackrock Digital LLC
MIT License
Modified by Raphael Michel
*/
// Global Styles
body {
@@ -103,15 +108,27 @@ body {
.sidebar ul li {
border-bottom: 1px solid darken($gray-lightest, 6.5%);
position: relative;
a {
&.active {
background-color: $gray-lighter;
}
}
a.arrow {
position: absolute;
right: 0;
top: 0;
display: block;
}
a.has-children {
margin-right: 40px;
}
}
.sidebar .arrow {
float: right;
.sidebar .fa.arrow {
line-height: 19px !important;
width: 10px;
text-align: center;
}
.sidebar .fa.arrow:before {