Update docs

app/assets/stylesheets/_settings.scss

@@ -335,7 +335,8 @@ $dropdownmenu-arrows: true;
 $dropdownmenu-arrow-color: $anchor-color;
 $dropdownmenu-min-width: 200px;
 $dropdownmenu-background: $white;
-$dropdownmenu-border: 1px solid $medium-gray;
+//$dropdownmenu-border: 1px solid $medium-gray; // Original.
+$dropdownmenu-border: 0px solid $medium-gray;
 
 // 18. Flex Video
 // --------------

app/assets/stylesheets/pages.scss

@@ -2,6 +2,8 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+@import 'settings';
+
 .hideme {
   display: none;
 }
@@ -186,4 +188,8 @@ hr.row {
   //overflow: scroll;
   width: 800px;
   height: 800px;
+}
+
+.sand-color {
+  background-color: $body-background;
 }

app/controllers/pages_controller.rb

@@ -1,4 +1,5 @@
 class PagesController < ApplicationController
+
   def home
   end
 
@@ -15,8 +16,16 @@ def citation
   end
 
   def docs
+
+
   end
 
+  def docs_newick; end
+  def docs_mapping_files; end
+  def docs_styling_opts; end
+  def docs_branch_styling; end
+  def docs_mapping_file_priority; end
+
   def canvas_viewer
   end
 

app/views/layouts/_docs_nav_bar.html.slim

@@ -0,0 +1,11 @@
+.row
+  ul.sand-color.vertical.dropdown.menu data-dropdown-menu="" style="max-width: 250px;"
+    li = link_to 'Newick trees', docs_newick_path
+    li
+      = link_to 'Mapping files', docs_mapping_files_path
+      ul.menu.sand-color
+        li
+          = link_to 'Styling options', docs_styling_opts_path
+          ul.menu.sand-color
+            li = link_to 'Branch styling', docs_branch_styling_path
+        li = link_to 'Mapping file priority', docs_mapping_file_priority_path

app/views/layouts/_docs_nav_bar_title.html.slim

@@ -0,0 +1,2 @@
+.row
+  h1 = link_to 'Iroki Docs', docs_path

app/views/layouts/_nav_bar.html.slim

@@ -7,7 +7,7 @@
         li
           = link_to 'Iroki', root_path
     .top-bar-right
-      ul.menu
+      ul.menu.dropdown data-dropdown-menu=""
         /li.divider
         /li = link_to 'About', about_path
         / li.divider
@@ -21,4 +21,23 @@
         li.divider
         li = link_to 'Citation', citation_path
         li.divider
-        li = link_to 'Documentation', docs_path
+        / Level 0
+        li
+          = link_to 'Documentation', docs_path
+          ul.menu
+            / Level 1
+            li
+              = link_to 'Newick trees', docs_newick_path
+            li
+              = link_to 'Mapping files', docs_mapping_files_path
+              ul.menu
+                / Level 2
+                li
+                  = link_to 'Styling options', docs_styling_opts_path
+                  ul.menu
+                    / Level 3
+                    li
+                      = link_to 'Branch styling', docs_branch_styling_path
+                / Level 2
+                li
+                  = link_to 'Mapping file priority', docs_mapping_file_priority_path

app/views/pages/docs.html.slim

@@ -6,95 +6,97 @@
 .row
   p Here is all the sweet documentation for using Iroki!!  It's still a work in progress....
 
