From c5aced9e42e4005a317fe3eaeacb340151a255ab Mon Sep 17 00:00:00 2001 From: Raphael Michel Date: Sat, 14 Mar 2015 15:27:57 +0100 Subject: [PATCH] pretix.control: sidebar-based navigation --- src/COPYRIGHT | 4 +- .../static/pretixcontrol/js/metisMenu.min.js | 9 + .../static/pretixcontrol/js/sb-admin-2.js | 25 ++ .../static/pretixcontrol/js/ui/main.js | 2 +- .../static/pretixcontrol/less/main.less | 11 + .../pretixcontrol/less/metisMenu.min.css | 10 + .../static/pretixcontrol/less/sb-admin-2.less | 364 ++++++++++++++++++ .../static/pretixcontrol/less/variables.less | 11 + .../control/templates/pretixcontrol/base.html | 115 ++++-- .../templates/pretixcontrol/event/base.html | 100 ++++- .../pretixcontrol/event/settings_base.html | 11 - .../pretixcontrol/item/restrictions.html | 2 +- .../pretixcontrol/item/variations_0d.html | 2 +- .../templates/pretixcontrol/items/base.html | 7 - 14 files changed, 595 insertions(+), 78 deletions(-) create mode 100644 src/pretix/control/static/pretixcontrol/js/metisMenu.min.js create mode 100644 src/pretix/control/static/pretixcontrol/js/sb-admin-2.js create mode 100644 src/pretix/control/static/pretixcontrol/less/metisMenu.min.css create mode 100644 src/pretix/control/static/pretixcontrol/less/sb-admin-2.less create mode 100644 src/pretix/control/static/pretixcontrol/less/variables.less diff --git a/src/COPYRIGHT b/src/COPYRIGHT index 62269859d6..231c2eec05 100644 --- a/src/COPYRIGHT +++ b/src/COPYRIGHT @@ -17,9 +17,11 @@ This project includes the work of others, namely: * Django, (c) Django Software Foundation and contributors, BSD License * Font Awesome, (c) Dave Gandy, SIL Open Font License and MIT License * Bootstrap, (c) Twitter, Inc., MIT License +* jQuery, (c) jQuery Foundation and contributors, MIT License * django-formset-js, (c) Ionata Web Solutions, BSD License * CleanerVersion, (c) Jean-Christophe Zulian, Brian King, Andrea Marcacci, Manuel Jeckelmann, Apache License * django-bootstrap3, (c) Dylan Verheul, Apache License * pytz, (c) Stuart Bishop, MIT License * python-dateutil, (c) Yaron de Leeuw, BSD License -* startbootstrap-sb-admin-2, (c) Iron Summit Media Strategies, LLC, Apache License \ No newline at end of file +* startbootstrap-sb-admin-2, (c) Iron Summit Media Strategies, LLC, Apache License +* metismenu, (c) Osman Nuri Okumus, MIT License \ No newline at end of file diff --git a/src/pretix/control/static/pretixcontrol/js/metisMenu.min.js b/src/pretix/control/static/pretixcontrol/js/metisMenu.min.js new file mode 100644 index 0000000000..8a590e75ff --- /dev/null +++ b/src/pretix/control/static/pretixcontrol/js/metisMenu.min.js @@ -0,0 +1,9 @@ +/* + * 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="",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); \ No newline at end of file diff --git a/src/pretix/control/static/pretixcontrol/js/sb-admin-2.js b/src/pretix/control/static/pretixcontrol/js/sb-admin-2.js new file mode 100644 index 0000000000..7e0de935e7 --- /dev/null +++ b/src/pretix/control/static/pretixcontrol/js/sb-admin-2.js @@ -0,0 +1,25 @@ +//Loads the correct sidebar on window load, +//collapses the sidebar on window resize. +// Sets the min-height of #page-wrapper to window size +$(function() { + $(window).bind("load resize", function() { + topOffset = 50; + width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width; + if (width < 768) { + $('div.navbar-collapse').addClass('collapse'); + topOffset = 100; // 2-row-menu + } else { + $('div.navbar-collapse').removeClass('collapse'); + } + + height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1; + height = height - topOffset; + if (height < 1) height = 1; + if (height > topOffset) { + $("#page-wrapper").css("min-height", (height) + "px"); + } + }); + + $('ul.nav ul.nav-second-level a.active').parent().parent().addClass('in').parent().addClass('active'); + $('#side-menu').metisMenu({'toggle': false}); +}); diff --git a/src/pretix/control/static/pretixcontrol/js/ui/main.js b/src/pretix/control/static/pretixcontrol/js/ui/main.js index fd00da129b..5a28a2a82f 100644 --- a/src/pretix/control/static/pretixcontrol/js/ui/main.js +++ b/src/pretix/control/static/pretixcontrol/js/ui/main.js @@ -23,5 +23,5 @@ $(function () { }); }); } - $('.collapse').collapse(); + $('.collapsible').collapse(); }); diff --git a/src/pretix/control/static/pretixcontrol/less/main.less b/src/pretix/control/static/pretixcontrol/less/main.less index c9a40630fb..60b2e66545 100644 --- a/src/pretix/control/static/pretixcontrol/less/main.less +++ b/src/pretix/control/static/pretixcontrol/less/main.less @@ -1,6 +1,9 @@ @import "../../../../base/static/bootstrap/less/bootstrap.less"; @import "../../../../base/static/fontawesome/less/font-awesome.less"; @fa-font-path: "../../fontawesome/fonts"; +@import (inline) "metisMenu.min.css"; +@import "variables.less"; +@import "sb-admin-2.less"; @import "forms.less"; footer { @@ -8,3 +11,11 @@ footer { padding: 10px 0; font-size: 11px; } + +nav.navbar { + margin: 0; +} + +.nav-pills { + margin-bottom: 10px; +} \ No newline at end of file diff --git a/src/pretix/control/static/pretixcontrol/less/metisMenu.min.css b/src/pretix/control/static/pretixcontrol/less/metisMenu.min.css new file mode 100644 index 0000000000..a1d0ef3994 --- /dev/null +++ b/src/pretix/control/static/pretixcontrol/less/metisMenu.min.css @@ -0,0 +1,10 @@ +/* + * 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 + */ + +.arrow{float:right;line-height:1.42857}.glyphicon.arrow:before{content:"\e079"}.active>a>.glyphicon.arrow:before{content:"\e114"}.fa.arrow:before{content:"\f104"}.active>a>.fa.arrow:before{content:"\f107"}.plus-times{float:right}.fa.plus-times:before{content:"\f067"}.active>a>.fa.plus-times{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.plus-minus{float:right}.fa.plus-minus:before{content:"\f067"}.active>a>.fa.plus-minus:before{content:"\f068"} \ No newline at end of file diff --git a/src/pretix/control/static/pretixcontrol/less/sb-admin-2.less b/src/pretix/control/static/pretixcontrol/less/sb-admin-2.less new file mode 100644 index 0000000000..4b73f4303c --- /dev/null +++ b/src/pretix/control/static/pretixcontrol/less/sb-admin-2.less @@ -0,0 +1,364 @@ + +// Global Styles + +body { + background-color: @gray-lightest; +} + +// Wrappers + +#wrapper { + width: 100%; +} + +#page-wrapper { + padding: 0 15px; + min-height: 568px; + background-color: white; +} + +@media(min-width:768px) { + #page-wrapper { + position: inherit; + margin: 0 0 0 250px; + padding: 0 30px; + border-left: 1px solid darken(@gray-lightest, 6.5%); + } +} + +// Navigation + +// --Topbar + +.navbar-top-links { + margin-right: 0; +} + +.navbar-top-links li { + display: inline-block; +} + +.navbar-top-links li:last-child { + margin-right: 15px; +} + +.navbar-top-links li a { + padding: 15px; + min-height: 50px; +} + +.navbar-top-links .dropdown-menu li { + display: block; +} + +.navbar-top-links .dropdown-menu li:last-child { + margin-right: 0; +} + +.navbar-top-links .dropdown-menu li a { + padding: 3px 20px; + min-height: 0; +} + +.navbar-top-links .dropdown-menu li a div { + white-space: normal; +} + +.navbar-top-links .dropdown-messages, +.navbar-top-links .dropdown-tasks, +.navbar-top-links .dropdown-alerts { + width: 310px; + min-width: 0; +} + +.navbar-top-links .dropdown-messages { + margin-left: 5px; +} + +.navbar-top-links .dropdown-tasks { + margin-left: -59px; +} + +.navbar-top-links .dropdown-alerts { + margin-left: -123px; +} + +.navbar-top-links .dropdown-user { + right: 0; + left: auto; +} + +// --Sidebar + +.sidebar { + .sidebar-nav.navbar-collapse { + padding-left: 0; + padding-right: 0; + } +} + +.sidebar .sidebar-search { + padding: 15px; +} + +.sidebar ul li { + border-bottom: 1px solid darken(@gray-lightest, 6.5%); + a { + &.active { + background-color: @gray-lighter; + } + } +} + +.sidebar .arrow { + float: right; +} + +.sidebar .fa.arrow:before { + content: "\f104"; +} + +.sidebar .active > a > .fa.arrow:before { + content: "\f107"; +} + +.sidebar .nav-second-level li, +.sidebar .nav-third-level li { + border-bottom: none !important; +} + +.sidebar .nav-second-level li a { + padding-left: 37px; +} + +.sidebar .nav-third-level li a { + padding-left: 52px; +} + +@media(min-width:768px) { + .sidebar { + z-index: 1; + position: absolute; + width: 250px; + margin-top: 51px; + } + + .navbar-top-links .dropdown-messages, + .navbar-top-links .dropdown-tasks, + .navbar-top-links .dropdown-alerts { + margin-left: auto; + } +} + +// Buttons + +.btn-outline { + color: inherit; + background-color: transparent; + transition: all .5s; +} + +.btn-primary.btn-outline { + color: @brand-primary; +} + +.btn-success.btn-outline { + color: @brand-success; +} + +.btn-info.btn-outline { + color: @brand-info; +} + +.btn-warning.btn-outline { + color: @brand-warning; +} + +.btn-danger.btn-outline { + color: @brand-danger; +} + +.btn-primary.btn-outline:hover, +.btn-success.btn-outline:hover, +.btn-info.btn-outline:hover, +.btn-warning.btn-outline:hover, +.btn-danger.btn-outline:hover { + color: white; +} + +// Chat Widget + +.chat { + margin: 0; + padding: 0; + list-style: none; +} + +.chat li { + margin-bottom: 10px; + padding-bottom: 5px; + border-bottom: 1px dotted @gray-light; +} + +.chat li.left .chat-body { + margin-left: 60px; +} + +.chat li.right .chat-body { + margin-right: 60px; +} + +.chat li .chat-body p { + margin: 0; +} + +.panel .slidedown .glyphicon, +.chat .glyphicon { + margin-right: 5px; +} + +.chat-panel .panel-body { + height: 350px; + overflow-y: scroll; +} + +// Login Page + +.login-panel { + margin-top: 25%; +} + +// Flot Charts Containers + +.flot-chart { + display: block; + height: 400px; +} + +.flot-chart-content { + width: 100%; + height: 100%; +} + +// DataTables Overrides + +table.dataTable thead .sorting, +table.dataTable thead .sorting_asc, +table.dataTable thead .sorting_desc, +table.dataTable thead .sorting_asc_disabled, +table.dataTable thead .sorting_desc_disabled { + background: transparent; +} + +table.dataTable thead .sorting_asc:after { + content: "\f0de"; + float: right; + font-family: fontawesome; +} + +table.dataTable thead .sorting_desc:after { + content: "\f0dd"; + float: right; + font-family: fontawesome; +} + +table.dataTable thead .sorting:after { + content: "\f0dc"; + float: right; + font-family: fontawesome; + color: rgba(50,50,50,.5); +} + +// Circle Buttons + +.btn-circle { + width: 30px; + height: 30px; + padding: 6px 0; + border-radius: 15px; + text-align: center; + font-size: 12px; + line-height: 1.428571429; +} + +.btn-circle.btn-lg { + width: 50px; + height: 50px; + padding: 10px 16px; + border-radius: 25px; + font-size: 18px; + line-height: 1.33; +} + +.btn-circle.btn-xl { + width: 70px; + height: 70px; + padding: 10px 16px; + border-radius: 35px; + font-size: 24px; + line-height: 1.33; +} + +// Grid Demo Elements + +.show-grid [class^="col-"] { + padding-top: 10px; + padding-bottom: 10px; + border: 1px solid #ddd; + background-color: #eee !important; +} + +.show-grid { + margin: 15px 0; +} + +// Custom Colored Panels + +.huge { + font-size: 40px; +} + +.panel-green { + border-color: @brand-success; + .panel-heading { + border-color: @brand-success; + color: white; + background-color: @brand-success; + } + a { + color: @brand-success; + &:hover { + color: darken(@brand-success, 15%); + } + } +} + +.panel-red { + border-color: @brand-danger; + .panel-heading { + border-color: @brand-danger; + color: white; + background-color: @brand-danger; + } + a { + color: @brand-danger; + &:hover { + color: darken(@brand-danger, 15%); + } + } +} + +.panel-yellow { + border-color: @brand-warning; + .panel-heading { + border-color: @brand-warning; + color: white; + background-color: @brand-warning; + } + a { + color: @brand-warning; + &:hover { + color: darken(@brand-warning, 15%); + } + } +} diff --git a/src/pretix/control/static/pretixcontrol/less/variables.less b/src/pretix/control/static/pretixcontrol/less/variables.less new file mode 100644 index 0000000000..7e24b9434f --- /dev/null +++ b/src/pretix/control/static/pretixcontrol/less/variables.less @@ -0,0 +1,11 @@ +@gray-darker: lighten(#000, 13.5%); +@gray-dark: lighten(#000, 20%); +@gray: lighten(#000, 33.5%); +@gray-light: lighten(#000, 60%); +@gray-lighter: lighten(#000, 93.5%); +@gray-lightest: lighten(#000, 97.25%); +@brand-primary: #428bca; +@brand-success: #5cb85c; +@brand-info: #5bc0de; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; diff --git a/src/pretix/control/templates/pretixcontrol/base.html b/src/pretix/control/templates/pretixcontrol/base.html index b3bfa21a58..136afa9f08 100644 --- a/src/pretix/control/templates/pretixcontrol/base.html +++ b/src/pretix/control/templates/pretixcontrol/base.html @@ -7,51 +7,84 @@ {% block title %}{% endblock %}{% if url_name != "index" %} :: {% endif %} {{ settings.PRETIX_INSTANCE_NAME }} {% compress css %} - + {% endcompress %} {% compress js %} - - - - + + + + + + {% endcompress %} - -
- {% block content %} - {% endblock %} -
- +
+ +
+
+ + {% block content %} + {% endblock %} +
+ {% with "href='http://pretix.eu'" as a_attr %} + {% blocktrans trimmed %} + powered by pretix + {% endblocktrans %} + {% endwith %} +
+
+
+
diff --git a/src/pretix/control/templates/pretixcontrol/event/base.html b/src/pretix/control/templates/pretixcontrol/event/base.html index 31c970b718..ea175c6393 100644 --- a/src/pretix/control/templates/pretixcontrol/event/base.html +++ b/src/pretix/control/templates/pretixcontrol/event/base.html @@ -2,20 +2,90 @@ {% load i18n %} {% block nav %} -
  • - {{ request.event.slug }} - +
  • + + + {% trans "Dashboard" %} + +
    • +
  • + + + {% trans "Settings" %} + + + +
    • +
  • + + + {% trans "Products" %} + + + +
    • +
  • + + + {% trans "Orders" %} + + +
    • -
  • {% trans "Dashboard" %}
    • -
  • {% trans "Settings" %}
    • -
  • {% trans "Items" %}
    • {% endblock %} diff --git a/src/pretix/control/templates/pretixcontrol/event/settings_base.html b/src/pretix/control/templates/pretixcontrol/event/settings_base.html index 6eefdac01d..ad3460b446 100644 --- a/src/pretix/control/templates/pretixcontrol/event/settings_base.html +++ b/src/pretix/control/templates/pretixcontrol/event/settings_base.html @@ -4,17 +4,6 @@ {% block title %}{{ request.event.name }}{% endblock %} {% block content %}

    {% trans "Settings" %}

    - {% block inside %} {% endblock %} {% endblock %} diff --git a/src/pretix/control/templates/pretixcontrol/item/restrictions.html b/src/pretix/control/templates/pretixcontrol/item/restrictions.html index 4b2d12222c..4da3e9c5d2 100644 --- a/src/pretix/control/templates/pretixcontrol/item/restrictions.html +++ b/src/pretix/control/templates/pretixcontrol/item/restrictions.html @@ -14,7 +14,7 @@ {{ set.title }}

    {{ set.description }}

    -
    +
    {{ set.formset.management_form }} {% for f in set.formset %}
    diff --git a/src/pretix/control/templates/pretixcontrol/item/variations_0d.html b/src/pretix/control/templates/pretixcontrol/item/variations_0d.html index bbcf7b53ae..fba908837d 100644 --- a/src/pretix/control/templates/pretixcontrol/item/variations_0d.html +++ b/src/pretix/control/templates/pretixcontrol/item/variations_0d.html @@ -2,5 +2,5 @@ {% load i18n %} {% load bootstrap3 %} {% block inside %} - {% trans "You have to define and select propreties to be able to configure variations." %} +

    {% trans "You have to define and select propreties to be able to configure variations." %}

    {% endblock %} diff --git a/src/pretix/control/templates/pretixcontrol/items/base.html b/src/pretix/control/templates/pretixcontrol/items/base.html index c96a277c64..6527ecdb07 100644 --- a/src/pretix/control/templates/pretixcontrol/items/base.html +++ b/src/pretix/control/templates/pretixcontrol/items/base.html @@ -2,13 +2,6 @@ {% load i18n %} {% block title %}{% trans "Items" %}{% endblock %} {% block content %} - {% block inside %} {% endblock %} {% endblock %}