Applied bootstrap

This commit is contained in:
Kai Hendry
2011-12-04 22:07:18 +08:00
parent e761bc5b2e
commit cd80e503b4
6 changed files with 42 additions and 27 deletions

View File

@@ -38,14 +38,16 @@ cat <<END
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Fetching tweets of $id</title> <title>Fetching tweets of $id</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style.css">
</head> </head>
<body> <body>
<div class="container">
<div class="content">
<h1>Greptweet is running a operation to fetch upto 3200 tweets from $id</h1> <h1 class="alert-message info">Fetching upto 3200 tweets from $id</h1>
<p>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> <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>
<pre> <pre>
END END
@@ -105,7 +107,9 @@ cd $oldpwd; ./users.sh > users.shtml
cat <<END cat <<END
</pre> </pre>
<h1>Visit <a href="http://$HTTP_HOST/u/$id">http://$HTTP_HOST/u/$id</a></h1> <h1 class="alert-message success">Now to grep fetched tweets, goto <a href="http://$HTTP_HOST/u/$id">http://$HTTP_HOST/u/$id</a></h1>
</div>
</div>
</body> </body>
</html> </html>
END END

View File

@@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Grepping twitter backup</title> <title>Grepping twitter backup</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style.css">
</head> </head>
<body> <body>
@@ -12,21 +12,26 @@
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<div class="page-header"> <ul class="breadcrumb">
<h1>Greptweet @<span id="name"></span></h1> <li><a href="/">Home</a> <span class="divider">/</span></li>
</div> <li id="name" class="active">You are here</li>
</ul>
<input type="text" name="q" class="xlarge" /> <input type="text" name="q" class="xlarge" />
<button class="btn primary">Greptweet</button>
<div id="results"></div> <div id="results"></div>
<p id="source"></p>
<p>Type a search query like <a href="?foo">foo</a></p> <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.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script async src="/main.js"></script> <script async src="/main.js"></script>
<footer><span id="source"></span></footer>
</div>
</div> </div>
</body> </body>

View File

@@ -1,15 +1,6 @@
function massage() {
humane.timeout = 5000;
humane("Please wait...");
humane("Still loading...");
}
function submitPressed() { function submitPressed() {
if (document.forms.f.checkValidity()) { if (document.forms.f.checkValidity()) {
b = document.getElementById("b"); $("#b").button('loading');
b.disabled = true;
massage();
document.forms.f.submit(); document.forms.f.submit();
} }
} }

View File

@@ -4,9 +4,9 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>GrepTweet</title> <title>GrepTweet</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link id='theme' rel='stylesheet' href='themes/bigbox.css'/>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script src="humane.min.js" async></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="bootstrap-buttons.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</head> </head>
@@ -16,7 +16,7 @@
<div class="content"> <div class="content">
<div class="page-header"> <div class="page-header">
<h1><a href="http://twitter.com/greptweet">@Greptweet</a> <small>Search your tweets</small></h1> <h1><a href="http://twitter.com/greptweet">@Greptweet</a> <small>Grep your tweets</small></h1>
</div> </div>
<div class="row"> <div class="row">
@@ -43,12 +43,12 @@
</ul> </ul>
<div class="well"> <div class="well">
<button class="btn large primary" id="b" onclick="submitPressed()">Fetch tweets</button> <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>
</div> </div>
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Greppable tweeters</h3> <h3>Greppable tweeters</h3>
@@ -59,7 +59,7 @@
<footer> <footer>
<p>Please follow <a href="https://twitter.com/greptweet">@greptweet</a> for <p>Please follow <a href="https://twitter.com/greptweet">@greptweet</a> for
updates and <a href="https://github.com/kaihendry/Greptweet">contribute to the updates and <a href="https://github.com/kaihendry/Greptweet">contribute to the
source on Github!</a></p> source on Github</a></p>
</footer> </footer>

View File

@@ -18,6 +18,7 @@ function grep(query) {
$(document).ready(function() { $(document).ready(function() {
NAME = window.location.pathname.split('/')[2]; NAME = window.location.pathname.split('/')[2];
$("#name").html(NAME);
$("input[type=text]").change(function() { $("input[type=text]").change(function() {
query = this.value; query = this.value;
@@ -34,7 +35,7 @@ $(document).ready(function() {
$("input[type=text]").focus(); $("input[type=text]").focus();
$("#source").html('<a href="' + NAME + '.txt">' + NAME + ' simple text backup file</a>'); $("#source").html('<a href="' + NAME + '.txt">' + NAME + ' simple text backup file</a>');
$("#name").html(NAME); document.title = "Greptweet " + NAME;
}); });

View File

@@ -3,3 +3,17 @@
html, body { html, body {
background-color: #eee; 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);
}