sdoc 2.0.1 → 2.2.0

data/lib/rdoc/generator/template/rails/resources/css/main.css

@@ -7,8 +7,10 @@ body {
   line-height: 1.25em;
 }
 
-.banner, #bodyContent {
-  margin-left: 300px;
+@media (min-width: 40em) {
+  .banner, #bodyContent {
+    margin-left: 300px;
+  }
 }
 
 a:link, a:active, a:visited, a:hover {
@@ -29,10 +31,6 @@ h1 a, h2 a, .banner a {
   color: #fff;
 }
 
-h1 a:hover, h2 a:hover {
-  color: #fff;
-}
-
 p {
   margin-bottom: 1em;
   text-align: justify;
@@ -125,20 +123,20 @@ ol li
     padding: 1em;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 }
-.banner h1
+.banner h2
 {
     font-size: 1.2em;
     margin: 0;
 }
 
-.banner h1 .type
+.banner h2 .type
 {
     font-size: 0.833em;
     display:block;
 }
 
-.banner h1 .type,
-.banner h1 .parent
+.banner h2 .type,
+.banner h2 .parent
 {
     color: #CCC;
 }
@@ -376,3 +374,32 @@ p code {
   margin-bottom: 1px;
   padding: 0 5px;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: fixed;
+  top: 10%;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  padding: 2rem;
+  border: 4px solid #990000;
+  border-radius: 1rem;
+  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
+  left: 40%;
+  z-index: 100;
+  background: #fff;
+  font-size: 2rem;
+}

data/lib/rdoc/generator/template/rails/resources/css/panel.css

@@ -1,18 +1,119 @@
 /* Panel (begin) */
+    .panel_checkbox, .panel_mobile_button, .panel_mobile_button_close
+    {
+        display: none;
+    }
+
+    @media (max-width: 39.99em) {
+        .panel_mobile_button {
+            display: block;
+            height: 40px;
+            position: sticky;
+            top: 0;
+            background: #000;
+            color: #fff;
+            padding-right: 10px;
+            text-align: right;
+            line-height: 40px;
+            cursor: pointer;
+            z-index: 2;
+        }
+        .panel_checkbox:checked ~ .panel_mobile_button {
+        }
+
+        .panel_checkbox:checked ~ .panel .panel_mobile_button_close {
+            display: block;
+            height: 40px;
+            position: absolute;
+            top: 0;
+            right: 10px;
+            z-index: 3000;
+            text-align: right;
+            line-height: 40px;
+            cursor: pointer;
+        }
+    }
+
+    .panel_mobile_button span {
+         position: relative;
+         display: inline-block;
+         width: 1em;
+         height: 0.55em;
+         margin-right: 0.3em;
+         border-top: 0.1em solid #fff;
+         border-bottom: 0.1em solid #fff;
+    }
+
+    .panel_mobile_button span:before {
+         content: "";
+         position: absolute;
+         top: 0.25em;
+         left: 0px;
+         width: 100%;
+         border-top: 0.1em solid #fff;
+    }
+
+    .panel_mobile_button_close span {
+         position: relative;
+         display: inline-block;
+         width: 1em;
+         height: 0.625em;
+    }
+
+    .panel_mobile_button_close span:before, .panel_mobile_button_close span:after {
+         content: "";
+         position: absolute;
+         top: 0.2em;
+         left: 0px;
+         width: 100%;
+         border-top: 0.1em solid #000;
+    }
+
+    .panel_mobile_button_close span:before {
+        transform: rotate(45deg);
+    }
+
+    .panel_mobile_button_close span:after {
+        transform: rotate(-45deg);
+    }
+
     .panel
     {
         position: fixed;
+        top: 0;
         width: 300px;
         height: 100%;
         background: #FFF;
-        z-index: 2;
+        z-index: 10;
         font-family: "Helvetica Neue", "Arial", sans-serif;
         overflow-x: hidden;
         border-right: 1px #ccc solid;
         line-height: 1;
     }
 
-    .panel_tree .results,
+    @media (max-width: 39.99em) {
+        .panel
+        {
+            transition: left 0s ease-in-out;
+            left: -100%;
+            width: 100%;
+            bottom: 0;
+            visibility: hidden;
+        }
+
+        .panel_checkbox:checked ~ .panel {
+            left: 0%;
+            transition: left 0.3s ease-in-out;
+            visibility: visible;
+        }
+
+        .panel_checkbox:checked ~ #bodyContent {
+            visibility: hidden;
+            display: none;
+        }
+    }
+
+    .panel_tree .result,
     .panel_results .tree
     {
         display: none;
@@ -27,11 +128,19 @@
             height: 40px;
             width: 300px;
             position: fixed;
+            position: sticky;
             left: 0; top: 0;
             z-index: 300;
             overflow-x: hidden;
         }
 