-.row
-  h2 Newick trees
-
-.row
-  p Iroki reads Newick formatted trees. This is a widely used format for storing phylogenetic and other types of trees in plain text.
-
-  p Here is an example of a tree with bootstrap support values.  In this case, the support values run from 0 - 1, but depending on your tree building software, they might run from 0 - 100, or look super neat like this <code>95.6/100</code> if you used IQ-TREE.
-
-  p Knowing which type of bootstrap support values your tree has will be important if you want to use the inner dots to represent bootstrap support.
-
-.row
-  pre
-    code
-      | ((geode:1, (clock:0.5, tire:5.3)0.4:2)0.75:6, (banana:1.7, eggplant:1.5)0.5:3);
-
-.row
-  p You can download this tree #{link_to "here", "/doc_stuff/tiny_tree_with_bootstraps.txt"}.
-
-  p This tree will look like this when viewed with Iroki.
-
-.row
-  = image_tag "/doc_stuff/tiny_tree_with_bootstraps.png", id: "tiny_tree_with_bootstraps"
-
-.row
-  p For the rest of the examples, we will use this tree.
-
-.row
-  h2 Mapping files
-
-.row
-  p Iroki is all about mapping files, so we try to make them as simple to use as possible.
-
-  p Here is an example mapping file.  It's just a sweet screenshot of a spreadsheet.
-
-.row
-  = image_tag "/doc_stuff/tiny_tree_simple_mapping.png", id: "tiny_tree_simple_mapping"
-
-.row
-  p Mapping files should be tab-delimited.  We reccomend making your mapping file in your favorite spreadsheet program and then exporting it as a tab-delimited text file (tsv).  Right click #{link_to "here", "/doc_stuff/tiny_tree_simple_mapping.txt"} and select Download to get the above mapping file as a tab seperated text file.
-  p Note that Iroki will strip off whitespace from the beginning and end of all tokens in the mapping file.
-
-.row
-  h3 Styling options
-
-.row
-  p The first row of the mapping file tells Iroki what aspects of the tree that you want to style.
-
-  p The first column of the first row must always be <code>name</code>.
-
-  p The above mapping file has all the options currently supported by Iroki.  Here they are again:
-
-  p There are options for styling labels (<code>leaf_label_color</code>, <code>leaf_label_font</code>, <code>leaf_label_size</code>), leaf dots (<code>leaf_dot_color</code>, <code>leaf_dot_size</code>), branches (<code>branch_width</code>, <code>branch_color</code>), and for renaming nodes (<code>new_name</code>).
-
-  p If you have anything in the first row of your mapping file that is not one of these options, Iroki will let you know about it.
-
-  p Note that you should only include the styling labels that you actually want to use in your mapping file.  This is because Iroki will take whatever is in the mapping file and lock those options in the viewer.  For example, if I have <code>leaf_label_color</code> in my header row, then Iroki will lock the option for "Show leaf labels?" to on.
-
-.row
-  h4 Branch styling
-
-.row
-  p If you have branch styling in your mapping file, Iroki will recursively color as far down as possible. That way you can easily identify clades with the same metadata.
-
-.row
-  h3 Mapping file priority
-
-.row
-  p Iroki will take whatever is in your mapping file and generate styling options that will override whatever was previously set in the options panel.  Here is an example.
-
-.row
-  p First we have a tree and we have manually set the branch color to magenta.
-
-.row
-  = image_tag "/doc_stuff/mapping_file_priority_1.png", id: "mapping_file_priority_1"
-
-.row
-  p Next, we upload the mapping file from above.  Note that it has <code>branch_color</code> in the header row.
-
-.row
-  = image_tag "/doc_stuff/mapping_file_priority_2.png", id: "mapping_file_priority_2"
-
-.row
-  p As you can see, the branch_option is still set to magenta, but the branch colors have been set by the mapping automatically.
-
-.row
-  p Let's look at one more example.  This time, the mapping file will only set <code>branch_color</code> for certain clock and tire.  You can see the mapping file #{link_to "here", "/doc_stuff/tiny_tree_some_branch_colors.txt"}.
-
-.row
-  = image_tag "/doc_stuff/mapping_file_priority_3.png", id: "mapping_file_priority_3"
-
-.row
-  p As you can see, the clock and tire clade is colored blue (by the mapping file) and the rest of the branches are colored magenta (by the option set by the user in the options panel).
+= render 'layouts/docs_nav_bar'
+
+    / .row
+/   h2 Newick trees
+/
+/ .row
+/   p Iroki reads Newick formatted trees. This is a widely used format for storing phylogenetic and other types of trees in plain text.
+/
+/   p Here is an example of a tree with bootstrap support values.  In this case, the support values run from 0 - 1, but depending on your tree building software, they might run from 0 - 100, or look super neat like this <code>95.6/100</code> if you used IQ-TREE.
+/
+/   p Knowing which type of bootstrap support values your tree has will be important if you want to use the inner dots to represent bootstrap support.
+/
+/ .row
+/   pre
+/     code
+/       | ((geode:1, (clock:0.5, tire:5.3)0.4:2)0.75:6, (banana:1.7, eggplant:1.5)0.5:3);
+/
+/ .row
+/   p You can download this tree #{link_to "here", "/doc_stuff/tiny_tree_with_bootstraps.txt"}.
+/
+/   p This tree will look like this when viewed with Iroki.
+/
+/ .row
+/   = image_tag "/doc_stuff/tiny_tree_with_bootstraps.png", id: "tiny_tree_with_bootstraps"
+/
+/ .row
+/   p For the rest of the examples, we will use this tree.
+
+/ .row
+/   h2 Mapping files
+/
+/ .row
+/   p Iroki is all about mapping files, so we try to make them as simple to use as possible.
+/
+/   p Here is an example mapping file.  It's just a sweet screenshot of a spreadsheet.
+/
+/ .row
+/   = image_tag "/doc_stuff/tiny_tree_simple_mapping.png", id: "tiny_tree_simple_mapping"
+/
+/ .row
+/   p Mapping files should be tab-delimited.  We reccomend making your mapping file in your favorite spreadsheet program and then exporting it as a tab-delimited text file (tsv).  Right click #{link_to "here", "/doc_stuff/tiny_tree_simple_mapping.txt"} and select Download to get the above mapping file as a tab seperated text file.
+/   p Note that Iroki will strip off whitespace from the beginning and end of all tokens in the mapping file.
+/
+/ .row
+/   h3 Styling options
+/
+/ .row
+/   p The first row of the mapping file tells Iroki what aspects of the tree that you want to style.
+/
+/   p The first column of the first row must always be <code>name</code>.
+/
+/   p The above mapping file has all the options currently supported by Iroki.  Here they are again:
+/
+/   p There are options for styling labels (<code>leaf_label_color</code>, <code>leaf_label_font</code>, <code>leaf_label_size</code>), leaf dots (<code>leaf_dot_color</code>, <code>leaf_dot_size</code>), branches (<code>branch_width</code>, <code>branch_color</code>), and for renaming nodes (<code>new_name</code>).
+/
+/   p If you have anything in the first row of your mapping file that is not one of these options, Iroki will let you know about it.
+/
+/   p Note that you should only include the styling labels that you actually want to use in your mapping file.  This is because Iroki will take whatever is in the mapping file and lock those options in the viewer.  For example, if I have <code>leaf_label_color</code> in my header row, then Iroki will lock the option for "Show leaf labels?" to on.
+
+/ .row
+/   h4 Branch styling
+/
+/ .row
+/   p If you have branch styling in your mapping file, Iroki will recursively color as far down as possible. That way you can easily identify clades with the same metadata.
+
+/ .row
+/   h3 Mapping file priority
+/
+/ .row
+/   p Iroki will take whatever is in your mapping file and generate styling options that will override whatever was previously set in the options panel.  Here is an example.
+/
+/ .row
+/   p First we have a tree and we have manually set the branch color to magenta.
+/
+/ .row
+/   = image_tag "/doc_stuff/mapping_file_priority_1.png", id: "mapping_file_priority_1"
+/
+/ .row
+/   p Next, we upload the mapping file from above.  Note that it has <code>branch_color</code> in the header row.
+/
+/ .row
+/   = image_tag "/doc_stuff/mapping_file_priority_2.png", id: "mapping_file_priority_2"
+/
+/ .row
+/   p As you can see, the branch_option is still set to magenta, but the branch colors have been set by the mapping automatically.
+/
+/ .row
+/   p Let's look at one more example.  This time, the mapping file will only set <code>branch_color</code> for certain clock and tire.  You can see the mapping file #{link_to "here", "/doc_stuff/tiny_tree_some_branch_colors.txt"}.
+/
+/ .row
+/   = image_tag "/doc_stuff/mapping_file_priority_3.png", id: "mapping_file_priority_3"
+/
+/ .row
+/   p As you can see, the clock and tire clade is colored blue (by the mapping file) and the rest of the branches are colored magenta (by the option set by the user in the options panel).

