Fix docs with examples

server/documents/behaviors/api.html.eco

@@ -116,11 +116,11 @@ type        : 'UI Behavior'
       <h2 class="ui dividing header">Querying API Actions</h2>
 
       <div class="no example">
-        <div class="ui top attached info message">
-          <div class="ui header">Open Your Web Console</div>
+        <div class="ui info message">
+          <div class="header">Open Your Web Console</div>
           <p>The following examples work best while viewing logs in your web console.  This experienced is optimized for Firebug, but will also appear in webkit browsers <a href="https://code.google.com/p/chromium/issues/detail?id=306120" target="_blank">with minor issues.</a></p>
         </div>
-        <div class="ui bottom attached message">
+        <div class="ui message">
           API requests for the following demos have been faked using API's <code>mockResponse</code> to avoid rate throttling from public APIs. No actual data is returned.
         </div>
         <h4 class="ui header">Attaching API Events</h4>

server/files/javascript/docs.js

@@ -110,32 +110,12 @@ semantic.ready = function() {
           $('<i/>')
             .addClass('icon code')
             .insertBefore( $insertPoint )
-            .on('click', function() {
-              $.cookie('expertiseLevel', 2);
-              handler.createCode.call(this);
-            })
           ;
         })
       ;
     },
 
-    search: {
-      focus: function() {
-        $(this).val('');
-        $(this).closest('.search').removeClass('hidden');
-        $(this).closest('.menu').addClass('searching');
-        handler.loadSearch();
-      },
-      blur: function() {
-        $(this).closest('.search').addClass('hidden');
-        $(this).closest('.menu').removeClass('searching');
-      }
-    },
-
     shortcut: {
-      search: function() {
-        $('#search').find('input').focus();
-      },
       modal: function() {
         var
           $modal = $('#shortcuts'),
@@ -774,7 +754,7 @@ semantic.ready = function() {
 
       if($html.size() === 0) {
         $html = $('<div class="html">').insertBefore($annotation);
-        $label = $('<div class="ui top attached label">').html('<a class="copy">Copy</a>Example');
+        $label = $('<div class="ui top attached label">').html('Example');
         $label.prependTo($html);
         $demo
           .detach()
@@ -1124,40 +1104,6 @@ semantic.ready = function() {
     .sidebar('attach events', '.launch.button, .view-ui, .launch.item')
   ;
 
-  $search
-    .children('.icon')
-      .on('click', handler.shortcut.search)
-      .end()
-    // Load search data the first time user focuses the search input.
-    .find('input')
-      .on('focus', handler.search.focus)
-      .on('blur', handler.search.blur)
-  ;
-
-  // setup keyboard shortcuts
-  var shortcuts = [
-    {
-      name        : 'Search',
-      key         : 's',
-      aka         : 's',
-      description : 'Focus search bar',
-      action      : handler.shortcut.search
-    },
-    {
-      name        : 'Help',
-      key         : 'z',
-      aka         : '?',
-      description : 'Show keyboard shortcuts',
-      action      : handler.shortcut.modal
-    }
-  ];
-  /*  $.each(shortcuts, function(index, shortcut) {
-      $document
-        .on('keydown', shortcut.key, shortcut.action)
-      ;
-    });
-  */
-
   handler.createIcon();
 
   if(expertiseLevel < 2) {
@@ -1177,6 +1123,11 @@ semantic.ready = function() {
             content  : 'View Source',
             target   : $(this).find('i.code')
           })
+          .find('i.code')
+            .on('click', function() {
+              $.cookie('expertiseLevel', 2);
+              handler.createCode.call(this);
+            })
         ;
       })
     ;

server/files/stylesheets/docs.css

@@ -283,9 +283,12 @@ pre code {
   position: absolute;
   right: -0.5em;
   top: 0px;
-  width: 300px;
+  width: 250px;
   padding-top: 2em;
 }
+#example .fixed.column + .examples {
+  margin-right: 280px;
+}
 
 #example .tab.masthead .item.menu {
   margin: 3rem 0rem 2rem;
@@ -1765,6 +1768,24 @@ body.progress.animated .ui.progress .bar {
   bottom: -2px;
 }
 
+/* Remove Overview from pages with Examples */
+@media only screen and (max-width: 1500px) {
+
+  #example .fixed.column {
+    right: auto;
+    left: 100%;
+    margin-left: 4.5em;
+    width: 300px;
+  }
+  #example .fixed.column + .examples {
+    margin-right: 0px;
+  }
+  #example .fixed.column + .examples .right.rail {
+    display: none;
+  }
+
+}
+
 
 /* Table Ad */
 @media only screen and (max-width: 1272px) {
@@ -1873,6 +1894,15 @@ body.progress.animated .ui.progress .bar {
     display: none;
   }
 
+  /* Move Examples */
+  #example .fixed.column {
+    width: 250px;
+    margin-left: 3em;
+  }
+  #example .fixed.column .sticky {
+    padding-top: 2em;
+  }
+
 }
 
 /* Remove Rail */