bootstrap

This commit is contained in:
Miguel Grinberg 2012-12-16 00:40:47 -08:00
parent f441f8d8d8
commit 56d1d46326
18 changed files with 201 additions and 101 deletions

File diff suppressed because one or more lines are too long

9
app/static/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

BIN
app/static/img/aol.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
app/static/img/flickr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
app/static/img/google.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
app/static/img/myopenid.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
app/static/img/yahoo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

6
app/static/js/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
{% if title %} {% if title %}
@ -5,26 +6,41 @@
{% else %} {% else %}
<title>microblog</title> <title>microblog</title>
{% endif %} {% endif %}
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<div>Microblog: <div class="container">
<a href="{{ url_for('index') }}">Home</a> <div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">microblog</a>
<ul class="nav">
<li><a href="{{ url_for('index') }}">Home</a></li>
{% if g.user.is_authenticated() %} {% if g.user.is_authenticated() %}
| <a href="{{ url_for('user', nickname = g.user.nickname) }}">Your Profile</a> <li><a href="{{ url_for('user', nickname = g.user.nickname) }}">Your Profile</a></li>
| <form style="display: inline;" action="{{url_for('search')}}" method="post" name="search">{{g.search_form.hidden_tag()}}{{g.search_form.search(size=20)}}<input type="submit" value="Search"></form> <li><a href="{{ url_for('logout') }}">Logout</a></li>
| <a href="{{ url_for('logout') }}">Logout</a> {% endif %}
</ul>
<div class="nav-collapse collapse">
{% if g.user.is_authenticated() %}
<form class="navbar-search pull-right" action="{{url_for('search')}}" method="post" name="search">{{g.search_form.hidden_tag()}}{{g.search_form.search(size=20,placeholder="Search",class="search-query")}}</form>
{% endif %} {% endif %}
</div> </div>
<hr> </div>
{% with messages = get_flashed_messages() %} </div>
{% if messages %} <div class="row">
<ul> <div class="span12">
{% for message in messages %}
<li>{{ message }} </li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div>
</div>
</div>
</body> </body>
</html> </html>

View File

@ -3,26 +3,34 @@
{% block content %} {% block content %}
<h1>Edit Your Profile</h1> <h1>Edit Your Profile</h1>
<form action="" method="post" name="edit"> {% include 'flash.html' %}
<div class="well">
<form class="form-horizontal" action="" method="post" name="edit">
{{form.hidden_tag()}} {{form.hidden_tag()}}
<table> <div class="control-group{% if form.errors.post %} error{% endif %}">
<tr> <label class="control-label" for="nickname">Your nickname:</label>
<td>Your nickname:</td> <div class="controls">
<td> {{ form.nickname(maxlength = 64, class = "span4") }}
{{form.nickname(size = 24)}}
{% for error in form.errors.nickname %} {% for error in form.errors.nickname %}
<br><span style="color: red;">[{{error}}]</span> <span class="help-inline">[{{error}}]</span><br>
{% endfor %} {% endfor %}
</td> </div>
</tr> </div>
<tr> <div class="control-group{% if form.errors.post %} error{% endif %}">
<td>About yourself:</td> <label class="control-label" for="about_me">About yourself:</label>
<td>{{form.about_me(cols = 32, rows = 4)}}</td> <div class="controls">
</tr> {{ form.about_me(cols = 64, rows = 4, class = "span4") }}
<tr> {% for error in form.errors.about_me %}
<td></td> <span class="help-inline">[{{error}}]</span><br>
<td><input type="submit" value="Save Changes"></td> {% endfor %}
</tr> </div>
</table> </div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" type="submit" value="Save Changes">
</div>
</div>
</form>
</div>
</form> </form>
{% endblock %} {% endblock %}

10
app/templates/flash.html Normal file
View File

@ -0,0 +1,10 @@
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}

View File

@ -3,28 +3,39 @@
{% block content %} {% block content %}
<h1>Hi, {{g.user.nickname}}!</h1> <h1>Hi, {{g.user.nickname}}!</h1>
<form action="" method="post" name="post"> {% include 'flash.html' %}
<div class="well">
<form class="form-horizontal" action="" method="post" name="post">
{{form.hidden_tag()}} {{form.hidden_tag()}}
<table> <div class="control-group{% if form.errors.post %} error{% endif %}">
<tr> <label class="control-label" for="post">Say something:</label>
<td>Say something:</td> <div class="controls">
<td>{{ form.post(size = 30, maxlength = 140) }}</td> {{ form.post(size = 30, maxlength = 140) }}
<td>
{% for error in form.errors.post %} {% for error in form.errors.post %}
<span style="color: red;">[{{error}}]</span><br> <span class="help-inline">[{{error}}]</span><br>
{% endfor %} {% endfor %}
</td> </div>
</tr> </div>
<tr> <div class="control-group">
<td></td> <div class="controls">
<td><input type="submit" value="Post!"></td> <input class="btn btn-primary" type="submit" value="Post!">
<td></td> </div>
</tr> </div>
</table>
</form> </form>
</div>
{% for post in posts.items %} {% for post in posts.items %}
{% include 'post.html' %} {% include 'post.html' %}
{% endfor %} {% endfor %}
{% if posts.has_prev %}<a href="{{ url_for('index', page = posts.prev_num) }}"><< Newer posts</a>{% else %}<< Newer posts{% endif %} | <ul class="pager">
{% if posts.has_next %}<a href="{{ url_for('index', page = posts.next_num) }}">Older posts >></a>{% else %}Older posts >>{% endif %} {% if posts.has_prev %}
<li class="previous"><a href="{{ url_for('index', page = posts.prev_num) }}">Newer posts</a></li>
{% else %}
<li class="previous disabled"><a href="#">Newer posts</a></li>
{% endif %}
{% if posts.has_next %}
<li class="next"><a href="{{ url_for('index', page = posts.next_num) }}">Older posts</a></li>
{% else %}
<li class="next disabled"><a href="#">Older posts</a></li>
{% endif %}
</ul>
{% endblock %} {% endblock %}