app/views/pages/docs_branch_styling.html.slim

@@ -0,0 +1,9 @@
+= render 'layouts/docs_nav_bar_title'
+
+= render 'layouts/docs_nav_bar'
+
+.row
+  h4 Branch styling
+
+.row
+  p If you have branch styling in your mapping file, Iroki will recursively color as far down as possible. That way you can easily identify clades with the same metadata.

app/views/pages/docs_mapping_file_priority.html.slim

@@ -0,0 +1,33 @@
+= render 'layouts/docs_nav_bar_title'
+
+= render 'layouts/docs_nav_bar'
+
+.row
+  h3 Mapping file priority
+
+.row
+  p Iroki will take whatever is in your mapping file and generate styling options that will override whatever was previously set in the options panel.  Here is an example.
+
+.row
+  p First we have a tree and we have manually set the branch color to magenta.
+
+.row
+  = image_tag "/doc_stuff/mapping_file_priority_1.png", id: "mapping_file_priority_1"
+
+.row
+  p Next, we upload the mapping file from above.  Note that it has <code>branch_color</code> in the header row.
+
+.row
+  = image_tag "/doc_stuff/mapping_file_priority_2.png", id: "mapping_file_priority_2"
+
+.row
+  p As you can see, the branch_option is still set to magenta, but the branch colors have been set by the mapping automatically.
+
+.row
+  p Let's look at one more example.  This time, the mapping file will only set <code>branch_color</code> for certain clock and tire.  You can see the mapping file #{link_to "here", "/doc_stuff/tiny_tree_some_branch_colors.txt"}.
+
+.row
+  = image_tag "/doc_stuff/mapping_file_priority_3.png", id: "mapping_file_priority_3"
+
+.row
+  p As you can see, the clock and tire clade is colored blue (by the mapping file) and the rest of the branches are colored magenta (by the option set by the user in the options panel).

