New layout

(imported from commit d44db3acf1d4c6a7b42a54aff9720bb86d01a754)

templates/zephyr/base.html

@@ -6,6 +6,7 @@
     <title>Zephyr</title>
     <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link href="/static/styles/zephyr.css" rel="stylesheet">
+    <link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
     {# We need to import jQuery before Bootstrap #}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script src="/static/bootstrap/js/bootstrap.min.js"></script>
@@ -15,12 +16,24 @@
 
 <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
-        <div class="container">
-            <a class="brand" href="#">Humbug</a>
-            <ul class="nav">
+        <div class="container-fluid">
+            <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="/">Humbug</a>
+            <div class="nav-collapse collapse">
+                <ul class="nav">
 {% block nav %}
 {% endblock %}
-            </ul>
+                </ul>
+{% if user.is_authenticated %}
+                <p class="navbar-text pull-right">
+                    Logged in as {{ user_profile.user.username }}
+                </p>
+{% endif %}
+            </div>
         </div>
     </div>
 </div>

templates/zephyr/index.html

@@ -5,7 +5,6 @@
 {% endblock %}
 
 {% block content %}
-<h1>Hello {{ user_profile.user.username }}!</h1>
 
 <script type="text/javascript">
 $.ajaxSetup({
@@ -158,24 +157,45 @@ function get_updates() {
 }
 </script>
 
-<form action="/zephyr/" method="post">
+<form action="/zephyr/" method="post" class="zephyr">
 {% csrf_token %}
-Class: <input type="text" name="class" id="class" value="" />
-Instance: <input type="text" name="instance" id="instance" value="" /><br />
-Content: <textarea rows="4" cols="60" name="new_zephyr" id="new_zephyr" value="" /></textarea>
-<input type="submit" name="zephyr" value="Zephyr" />
+<div class="row-fluid">
+<div class="span6">
+    <label>Class</label>
+    <input type="text" name="class" id="class" value="" />
+</div>
+<div class="span6">
+    <label>Instance</label>
+    <input type="text" name="instance" id="instance" value="" />
+</div>
+</div>
+<div class="row-fluid">
+<div class="span12">
+<label>Content</label> <textarea rows="4" cols="60" name="new_zephyr" id="new_zephyr" value="" /></textarea>
+<input type="submit" value="Zephyr" />
+</div>
+</div>
 </form>
 
-<form action="/personal-zephyr/" method="post">
+<form action="/personal-zephyr/" method="post" class="zephyr">
 {% csrf_token %}
-User: <input type="text" name="recipient" id="recipient" value="" /><br />
-Content: <textarea rows="4" cols="60" name="new_personal_zephyr" id="new_personal_zephyr" value="" /></textarea>
+<div class="row-fluid">
+<div class="span6">
+    <label>User</label>
+    <input type="text" name="recipient" id="recipient" value="" />
+</div>
+<div class="row-fluid">
+<div class="span12">
+    <label>Content</label>
+    <textarea rows="4" cols="60" name="new_personal_zephyr" id="new_personal_zephyr" value="" /></textarea>
 <input type="submit" name="personal_zephyr" value="Send Personal" />
+</div>
+</div>
 </form>
 
 <span id="unhide" style="background-color: aqua;" onclick="unhide()">Unhide</span>
 
-<div id="main_div" style="height: 400px; overflow-y: scroll;">
+<div id="main_div">
 <table id="table">
 {% for zephyr in zephyrs %}
 <tr id={{ zephyr.id }}>

templates/zephyr/login.html

@@ -2,22 +2,20 @@
 
 {% block content %}
 
+<h1>Log in</h1>
+
 {% if form.errors %}
 <p>Your username and password didn't match. Please try again.</p>
 {% endif %}
 
 <form method="post" action="{% url django.contrib.auth.views.login %}?next={{ request.get_full_path }}">
 {% csrf_token %}
-<table>
-<tr>
-    <td>{{ form.username.label_tag }}</td>
-    <td>{{ form.username }}</td>
-</tr>
-<tr>
-    <td>{{ form.password.label_tag }}</td>
-    <td>{{ form.password }}</td>
-</tr>
-</table>
+
+{{ form.username.label_tag }}
+{{ form.username }}
+
+{{ form.password.label_tag }}
+{{ form.password }}
 
 <input type="submit" value="Log in" />
 <input type="hidden" name="next" value="{{ next }}" />

templates/zephyr/register.html

@@ -2,19 +2,18 @@
 
 {% block content %}
 
-<form method="post" action="{% url register %}">{% csrf_token %}
-<table>
-<tr>
-    <td>{{ form.username.label_tag }}</td>
-    <td>{{ form.username }}</td>
-</tr>
-<tr>
-    <td>{{ form.password.label_tag }}</td>
-    <td>{{ form.password }}</td>
-</tr>
-</table>
+<h1>Register for an account</h1>
 
-<input type="submit" value="Register" />
+<form method="post" action="{% url register %}">
+{% csrf_token %}
+
+{{ form.username.label_tag }}
+{{ form.username }}
+
+{{ form.password.label_tag }}
+{{ form.password }}
+
+<input type="submit" value="Register" /><br />
 <input type="hidden" name="next" value="{{ next }}" />
 </form>
 

zephyr/static/styles/zephyr.css

@@ -3,9 +3,20 @@ body {
     padding-top: 50px;
 }
 
-/* From bootstrap-responsive.css */
-.navbar .brand {
-    padding-right: 10px;
-    padding-left:  10px;
-    margin: 0 0 0 -5px;
+.top-content {
+    padding-left: 10px;
+    padding-right: 20px;
+}
+
+#main_div {
+    height: 400px;
+    overflow-y: scroll;
+}
+
+form.zephyr input {
+    width: 100%;
+}
+
+form.zephyr textarea {
+    width: 100%;
 }