Added bootstrap styling to pages and forms.

codylovell · Nov 12, 2017 · 9e7d161 · 9e7d161
1 parent 6269002
commit 9e7d161
Show file tree

Hide file tree

Showing 13 changed files with 179 additions and 64 deletions.
diff --git a/learning_log/settings.py b/learning_log/settings.py
@@ -38,6 +38,9 @@
     'django.contrib.messages',
     'django.contrib.staticfiles',
 
+    #Third-party apps.
+    'bootstrap3',
+
     #myapps
     'learning_logs',
     'users',
@@ -124,3 +127,8 @@
 STATIC_URL = '/static/'
 
 LOGIN_URL = 'users/login/'
+
+#settings for bootstrap3
+BOOTSTRAP3 = {
+    'include_jquery': True
+}
diff --git a/learning_logs/templates/learning_logs/base.html b/learning_logs/templates/learning_logs/base.html
@@ -1,17 +1,62 @@
-<h1>
-    <a href="{% url 'learning_logs:index' %}">Learning Log</a> -
-    <a href="{% url 'learning_logs:topics' %}">Topics</a>
-</h1>
-    <p>
-        {% if user.is_authenticated %}
-        Hello, {{ user.username }}
-        <a href="{% url 'users:logout' %}">log out</a>
-        {% else %}
-        <a href="{% url 'users:register' %}">register</a>
-        <a href="{% url 'users:login' %}">log in</a>
-        {% endif %}
-    </p>
-
-
-
-{% block content %}{% endblock content %}
+{% load bootstrap3 %}
+
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta charset='utf-8'>
+        <meta http-equiv='X-UA-Compatible' contents='IE=edge'>
+        <meta name='viewport' content='width=device-width, initial-scale=1'>
+
+        <title>Learning Log</title>
+        {% bootstrap_css %}
+            {% bootstrap_javascript %}
+    </head>
+
+    <body>
+
+    <!-- Static navbar -->
+
+        <nav class="navbar navbar-default navbar-static-top">
+            <div class="container">
+
+              <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed
+                    data-toggle="collapse" data-target="#navbar"
+                    aria-expanded="false" aria-controls="navbar">
+                </button>
+                <a class="navbar-brand" href="{% url 'learning_logs:index' %}">
+                    Learning Log</a>
+            </div>
+
+            <div id="navbar" class="navbar-collapse collapse">
+                <ul class="nav navbar-nav">
+                    <li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>
+                </ul>
+
+                <ul class="nav navbar-nav navbar-right">
+                    {% if user.is_authenticated %}
+                        <li><a>Hello, {{ user.username }}</a></li>
+                        <li><a href="{% url 'users:logout' %}">logout</a></li>
+                    {% else %}
+                        <li><a href="{% url 'users:register' %}">register</a></li>
+                        <li><a href="{% url 'users:login' %}">login</a></li>
+                    {% endif %}
+                </ul>
+            </div><!--/.nav-collapse -->
+
+            </div>
+                </nav>
+
+                <div class="container">
+
+                    <div class="page-header">
+                        {% block header %}{% endblock header %}
+                    </div>
+                    <div>
+                        {% block content %}{% endblock content %}
+                    </div>
+
+                </div> <!-- /container -->
+
+        </body>
+    </html>
diff --git a/learning_logs/templates/learning_logs/edit_entry.html b/learning_logs/templates/learning_logs/edit_entry.html
@@ -1,14 +1,18 @@
 {% extends 'learning_logs/base.html' %}
+{% load bootstrap3 %}
 
-{% block content %}
-    <p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p>
+{% block header %}
+    <h2>Edit entry: <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h2>
+{% endblock header %}
 
-    <p>Edit entry:</p>
+{% block content %}
 
-    <form action="{% url 'learning_logs:edit_entry' entry.id %}" method="post">
+    <form action="{% url 'learning_logs:edit_entry' entry.id %}" method="post" class="form">
         {% csrf_token %}
-        {{ form.as_p }}
-        <button type="submit">save changes</button>
+        {% bootstrap_form form %}
+        {% buttons %}
+        <button name="submit" class="btn btn-primary">save changes</button>
+        {% endbuttons %}
     </form>
 
 {% endblock content %}
diff --git a/learning_logs/templates/learning_logs/index.html b/learning_logs/templates/learning_logs/index.html
@@ -1,6 +1,18 @@
 {% extends "learning_logs/base.html" %}
 
