Make it look good

flangr/circles/urls.py

@@ -6,5 +6,5 @@ app_name = "circles"
 urlpatterns = [
     path("", views.CircleListView.as_view(), name="circle_list"),
     path("circle/<int:pk>", views.CircleUpdateView.as_view(), name="circle_update"),
-    path("add", views.CircleCreateView.as_view(), name="circle_create"),
+    path("circle/new", views.CircleCreateView.as_view(), name="circle_create"),
 ]

flangr/posts/urls.py

@@ -5,6 +5,11 @@ from . import views
 app_name = "posts"
 urlpatterns = [
     path("post/<int:pk>", views.PostDetailView.as_view(), name="post_detail"),
+    path(
+        "post/<int:pk>/fullscreen",
+        views.PostDetailView.as_view(template_name_suffix="_fullscreen"),
+        name="post_fullscreen",
+    ),
     path("post/new", views.PostCreateView.as_view(), name="post_create"),
     path("posts", views.PostListView.as_view(), name="post_list"),
 ]

flangr/templates/circles/circle_form.html

@@ -1,9 +1,17 @@
 {% extends "base.html" %}
+{% load django_bootstrap5 %}
+
 {% block content %}
-    <h1>Circle {{ object.name }}</h1>
-    <form action="#" method="post">
-        {% csrf_token %}
-        {{ form }}
-        <input type="submit" value="Post">
-    </form>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h1>Create a new circle</h1>
+                <form action="" method="post">
+                    {% csrf_token %}
+                    {% bootstrap_form form %}
+                    {% bootstrap_button button_type="submit" content="OK" %}
+                </form>
+            </div>
+        </div>
+    </div>
 {% endblock content %}

flangr/templates/circles/circle_list.html

@@ -1,9 +1,22 @@
 {% extends "base.html" %}
 {% block content %}
-    <h1>Your Circles</h1>
-    <ul>
-    {% for circle in object_list %}
-        <li><a href="{% url "circles:circle_update" circle.pk %}">{{ circle.name }}</a></li>
-    {% endfor %}
-    </ul>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h1>Your Circles</h1>
+                <table class="table">
+                    <tr>
+                        <th>Name</th>
+                        <th>Members</th>
+                    </tr>
+                    {% for circle in object_list %}
+                        <tr>
+                            <td><a href="{% url "circles:circle_update" circle.pk %}">{{ circle.name }}</a></td>
+                            <td>{{ circle.members.all }}</td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            </div>
+        </div>
+    </div>
 {% endblock content %}

flangr/templates/posts/post_detail.html

@@ -1,20 +1,30 @@
 {% extends "base.html" %}
+{% load django_bootstrap5 %}
+
 {% block content %}
-    {% if object.title %}
-        <h1>{{ object.title }}</h1>
-    {% else %}
-        <h1>{{ object.user.username }}</h1>
-    {% endif %}
-    <img width=400 src={{ object.img.url }}/>
-    <h2> Comments</h2>
-    <ul>
-    {% for comment in object.comments.all %}
-    <li>{{ comment.user }} - {{ comment.comment }}</li>
-    {% endfor %}
-    </ul>
-    <form action="" method="post">
-        {% csrf_token %}
-        {{ form }}
-        <input type="submit", value="Post">
-    </form>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8">
+                {% if object.title %}
+                    <h1>{{ object.title }}</h1>
+                {% else %}
+                    <h1>{{ object.user.username }}</h1>
+                {% endif %}
+                <a href="{% url 'posts:post_fullscreen' object.pk %}"><img class="img-fluid" src={{ object.img.url }}/></a>
+            </div>
+            <div class="col-md-4">
+                <h2> Comments</h2>
+                <ul>
+                    {% for comment in object.comments.all %}
+                        <li>{{ comment.user }} - {{ comment.comment }}</li>
+                    {% endfor %}
+                </ul>
+                <form action="" method="post">
+                    {% csrf_token %}
+                    {% bootstrap_form form %}
+                    {% bootstrap_button button_type="submit" content="OK" %}
+                </form>
+            </div>
+        </div>
+    </div>
 {% endblock content %}

flangr/templates/posts/post_form.html

@@ -1,10 +1,19 @@
 {% extends "base.html" %}
+{% load django_bootstrap5 %}
 
 {% block content %}
-    <h1>Upload a new picture</h1>
-    <form enctype="multipart/form-data" action="" method="post">
-        {% csrf_token %}
-        {{ form }}
-        <input type="submit" value="Post">
-    </form>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h1>Upload a new picture</h1>
+                <form enctype="multipart/form-data" action="" method="post">
+                    {% csrf_token %}
+                    {% bootstrap_form form %}
+                    {% bootstrap_button button_type="submit" content="OK" %}
+                    <input type="submit" value="Post">
+                </form>
+            </div>
+        </div>
+    </div>
+
 {% endblock content %}

flangr/templates/posts/post_fullscreen.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% load django_bootstrap5 %}
+
+{% block nav %}{% endblock nav %}
+
+{% block content %}
+    <div class="vh-100 bg-dark d-flex flex-column">
+        <div class="d-flex flex-row m-2 justify-content-between align-items-center">
+            <h3 class="text-light">{{ object.title }}</h1>
+            <a class="btn btn-dark" href="{% url 'posts:post_detail' object.pk %}">X</a>
+        </div>
+        <div class="flex-fill flex-shrink-1">
+            <img class="img-full w-100 h-100" src={{ object.img.url }}/>
+        </div>
+    </div>
+{% endblock content %}

flangr/templates/posts/post_list.html

@@ -1,9 +1,15 @@
 {% extends "base.html" %}
 {% block content %}
-    <h1>Posts Shared with you</h1>
-    <ul>
-    {% for post in object_list %}
-        <li><a href="{% url "posts:post_detail" post.pk %}">{{ post.title }}</a></li>
-    {% endfor %}
-    </ul>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h1>Posts Shared with you</h1>
+                <ul>
+                    {% for post in object_list %}
+                        <li><a href="{% url "posts:post_detail" post.pk %}">{{ post.title }}</a></li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
 {% endblock content %}

flangr/templates/registration/login.html

@@ -1,10 +1,19 @@
 {% extends "base.html" %}
+{% load django_bootstrap5 %}
 
 {% block content %}
-    <h1>Login</h1>
-    <form action="" method="post">
-        {% csrf_token %}
-        {{ form }}
-        <input type="submit", value="Post">
-    </form>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h1>Login</h1>
+                <form action="" method="post">
+                    {% csrf_token %}
+                    {% bootstrap_form form %}
+                    {% bootstrap_button button_type="submit" content="OK" %}
+                </form>
+            </div>
+        </div>
+    </div>
+
+
 {% endblock content %}

flangr/urls.py

@@ -16,6 +16,7 @@ Including another URLconf
 from django.conf import settings
 from django.conf.urls.static import static
 from django.contrib import admin
+from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 from django.urls import include
 from django.urls import path
 
@@ -31,3 +32,4 @@ urlpatterns = [
 
 if settings.DEBUG:
     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+    urlpatterns += staticfiles_urlpatterns()