[guivis/KeepPolling#10]

- 'improve' design of the app
-  pointer cursor for clickables
- spacings around items
- hover colors and background colors
- fix a couple of tests due to copy changes

landing/templates/landing/landing.html

@@ -1,5 +1,13 @@
 {% extends "base_template.html" %}
 
+{% load static %}
+
+{% block extra-head %}
+
+<link rel="stylesheet" href="{% static 'css/landing.css' %}"/>
+
+{% endblock %}
+
 {% block content %}
 
 <div hx-get="{% url 'polls' %}"

polls/templates/polls/poll_details.html

@@ -1,9 +1,10 @@
-<div>
-    <div>
+<div class="h1 kanit-semibold">
     {{ poll.question }}
 </div>
-    <div>
-        Options!
+<div class="h2 kanit-light-italic">
+    Select from one of the following options:
+</div>
+<div class="options-list">
     {% for option in options %}
     <div
             hx-post="{% url 'cast-vote' poll.pk option.pk %}"
@@ -12,7 +13,8 @@
         Option: {{ option.text }}
     </div>
     {% empty %}
+    <div>
         No options defined for Question!
-        {% endfor %}
     </div>
+    {% endfor %}
 </div>

polls/templates/polls/poll_entry.html

@@ -2,5 +2,7 @@
      hx-target="#poll-details"
      hx-get="{% url 'poll-details' poll.pk %}"
 >
+    <div class="h2 kanit-regular">
         {{ poll.question }}
     </div>
+</div>

polls/templates/polls/poll_results.html

@@ -1,15 +1,17 @@
-<div>
-    <div>
+<div class="h1 kanit-semibold">
     {{ poll.question }}
 </div>
+<div class="h2 kanit-light-italic">
+    Review the poll results below
+</div>
 <div>
-        Results!
     {% for result in results %}
     <div>
         {{ result.option.text }} - {{ result.count }}
     </div>
     {% empty %}
+    <div>
         No options defined for Question!
-        {% endfor %}
     </div>
+    {% endfor %}
 </div>

polls/templates/polls/polls.html

@@ -7,6 +7,8 @@
         {% endfor %}
     </div>
     <div id="poll-details">
-        Select a Poll on the Left
+        <div class="select-poll h1 kanit-medium-italic">
+            Select a Poll from the<br>list on the Left
+        </div>
     </div>
 </div>

polls/tests.py

@@ -58,7 +58,7 @@ class PollDetailsTests(
         )
         self.assertContains(
             response,
-            "Options!",
+            "Select from one of the following options:",
         )
         options = Option.objects.filter(
             poll=poll,
@@ -100,11 +100,11 @@ class PollDetailsTests(
         )
         self.assertNotContains(
             response,
-            "Options!",
+            "Select from one of the following options:",
         )
         self.assertContains(
             response,
-            "Results!",
+            "Review the poll results below",
         )
 
     def test_re_voting_doesnt_change_votes(

static/css/fonts.css

@@ -1,7 +1,13 @@
 @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;
+    font-size: 40px;
+}
+.h1 {
+    font-size: 32px;
+}
+.h2 {
+    font-size: 20px;
 }
 
 .kanit-thin {

static/css/landing.css

@@ -0,0 +1,87 @@
+.polls {
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 1fr 1fr;
+    height: 100%;
+}
+
+.polls > div {
+    border-color: var(--accent-500);
+    border-right-width: 1px;
+    border-right-style: solid;
+    padding: 16px;
+    background-color: var(--neutral-200);
+}
+.polls > div:first-of-type {
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+}
+.polls > div:last-of-type {
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border-right-style: none;
+}
+
+.polls-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.poll-entry {
+    min-height: 64px;
+    padding: 8px;
+    border-radius: 24px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--accent-500);
+    background-color: var(--primary-300);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.poll-entry:hover {
+    background-color: var(--accent-300);
+}
+
+#poll-details {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.select-poll {
+    padding: 128px;
+    align-self: center;
+    text-align: center;
+}
+
+.options-list {
+    display: flex;
+    flex-direction: column;
+    border-color: var(--accent-400);
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 16px;
+}
+.options-list > div {
+    border-color: var(--accent-400);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding: 32px;
+    background-color: var(--primary-300);
+    cursor: pointer;
+}
+.options-list > div:hover {
+    background-color: var(--accent-300);
+}
+.options-list > div:first-of-type {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+}
+.options-list > div:last-of-type {
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border-bottom-style: none;
+}

static/css/login.css

@@ -0,0 +1,27 @@
+.login-form {
+    width: 380px;
+    border-radius: 16px;
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.login-button {
+    cursor: pointer;
+    display: inline-flex;
+    width: 160px;
+    height: 90px;
+    align-items: center;
+    justify-content: space-around;
+    padding: 15px;
+    background-color: var(--button-background);
+    border-radius: 12px;
+}
+.login-button:hover {
+    background-color: var(--button-background-hover);
+}
+
+.error {
+    color: var(--accent-400);
+}

static/css/style.css

@@ -11,11 +11,14 @@ body {
 body {
     display: flex;
     flex-direction: column;
+    background-color: var(--neutral-200);
 }
 
 header {
     display: flex;
-    padding: 16px;
+    padding: 16px 32px;
+    align-items: center;
+    background-color: var(--neutral-100);
 }
 
 .title {
@@ -25,21 +28,18 @@ header {
 .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;
+    background-color: var(--primary-100);
+    border-radius: 32px;
+    box-shadow: 0px 5px 50px #e4e0dd;
     padding: 16px;
-    margin-bottom: 64px;
+    margin: 16px 16px;
     overflow-y: scroll;
 }
 
 footer {
     z-index: 3;
-    position: fixed;
     bottom: 0px;
     left: 0px;
     right: 0px;
@@ -47,11 +47,5 @@ footer {
     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;
+    background-color: var(--neutral-100);
 }

static/css/styleguide.css

@@ -0,0 +1,37 @@
+:root {
+    /* Primary: Hello Spring */
+    --primary-100: #F2FFF7;
+    --primary-200: #C8FEDA;
+    --primary-300: #9CFBB5;
+    --primary-400: #6EF189;
+    --primary-500: #40DE58;
+    --primary-600: #1FB02C;
+    --primary-700: #0F8213;
+    --primary-800: #0A5408;
+    --primary-900: #062603;
+
+    /* Accent: Méi Gūi Zǐ Purple */
+    --accent-100: #FFF2FA;
+    --accent-200: #FFC4EC;
+    --accent-300: #FC95E1;
+    --accent-400: #F565D7;
+    --accent-500: #E835CD;
+    --accent-600: #B815A9;
+    --accent-700: #870783;
+    --accent-800: #550357;
+    --accent-900: #230126;
+
+    /* Neutral */
+    --neutral-100: #FAFCFB;
+    --neutral-200: #EAEFEC;
+    --neutral-300: #DAE2DC;
+    --neutral-400: #CAD4CC;
+    --neutral-500: #BBC7BD;
+    --neutral-600: #949F95;
+    --neutral-700: #6D776E;
+    --neutral-800: #474E47;
+    --neutral-900: #232622;
+
+    --button-background: var(--primary-300);
+    --button-background-hover: var(--accent-300);
+}

templates/base_template.html

@@ -10,6 +10,7 @@
 
     <!-- Add additional CSS in static file -->
     {% load static %}
+    <link rel="stylesheet" href="{% static 'css/styleguide.css' %}"/>
     <link rel="stylesheet" href="{% static 'css/style.css' %}"/>
     <link rel="stylesheet" href="{% static 'css/fonts.css' %}"/>
 
@@ -28,7 +29,6 @@
         event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
     })
 </script>
-<div class="full-screen">
 <header>
     <div class="title h0 kanit-semibold">
         Keep Polling
@@ -46,6 +46,5 @@
 <footer>
     Made by Guy Davis
 </footer>
-</div>
 </body>
 </html>

templates/registration/login.html

@@ -1,19 +1,27 @@
 {% extends "base_template.html" %}
 
+{% load static %}
+
+{% block extra-head %}
+
+<link rel="stylesheet" href="{% static 'css/login.css' %}"/>
+
+{% endblock %}
+
 {% block content %}
 
-<div>Login</div>
+<div class="h0 kanit-semibold">Login</div>
 
 {% if form.errors %}
-<p>Your username and password didn't match. Please try again.</p>
+<p class="h2 kanit-light-italic error">Your username and password didn't match. Please try again.</p>
 {% endif %}
 
 {% if next %}
     {% if user.is_authenticated %}
-    <p>Your account doesn't have access to this page. To proceed,
+    <p class="h2 kanit-semibold">Your account doesn't have access to this page. To proceed,
     please login with an account that has access.</p>
     {% else %}
-    <p>Please login to see this page.</p>
+    <p class="h2 kanit-semibold">Please login to see this page.</p>
     {% endif %}
 {% endif %}
 
@@ -24,14 +32,14 @@
 >
 {% csrf_token %}
 <div>
-    <div>{{ form.username.label_tag }}</div>
-    <div>{{ form.username }}</div>
+    <div class="h2 kanit-regular">{{ form.username.label_tag }}</div>
+    <div class="h2 kanit-regular">{{ form.username }}</div>
 </div>
 <div>
-    <div>{{ form.password.label_tag }}</div>
-    <div>{{ form.password }}</div>
+    <div class="h2 kanit-regular">{{ form.password.label_tag }}</div>
+    <div class="h2 kanit-regular">{{ form.password }}</div>
 </div>
-<div class="login-button"
+<div class="login-button h1 kanit-regular"
      onclick="document.forms['login-form'].submit();"
 >
     Login