View File

@ -15,20 +15,38 @@ function set_openid(openid, pr)
form.elements['openid'].value = openid form.elements['openid'].value = openid
} }
</script> </script>
<h1>Sign In</h1> {% include 'flash.html' %}
<form action="" method="post" name="login"> <div class="well">
<h3>Please Sign In</h3>
<form class="form" action="" method="post" name="login">
{{form.hidden_tag()}} {{form.hidden_tag()}}
<p> <div class="help-block">Click on your OpenID provider below:</div>
Please enter your OpenID, or select one of the providers below:<br> <div class="control-group">
{{form.openid(size=80)}} {% for pr in providers %}
{% for error in form.errors.openid %} <a href="javascript:set_openid('{{pr.url}}', '{{pr.name}}');"><img src="/static/img/{{pr.name.lower()}}.png" class="img-polaroid" style="margin:2px;" /></a>
<span style="color: red;">[{{error}}]</span>
{% endfor %}<br>
|{% for pr in providers %}
<a href="javascript:set_openid('{{pr.url}}', '{{pr.name}}');">{{pr.name}}</a> |
{% endfor %} {% endfor %}
</p> </div>
<p>{{form.remember_me}} Remember Me</p> <div class="control-group{% if form.errors.openid %} error{% endif %}">
<p><input type="submit" value="Sign In"></p> <label class="control-label" for="openid">Or enter your OpenID here:</label>
<div class="controls">
{{ form.openid(size = 80, class = "span4") }}
{% for error in form.errors.openid %}
<span class="help-inline">[{{error}}]</span><br>
{% endfor %}
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox" for="remember_me">
{{ form.remember_me }} Remember Me
</label>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" type="submit" value="Sign In">
</div>
</div>
</form> </form>
</div>
{% endblock %} {% endblock %}

View File

@ -1,5 +1,9 @@
<table> <table class="table table-hover">
<tr valign="top"> <tr>
<td><img src="{{post.author.avatar(50)}}"></td><td><i>{{post.author.nickname}} says:</i><br>{{post.body}}</td> <td width="70px"><a href="{{url_for('user', nickname = post.author.nickname)}}"><img src="{{post.author.avatar(70)}}" /></a></td>
<td>
<p><a href="{{url_for('user', nickname = post.author.nickname)}}">{{post.author.nickname}}</a> said on {{post.timestamp}}:</p>
<p><strong>{{post.body}}</strong></p>
</td>
</tr> </tr>
</table> </table>

View File

@ -3,6 +3,7 @@
{% block content %} {% block content %}
<h1>Search results for "{{query}}":</h1> <h1>Search results for "{{query}}":</h1>
{% include 'flash.html' %}
{% for post in results %} {% for post in results %}
{% include 'post.html' %} {% include 'post.html' %}
{% endfor %} {% endfor %}

View File

@ -2,14 +2,15 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<table> {% include 'flash.html' %}
<tr valign="top"> <div class="well well-large" style="height: 140px;">
<td><img src="{{user.avatar(128)}}"></td> <div class="pull-right">
<td> <img src="{{user.avatar(128)}}" class="img-polaroid">
<h1>User: {{user.nickname}}</h1> </div>
<h1>{{user.nickname}}</h1>
{% if user.about_me %}<p>{{user.about_me}}</p>{% endif %} {% if user.about_me %}<p>{{user.about_me}}</p>{% endif %}
{% if user.last_seen %}<p><i>Last seen on: {{user.last_seen}}</i></p>{% endif %} {% if user.last_seen %}<p><em>Last seen on: {{user.last_seen}}</em></p>{% endif %}
<p>{{user.followers.count()}} followers | <p>Followers: {{user.followers.count()}} | Following: {{user.followed.count()}} |
{% if user.id == g.user.id %} {% if user.id == g.user.id %}
<a href="{{url_for('edit')}}">Edit your profile</a> <a href="{{url_for('edit')}}">Edit your profile</a>
{% elif not g.user.is_following(user) %} {% elif not g.user.is_following(user) %}
@ -18,13 +19,20 @@
<a href="{{url_for('unfollow', nickname = user.nickname)}}">Unfollow</a> <a href="{{url_for('unfollow', nickname = user.nickname)}}">Unfollow</a>
{% endif %} {% endif %}
</p> </p>
</td> </div>
</tr>
</table>
<hr>
{% for post in posts.items %} {% for post in posts.items %}
{% include 'post.html' %} {% include 'post.html' %}
{% endfor %} {% endfor %}
{% if posts.has_prev %}<a href="{{ url_for('user', nickname = user.nickname, page = posts.prev_num) }}"><< Newer posts</a>{% else %}<< Newer posts{% endif %} | <ul class="pager">
{% if posts.has_next %}<a href="{{ url_for('user', nickname = user.nickname, page = posts.next_num) }}">Older posts >></a>{% else %}Older posts >>{% endif %} {% if posts.has_prev %}
<li class="previous"><a href="{{ url_for('user', nickname = user.nickname, page = posts.prev_num) }}">Newer posts</a></li>
{% else %}
<li class="previous disabled"><a href="#">Newer posts</a></li>
{% endif %}
{% if posts.has_next %}
<li class="next"><a href="{{ url_for('user', nickname = user.nickname, page = posts.next_num) }}">Older posts</a></li>
{% else %}
<li class="next disabled"><a href="#">Older posts</a></li>
{% endif %}
</ul>
{% endblock %} {% endblock %}