app/views/pages/docs_mapping_files.html.slim

@@ -0,0 +1,34 @@
+= render 'layouts/docs_nav_bar_title'
+
+= render 'layouts/docs_nav_bar'
+
+.row
+  h2 Mapping files
+
+.row
+  p Iroki is all about mapping files, so we try to make them as simple to use as possible.
+
+  p Here is an example mapping file.  It's just a sweet screenshot of a spreadsheet.
+
+.row
+  = image_tag "/doc_stuff/tiny_tree_simple_mapping.png", id: "tiny_tree_simple_mapping"
+
+.row
+  p Mapping files should be tab-delimited.  We reccomend making your mapping file in your favorite spreadsheet program and then exporting it as a tab-delimited text file (tsv).  Right click #{link_to "here", "/doc_stuff/tiny_tree_simple_mapping.txt"} and select Download to get the above mapping file as a tab seperated text file.
+  p Note that Iroki will strip off whitespace from the beginning and end of all tokens in the mapping file.
+
+/ .row
+/   h3 Styling options
+/
+/ .row
+/   p The first row of the mapping file tells Iroki what aspects of the tree that you want to style.
+/
+/   p The first column of the first row must always be <code>name</code>.
+/
+/   p The above mapping file has all the options currently supported by Iroki.  Here they are again:
+/
+/   p There are options for styling labels (<code>leaf_label_color</code>, <code>leaf_label_font</code>, <code>leaf_label_size</code>), leaf dots (<code>leaf_dot_color</code>, <code>leaf_dot_size</code>), branches (<code>branch_width</code>, <code>branch_color</code>), and for renaming nodes (<code>new_name</code>).
+/
+/   p If you have anything in the first row of your mapping file that is not one of these options, Iroki will let you know about it.
+/
+/   p Note that you should only include the styling labels that you actually want to use in your mapping file.  This is because Iroki will take whatever is in the mapping file and lock those options in the viewer.  For example, if I have <code>leaf_label_color</code> in my header row, then Iroki will lock the option for "Show leaf labels?" to on.