CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Make navigation structure more approachable to new users (#1083)

Browse Source 
* Move event selector to sidebar

* Unify navigation

* Fix confusing icons
This commit is contained in:
Raphael Michel
2018-11-12 11:30:36 +01:00
committed by GitHub
parent b9534f23f5
commit 09a9d610f8
46 changed files with 831 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pretix/static/pretixcontrol/js/ui/typeahead.js
View File

@@ -1,6 +1,6 @@
/*global $,u2f */
$(function () {
$('ul.navbar-nav .dropdown, .navbar-events-collapse').on('shown.bs.collapse shown.bs.dropdown', function () {
$('.sidebar .dropdown, ul.navbar-nav .dropdown, .navbar-events-collapse').on('shown.bs.collapse shown.bs.dropdown', function () {
$(this).parent().find("input").val("").change().focus();
});
$('.dropdown-menu .form-box input').click(function (e) {
@@ -23,30 +23,70 @@ $(function () {
function (data) {
$container.find("li:not(.query-holder)").remove();
$.each(data.results, function (i, res) {
$container.append(
$("<li>").append(
$("<a>").attr("href", res.url).append(
$("<div>").append(
$("<span>").addClass("event-name-full").append($("<div>").text(res.name).html())
).append(
$("<span>").addClass("event-organizer").append(
$("<span>").addClass("fa fa-users fa-fw")
).append(" ").append($("<div>").text(res.organizer).html())
).append(
$("<span>").addClass("event-daterange").append(
$("<span>").addClass("fa fa-calendar fa-fw")
).append(" ").append(res.date_range)
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
if (res.type === "organizer") {
$container.append(
$("<li>").append(
$("<a>").attr("href", res.url).append(
$("<div>").append(
$("<span>").addClass("event-name-full").append(
$("<span>").addClass("fa fa-users fa-fw")
).append(" ").append($("<div>").text(res.name).html())
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
} else if (res.type === "user") {
$container.append(
$("<li>").append(
$("<a>").attr("href", res.url).append(
$("<div>").append(
$("<span>").addClass("event-name-full").append(
$("<span>").addClass("fa fa-user fa-fw")
).append(" ").append($("<div>").text(res.name).html())
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
} else {
$container.append(
$("<li>").append(
$("<a>").attr("href", res.url).append(
$("<div>").append(
$("<span>").addClass("event-name-full").append($("<div>").text(res.name).html())
).append(
$("<span>").addClass("event-organizer").append(
$("<span>").addClass("fa fa-users fa-fw")
).append(" ").append($("<div>").text(res.organizer).html())
).append(
$("<span>").addClass("event-daterange").append(
$("<span>").addClass("fa fa-calendar fa-fw")
).append(" ").append(res.date_range)
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
}
});
$container.toggleClass('focused', $query.is(":focus") && $container.children().length > 0);
}

49
src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
View File

@@ -152,6 +152,53 @@ body {
padding-left: 52px;
}
.sidebar .context-selector {
a {
padding: 10px 20px 9px 7px;
display: block;
text-decoration: none;
position: relative;
span.caret {
position: absolute;
right: 15px;
top: 50%;
margin-top: -2px;
}
&:hover, &:focus {
text-decoration: none;
background-color: $gray-lighter;
}
.fa-stack .fa-calendar {
font-size: 18px;
}
}
border-bottom: 2px solid darken($gray-lightest, 6.5%);
.context-indicator {
display: inline-block;
padding-left: 5px;
padding-right: 2px;
line-height: 15px;
vertical-align: middle;
span {
display: block;
width: 160px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
span.context-name {
font-weight: bold;
vertical-align: middle;
}
span.context-meta {
opacity: 0.7;
font-size: 11px;
}
}
}
@media(min-width:768px) {
.sidebar {
z-index: 1;
@@ -286,7 +333,7 @@ table.dataTable thead .sorting:after {
color: rgba(50,50,50,.5);
}
// Circle Buttons
// Circle Buttons
.btn-circle {
width: 30px;

59
src/pretix/static/pretixcontrol/scss/main.scss
View File

@@ -309,58 +309,17 @@ body.loading #wrapper {
height: 30px;
}
.event-name, .event-indicator .event-daterange {
display: inline-block;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
@media (max-width: $screen-sm-max) {
.event-name, .event-indicator .event-daterange {
max-width: 150px;
}
}
.dropdown-menu .form-box {
padding: 3px 10px;
}
.navbar-nav > li > a.event-dropdown-toggle {
padding-top: 11px;
padding-bottom: 9px;
vertical-align: middle;
min-height: 0;
line-height: 0;
height: 50px;
i.fa {
position: relative;
line-height: 30px;
vertical-align: top;
top: -1px;
}
.caret {
position: relative;
vertical-align: top;
top: 12px;
}
.event-indicator {
display: inline-block;
padding-left: 5px;
padding-right: 2px;
line-height: 15px;
span {
display: block;
}
span.event-daterange {
opacity: 0.7;
font-size: 11px;
}
}
}
.event-dropdown {
width: 300px;
width: 251px;
}
@media (max-width: $screen-xs-max) {
.event-dropdown {
width: 100%;
}
}
.event-dropdown, .mobile-event-dropdown, .select2-results {
.event-name-full, .primary {
@@ -381,6 +340,12 @@ body.loading #wrapper {
background: $brand-primary;
color: white;
}
span.event-name-full, span.event-daterange, span.event-organizer, span.secondary {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.sidebar-content {