Prettify tree view slightly 🌲 (#826)

* Prettify tree view slightly 🌲 * Ensure some html is in a cache block
librariesio · Oct 7, 2016 · 76eec9e · 76eec9e
1 parent 876b47a
commit 76eec9e
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 77 deletions.
diff --git a/app/assets/stylesheets/_tree.scss b/app/assets/stylesheets/_tree.scss
@@ -0,0 +1,43 @@
+.tree ul {
+  &.top-level {
+    margin: 0;
+    & > li:before {
+      display: none;
+    }
+  }
+
+  padding: 0;
+  margin: 0px 0px 0px 20px;
+  list-style: none;
+  line-height: 1.8em;
+
+  li {
+    position: relative;
+
+    &:before {
+      position: absolute;
+      left: -15px;
+      top: 0px;
+      content: '';
+      display: block;
+      border-left: 1px solid #ddd;
+      height: .9em;
+      border-bottom: 1px solid #ddd;
+      width: 10px;
+    }
+
+    &:after {
+      position: absolute;
+      left: -15px;
+      bottom: -7px;
+      content: '';
+      display: block;
+      border-left: 1px solid #ddd;
+      height: 100%;
+    }
+
+    &:last-child {
+      &:after { display: none }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -4,6 +4,7 @@
 @import "tipsy";
 @import "pictogram";
 @import "highlight";
+@import "tree";
 
 body {
   background-color: #fff;
@@ -365,61 +366,10 @@ tr.top td{
   float: left;
 }
 
-/*
- Tree structure using CSS:
- http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
-*/
-
-.tree, .tree ul{
-  list-style-type: none;
-  margin-left: 0 0 0 10px;
-  padding: 0;
-  position: relative;
-  overflow:hidden;
-}
-
-.tree li{
-  margin: 0;
-  padding: 0 12px;
-  position: relative;
-}
-
-.tree li::before, .tree li::after{
-  content: '';
-  position: absolute;
-  left: 0;
-}
-
-/* horizontal line on inner list items */
-.tree li::before{
-  border-top: 1px solid #999;
-  top: 10px;
-  width: 10px;
-  height: 0;
-}
-
-/* vertical line on list items */
-.tree li:after{
-  border-left: 1px solid #999;
-  height: 100%;
-  width: 0px;
-  top: -10px;
-}
-
-/* lower line on list items from the first level because they don't have parents */
-.tree > li::after{
-  top: 10px;
-}
-
-/* hide line from the last of the first level list items */
-.tree > li:last-child::after{
-  display: none;
-}
-
-.tree ul:last-child li:last-child:after{
-height:20px;
-}
-
 .collection{
   min-height: 300px;
 }
+
+.tip {
+  cursor: default;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -59,7 +59,7 @@
   </script>
 </head>
 <body>
-  <div class="navbar navbar-inverse">
+  <div class="navbar navbar-inverse navbar-static-top">
     <div class="container">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">

diff --git a/app/views/tree/_dependency.html.erb b/app/views/tree/_dependency.html.erb
@@ -2,11 +2,18 @@
 <% @license_names << project.normalize_licenses %>
 <li>
   <% if version %>
-    <%= link_to project, version_path(version.to_param) %> - <%= link_to version.number, version_path(version.to_param) %>
+    <%= link_to project, version_path(version.to_param) %>
+    -
+    <%= link_to version.number, version_path(version.to_param), class: 'tip', title: 'Resolved version' %>
+    -
   <% else %>
-    <%= project %> - <%= version %>
+    <%= project %> -
   <% end %>
-  <em class='text-muted'><%= requirements %> - <%= project.normalize_licenses.join(', ') %></em>
+  <em class='text-muted'>
+    <span class="tip" title="Specified version range"><%= requirements %></span>
+    <%= '-' if requirements.present? %>
+    <%= project.normalize_licenses.join(', ') %>
+  </em>
   <% if dependency %>
     <%= render 'dependencies/flags', dependency: dependency %>
   <% end %>
@@ -21,7 +28,8 @@
             <%= render partial: 'tree/dependency', locals: {project: dependency.project, version: dependency.latest_resolvable_version, requirements: dependency.requirements, dependency: dependency, index: index + 1} %>
           <% else %>
           <li>
-            <%= link_to dependency.project_name, project_path(platform: dependency.platform.downcase, name: dependency.project_name) %> <em class='text-muted'><%= dependency.requirements %></em>
+            <%= link_to dependency.project_name, project_path(platform: dependency.platform.downcase, name: dependency.project_name) %>
+            <span class="tip text-muted" title="Specified version range"><%= dependency.requirements %></span>
           </li>
           <% end %>
         <% end %>

diff --git a/app/views/tree/show.html.erb b/app/views/tree/show.html.erb
@@ -7,21 +7,24 @@
 
 <hr>
 <div class="row">
-  <div class="col-sm-8">
-    <% cache ['tree', @project, @version, @kind], expires_in: 1.hour do  %>
-      <ul class='tree'>
-        <%= render partial: 'tree/dependency', locals: {project: @project, version: @version, requirements: '', dependency: nil, index: 0} %>
-      </ul>
-      <hr>
-      <p>
-        Unique dependencies: <%= @project_names.uniq.length %>
-      </p>
-      <p>
-        Unique licenses: <%= @license_names.flatten.uniq.length %> <em class='text-muted'><%= @license_names.flatten.uniq.join(', ') %></em>
-      </p>
-    <% end %>
-  </div>
-  <div class="col-sm-4">
-    <%= render 'adsense/sidebar' %>
-  </div>
+  <% cache ['tree', @project, @version, @kind], expires_in: 1.hour do  %>
+    <div class="col-sm-8">
+      <div class="tree">
+        <ul class="top-level">
+          <%= render partial: 'tree/dependency', locals: {project: @project, version: @version, requirements: '', dependency: nil, index: 0} %>
+        </ul>
+      </div>
+    </div>
+    <div class="col-sm-4">
+      <%= render 'adsense/sidebar' %>
+      <div>
+        <p class="h4">Unique dependencies:</p>
+        <p class="h1"><%= @project_names.uniq.length %></p>
+        <hr/>
+        <p class="h4">Unique licenses:</p>
+        <p class="h1"><%= @license_names.flatten.uniq.length %></p>
+        <p class="h5"><%= @license_names.flatten.uniq.join(', ') %></p>
+      </div>
+    </div>
+  <% end %>
 </div>