Fix #179 -- New flexbox layout for dashboard (#344)

* Use flexbox for better tiling

Replaces 'width' by 'display_size' and reduces sorting complexity.

* CSS improvements, Responsiveness

src/static/pretixcontrol/scss/_dashboard.scss

@@ -1,23 +1,38 @@
+.dashboard {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.dashboard .widget-container {
+  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 > div {
-  padding: 5px;
-}
-.dashboard .widget {
-  min-height: 160px;
-  background: #F8F8F8;
-  display: block;
-  position: relative;
+.dashboard .widget-container:hover,.dashboard .widget-container:focus {
+  background: #EEEEEE;
 }
 .dashboard .widget:hover,.dashboard .widget:focus {
-  background: #EEEEEE;
   text-decoration: none;
 }
 .dashboard .numwidget {
   .num {
     display: block;
-    padding: 28px 0 10px;
+    padding: 10px 0 10px;
     text-align: center;
     font-size: 40px;
   }
@@ -29,7 +44,7 @@
 }
 .dashboard .shopstate {
   text-align: center;
-  padding: 36px 0;
+  padding: 18px 0;
 
   span.live, span.off {
     display: block;
@@ -45,7 +60,7 @@
 }
 .dashboard .event {
   text-align: center;
-  padding: 30px;
+  padding: 15px 30px;
   font-size: 20px;
 
   span.from, span.to {
@@ -65,7 +80,7 @@
   }
 }
 .dashboard .welcome-wizard {
-  padding: 30px;
+  padding: 5px 15px;
   h3 {
     margin: 0 0 10px 0;
   }
@@ -77,3 +92,14 @@
     margin-bottom: 0;
   }
 }
+@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 {
+    width: 100%;
+  }
+}