Add _sidebar.html partial, remove style IDs and use flexbox

This dries up sidebar code. Element IDs for CSS selectors are replaced with classes to reduce specifity in stylesheets (avoid specifity wars). Flexbox is better than absolute positioning as it allows for more flexible layout and dimensions.
crystal-lang · Oct 11, 2017 · e830275 · e830275
1 parent 10a5797
commit e830275
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 66 deletions.
diff --git a/src/compiler/crystal/tools/doc/html/_sidebar.html b/src/compiler/crystal/tools/doc/html/_sidebar.html
@@ -0,0 +1,16 @@
+<div class="sidebar">
+  <div class="sidebar-header">
+    <h1><%= repository_name %></h1>
+  </div>
+  <div class="search-box">
+    <input type="search" class="search-input" placeholder="Search...">
+  </div>
+
+  <div class="types-list">
+    <ul>
+      <li><a href="<%= current_type.try(&.path_to("")) %>index.html">README</a></li>
+    </ul>
+
+    <%= ListItemsTemplate.new(types, current_type) %>
+  </div>
+</div>
diff --git a/src/compiler/crystal/tools/doc/html/css/style.css b/src/compiler/crystal/tools/doc/html/css/style.css
@@ -44,30 +44,31 @@ h2 {
   padding-bottom: 5px;
 }
 
-#types-list, #main-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  overflow: auto;
-}
-
 p {
   max-width: 55em;
 }
 
-#types-list {
-  left: 0;
-  width: 20%;
+body {
+  display: flex;
+}
+
+.sidebar, .main-content {
+  overflow: auto;
+}
+
+.sidebar {
+  width: 30em;
+  color: #F8F4FD;
   background-color: #2E1052;
   padding: 0 0 30px;
   box-shadow: inset -3px 0 4px rgba(0,0,0,.35);
 }
 
-#types-list #search-box {
+.sidebar .search-box {
   padding: 8px 9px;
 }
 