+{% block header %}
+    <div class="jumbotron">
+        <h1>Track your learning.</h1>
+    </div>
+{% endblock header %}
+
 {% block content %}
-    <p>Learning Log helps you keep track of your learning,
-    for any topic you are learning about.</p>
+    <h2>
+        <a href="{% url 'users:register' %}">Register an account</a> to make your own
+        Learning Log, and list the topics you're learning about.
+    </h2>
+    <h2>
+        Whenever you are learning something new about a topic, make an entry
+        summarizing what you've learned about. This helps retention.
+    </h2>
 {% endblock content %}
diff --git a/learning_logs/templates/learning_logs/new_entry.html b/learning_logs/templates/learning_logs/new_entry.html
@@ -1,15 +1,21 @@
 {% extends 'learning_logs/base.html' %}
+{% load bootstrap3 %}
 
-{% block content %}
+{% block header %}
+    <h1>{{ topic }}</h1>
+{% endblock header %}
 
-    <p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p>
+{% block content %}
 
-        <p>Add a new entry:</p>
+        <h2>Add a new entry:</h2>
 
-    <form action="{% url 'learning_logs:new_entry' topic.id %}" method="post">
+    <form action="{% url 'learning_logs:new_entry' topic.id %}" method="post" class="form">
         {% csrf_token %}
-        {{ form.as_p }}
-        <button type="submit">add entry</button>
+        {% bootstrap_form form %}
+
+        {% buttons %}
+            <button name="submit" class="btn btn-primary">add entry</button>
+        {% endbuttons %}
     </form>
 
 {% endblock content %}
diff --git a/learning_logs/templates/learning_logs/new_topic.html b/learning_logs/templates/learning_logs/new_topic.html
@@ -1,11 +1,22 @@
 {% extends 'learning_logs/base.html' %}
+{% load bootstrap3 %}
+
+{% block header %}
+    <h2>Add a new topic:</h2>
+{% endblock header %}
 
 {% block content %}
-    <p>Add a new topic: </p>
-<form action="{% url 'learning_logs:new_topic' %}" method="post">
+
+<form action="{% url 'learning_logs:new_topic' %}" method="post"
+    class="form">
     {% csrf_token %}
-    {{ form.as_p }}
-    <button name="submit">add topic</button>
+
+
+    {% bootstrap_form form %}
+
+    {% buttons %}
+        <button name="submit" class="btn btn-primary">add topic</button>
+    {% endbuttons %}
 </form>
 
 {% endblock content %}
diff --git a/learning_logs/templates/learning_logs/topic.html b/learning_logs/templates/learning_logs/topic.html
@@ -1,26 +1,30 @@
 {% extends 'learning_logs/base.html' %}
+{% block header %}
+    <h2>{{ topic }}</h2>
+{% endblock header %}
 
 {% block content %}
-
-    <p>Topic: {{ topic }} </p>
-
-    <p>Entries:</p>
     <p>
         <a href="{% url 'learning_logs:new_entry' topic.id %}">Add entry</a>
     </p>
     <ul>
         {% for entry in entries %}
-            <li>
-                <p>{{ entry.date_added|date:'M d, Y H:i' }}</p>
-                <p>{{ entry.text|linebreaks }}</p>
-                <p>
-                    <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
-                </p>
-            </li>
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3>
+                        {{ entry.date_added|date:'M d, Y H:i' }}
+                        <small>
+                            <a href="{% url 'learning_logs:edit_entry' entry.id %}">
+                            edit entry</a>
+                        </small>
+                    </h3>
+                </div>
+                <div class="panel-body">
+                    {{ entry.text|linebreaks }}
+                </div>
+            </div> <!-- panel -->
         {% empty %}
-            <li>
                 There are no entries for this topic.
-            </li>
         {% endfor %}
     </ul>
 {% endblock content %}
diff --git a/learning_logs/templates/learning_logs/topics.html b/learning_logs/templates/learning_logs/topics.html
@@ -1,17 +1,23 @@
 {% extends 'learning_logs/base.html' %}
 
-{% block content %}
+{% block header %}
+    <h1>Topics</h1>
+{% endblock header %}
 
-<h2>Topics</h2>
+{% block content %}
 
     <ul>
         {% for topic in topics %}
-            <li><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></li>
+        <li>
+            <h3>
+            <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a>
+            </h3>
+
         {% empty %}
             <li>No topics have been added yet.</li>
         {% endfor %}
     </ul>
 