+        @media (max-width: 39.99em) {
+            .panel .header
+            {
+                width: 100%;
+            }
+        }
+
         .panel .header input
         {
             border: 0;
@@ -46,6 +155,15 @@
             outline: none;
         }
 
+        @media (max-width: 39.99em) {
+            .panel .header input
+            {
+                width: 70%;
+                width: calc(100% - 100px);
+                font-size: 16px;
+            }
+        }
+
     /* Header with search box (end) */
 
 
@@ -54,10 +172,10 @@
         {
             position: relative;
             bottom: 0;
-            top: 40px;
+            top: 0;
             left: 0;
             width: 100%;
-            overflow-y: scroll;
+            overflow-y: auto;
             overflow-x: hidden;
             z-index: 2;
         }
@@ -220,11 +338,10 @@
         {
             background: white;
             position: relative;
-            top: 40px;
             bottom: 0;
             left: 0;
             width: 100%;
-            overflow-y: scroll;
+            overflow-y: auto;
             overflow-x: hidden;
             z-index: 30;
         }
@@ -320,13 +437,13 @@
 
         .panel .tree ul li.current .icon
         {
-            background: url(../i/arrow-right.svg);
+            background: url(../i/arrow-down-current.svg);
             background-size: 10px;
         }
 
         .panel .tree ul li.current.closed .icon
         {
-            background: url(../i/arrow-down.svg);
+            background: url(../i/arrow-right-current.svg);
             background-size: 10px;
         }
 

data/lib/rdoc/generator/template/rails/resources/css/reset.css

@@ -13,7 +13,6 @@ table, caption, tbody, tfoot, thead, tr, th, td {
 	margin: 0;
 	padding: 0;
 	border: 0;
-	outline: 0;
 	font-size: 100%;
 	vertical-align: baseline;
 	background: transparent;

data/lib/rdoc/generator/template/rails/resources/i/arrow-down-current.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="27.8,3.1 0.6,3.1 14.2,26.2 "/>
+</svg>

data/lib/rdoc/generator/template/rails/resources/i/arrow-right-current.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="2.6,1.1 2.6,28.2 25.8,14.6 "/>
+</svg>

data/lib/rdoc/generator/template/rails/resources/js/main.js

@@ -27,6 +27,23 @@ document.addEventListener("turbolinks:load", function() {
   });
 });
 
