From 298837f96a102c0ce7b5b6cb89275f03c291f948 Mon Sep 17 00:00:00 2001
From: markus101 <markus.mcd5@gmail.com>
Date: Sat, 1 Feb 2014 16:32:08 -0800
Subject: [PATCH] Changed buttons on series/logs views to look less cramped

---
 src/UI/Content/theme.less                     | 40 ++++++++++++++-----
 src/UI/Series/Index/SeriesIndexLayout.js      | 26 ++++++++----
 .../Index/SeriesIndexLayoutTemplate.html      |  5 ++-
 src/UI/Shared/Toolbar/ToolbarLayout.js        |  3 +-
 src/UI/System/Logs/Files/LogFileLayout.js     |  6 +--
 src/UI/System/Logs/Table/LogsTableLayout.js   | 11 +++--
 6 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/src/UI/Content/theme.less b/src/UI/Content/theme.less
index 5f1dd6725..e5916eb0c 100644
--- a/src/UI/Content/theme.less
+++ b/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-group {
-    display: inline-block;
+.toolbar {
+
+  &: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;
   }
 }
 
diff --git a/src/UI/Series/Index/SeriesIndexLayout.js b/src/UI/Series/Index/SeriesIndexLayout.js
index c5cc9ca51..fc42b2ea1 100644
--- a/src/UI/Series/Index/SeriesIndexLayout.js
+++ b/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 () {
diff --git a/src/UI/Series/Index/SeriesIndexLayoutTemplate.html b/src/UI/Series/Index/SeriesIndexLayoutTemplate.html
index 40124822f..08353e5c1 100644
--- a/src/UI/Series/Index/SeriesIndexLayoutTemplate.html
+++ b/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">
diff --git a/src/UI/Shared/Toolbar/ToolbarLayout.js b/src/UI/Shared/Toolbar/ToolbarLayout.js
index a50828880..b1e2ee148 100644
--- a/src/UI/Shared/Toolbar/ToolbarLayout.js
+++ b/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',
diff --git a/src/UI/System/Logs/Files/LogFileLayout.js b/src/UI/System/Logs/Files/LogFileLayout.js
index 0b1431aee..8cffc029e 100644
--- a/src/UI/System/Logs/Files/LogFileLayout.js
+++ b/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
                 }));
diff --git a/src/UI/System/Logs/Table/LogsTableLayout.js b/src/UI/System/Logs/Table/LogsTableLayout.js
index 325aa0730..841a5a92b 100644
--- a/src/UI/System/Logs/Table/LogsTableLayout.js
+++ b/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
                 }));