Tweaked table layout (mainly customers and timeline view)

stoptime.rb

@@ -1521,12 +1521,32 @@ module StopTime::Views
         @customers.each do |customer|
           tr do
             td { a customer.name, :href => R(CustomersN, customer.id) }
-            td { customer.short_name }
+            td { customer.short_name  || "–"}
-            td { [customer.address_street,
+            td do
-                  customer.address_postal_code,
+              if customer.address_street.present?
-                  customer.address_city].join(", ") unless customer.address_street.blank? }
+                text customer.address_street
-            td { a customer.email, :href => "mailto:#{customer.email}" }
+                br
-            td { customer.phone }
+                text customer.address_postal_code + " " +
+                     customer.address_city
+              else
+                "–"
+              end
+            end
+            td do
+              if customer.email.present?
+                a customer.email, :href => "mailto:#{customer.email}"
+              else
+                "–"
+              end
+            end
+            td do
+              if customer.phone.present?
+                # FIXME: hardcoded prefix!
+                "0#{customer.phone}"
+              else
+                "–"
+              end
+            end
             td do
               form :action => R(CustomersN, customer.id), :method => :post do
                 input :type => :submit, :name => "delete", :value => "Delete"

templates/sass/style.sass

@@ -74,52 +74,28 @@ ol#menu
 
 /* Table layout */
 table
+  table-layout: fixed
   padding: 3px 0px
   border-spacing: 0px 4px
 
   col.amount, col.hours, col.hourly_rate
-    width: 10%
+    width: 100px
   col.flag
-    width: 3%
+    width: 30px
   col.date
-    width: 9%
+    width: 95px
   col.start_time, col.end_time
-    width: 5%
+    width: 55px
-  col.comment
+  col.customer, col.name
-    width: 20%
+    width: 150px
-  col.customer
+  col.task, col.comment
-    width: 10%
+    width: 200px
-  col.task
+  col.short_name, col.phone
-    width: 20%
+    width: 120px
-  col.name, col.period
+  col.address, col.period
-    width: 25%
+    width: 250px
-  col.short_name
+  col.email, col.number
-    width: 20%
+    width: 170px
-  col.address
-    width: 20%
-  col.email, col.phone
-    width: 15%
-  col.number
-    width: 7%
-
-  &.overview
-    width: 50%
-
-  &.timeline
-    width: 100%
-
-  &.tasks
-    width: 60%
-
-  &.customers, &.invoice_select
-    width: 75%
-
-  &.invoices
-    width: 50%
-
-  td
-    padding: 0px 5px
-    vertical-align: top
 
   th
     padding: 0px 5px
@@ -131,15 +107,19 @@ table
       background-color: $medium-grey
 
     &.total
-      border-top: solid black
+      border-top: thin solid black
 
-  td.key
+  td
-    font-weight: bold
+    padding: 0px 5px
-    width: 80px
+    vertical-align: top
-    padding-bottom: 5px
+    border: inherit
+
+    &.key
+      font-weight: bold
+      width: 80px
 
   input
-    width: 100%
+    width: 90%
 
   input[type="submit"], input[type="reset"], input[type="checkbox"]
     width: auto