CGM_Public/pretix_original
3
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-10-01 19:14:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navbar redesign

Browse Source
This commit is contained in:
Mira Weller
2026-09-25 01:16:03 +02:00
parent e4a6d14c4a
commit d546501b97
6 changed files with 169 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pretix/control/templates/pretixcontrol/base.html
+59 -21
View File
@@ -99,14 +99,28 @@
data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-nav-collapse">
<span class="sr-only">{% trans "Toggle navigation" %}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url "control:index" %}">
<img src="{% static "pretixbase/img/pretix-icon-white-mini.svg" %}" />
{% if not request.event and not request.organizer %}
<span>
{{ settings.PRETIX_INSTANCE_NAME }}
</span>
{% endif %}
</a>
{% if request.organizer %}
<a class="navbar-context-breadcrumb" href="{% url "control:organizer" organizer=request.organizer.slug %}">
{{ request.organizer.slug }}
</a>
{% endif %}
{% if request.event %}
<a class="navbar-context-breadcrumb" href="{% url "control:event.index" organizer=request.organizer.slug event=request.event.slug %}">
{{ request.event.slug }}
</a>
{% endif %}
{% if request.event %}
{% if has_domain and not request.event.live %}
<form action="{% eventurl request.event "presale:event.auth" %}" method="post"
@@ -128,13 +142,18 @@
<i class="fa fa-eye"></i>
</a>
{% endif %}
<a class="navbar-brand" href="{% url "control:index" %}">
<img src="{% static "pretixbase/img/pretix-icon-white-mini.svg" %}" />
<span>
{{ settings.PRETIX_INSTANCE_NAME }}
</span>
</a>
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-nav-collapse">
<span class="sr-only">{% trans "Toggle navigation" %}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-top-links navbar-left flip hidden-xs">
{% if request.event %}
<li>
@@ -178,6 +197,9 @@
</a>
{% if nav.children %}
<ul class="dropdown-menu" role="menu">
<li class="dropdown-mobile-header visible-xs">
<strong>{{ nav.title }}</strong>
</li>
{% for item in nav.children %}
{% if item.separator %}
<li role="separator" class="divider"></li>
@@ -221,16 +243,32 @@
</a>
</li>
{% endif %}
<li>
<a href="{% url 'control:user.settings' %}" title="{% trans "Account Settings" %}" >
<li class="dropdown">
<a href="{% url 'control:user.settings' %}" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i> {{ request.user.get_full_name }}
</a>
</li>
<li>
<a href="{% url 'control:auth.logout' %}" title="{% trans "Log out" %}">
<i class="fa fa-sign-out"></i>
<span class="visible-xs-inline">{% trans "Log out" %}</span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-mobile-header visible-xs">
<strong>{{ request.user.get_full_name }}</strong><br>
{{ request.user.email }}
</li>
<li>
<a href="{% url 'control:organizers' %}">
<i class="fa fa-fw fa-group"></i> {% trans "My organizer accounts" %}
</a>
</li>
<li>
<a href="{% url 'control:user.settings' %}">
<i class="fa fa-fw fa-cog"></i> {% trans "Account settings" %}
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="{% url 'control:auth.logout' %}" title="{% trans "Log out" %}">
<i class="fa fa-fw fa-sign-out"></i> {% trans "Log out" %}
</a>
</li>
</ul>
</li>
</ul>
<div class="navbar-default sidebar" role="navigation">
src/pretix/static/bootstrap/scss/_rtl.scss
-6
View File
@@ -1260,12 +1260,6 @@ html.rtl {
}
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: auto;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
src/pretix/static/bootstrap/scss/bootstrap/_navbar.scss
+37 -88
View File
@@ -31,9 +31,7 @@
.navbar-header {
@include clearfix;
@media (min-width: $grid-float-breakpoint) {
float: left;
}
display: flex;
}
@@ -159,7 +157,6 @@
// Brand/project name
.navbar-brand {
float: left;
height: $navbar-height;
padding: $navbar-padding-vertical $navbar-padding-horizontal;
font-size: $font-size-large;
@@ -239,16 +236,26 @@
@media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
position: fixed;
float: none;
width: auto;
width: 80%; top: 0; left: inherit; right: 0; bottom: 0; background: white;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
padding: 50px 0 10px 0;
overflow-y: auto; overflow-x: hidden;
border: 0; border-left: 1px solid #666;
box-shadow: 0 0 70px #222; border-radius: 0;
background: white linear-gradient(140deg, white 0%, white 40%, #faf4fe 60%, #e8cefb 85% , #ddb8fa 100%);
> li > a {
padding: 12px 15px 12px 25px;
}
.dropdown-header, .dropdown-mobile-header, .divider {
margin-left: 25px; margin-right: 15px;
}
.dropdown-mobile-header {
padding: 20px 0 21px 0; font-size: 14px; border-bottom: 1px solid $dropdown-divider-bg; margin-bottom: 9px;
min-height: 70px;
* { color: black; background: transparent; font-size: 14px; }
}
> li > a {
line-height: $line-height-computed;
@@ -260,17 +267,23 @@
}
}
// Uncollapse the nav
@media (min-width: $grid-float-breakpoint) {
float: left;
margin: 0;
display: flex;
//overflow: hidden;
margin: 0;
max-width: 100%;
> li {
float: left;
> a {
padding-top: $navbar-padding-vertical;
padding-bottom: $navbar-padding-vertical;
}
> li {
//overflow: hidden;
min-width: 0;
> a {
padding-top: $navbar-padding-vertical;
padding-bottom: $navbar-padding-vertical;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
flex: 0 1 10px;
min-width: 0;
}
}
}
@@ -374,12 +387,12 @@
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: $grid-float-breakpoint) {
.navbar { display: flex; flex-direction: row; }
.navbar-left {
float: left !important;
flex: 1;
}
.navbar-right {
float: right !important;
margin-right: -$navbar-padding-horizontal;
margin-right: -$navbar-padding-horizontal;
~ .navbar-right {
margin-right: 0;
@@ -447,35 +460,6 @@
}
}
@media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: $navbar-default-link-color;
&:hover,
&:focus {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-default-link-disabled-color;
background-color: $navbar-default-link-disabled-bg;
}
}
}
}
}
.navbar-toggle {
@@ -578,41 +562,6 @@
}
}
@media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: $navbar-inverse-border;
}
.divider {
background-color: $navbar-inverse-border;
}
> li > a {
color: $navbar-inverse-link-color;
&:hover,
&:focus {
color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
}
}
}
}
}
// Darken the responsive nav toggle
src/pretix/static/pretixcontrol/scss/_rtl.scss
+2 -3
View File
@@ -10,9 +10,8 @@ html.rtl {
}
.navbar-top-links li:last-child {
margin-left: 15px;
margin-right: 0;
.navbar-header :not(.navbar-toggle) + .navbar-toggle {
margin-left: inherit; margin-right: auto;
}
.sidebar .context-selector a span.caret {
src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
-4
View File
@@ -43,10 +43,6 @@ body {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
src/pretix/static/pretixcontrol/scss/main.scss
+71 -16
View File
@@ -32,25 +32,80 @@ footer {
font-size: 11px;
}
/* Navbar styles */
nav.navbar {
margin: 0;
border: 0;
}
.navbar-brand {
position: relative;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
}
.navbar-brand span {
padding: 4px 8px 6px; // Optical alignment next to logo
display: inline-block;
}
.navbar-brand img {
width: auto;
height: 100%;
display: inline-block;
vertical-align: top;
.navbar-header {
margin: 0 0 0 10px;
.navbar-brand {
position: relative;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 8px; margin-left: -10px;
img {
width: auto;
height: 100%;
display: inline-block;
vertical-align: top;
}
span {
padding: 4px 8px 6px; // Optical alignment next to logo
display: inline-block;
}
}
a.navbar-context-breadcrumb {
padding-left: 0;
padding-right: 8px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
display: inline-block;
line-height: $line-height-computed;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 18px;
@media (max-width: $screen-sm-max) {
font-size: 16px;
padding-right: 3px;
}
color: $navbar-inverse-link-color;
&::before {
content: "›"; color: #9a81a6; font-weight: normal;
padding: 0 10px 0 5px;
@media (max-width: $screen-sm-max) {
padding-right: 3px;
}
}
&:hover,
&:focus {
color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg;
}
}
a.navbar-context-breadcrumb.active {
font-weight: bold;
}
a.navbar-context-breadcrumb.unknown {
color: #cdb2d9; font-style: italic;
}
:not(.navbar-toggle) + .navbar-toggle { margin-left: auto; }
}
@media (min-width: $grid-float-breakpoint) {
.navbar-header {
flex: 0 1 auto; /* shrink but dont grow */
overflow: hidden;
}
.navbar-top-links.navbar-left {
flex: 1 0 auto; /* grow but dont shrink */
}
.navbar-top-links {
min-width: 50px;
}
}
.navbar-nav { margin: 0; }
}
#side-menu img.fa-img {