styling download csv button

This commit is contained in:
maxogden 2011-03-10 00:18:12 -08:00
parent b3dbaa0ec3
commit 3270789e01
4 changed files with 24 additions and 34 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -11,13 +11,17 @@
<script type="text/javascript">
$(function() {
var baseURL = "_rewrite/",
vhost = false;
if ( document.location.pathname.indexOf( "_design" ) == -1 ) {
var path = document.location.pathname;
if ( path.indexOf( "_design" ) == -1 ) {
// in a vhost
vhost = true;
baseURL = "";
} else if ( path.substr(path.length - 1, path.length) == "/" ) {
baseURL = "";
}
/** uses $.mustache to render a template out to a target DOM
@ -53,7 +57,10 @@
$( '.csv' ).live('click', ( function( e ) {
$(this).html("<span class='loading icon'></span>Generating CSV...");
function gotHeaders( headers ) {
$('.csv').html("<span class='downarrow icon'></span>Download CSV");
window.location.href = baseURL + 'csv?headers=' + headers;
}
@ -75,16 +82,11 @@
<div id="main">
<section class="odd">
<div id="stats"></div>
<article class="example">
<h3>Actions</h3>
<div id="actions"></div>
<p>
<div id="stats"></div>
</p>
</article>
<h3>Uploading</h3>
<p>You can bulk upload an array of JSON documents to a Couch via HTTP POST. Make sure that they are formatted one document per line:</p>
@ -114,13 +116,13 @@
<tbody>
<tr class="database_oneline action">
<td class="date">
<nobr>db:</nobr>
<nobr>db</nobr>
</td>
<td class="message">
<code><a href="http://{{host}}/{{db_name}}">http://{{host}}/<strong>{{db_name}}</strong></a> </code>
</td>
<td class="database">
size&nbsp;<a href="#" hotkey="c">{{disk_size}}</a>
size&nbsp;{{disk_size}}
</td>
<td class="tree">
docs&nbsp;<a href="http://{{host}}/{{db_name}}/_all_docs?include_docs=true" hotkey="t">{{doc_count}}</a>
@ -133,7 +135,7 @@
</script>
<script type='text/mustache' id="actionsTemplate">
<a href="javascript:void(false)" class="primary button csv"><span class="downarrow icon"></span>Download DB as CSV</a>
<a href="javascript:void(false)" class="primary button csv"><span class="downarrow icon"></span>Download CSV</a>
</script>
<script type='text/mustache' id="bulkTemplate"> http://{{host}}/{{db_name}}/_bulk_docs</script>

View File

@ -28,37 +28,25 @@
#database h2{margin:0;}
#database .group{border-top:1px solid #bedce7;}
#database .separator{padding-top:1em;}
#database .envelope{border-bottom:1px solid #bedce7;border-left:1px solid #bedce7;border-right:1px solid #bedce7;padding:0 .7em .7em .7em;background:#eaf2f5 url(/images/modules/database/bg_gradient.gif) 0 100% repeat-x;overflow:hidden;}
#database .envelope{border-bottom:1px solid #bedce7;border-left:1px solid #bedce7;border-right:1px solid #bedce7;padding:0 .7em .7em .7em;background:#eaf2f5 url(../images/bg_gradient.gif) 0 100% repeat-x;overflow:hidden;}
#database .envelope.selected{background:#fffeeb!important;}
#database .envelope.selected .machine span{border-bottom:1px dotted #4183c4;}
#database.single_database .envelope .machine span{border-bottom:1px dotted #4183c4;}
#database .human{padding-top:.7em;float:left;width:50em;}
#database .human .refs{font-size:150%;}
#database .human .message{font-size:80%;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;}
#database .human .message pre{white-space:pre-wrap;word-wrap:break-word;width:48em;}
#database .human .message a{color:#000;}
#database .human .message a.vis{color:#4183c4;}
#database .human .actor{clear:left;margin-top:.75em;}
#database .human .actor .gravatar{border:1px solid #d0d0d0;padding:2px;background-color:white;float:left;line-height:0;margin-right:.7em;}
#database .human .actor .name{line-height:1.5em;}
#database .human .actor .name a{color:#000;}
#database .human .actor .name span{color:#888;font-size:90%;}
#database .human .actor .date{color:#888;font-size:90%;line-height:1em;}
#database .machine{float:right;width:18em;padding:.8em 0 .8em 1.2em;border-left:1px solid #bedce7;color:#808080;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;font-size:.85em;line-height:1.5em;}
#database .dbInfo {background:#fff url(/images/modules/database/bg_gradient.gif) 0 100% repeat-x;}
#database .action {background:#eaf2f5 url(/images/modules/database/bg_gradient.gif) 0 100% repeat-x;}
#database .dbInfo {background:#fff url(../images/bg_gradient.gif) 0 100% repeat-x;}
#database .action {background:#eaf2f5 url(../images/bg_gradient.gif) 0 100% repeat-x;}
#database .database_oneline td{border-bottom:1px solid #bedce7;}
#database .database_oneline .date{color:#888;width:1%;padding:0 1em 0 .5em;border-left:1px solid #bedce7;}
#database .database_oneline .author{width:15%;}
#database .database_oneline .gravatar{width:1%;}
#database .database_oneline .gravatar img{border:1px solid #d0d0d0;padding:1px;background-color:white;float:left;margin-right:.4em;}
#database .database_oneline .author a{font-weight:bold;color:black;}
#database .database_oneline .message{font-size:75%;}
#database .database_oneline .message a{color:black;}
#database .database_oneline .database,#database .database_oneline .tree{width:1%;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;font-size:90%;color:#808080;border-left:1px solid #bedce7;padding:.6em .5em;}
#database .database_oneline .tree{border-right:1px solid #bedce7;}
a{color:#4183c4;text-decoration:none;}
a{color:#4183c4;}
a {text-decoration: none;}
a:hover{text-decoration:underline;}
.usingMouse a{outline:none;}
a.button span.icon.loading { background-image: url(../images/loader.gif); }
a.button:hover span.icon.loading { background-image: url(../images/loader-blue.gif); }