add button (with dropdown options). apply to project_list_detailed.

media/css/core.css

@@ -158,7 +158,7 @@ i { display: inline-block; padding:0; margin:0; padding-right:6px; position: rel
   .module-list { padding: 8px; background: #E6E6E6; background: rgba(0, 0, 0, 0.1); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
   .module-list-wrapper { border: 1px solid #bfbfbf; border: 1px solid #bfbfbf; border-bottom: none; }
   .module-list .count { float: right; font-size: .9em; color: #aaa; }
-  .module-item { position: relative; border-bottom: 1px solid #bfbfbf; padding: 10px; }
+  .module-item { position: relative; border-bottom: 1px solid #bfbfbf; padding: 10px; position:relative; }
   .module-item p { margin: 0; }
 
   /* module item title */
@@ -313,7 +313,7 @@ p.build-missing { font-size: .8em; color: #9d9a55; margin: 0 0 3px; }
 .hide { display: none; }
 .left { float: left; }
 .right { float: right; }
-.right-menu { float: right; margin-right: 100px; }
+.right-menu { float: right; margin-right: 132px; }
 .quiet { color: #999; }
 .help_text { color: #999; }
 .highlighted { background-color: #ee9; padding: 0 1px; margin: 0 1px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
@@ -345,3 +345,24 @@ body .edit-toggle { display: none; }
 .navigable ul li:hover .edit { opacity:1; }
 
 .navigable ul input[type=text] { width: 164px; }
+
+
+select.dropdown { display: none; }
+.dropdown > a { font-family: "ff-meta-web-pro", "ff-meta-web-pro-1", "ff-meta-web-pro-2", Arial, "Helvetica Neue", sans-serif; color: #666; font-weight: bold; padding: 8px 15px; border: none; background: #e6e6e6 url(../images/gradient.png) repeat-x bottom left; margin: 30px 5px 20px 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 1); border: 1px solid #bfbfbf; display: block; text-decoration: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset; }
+
+
+.dropdown { position: relative; display: inline-block; height: 32px; min-width:128px; }
+.dropdown > span { position:relative; display: block; }
+.dropdown > span a:first-child { display: block; padding: 6px 10px 4px; margin: 7px 7px 0 0; font-weight: bold; font-size: 14px; height: 20px; line-height: 17px; text-decoration: none; color: #fff; background: #7C8F99 url(../images/gradient-light.png) bottom left repeat-x; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px #465158; -moz-box-shadow: 0 1px 1px #465158; -webkit-box-shadow: 0 1px 1px #465158; }
+.dropdown > span a:first-child:hover { background: #8CA1AF; }
+
+.dropdown > span a + a { display: block; overflow: hidden; position:absolute; padding:3px 0px; right:7px; top:0px; width:32px; border-left:1px solid #465158; border-radius:0px 2px 2px 0px; color:white; text-decoration:none; font-size:12px; text-align:center; }
+.dropdown > span a + a:hover { background: #8CA1AF; }
+
+.dropdown > ul { display: none; margin-top:16px; position:absolute; top:100%; left:-8px; background:#465158; padding:4px; border-radius:4px; z-index:1005; min-width:128px; box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2); }
+.dropdown > ul > li { background: white; padding:8px 10px; border-bottom:1px solid #EEE; }
+
+.dropdown > ul.js-open { display:block; }
+
+.dropdown > ul:before { content:' '; visibility: visible; border:8px solid transparent; border-bottom-color: #465158; position:absolute; top:-16px; left:104px; }
+

media/javascript/base.js

@@ -0,0 +1,105 @@
+$(function() {
+  $('body')
+    .on('click', '.dropdown > span > a:last-child', open_dropdown)
+    .on('keyup', '.dropdown input[type=search]', filter_dropdown_results)
+    .click(hide_dropdown) 
+
+  $('select.dropdown').each(function(i, e) { build_dropdown_from_select($(e)) })
+
+  function open_dropdown(ev) {
+    console.log('open_dropdown')
+    ev.preventDefault()
+    $('.dropdown > ul').removeClass('js-open')
+    var el = $(ev.target)
+      , dropdown = el.parents('.dropdown')
+
+    dropdown.find('li').show()
+    dropdown.find('ul').addClass('js-open')
+    dropdown.find('input[type=search]').val('').focus()
+  }
+
+  function filter_dropdown_results(ev) {
+    console.log('is this getting called')
+
+    var el = $(ev.target)
+      , dropdown = el.parents('.dropdown')
+      , value = this.value
+
+    dropdown.find('li').show()
+   
+    if(value.length) {
+      dropdown.find('li').hide()
+      dropdown.find('li').filter(function(i, el) {
+        return ($(el).text().indexOf(value) === 0)
+      }).show()
+      el.parent().show()
+    }
+
+    if(ev.keyCode === 13) {
+      ev.preventDefault()
+      var anchor = dropdown.find('li:visible > a').eq(0)
+
+      setTimeout(function() {
+        anchor.click()
+      })
+    } else if(ev.keyCode === 27) {
+      el.val('')
+      dropdown.find('li').show()
+    }
+  } 
+
+  function hide_dropdown(ev) {
+    if(!$(ev.target).parents('.dropdown').length) {
+      $('.dropdown > ul').removeClass('js-open')
+    }
+  }
+
+
+  function build_dropdown_from_select(select) {
+    var options = {}
+      , selected = null
+      , option_ul
+      , framing
+
+
+    framing = $('<span class="dropdown"><span>'+
+      '<a href="#"></a><a href="#">&#x25BC;</a></span>'+
+      '<ul></ul></span>'
+    )
+    option_ul = framing.find('ul')
+
+    select.find('option').each(function(idx, el) {
+      el = $(el)
+      var value = el.attr('value')
+
+      options[value] = el.text()
+      selected = selected === null ? value : selected
+
+      option_ul.append(
+        $('<li></li>').append(
+          $('<a href="#"></a>')
+            .text(options[value])
+            .attr('data-value', value)
+          )
+      )
+
+    })
+
+    console.log('norp', select, select.find('option'), options, selected)
+    selected = options[select.val() || selected]
+
+
+    framing.find('span > a:first-child').text(selected)
+
+    framing.on('click', '[data-value]', function(ev) {
+      ev.preventDefault()
+      framing.find('span > a:first-child').text($(this).text())
+      select.val($(this).attr('data-value'))
+
+      option_ul.removeClass('js-open')
+    })
+
+    select.after(framing)
+
+  }
+})

readthedocs/templates/base.html

@@ -21,6 +21,7 @@
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
 
   <script type="text/javascript" src="{{ MEDIA_URL }}javascript/instantsearch.js"></script>
+  <script type="text/javascript" src="{{ MEDIA_URL }}javascript/base.js"></script>
 
   {% block extra_scripts %}{% endblock %}
 

readthedocs/templates/core/project_list_detailed.html

@@ -23,18 +23,25 @@
       {% endif %}
     {% endwith %}
     <span class="right-menu quiet">{% blocktrans with date=project.modified_date|timesince %}{{ date }} ago{% endblocktrans %}</span>
-    <ul class="module-item-menu">
-      {% if project.has_good_build %}
-        <span class="hidden-child" style="display: none;">
-            {% for version in project.ordered_active_versions reversed %}
-                <li><a href="{{ version.get_absolute_url }}">{{ version.slug }}</a></li>
-            {% endfor %}
-        </span>
-        <li><a href="{{ project.get_docs_url }}">{% trans "View Docs" %}</a></li>
-      {% else %}
-        <li><a href="{{ project.get_builds_url }}">{% trans "No Docs" %}</a></li>
-      {% endif %}
-    </ul>
+
+    <span class="dropdown" style="position:absolute; right:0px; top:0px;">
+      <span>
+        {% if project.has_good_build %}
+          <a href="{{ project.get_docs_url }}">{% trans "View Docs" %}</a>
+        {% else %}
+          <a href="{{ project.get_builds_url }}">{% trans "No Docs" %}</a>
+        {% endif %}
+        <a href="#">&#x25BC;</a>
+      </span>
+      <ul>
+      <li><input type="search" placeholder="Search..." /></li>
+      {% for version in project.ordered_active_versions reversed %}
+          <li><a href="{{ version.get_absolute_url }}">{{ version.slug }}</a></li>
+      {% endfor %}
+
+      </ul> 
+    </span>
+
   </li>
 {% empty %}
   <li class="module-item quiet">{% trans "No projects found" %}</li>

readthedocs/templates/style_catalog.html

@@ -286,5 +286,34 @@ It's free and simple.  Read the <a href="">Getting Started</a> guide to get goin
 
 <hr>
 
+<span class="dropdown">
+  <span>
+    <a href="#">Title</a>
+    <a href="#">&#x25BC;</a>
+  </span>
+  <ul>
+    <li><a href="#">Option 1</a></li>
+    <li><a href="#">Option 2</a></li>
+  </ul>
+</span>
+
+<span class="dropdown">
+  <span>
+    <a href="#">Versions</a>
+    <a href="#">&#x25BC;</a>
+  </span>
+  <ul>
+    <li><input type="search" placeholder="Search..." /></li>
+    <li><a href="#one">0.2.3</a></li>
+    <li><a href="#two">1.0.2pre</a></li>
+    <li><a href="#three">1.0.0</a></li>
+  </ul>
+</span>
+
+<select class="dropdown">
+  <option value="">---</option>
+  <option value="value">Value 1</option>
+  <option value="thing">Value 2</option>
+</select>
 
 {% endblock content %}