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">
{% if g.user.is_authenticated() %} <div class="navbar-inner">
| <a href="{{ url_for('user', nickname = g.user.nickname) }}">Your Profile</a> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
| <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> <span class="icon-bar"></span>
| <a href="{{ url_for('logout') }}">Logout</a> <span class="icon-bar"></span>
{% endif %} <span class="icon-bar"></span>
</div> </a>
<hr> <a class="brand" href="/">microblog</a>
{% with messages = get_flashed_messages() %} <ul class="nav">
{% if messages %} <li><a href="{{ url_for('index') }}">Home</a></li>
<ul> {% if g.user.is_authenticated() %}
{% for message in messages %} <li><a href="{{ url_for('user', nickname = g.user.nickname) }}">Your Profile</a></li>
<li>{{ message }} </li> <li><a href="{{ url_for('logout') }}">Logout</a></li>
{% endfor %} {% endif %}
</ul> </ul>
{% endif %} <div class="nav-collapse collapse">
{% endwith %} {% if g.user.is_authenticated() %}
{% block content %}{% endblock %} <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 %}
</div>
</div>
</div>
<div class="row">
<div class="span12">
{% 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' %}
{{form.hidden_tag()}} <div class="well">
<table> <form class="form-horizontal" action="" method="post" name="edit">
<tr> {{form.hidden_tag()}}
<td>Your nickname:</td> <div class="control-group{% if form.errors.post %} error{% endif %}">
<td> <label class="control-label" for="nickname">Your nickname:</label>
{{form.nickname(size = 24)}} <div class="controls">
{{ form.nickname(maxlength = 64, class = "span4") }}
{% 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' %}
{{form.hidden_tag()}} <div class="well">
<table> <form class="form-horizontal" action="" method="post" name="post">
<tr> {{form.hidden_tag()}}
<td>Say something:</td> <div class="control-group{% if form.errors.post %} error{% endif %}">
<td>{{ form.post(size = 30, maxlength = 140) }}</td> <label class="control-label" for="post">Say something:</label>
<td> <div class="controls">
{% for error in form.errors.post %} {{ form.post(size = 30, maxlength = 140) }}
<span style="color: red;">[{{error}}]</span><br> {% for error in form.errors.post %}
{% endfor %} <span class="help-inline">[{{error}}]</span><br>
</td> {% endfor %}
</tr> </div>
<tr> </div>
<td></td> <div class="control-group">
<td><input type="submit" value="Post!"></td> <div class="controls">
<td></td> <input class="btn btn-primary" type="submit" value="Post!">
</tr> </div>
</table> </div>
</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">
{{form.hidden_tag()}} <h3>Please Sign In</h3>
<p> <form class="form" action="" method="post" name="login">
Please enter your OpenID, or select one of the providers below:<br> {{form.hidden_tag()}}
{{form.openid(size=80)}} <div class="help-block">Click on your OpenID provider below:</div>
{% for error in form.errors.openid %} <div class="control-group">
<span style="color: red;">[{{error}}]</span> {% for pr in providers %}
{% endfor %}<br> <a href="javascript:set_openid('{{pr.url}}', '{{pr.name}}');"><img src="/static/img/{{pr.name.lower()}}.png" class="img-polaroid" style="margin:2px;" /></a>
|{% for pr in providers %} {% endfor %}
<a href="javascript:set_openid('{{pr.url}}', '{{pr.name}}');">{{pr.name}}</a> | </div>
{% endfor %} <div class="control-group{% if form.errors.openid %} error{% endif %}">
</p> <label class="control-label" for="openid">Or enter your OpenID here:</label>
<p>{{form.remember_me}} Remember Me</p> <div class="controls">
<p><input type="submit" value="Sign In"></p> {{ form.openid(size = 80, class = "span4") }}
</form> {% 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>
</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,29 +2,37 @@
{% 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>
{% if user.about_me %}<p>{{user.about_me}}</p>{% endif %} <h1>{{user.nickname}}</h1>
{% if user.last_seen %}<p><i>Last seen on: {{user.last_seen}}</i></p>{% endif %} {% if user.about_me %}<p>{{user.about_me}}</p>{% endif %}
<p>{{user.followers.count()}} followers | {% if user.last_seen %}<p><em>Last seen on: {{user.last_seen}}</em></p>{% endif %}
{% if user.id == g.user.id %} <p>Followers: {{user.followers.count()}} | Following: {{user.followed.count()}} |
<a href="{{url_for('edit')}}">Edit your profile</a> {% if user.id == g.user.id %}
{% elif not g.user.is_following(user) %} <a href="{{url_for('edit')}}">Edit your profile</a>
<a href="{{url_for('follow', nickname = user.nickname)}}">Follow</a> {% elif not g.user.is_following(user) %}
{% else %} <a href="{{url_for('follow', nickname = user.nickname)}}">Follow</a>
<a href="{{url_for('unfollow', nickname = user.nickname)}}">Unfollow</a> {% else %}
{% endif %} <a href="{{url_for('unfollow', nickname = user.nickname)}}">Unfollow</a>
</p> {% endif %}
</td> </p>
</tr> </div>
</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 %}