From f8f75cec52b71381fd2b539082a275a1d6d907dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=BC=C3=9F?= <dominik.suess@outlook.at>
Date: Mon, 24 Oct 2016 21:02:24 +0200
Subject: [PATCH] Disabled Sidebar animations and fixed overflow

---
 hledger-web/Handler/Common.hs  | 27 +++++++++++++++++----------
 hledger-web/static/hledger.css | 33 +++++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/hledger-web/Handler/Common.hs b/hledger-web/Handler/Common.hs
index 904bf56c1..82482cd76 100644
--- a/hledger-web/Handler/Common.hs
+++ b/hledger-web/Handler/Common.hs
@@ -62,9 +62,11 @@ sidebar :: ViewData -> HtmlUrl AppRoute
 sidebar vd@VD{..} =
  [hamlet|
  <div #sidebar-menu .#{showmd} .#{showsm} .sidebar-offcanvas>
-  <ul .main-menu .nav .nav-stacked .affix-top>
-   <li .top>
-    <a href=@{JournalR} .#{journalcurrent} title="Show general journal entries, most recent first">Journal
+  <table .main-menu .table>
+   <tr>
+    <td .top>
+     <a href=@{JournalR} .#{journalcurrent} title="Show general journal entries, most recent first">Journal
+    <td .top>
    ^{accounts}
 |]
  where
@@ -176,7 +178,9 @@ balanceReportAsHtml _ vd@VD{..} (items',total) =
  [hamlet|
   $forall i <- items
    ^{itemAsHtml vd i}
-  <li .total>
+  <tr .total>
+   <td>
+   <td>
     #{mixedAmountAsHtml total}
 |]
  where
@@ -185,12 +189,15 @@ balanceReportAsHtml _ vd@VD{..} (items',total) =
    items = items' -- maybe items' (\m -> filter (matchesAccount m . \(a,_,_,_)->a) items') showacctmatcher
    itemAsHtml :: ViewData -> BalanceReportItem -> HtmlUrl AppRoute
    itemAsHtml _ (acct, adisplay, aindent, abal) = [hamlet|
-<li>
- \#{indent}
- <a href="@?{acctquery}" .#{inacctclass} title="Show transactions affecting this account and subaccounts">#{adisplay}
- $if hassubs
-  <a href="@?{acctonlyquery}" .only .hidden-sm .hidden-xs title="Show transactions affecting this account but not subaccounts">only
- #{mixedAmountAsHtml abal}
+<tr>
+ <td>
+  <div .ff-wrapper>
+   \#{indent}
+   <a href="@?{acctquery}" .#{inacctclass} title="Show transactions affecting this account and subaccounts">#{adisplay}
+  $if hassubs
+   <a href="@?{acctonlyquery}" .only .hidden-sm .hidden-xs title="Show transactions affecting this account but not subaccounts">only
+ <td>
+  #{mixedAmountAsHtml abal}
 |]
      where
        hassubs = not $ maybe False (null.asubs) $ ledgerAccount l acct
diff --git a/hledger-web/static/hledger.css b/hledger-web/static/hledger.css
index 5cede6db3..462a8e406 100644
--- a/hledger-web/static/hledger.css
+++ b/hledger-web/static/hledger.css
@@ -102,9 +102,22 @@ ul {
 	  padding: 0;
 }
 
-#sidebar-menu .main-menu li {
-    border-top: 1px solid #ebebeb;
+#sidebar-menu {
+    overflow:hidden;
 }
+
+#sidebar-menu .main-menu td {
+    border-top: 1px solid #ebebeb;
+    overflow-x:auto;
+    white-space:nowrap;
+/*    text-overflow:ellipsis;*/
+    max-width:200px;
+}
+
+#sidebar-menu .main-menu .ff-wrapper { /* This wrapper is needed because firefox won't apply overflow to a td-tag */
+    overflow-x:auto;
+}
+
 #sidebar-menu .main-menu .top {
     border: none !important;
 }
@@ -127,7 +140,7 @@ ul {
     visibility: hidden;
 }
 
-#sidebar-menu .main-menu li:hover > .only {
+#sidebar-menu .main-menu tr:hover > td > .only {
     visibility: visible;
 }
 
@@ -163,22 +176,26 @@ ul {
 }
 
 #main-content {
+   /* 
     -webkit-transition: width 0.3s ease, margin 0.3s ease;
     -moz-transition: width 0.3s ease, margin 0.3s ease;
     -o-transition: width 0.3s ease, margin 0.3s ease;
     transition: width 0.3s ease, margin 0.3s ease;
+*/
 }
 
 #sidebar-menu {
-    -webkit-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease;
-    -moz-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease;
-    -o-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease;
-    transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease;
-    overflow:hidden;
+    /*
+    -webkit-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
+    -moz-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
+    -o-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
+    transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
+*/
 }
 
 .col-any-0 {
     width:0 !important;
+    height:0 !important;
     float: left;
     opacity:0;
 }