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

* Move event selector to sidebar

* Unify navigation

* Fix confusing icons

src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss

@@ -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;

src/pretix/static/pretixcontrol/scss/main.scss

@@ -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 {