Better dashboard layout

src/pretix/static/pretixcontrol/js/ui/typeahead.js

@@ -9,14 +9,14 @@ $(function () {
 
     $("[data-event-typeahead]").each(function () {
         var $container = $(this);
-        var $query = $(this).find('[data-typeahead-query]');
-        $query.closest("li").nextAll().remove();
+        var $query = $(this).find('[data-typeahead-query]').length ? $(this).find('[data-typeahead-query]') : $($(this).attr("data-typeahead-field"));
+        $container.find("li:not(.query-holder)").remove();
 
         $query.on("change", function () {
             $.getJSON(
                 $container.attr("data-source") + "?query=" + encodeURIComponent($query.val()),
                 function (data) {
-                    $query.closest("li").nextAll().remove();
+                    $container.find("li:not(.query-holder)").remove();
                     $.each(data.results, function (i, res) {
                         $container.append(
                             $("<li>").append(
@@ -36,6 +36,7 @@ $(function () {
                             )
                         );
                     });
+                    $container.toggleClass('focused', $query.is(":focus") && $container.children().length > 0);
                 }
             );
         });
@@ -50,9 +51,12 @@ $(function () {
                 event.stopPropagation();
             }
         });
+        $query.on("blur", function (event) {
+            $container.removeClass('focused');
+        });
         $query.on("keyup", function (event) {
-            var $first = $query.closest("li").next();
-            var $last = $query.closest("li").nextAll().last();
+            var $first = $container.find("li:not(.query-holder)").first();
+            var $last = $container.find("li:not(.query-holder)").last();
             var $selected = $container.find(".active");
 
             if (event.which === 13) {  // enter
@@ -60,10 +64,12 @@ $(function () {
                 event.stopPropagation();
                 return true;
             } else if (event.which === 40) {  // down
+                var $next;
                 if ($selected.length === 0) {
-                    $selected = $query.closest("li");
+                    $next = $first;
+                } else {
+                    $next = $selected.next();
                 }
-                var $next = $selected.next();
                 if ($next.length === 0) {
                     $next = $first;
                 }
@@ -74,7 +80,7 @@ $(function () {
                 return true;
             } else if (event.which === 38) {  // up
                 if ($selected.length === 0) {
-                    $selected = $container.first();
+                    $selected = $first;
                 }
                 var $prev = $selected.prev();
                 if ($prev.length === 0 || $prev.find("input").length > 0) {

src/pretix/static/pretixcontrol/scss/_dashboard.scss

@@ -2,33 +2,43 @@
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+  margin-left: -5px;
+  margin-right: -5px;
 }
+
 .dashboard .widget-container {
-  flex:1 0 auto;
+  flex: 1 0 auto;
   align-self: stretch;
   padding: 15px 5px;
   border: 5px solid white;
   min-height: 160px;
   background: #F8F8F8;
 }
+
 .dashboard .widget-container.widget-full {
   width: 100%;
 }
+
 .dashboard .widget-container.widget-big {
   width: 50%;
 }
+
 .dashboard .widget-container.widget-small {
   width: 25%;
 }
+
 .dashboard-panels .panel-heading .fa {
   opacity: 0.5;
 }
-.dashboard .widget-container:hover,.dashboard .widget-container:focus {
+
+.dashboard .widget-container:hover, .dashboard .widget-container:focus {
   background: #EEEEEE;
 }
-.dashboard .widget:hover,.dashboard .widget:focus {
+
+.dashboard .widget:hover, .dashboard .widget:focus, .dashboard a:hover {
   text-decoration: none;
 }
+
 .dashboard .numwidget {
   .num {
     display: block;
@@ -42,6 +52,7 @@
     font-size: 20px;
   }
 }
+
 .dashboard .shopstate {
   text-align: center;
   padding: 18px 0;
@@ -58,16 +69,61 @@
     color: $brand-danger;
   }
 }
-.dashboard .event {
-  text-align: center;
-  padding: 15px 30px;
-  font-size: 20px;
 
-  span.from, span.to {
+.widget-container.widget-container-event {
+  padding: 0;
+  cursor: pointer;
+
+  .widget {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .event {
+    text-align: center;
+    font-size: 20px;
+    padding: 15px 30px;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: column;
+  }
+  .bottomrow {
+    display: flex;
+    flex-direction: row;
+
+    a {
+      flex-grow: 1;
+      flex-basis: 50%;
+      font-size: 14px;
+      padding: 10px;
+      text-align: center;
+      color: white;
+    }
+    a.orders {
+      background: $navbar-inverse-bg;
+    }
+    a.status-success {
+      background: $brand-success;
+    }
+    a.status-warning {
+      background: $brand-warning;
+    }
+    a.status-default {
+      background: $gray-light;
+    }
+    a.status-danger {
+      background: $brand-danger;
+    }
+  }
+  .daterange, .times {
     display: block;
-    font-size: 25px;
+    font-size: 17px;
   }
 }
+
 .dashboard .newevent {
   text-align: center;
   padding: 30px;
@@ -79,6 +135,7 @@
     padding-bottom: 15px;
   }
 }
+
 .dashboard .welcome-wizard {
   padding: 5px 15px;
   h3 {
@@ -92,11 +149,22 @@
     margin-bottom: 0;
   }
 }
+
+.dropdown-container {
+  position: relative;
+  margin: 15px 0;
+
+  .focused.dropdown-menu {
+    display: block;
+  }
+}
+
 @media (max-width: $screen-sm-max) {
   .dashboard .widget-container.widget-small {
     width: 50%;
   }
 }
+
 @media (max-width: $screen-xs-max) {
   .dashboard .widget-container.widget-small,
   .dashboard .widget-container.widget-big {