-<a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a>
+<h3><a href="{% url 'learning_logs:new_topic' %}">Add new topic</a></h3>
 
 {% endblock content %}
diff --git a/learning_logs/views.py b/learning_logs/views.py
@@ -23,7 +23,7 @@ def topics(request):
 def topic(request, topic_id):
     """Show a single topic and all of its entries"""
     topic = Topic.objects.get(id=topic_id)
-    check_topic_owner(request)
+    check_topic_owner(request, topic_id)
     entries = topic.entry_set.order_by('-date_added')
     context = {'topic': topic, 'entries': entries}
     return render(request, 'learning_logs/topic.html', context)
@@ -50,6 +50,7 @@ def new_topic(request):
 def new_entry(request, topic_id):
     """Add a new entry for a particular topic."""
     topic = Topic.objects.get(id=topic_id)
+    check_topic_owner(request, topic_id)
 
     if request.method != 'POST':
         # No data submitted; create a blank form
@@ -58,7 +59,7 @@ def new_entry(request, topic_id):
         #POST data submitted; process data.
         form = EntryForm(data=request.POST)
         if form.is_valid():
-            check_topic_owner(request)
+            check_topic_owner(request, topic_id)
             new_entry = form.save(commit=False)
             new_entry.topic = topic
             new_entry.save()
@@ -73,7 +74,8 @@ def edit_entry(request, entry_id):
     """Edit an existing entry"""
     entry = Entry.objects.get(id=entry_id)
     topic = entry.topic
-    check_topic_owner(request)
+    if topic.owner != request.user:
+        raise Http404
 
     if request.method != 'POST':
         form = EntryForm(instance=entry)
@@ -87,6 +89,7 @@ def edit_entry(request, entry_id):
     context = {'entry': entry, 'topic': topic, 'form': form}
     return render(request, 'learning_logs/edit_entry.html', context)
 
-def check_topic_owner(request):
+def check_topic_owner(request, topic_id):
+    topic = Topic.objects.get(id=topic_id)
     if topic.owner != request.user:
         raise Http404
diff --git a/ll_venv/pip-selfcheck.json b/ll_venv/pip-selfcheck.json
@@ -1 +1 @@
-{"last_check":"2017-11-04T09:42:36Z","pypi_version":"9.0.1"}
+{"last_check":"2017-11-11T10:30:54Z","pypi_version":"9.0.1"}
diff --git a/users/templates/users/login.html b/users/templates/users/login.html
@@ -1,15 +1,24 @@
 {% extends "learning_logs/base.html" %}
+{% load bootstrap3 %}
+
+{% block header %}
+    <h2>Log in to your account.</h2>
+{% endblock header %}
 
 {% block content %}
 
     {% if form.errors %}
         <p>Your username and password didnt match.Please try again</p>
     {% endif %}
 
-    <form method="post" action="{% url 'users:login' %}">
+    <form method="post" action="{% url 'users:login' %}" class="form">
         {% csrf_token %}
-        {{ form.as_p }}
-        <button type="submit">log in</button>
+
+        {% bootstrap_form form %}
+
+        {% buttons %}
+            <button name="submit" class="btn btn-primary">log in</button>
+        {% endbuttons %}
 
         <input type="hidden" name="next" value="{% url 'learning_logs:index' %}"/>
     </form>

diff --git a/users/templates/users/register.html b/users/templates/users/register.html
@@ -1,12 +1,19 @@
 {% extends "learning_logs/base.html" %}
+{% load bootstrap3 %}
+
+{% block header %}
+    <h2>Register for an account.</h2>
+{% endblock header %}
 
 {% block content %}
 
-    <form method="post" action="{% url 'users:register' %}">
+    <form method="post" action="{% url 'users:register' %}" class="form">
         {% csrf_token %}
-        {{ form.as_p }}
+        {% bootstrap_form form %}
 
-        <button type="submit">register</button>
+        {% buttons %}
+        <button name="submit" class="btn btn-primary">register</button>
+        {% endbuttons %}
             <input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
     </form>
 {% endblock content %}
diff --git a/users/views.py b/users/views.py
@@ -23,5 +23,5 @@ def register(request):
             login(request, authenticated_user)
             return HttpResponseRedirect(reverse('learning_logs:index'))
 
-        context = {'form': form}
+    context = {'form': form}
     return render(request, 'users/register.html', context)
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"last_check":"2017-11-04T09:42:36Z","pypi_version":"9.0.1"}
		{"last_check":"2017-11-11T10:30:54Z","pypi_version":"9.0.1"}