Upgrade to bootstrap 2.0

This commit is contained in:
Kai Hendry
2012-02-01 17:50:04 +08:00
parent 165d17efaa
commit 364cd7d23e
9 changed files with 32 additions and 108 deletions

3
.gitmodules vendored Normal file
View File

@@ -0,0 +1,3 @@
[submodule "bootstrap"]
path = bootstrap
url = https://github.com/twitter/bootstrap.git

View File

@@ -34,3 +34,8 @@ I did file <https://dev.twitter.com/discussions/3414>, which later seemed to be
## Shell script feedback on the Web works by disabling Apache's mod_deflate !
<http://stackoverflow.com/a/9022823/4534>
# TODO
Make fetch-tweets.sh return nicer output like a % for <http://twitter.github.com/bootstrap/components.html#progress>

1
bootstrap Submodule

Submodule bootstrap added at 7f32d15fbb

62
bootstrap-buttons.js vendored
View File

@@ -1,62 +0,0 @@
/* ============================================================
* bootstrap-buttons.js v1.4.0
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function( $ ){
"use strict"
function setState(el, state) {
var d = 'disabled'
, $el = $(el)
, data = $el.data()
state = state + 'Text'
data.resetText || $el.data('resetText', $el.html())
$el.html( data[state] || $.fn.button.defaults[state] )
state == 'loadingText' ?
$el.addClass(d).attr(d, d) :
$el.removeClass(d).removeAttr(d)
}
function toggle(el) {
$(el).toggleClass('active')
}
$.fn.button = function(options) {
return this.each(function () {
if (options == 'toggle') {
return toggle(this)
}
options && setState(this, options)
})
}
$.fn.button.defaults = {
loadingText: 'loading...'
}
$(function () {
$('body').delegate('.btn[data-toggle]', 'click', function () {
$(this).button('toggle')
})
})
}( window.jQuery || window.ender );

View File

@@ -38,14 +38,14 @@ cat <<END
<head>
<meta charset="utf-8" />
<title>Fetching tweets of $id</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" href="/bootstrap/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div class="container">
<div class="content">
<h1 class="alert-message info">Fetching upto 3200 tweets from $id</h1>
<h1 class="alert alert-info">Fetching upto 3200 tweets from $id</h1>
<p class="help-inline">Please be patient. Closing this page prematurely you can limit the tweets <a href="https://github.com/kaihendry/Greptweet/blob/master/fetch-tweets.sh">fetch-tweets.sh</a> gets and trigger a locking bug.</p>
@@ -93,12 +93,12 @@ then
cd $oldpwd; ./users.sh > users.shtml
cat <<END
<a href="http://$HTTP_HOST/u/$id"><h1 class="alert-message success">Goto http://$HTTP_HOST/u/$id to grep!</h1></a>
<a href="http://$HTTP_HOST/u/$id"><h1 class="alert alert-success">Goto http://$HTTP_HOST/u/$id to grep!</h1></a>
END
else
rm -rf $oldpwd/u/$id
echo '<h1 class="alert-message error">Sorry the Twitter API is failing. Try again later.</h1>'
echo '<h1 class="alert alert-error">Sorry the Twitter API is failing. Try again later.</h1>'
fi
cat <<END

View File

@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>Grepping twitter backup</title>
<meta content="width=device-width, initial-scale=1,maximum-scale=1.0;" name=viewport>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" href="/bootstrap/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
@@ -18,15 +18,16 @@
<li id="name" class="active">You are here</li>
</ul>
<input type="search" name="q" class="xlarge" />
<button class="btn primary">Greptweet</button>
<div class="well">
<input type="search" class="input-medium search-query">
<button type="submit" class="btn btn-large btn-primary"><i class="icon-search"></i> Greptweet</button>
</div>
<div id="results"></div>
<p class="help-inline">Type a search query like <a href="?foo">foo</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script async src="/main.js"></script>

View File

@@ -4,10 +4,10 @@
<meta charset="utf-8" />
<title>GrepTweet</title>
<meta content="width=device-width, initial-scale=1,maximum-scale=1.0;" name=viewport>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" href="/bootstrap/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="bootstrap-buttons.js"></script>
<script src="/bootstrap/js/bootstrap-button.js"></script>
<script src="index.js"></script>
</head>
@@ -20,8 +20,9 @@
<h1><a href="http://twitter.com/greptweet">@Greptweet</a> <small>you can search your tweets</small></h1>
</div>
<form name="f" action="create.cgi" method="get" class="form-stacked">
<form name="f" action="create.cgi" method="get">
<div class="well">
<div class="clearfix">
<label for="username">Twitter username</label>
@@ -31,25 +32,17 @@
</div>
<div class="clearfix">
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" name="o" />
<span>Fetch older tweets, instead of newer tweets when updating</span>
<label class="checkbox">
<input type="checkbox" name="o">Fetch older tweets, instead of newer tweets when updating
</label>
</li>
</ul>
</div>
<div class="well">
<button class="btn large primary" id="b" data-loading-text="Fetching tweets..." onclick="submitPressed()">Fetch tweets</button>
<span class="help-inline">First fetch tweets to search "grep" them</span>
<button class="btn btn-large btn-primary" id="b" data-loading-text="Fetching tweets..." onclick="submitPressed()">Fetch tweets</button>
</div>
</form>
<p><span class="label success">New</span> Try <a href="http://grepbook.co.uk/">Grepbook</a> for grepping Facebook.</p>
<p><span class="label label-success">New</span> Try <a href="http://grepbook.co.uk/">Grepbook</a> for grepping Facebook.</p>
<h3>Greppable tweeters</h3>

View File

@@ -22,20 +22,21 @@ $(document).ready(function() {
$("input[type=search]").change(function() {
query = this.value;
console.log(query);
window.location.search = query;
grep(query);
});
if (window.location.search) {
searchquery = window.decodeURIComponent(window.location.search.substr(1));
$("input[type=text]").val(searchquery);
$("input[type=search]").val(searchquery);
grep(searchquery);
}
$("input[type=text]").focus();
footer = '<div class="row"><div class="span4"><a href="' + NAME + '.txt">' + NAME + ' text backup file</a></div>';
footer += '<div class="span4"><a href="' + "/create.cgi?id=" + NAME +'">Fetch ' + NAME + ' tweets</a></div></div>';
footer = '<p><a href="' + NAME + '.txt" class="btn primary"><i class="icon-download"></i> Download</a>';
footer += '<a href="' + "/create.cgi?id=" + NAME +'" class="btn"><i class="icon-refresh"></i> Update</a></p>'
$("#source").html(footer);
document.title = "Greptweet " + NAME;

View File

@@ -1,19 +1 @@
#users li { display: inline; }
html, body {
background-color: #eee;
}
/* The white background content wrapper */
.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}