Changed buttons on series/logs views to look less cramped

src/UI/Content/theme.less

@@ -15,19 +15,41 @@
 @import "../Shared/Styles/card";
 @import "../Rename/rename";
 
-.page-toolbar {
-  margin-top    : 10px;
-  margin-bottom : 30px;
+.toolbar {
 
-  .toolbar-group {
-    display: inline-block;
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
   }
 
-  .sorting-buttons {
-    .sorting-title {
+  .page-toolbar {
+    margin-top    : 10px;
+    margin-bottom : 30px;
+
+    .toolbar-group {
       display: inline-block;
-      width: 110px;
     }
+
+    .sorting-buttons {
+      .sorting-title {
+        display: inline-block;
+        width: 110px;
+      }
+    }
+  }
+}
+
+.toolbars {
+  margin-top    : 5px;
+  margin-bottom : 30px;
+
+  .page-toolbar {
+    margin-top    : 5px;
+    margin-bottom : 0px;
   }
 }
 

src/UI/Series/Index/SeriesIndexLayout.js

@@ -41,6 +41,7 @@ define(
             regions: {
                 seriesRegion  : '#x-series',
                 toolbar       : '#x-toolbar',
+                toolbar2      : '#x-toolbar2',
                 footer        : '#x-series-footer'
             },
 
@@ -237,6 +238,12 @@ define(
                 };
             },
 
+            onShow: function () {
+                this._showToolbar();
+                this._renderView();
+                this._fetchCollection();
+            },
+
             _showTable: function () {
                 this.currentView = new Backgrid.Grid({
                     collection: this.seriesCollection,
@@ -277,12 +284,6 @@ define(
                 }
             },
 
-            onShow: function () {
-                this._showToolbar();
-                this._renderView();
-                this._fetchCollection();
-            },
-
             _fetchCollection: function () {
                 this.seriesCollection.fetch();
             },
@@ -300,8 +301,6 @@ define(
                 }
 
                 var rightButtons = [
-                    this.sortingOptions,
-                    this.filteringOptions,
                     this.viewButtons
                 ];
 
@@ -313,6 +312,17 @@ define(
                         ],
                     context: this
                 }));
+
+                this.toolbar2.show(new ToolbarLayout({
+                    right  : [
+                        this.filteringOptions
+                    ],
+                    left   :
+                        [
+                            this.sortingOptions
+                        ],
+                    context: this
+                }));
             },
 
             _showFooter: function () {

src/UI/Series/Index/SeriesIndexLayoutTemplate.html

@@ -1,4 +1,7 @@
-<div id="x-toolbar"></div>
+<div class="toolbars">
+    <div id="x-toolbar"></div>
+    <div id="x-toolbar2"></div>
+</div>
 
 <div class="row">
     <div class="span12">

src/UI/Shared/Toolbar/ToolbarLayout.js

@@ -10,7 +10,8 @@ define(
         'underscore'
     ], function (Marionette, ButtonCollection, ButtonModel, RadioButtonCollectionView, ButtonCollectionView, SortingButtonCollectionView, _) {
         return Marionette.Layout.extend({
-            template: 'Shared/Toolbar/ToolbarLayoutTemplate',
+            template : 'Shared/Toolbar/ToolbarLayoutTemplate',
+            className: 'toolbar',
 
             ui: {
                 left_x : '.x-toolbar-left',

src/UI/System/Logs/Files/LogFileLayout.js

@@ -72,7 +72,7 @@ define(
 
             _showToolbar: function () {
 
-                var rightSideButtons = {
+                var leftSideButtons = {
                     type      : 'default',
                     storeState: false,
                     items     :
@@ -95,9 +95,9 @@ define(
                 };
 
                 this.toolbar.show(new ToolbarLayout({
-                    right   :
+                    left   :
                         [
-                            rightSideButtons
+                            leftSideButtons
                         ],
                     context: this
                 }));

src/UI/System/Logs/Table/LogsTableLayout.js

@@ -125,7 +125,7 @@ define(
                     ]
                 };
                 
-                var rightSideButtons = {
+                var leftSideButtons = {
                     type      : 'default',
                         storeState: false,
                         items     :
@@ -146,10 +146,13 @@ define(
                 };
 
                 this.toolbar.show(new ToolbarLayout({
-                    right   :
+                    left    :
                         [
-                            filterButtons,
-                            rightSideButtons
+                            leftSideButtons
+                        ],
+                    right  :
+                        [
+                            filterButtons
                         ],
                     context: this
                 }));