From d8c240dc46cf047adbc741864a8f52e126b8e3e4 Mon Sep 17 00:00:00 2001
From: joshua stein
Date: Wed, 27 Apr 2016 16:26:18 -0500
Subject: [PATCH] switch to an image-less user tree, properly hide lines on
last branch
---
app/assets/stylesheets/application.css | 75 +++++++++++++++++---------
app/views/users/tree.html.erb | 2 +-
2 files changed, 52 insertions(+), 25 deletions(-)
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f0a7e6d..8acc1e9 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -837,37 +837,64 @@ div.comment_form_container form {
max-width: 700px;
}
-ul.root {
- list-style-type: none;
- margin: 0;
- padding: 0 2px;
-}
-ul.user_tree, ul.user_tree ul {
- list-style-type: none;
- /* vline */
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC) repeat-y;
- margin: 0;
+
+/* trees */
+
+.tree,
+.tree ul {
+ margin: 0 0 0 0.5em;
padding: 0;
-}
-ul.root ul, ul.user_tree ul {
- margin-left: 10px;
-}
-ul.user_tree li {
- margin: 0;
- padding: 0 12px;
line-height: 1.5em;
- /* node */
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==) no-repeat;
-}
-ul.user_tree li:last-child {
- /* lastnode */
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC) no-repeat;
+ list-style: none;
+ position: relative;
}
-ul.user_tree li, ul.root li {
+.tree ul {
+ margin-left: 0.5em;
+}
+
+.tree:before,
+.tree ul:before {
+ border-left: 1px solid #bbb;
+ bottom: 0;
+ content: "";
+ display: block;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 0;
+}
+
+.tree li {
+ margin: 0;
+ padding: 0 1.1em;
+ position: relative;
+}
+
+.tree li:before {
+ border-top: 1px solid #bbb;
+ content: "";
+ display: block;
+ height: 0;
+ left: 0;
+ margin-top: -1px;
+ position: absolute;
+ top: 0.8em;
+ width: 8px;
+}
+
+.tree li:last-child:before {
+ background-color: #fefefe;
+ border-left: 0;
+ bottom: 0;
+ height: auto;
+}
+
+ul.user_tree {
color: #888;
}
+
/* data tables */
table.data caption {
diff --git a/app/views/users/tree.html.erb b/app/views/users/tree.html.erb
index 5c18589..fde3e92 100644
--- a/app/views/users/tree.html.erb
+++ b/app/views/users/tree.html.erb
@@ -10,7 +10,7 @@
"(#{u.karma})" }.join(", ") %>
-
+
<% subtree = @users_by_parent[nil] %>
<% ancestors = [] %>