+document.addEventListener("turbolinks:load", function() {
+  // Only initialize panel if not yet initialized
+  if(!$('#panel .tree ul li').length) {
+    $('#links').hide();
+    var panel = new Searchdoc.Panel($('#panel'), search_data, tree, $('meta[name="data-rel-prefix"]').attr("content"));
+    var s = window.location.search.match(/\?q=([^&]+)/);
+    if (s) {
+      s = decodeURIComponent(s[1]).replace(/\+/g, ' ');
+      if (s.length > 0) {
+        $('#search').val(s);
+        panel.search(s, true);
+      }
+    }
+    panel.toggle(JSON.parse($('meta[name="data-tree-keys"]').attr("content")));
+  }
+});
+
 // Keep scroll position for panel
 (function() {
   var scrollTop = 0;

data/lib/rdoc/generator/template/rails/resources/js/searchdoc.js

@@ -32,10 +32,6 @@ Searchdoc.Navigation = new function() {
             case 74: // j
             case 75: // k
             case 76: // l
-            case 67: // c - dvorak
-            case 72: // h
-            case 84: // t
-            case 78: // n
                 this.clearMoveTimeout();
                 break;
         }
@@ -43,15 +39,14 @@ Searchdoc.Navigation = new function() {
 
     this.onkeydown = function(e) {
         if (!this.navigationActive) return;
+
         switch (e.keyCode) {
             case 37: //Event.KEY_LEFT:
             case 74: // j (qwerty)
-            case 72: // h (dvorak)
                 if (this.moveLeft()) e.preventDefault();
                 break;
             case 38: //Event.KEY_UP:
             case 73: // i (qwerty)
-            case 67: // c (dvorak)
                 if (e.keyCode == 38 || e.ctrlKey) {
                     if (this.moveUp()) e.preventDefault();
                     this.startMoveTimeout(false);
@@ -59,28 +54,31 @@ Searchdoc.Navigation = new function() {
                 break;
             case 39: //Event.KEY_RIGHT:
             case 76: // l (qwerty)
-            case 78: // n (dvorak)
                 if (this.moveRight()) e.preventDefault();
                 break;
             case 40: //Event.KEY_DOWN:
             case 75: // k (qwerty)
-            case 84: // t (dvorak)
                 if (e.keyCode == 40 || e.ctrlKey) {
                     if (this.moveDown()) e.preventDefault();
                     this.startMoveTimeout(true);
                 }
                 break;
-            case 9: //Event.KEY_TAB:
             case 13: //Event.KEY_RETURN:
+                if(e.target.dataset["turbolinks"]) { break; }
                 if (this.$current) this.select(this.$current);
                 break;
-            case 83: // s (qwerty)
-            case 79: // o (dvorak)
+            case 83: // s (qwerty) - Focuses search
                 if (e.ctrlKey) {
                     $('#search').focus();
                     e.preventDefault();
                 }
                 break;
+            case 191: // / - Search by pressing "/"
+                if( !$('#search').is(":focus") ) {
+                    $('#search').focus();
+                    e.preventDefault();
+                }
+                break;
         }
         if (e.ctrlKey && e.shiftKey) this.select(this.$current);
     };
@@ -336,20 +334,17 @@ Searchdoc.Tree.prototype = $.extend({}, Searchdoc.Navigation, new function() {
     };
 
     this.select = function($li) {
-        console.log("select")
         this.highlight($li);
         var path = $li[0].searchdoc_tree_data.path;
         if (path) this.panel.open(path);
     };
 
     this.highlight = function($li) {
-        console.log("highlight")
         if (this.$current) this.$current.removeClass('current');
         this.$current = $li.addClass('current');
     };
 
     this.toggle = function($li) {
-        console.log("toggle " + !$li.hasClass('closed'))
         var closed = !$li.hasClass('closed'),
             children = $li[0].searchdoc_tree_data.children;
         $li.toggleClass('closed');
@@ -359,27 +354,21 @@ Searchdoc.Tree.prototype = $.extend({}, Searchdoc.Navigation, new function() {
     };
 
     this.moveRight = function() {
-        console.log("moveRight")
         if (!this.$current) {
-            console.log("moveRight -> highlight")
             this.highlight(this.$list.find('li:first'));
             return;
         }
         if (this.$current.hasClass('closed')) {
-            console.log("moveRight -> toggle")
             this.toggle(this.$current);
         }
     };
 
     this.moveLeft = function() {
-        console.log("moveLeft")
         if (!this.$current) {
-            console.log("moveLeft -> highlight")
             this.highlight(this.$list.find('li:first'));
             return;
         }
         if (!this.$current.hasClass('closed')) {
-          console.log("moveLeft -> toggle")
             this.toggle(this.$current);
         } else {
             var level = this.$current[0].searchdoc_tree_data.level;
@@ -490,4 +479,3 @@ Searchdoc.Tree.prototype = $.extend({}, Searchdoc.Navigation, new function() {
         return 5 + 18 * level + 'px';
     }
 });
-