From c817b23168bd03e0dcd5ccb68f78a2a3252da26d Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Fri, 26 Jul 2013 14:41:03 +0200
Subject: [PATCH] Improved layout and size calculation of taskbar.

---
 .../app/controllers/task_widget.js.coffee     | 24 +++++++++++--
 app/assets/stylesheets/zzz.css                | 35 +++++++++++--------
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/task_widget.js.coffee b/app/assets/javascripts/app/controllers/task_widget.js.coffee
index 7085cacc2..3936f16bf 100644
--- a/app/assets/javascripts/app/controllers/task_widget.js.coffee
+++ b/app/assets/javascripts/app/controllers/task_widget.js.coffee
@@ -102,6 +102,12 @@ class Taskbar extends App.Controller
     super
     @render()
 
+    # on window resize
+    resizeTasksDelay = =>
+      App.Delay.set( @resizeTasks, 100, 'resizeTasks', 'task' )
+    $(window).off( 'resize.taskbar' )
+    $(window).on( 'resize.taskbar', resizeTasksDelay )
+
     # render view
     @bind 'task:render', => @render()
 
@@ -202,15 +208,29 @@ class Taskbar extends App.Controller
       @navigate '#'
 
   resizeTasks: ->
-    width = $('#task .taskbar').width() - 280
+    width = $('#task .taskbar').width() - $('#task .taskbar-new').width() - 200
     task_count = App.TaskManager.all().length
     task_size  = ( width / task_count ) - ( task_count * 1.3 )
+
+    elementsOversize = 0
+    elementsOversizeLeftTotal = 0
+    $('#task .task').each(
+      (position, element) ->
+        width = $(element).parent().width()
+        if width > task_size
+          elementsOversize++
+        else
+          elementsOversizeLeftTotal += task_size - width
+    )
+
+    addOversize = elementsOversizeLeftTotal / elementsOversize
+    task_size += addOversize
     if task_size < 40
       $('#task .task').css('max-width', '40px')
     else if task_size < 130
       $('#task .task').css('max-width', task_size + 'px')
     else
-      $('#task .task').css('max-width', '120px')
+      $('#task .task').css('max-width', '130px')
 
 class Remove extends App.ControllerModal
   constructor: ->
diff --git a/app/assets/stylesheets/zzz.css b/app/assets/stylesheets/zzz.css
index a1320d3c7..b3a166b9c 100644
--- a/app/assets/stylesheets/zzz.css
+++ b/app/assets/stylesheets/zzz.css
@@ -47,15 +47,23 @@ table th, table td {
   white-space: nowrap;
 }
 
-.taskbar {
+#task {
+}
+
+#task > .taskbar {
   position: fixed;
+  display: table;
   top: 40px;
   width: 100%;
-  padding: 5px;
+  padding: 2px 2px 2px 2px;
   z-index: 990;
 }
 
-.task {
+#task > .taskbar > div {
+  display: table-cell;
+}
+
+#task .task {
   margin: -6px;
   padding: 0px 4px;
   display: inline-block;
@@ -65,32 +73,31 @@ table th, table td {
   white-space: nowrap;
 }
 
-.task > a,
-.task > a:hover {
+#task .task > a,
+#task .task > a:hover {
   color: #ffffff;
   text-decoration: none;
 }
 
-.btn-default .task > a,
-.btn-default .task > a:hover {
+#task .btn-default .task > a,
+#task .btn-default .task > a:hover {
   color: #333333;
 }
 
-.taskbar .btn-mini {
+#task .taskbar .btn-mini {
   margin-top: 2px;
 }
 
-[data-type="close"] {
+#task [data-type="close"] {
   margin-left: 5px;
 }
 
-.taskbar-items {
-  float: left;
+#task .taskbar-items {
 }
 
-.taskbar-new {
-  float: right;
-  margin-right: 14px;
+#task .taskbar-new {
+  text-align: right;
+  padding-right: 12px;
 }
 
 .max-size-scroll {