-#types-list input {
+.sidebar input {
   display: block;
   box-sizing: border-box;
   margin: 0;
@@ -83,79 +84,84 @@ p {
   transition: box-shadow .12s;
 }
 
-#types-list input:focus {
+.sidebar input:focus {
   box-shadow: 0px 5px 6px rgba(0,0,0,.5);
 }
 
-#types-list input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+.sidebar input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list input::-moz-placeholder { /* Firefox 19+ */
+.sidebar input::-moz-placeholder { /* Firefox 19+ */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list input:-ms-input-placeholder { /* IE 10+ */
+.sidebar input:-ms-input-placeholder { /* IE 10+ */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list input:-moz-placeholder { /* Firefox 18- */
+.sidebar input:-moz-placeholder { /* Firefox 18- */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list ul {
+.sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none outside;
 }
 
-#types-list li {
+.sidebar li {
   display: block;
   position: relative;
 }
 
-#types-list li.hide {
+.types-list li.hide {
   display: none;
 }
 
-#types-list a {
-  display: block;
-  padding: 5px 15px 5px 30px;
+.sidebar a {
   text-decoration: none;
-  color: #F8F4FD;
+  color: inherit;
   transition: color .14s;
 }
 
-#types-list a:focus {
+.types-list {
+  display: block;
+}
+
+.sidebar a:focus {
   outline: 1px solid #D1B7F1;
 }
 
-#types-list .current > a,
-#types-list a:hover {
+.types-list a {
+  padding: 5px 15px 5px 30px;
+}
+
+.sidebar .current > a,
+.sidebar a:hover {
   color: #866BA6;
 }
 
-#types-list li ul {
+.types-list li ul {
   overflow: hidden;
   height: 0;
   max-height: 0;
   transition: 1s ease-in-out;
 }
 
-
-#types-list li.parent {
+.types-list li.parent {
   padding-left: 30px;
 }
 
-#types-list li.parent::before {
+.types-list li.parent::before {
   box-sizing: border-box;
   content: "▼";
   display: block;
@@ -174,23 +180,22 @@ p {
 }
 
 
-#types-list li.parent > a {
+.types-list li.parent > a {
   padding-left: 0;
 }
 
-#types-list li.parent.open::before {
+.types-list li.parent.open::before {
   transform: rotateZ(0);
 }
 
-#types-list li.open > ul {
+.types-list li.open > ul {
   height: auto;
   max-height: 1000em;
 }
 
-#main-content {
+.main-content {
   padding: 0 30px 30px 30px;
-  left: 20%;
-  right: 0;
+  width: 100%;
 }
 
 .kind {

diff --git a/src/compiler/crystal/tools/doc/html/js/doc.js b/src/compiler/crystal/tools/doc/html/js/doc.js
@@ -11,10 +11,10 @@ document.addEventListener('DOMContentLoaded', function() {
     };
   }
 
-  var repositoryName = document.getElementById('repository-name').getAttribute('content');
-  var typesList = document.getElementById('types-list');
-  var searchInput = document.getElementById('search-input');
-  var parents = document.querySelectorAll('#types-list li.parent');
+  var repositoryName = document.querySelector('#repository-name').getAttribute('content');
+  var typesList = document.querySelector('.types-list');
+  var searchInput = document.querySelector('.search-input');
+  var parents = document.querySelectorAll('.types-list li.parent');
 
   for(var i = 0; i < parents.length; i++) {
     var _parent = parents[i];
@@ -53,7 +53,7 @@ document.addEventListener('DOMContentLoaded', function() {
     clearTimeout(searchTimeout);
     searchTimeout = setTimeout(function() {
       var text = searchInput.value;
-      var types = document.querySelectorAll('#types-list li');
+      var types = document.querySelectorAll('.types-list li');
       var words = text.toLowerCase().split(/\s+/).filter(function(word) {
         return word.length > 0;
       });

diff --git a/src/compiler/crystal/tools/doc/html/main.html b/src/compiler/crystal/tools/doc/html/main.html
@@ -7,19 +7,9 @@
 </head>
 <body>
 
-<div id="types-list">
-  <div id="search-box">
-    <input type="search" id="search-input" placeholder="Search...">
-  </div>
+<%= SidebarTemplate.new(repository_name, types, nil) %>
 
-  <ul>
-    <li class="current"><a href="index.html">README</a></li>
-  </ul>
-
-  <%= ListItemsTemplate.new(types, nil) %>
-</div>
-
-<div id="main-content">
+<div class="main-content">
 <%= body %>
 </div>
 </body>

diff --git a/src/compiler/crystal/tools/doc/html/type.html b/src/compiler/crystal/tools/doc/html/type.html
@@ -7,19 +7,9 @@
 </head>
 <body>
 
-<div id="types-list">
-  <div id="search-box">
-    <input type="search" id="search-input" placeholder="Search...">
-  </div>
+<%= SidebarTemplate.new(type.repository_name, types, type) %>
 
-  <ul>
-    <li><a href="<%= type.path_to("index.html") %>">README</a></li>
-  </ul>
-
-  <%= ListItemsTemplate.new(types, type) %>
-</div>
-
-<div id="main-content">
+<div class="main-content">
 <h1 class="type-name">
 <% if type.program? %>
   <%= type.full_name %>

diff --git a/src/compiler/crystal/tools/doc/templates.cr b/src/compiler/crystal/tools/doc/templates.cr
@@ -33,6 +33,10 @@ module Crystal::Doc
     ECR.def_to_s "#{__DIR__}/html/_head.html"
   end
 
+  record SidebarTemplate, repository_name : String, types : Array(Type), current_type : Type? do
+    ECR.def_to_s "#{__DIR__}/html/_sidebar.html"
+  end
+
   struct JsTypeTemplate
     ECR.def_to_s "#{__DIR__}/html/js/doc.js"
   end