20 of pcc

StepaniaH · Aug 11, 2024 · 44c0590 · 44c0590
1 parent a282ff5
commit 44c0590
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 51 deletions.
diff --git a/181920-Project03-Web-Applications/accounts/templates/registration/login.html b/181920-Project03-Web-Applications/accounts/templates/registration/login.html
@@ -1,14 +1,15 @@
 {% extends "learning_logs/base.html" %}
+{% load django_bootstrap5 %}
 
-{% block content %}
-  {% if form.errors %}
-    <p>Your username and password didn't match. Please try again.</p>
-  {% endif %}
+{% block page_header %}
+  <h2>Log in to your account.</h2>
+{% endblock page_header %}
 
+{% block content %}
   <form action="{% url 'accounts:login' %}" method="post">
     {% csrf_token %}
-    {{ form.as_div }}
-
-    <button name="submit">Log in</button>
+    {% bootstrap_form form %}
+    {% bootstrap_button button_type="submit" content="Log in" %}
   </form>
+
 {% endblock content %}
diff --git a/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/base.html b/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/base.html
@@ -1,20 +1,84 @@
-<p>
-  <a href="{% url 'learning_logs:index' %}">Learning Log</a> -
-  <a href="{% url 'learning_logs:topics' %}">Topics</a> -
-  {% if user.is_authenticated %}
-    Hello, {{ user.username }}!
-  {% else %}
-    <a href="{% url 'accounts:register' %}">Register</a> -
-    <a href="{% url 'accounts:login' %}">Log in</a>
-  {% endif %}
-</p>
-
-{% block content %}{% endblock content %}
-
-{% if user.is_authenticated %}
-  <hr />
-  <form action="{% url 'accounts:logout' %}" method="post">
-    {% csrf_token %}
-    <button name="submit">Log out</button>
-  </form>
-{% endif %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Learning Log</title>
+
+  {% load django_bootstrap5 %}
+  {% bootstrap_css %}
+  {% bootstrap_javascript %}
+
+</head>
+<body>
+
+  <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="{% url 'learning_logs:index' %}">
+        Learning Log
+      </a>
+
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
+              data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+              aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarConllapse">
+        <ul class="navbar-nav me-auto mb-2 mb-md-0">
+          <li class="nav-item">
+            <a class="nav-link" href="{% url 'learning_logs:topics' %}">
+              Topics
+            </a>
+          </li>
+        </ul><!-- End of links on left side of navbar -->
+
+        <!-- Account-related links -->
+        <ul class="navbar-nav ms-auto mb-2 mb-md-0">
+
+          {% if user.is_authenticated %}
+            <li class="nav-item">
+              <span class="navbar-text me-2">
+                Hello, {{ user.username }}!
+              </span>
+            </li>
+          {% else %}
+            <li class="nav-item">
+              <a class="nav-link" href="{% url 'accounts:register' %}">
+                Register
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="{% url 'accounts:login' %}">
+                Login
+              </a>
+            </li>
+          {% endif %}
+
+        </ul><!-- End of account-related links -->
+
+        {% if user.is_authenticated %}
+          <form action="{% url 'accounts:logout' %}" method="post">
+            {% csrf_token %}
+            <button class="btn btn-outline-secondary btn-sm" name="submit">
+              Logout
+            </button>
+          </form>
+        {% endif %}
+
+      </div><!-- Closes collapsible parts of navbar -->
+
+    </div><!-- Closes container of navbar -->
+  </nav><!-- Closes navbar -->
+
+  <main class="container">
+    <div class="pb-2 mb-2 border-bottom">
+      {% block page_header %}{% endblock page_header %}
+    </div>
+    <div>
+      {% block content %}{% endblock content %}
+    </div>
+  </main>
+
+</body>
+</html>
diff --git a/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/index.html b/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/index.html
@@ -1,5 +1,19 @@
 {% extends 'learning_logs/base.html' %}
 
-{% block content %}
-  <p>Learning Log helps you keep track of your learning, for any topic you are interested in.</p>
-{% endblock content %}
+{% block page_header %}
+  <div class="p-3 mb-4 bg-light rounded-3">
+    <div class="container-fluid py-4">
+      <h1 class="display-3">
+        Track your learning.
+      </h1>
+
+      <p class="lead">
+        Make your own Learning Log, and keep a list of topics you're learning about. Whenever you learn something new about a topic, make an entry summarizing what you've learned.
+      </p>
+
+      <a class="btn btn-primary btn-lg mt-1" href="{% url 'accounts:register' %}">
+        Register &raquo;
+      </a>
+    </div>
+  </div>
+{% endblock page_header %}
diff --git a/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/topic.html b/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/topic.html
@@ -1,27 +1,36 @@
 {% extends "learning_logs/base.html" %}
 
-{% block content %}
-  <p>Topic: {{ topic.text }}</p>
+{% block page_header %}
+  <h1}
+    {{ topic.text }}
+  </h1>
+{% endblock page_header %}
 
-  <p>Entries:</p>
+{% block content %}
   <p>
     <a href="{% url 'learning_logs:new_entry' topic.id %}">Add new 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>
+  {% for entry in entries %}
+    <div class="card mb-3">
+      <!-- Card header with timestamp and edit link -->
+      <h4 class="card-header">
+        {{ entry.date_added|date:"M d, Y H:i" }}
+        <small>
           <a href="{% url 'learning_logs:edit_entry' entry.id %}">
-            Edit entry
+            edit entry
           </a>
-        </p>
-      </li>
-    {% empty %}
-      <li>No entries.</li>
-    {% endfor %}
-  </ul>
+        </small>
+      </h4>
+      <!-- Card body with entry text -->
+      <div class="card-body">
+        {{ entry.text|linebreaks }}
+      </div>
+    </div>
+  {% empty %}
+    <p>
+      There are no entries for this topic yet.
+    </p>
+  {% endfor %}
 
 {% endblock content %}
diff --git a/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/topics.html b/181920-Project03-Web-Applications/learning_logs/templates/learning_logs/topics.html
@@ -1,17 +1,21 @@
 {% extends "learning_logs/base.html" %}
 
-{% block content %}
+{% block page_header %}
+  <h1>Topics</h1>
+{% endblock page_header %}
 
-  <p>Topics</p>
+{% block content %}
 
-  <ul>
+  <ul class="list-group borfer-bottom pb-2 mb-4">
     {% for topic in topics %}
-      <li>
+      <li class="list-group-item border-0">
         <a href="{% url 'learning_logs:topic' topic.id %}">
           {{ topic.text }}</a>
       </li>
     {% empty %}
-      <li>No topics have been added yet.</li>
+      <li class="list-group-item border-0">
+        No topics have been added yet.
+      </li>
     {% endfor %}
   </ul>
 

diff --git a/181920-Project03-Web-Applications/ll_project/settings.py b/181920-Project03-Web-Applications/ll_project/settings.py
@@ -35,6 +35,9 @@
     'learning_logs',
     'accounts',
 
+    # Third-party apps.
+    'django_bootstrap5',
+
     # Default Django apps.
     'django.contrib.admin',
     'django.contrib.auth',