[guivis/KeepPolling#6]

- Add some styles and fonts
- views and templates for landing page and polls subpage

keeppolling/urls.py

@@ -16,6 +16,7 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path, include
+from django.views.generic import RedirectView
 
 urlpatterns = [
     path(
@@ -28,4 +29,22 @@ urlpatterns = [
             "django.contrib.auth.urls",
         ),
     ),
+    path(
+        "",
+        RedirectView.as_view(
+            url="landing/",
+        ),
+    ),
+    path(
+        "landing/",
+        include(
+            "landing.urls",
+        ),
+    ),
+    path(
+        "polls/",
+        include(
+            "polls.urls",
+        ),
+    ),
 ]

landing/templates/landing/landing.html

@@ -0,0 +1,11 @@
+{% extends "base_template.html" %}
+
+{% block content %}
+
+<div hx-get="{% url 'polls' %}"
+     hx-trigger="load"
+     hx-swap="outerHTML"
+>
+</div>
+
+{% endblock %}

landing/urls.py

@@ -0,0 +1,11 @@
+from django.urls import path
+
+from landing.views import landing
+
+urlpatterns = [
+    path(
+        "",
+        landing,
+        name="landing",
+    ),
+]

landing/views.py

@@ -1,3 +1,14 @@
+from django.contrib.auth.decorators import login_required
 from django.shortcuts import render
 
-# Create your views here.
+
+@login_required
+def landing(
+        request,
+):
+    context = {}
+    return render(
+        request,
+        template_name="landing/landing.html",
+        context=context,
+    )

polls/templates/polls/poll_details.html

@@ -0,0 +1,14 @@
+<div>
+    <div>
+        {{ poll.question }}
+    </div>
+    <div>
+        {% for option in options %}
+        <div>
+            Option: {{ option.text }}
+        </div>
+        {% empty %}
+        No options defined for Question!
+        {% endfor %}
+    </div>
+</div>

polls/templates/polls/poll_entry.html

@@ -0,0 +1,6 @@
+<div class="poll-entry"
+     hx-target="#poll-details"
+     hx-get="{% url 'poll-details' poll.pk %}"
+>
+    {{ poll.question }}
+</div>

polls/templates/polls/polls.html

@@ -0,0 +1,12 @@
+<div class="polls">
+    <div class="polls-list">
+        {% for poll in polls %}
+            {% include "polls/poll_entry.html" with poll=poll %}
+        {% empty %}
+        No Polls! Define one in the Admin Panel.
+        {% endfor %}
+    </div>
+    <div id="poll-details">
+        Select a Poll on the Left
+    </div>
+</div>

polls/urls.py

@@ -0,0 +1,16 @@
+from django.urls import path
+
+from polls.views import polls, poll_details
+
+urlpatterns = [
+    path(
+        "",
+        polls,
+        name="polls",
+    ),
+    path(
+        "<int:poll_id>",
+        poll_details,
+        name="poll-details",
+    ),
+]

polls/views.py

@@ -1,3 +1,40 @@
-from django.shortcuts import render
+from django.shortcuts import render, get_object_or_404
 
-# Create your views here.
+from polls.models import Poll, Option
+
+
+def polls(
+        request,
+):
+    context = {}
+
+    context["polls"] = Poll.objects.all()
+
+    return render(
+        request,
+        template_name="polls/polls.html",
+        context=context,
+    )
+
+
+def poll_details(
+        request,
+        poll_id,
+):
+    poll = get_object_or_404(
+        Poll,
+        pk=poll_id,
+    )
+
+    context = {}
+
+    context["poll"] = poll
+    context["options"] = Option.objects.filter(
+        poll=poll,
+    )
+
+    return render(
+        request,
+        template_name="polls/poll_details.html",
+        context=context,
+    )

static/css/fonts.css

@@ -0,0 +1,96 @@
+@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+.h0 {
+    font-size: 48px;
+}
+
+.kanit-thin {
+  font-family: "Kanit", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+.kanit-extralight {
+  font-family: "Kanit", sans-serif;
+  font-weight: 200;
+  font-style: normal;
+}
+.kanit-light {
+  font-family: "Kanit", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+.kanit-regular {
+  font-family: "Kanit", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+.kanit-medium {
+  font-family: "Kanit", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+.kanit-semibold {
+  font-family: "Kanit", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+}
+.kanit-bold {
+  font-family: "Kanit", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+.kanit-extrabold {
+  font-family: "Kanit", sans-serif;
+  font-weight: 800;
+  font-style: normal;
+}
+.kanit-black {
+  font-family: "Kanit", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+}
+.kanit-thin-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+.kanit-extralight-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 200;
+  font-style: italic;
+}
+.kanit-light-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+.kanit-regular-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+.kanit-medium-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 500;
+  font-style: italic;
+}
+.kanit-semibold-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 600;
+  font-style: italic;
+}
+.kanit-bold-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+.kanit-extrabold-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 800;
+  font-style: italic;
+}
+.kanit-black-italic {
+  font-family: "Kanit", sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}

static/css/style.css

@@ -0,0 +1,57 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
+* {
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+html,
+body {
+    margin: 0px;
+    height: 100%;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+    display: flex;
+    padding: 16px;
+}
+
+.title {
+    flex-grow: 1;
+}
+
+.content {
+    flex-grow: 1;
+    z-index: 2;
+    height: auto;
+    min-height: 400px;
+    left: 0px;
+    right: 0px;
+    background-color: rgb(225, 234, 214);
+    border-radius: 16px;
+    box-shadow: 0px 5px 50px #e5e0dd;
+    padding: 16px;
+    margin-bottom: 64px;
+    overflow-y: scroll;
+}
+
+footer {
+    z-index: 3;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    display: flex;
+    height: 64px;
+    padding: 8px 16px;
+    align-items: center;
+    background-color: rgb(250, 234, 234);
+}
+
+.polls {
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 1fr 1fr;
+}

templates/base_template.html

@@ -11,6 +11,7 @@
     <!-- Add additional CSS in static file -->
     {% load static %}
     <link rel="stylesheet" href="{% static 'css/style.css' %}"/>
+    <link rel="stylesheet" href="{% static 'css/fonts.css' %}"/>
 
     <script
             src="https://unpkg.com/htmx.org@1.9.8"
@@ -27,8 +28,24 @@
         event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
     })
 </script>
-<div class="content">
+<div class="full-screen">
+    <header>
+        <div class="title h0 kanit-semibold">
+            Keep Polling
+        </div>
+        {% if user.is_authenticated %}
+        <form method="post" action="{% url 'logout' %}">
+            {% csrf_token %}
+            <button type="submit">Logout</button>
+        </form>
+        {% endif %}
+    </header>
+    <div class="content">
         {% block content %}{% endblock %}
+    </div>
+    <footer>
+        Made by Guy Davis
+    </footer>
 </div>
 </body>
 </html>