Work on layout

askpatrons/settings.py

@@ -9,7 +9,7 @@ https://docs.djangoproject.com/en/4.1/topics/settings/
 For the full list of settings and their values, see
 https://docs.djangoproject.com/en/4.1/ref/settings/
 """
-
+import os
 from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -120,8 +120,12 @@ USE_TZ = True
 
 STATIC_URL = 'static/'
 
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
+
 # Add STATIC_ROOT to collect static files
-STATIC_ROOT = BASE_DIR / 'static'
+#STATIC_ROOT = BASE_DIR / 'static'
+
+
 
 
 # Default primary key field type

static/css/app.css

@@ -0,0 +1,119 @@
+.app-container {
+    display: flex;
+    flex-direction: row;
+}
+
+#poll-container {
+    padding:50px;
+    height: 100vh;
+    display: flex;
+    flex: 3;
+    overflow-y: auto;
+    flex-wrap: wrap;
+}
+
+#form-container {
+    padding:50px;
+    height: 100vh;
+    display: block;
+    background-color: #232628;
+    color:#fff;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.poll-question {
+    color: #000000;
+    font-size: 2.5em;
+    font-weight: 600;
+    padding-bottom:30px;
+}
+
+.questions {
+    display: block;
+}
+
+.poll-item {
+    margin-bottom:50px;
+    border-bottom:4px solid #dadada;
+    padding-bottom:50px;
+}
+
+.button_yes {
+    display: inline-block;
+    background-color: white;
+    color: #4CAF50;
+    border: 4px solid #4CAF50;
+    padding:20px;
+    font-size: 2em;
+    min-width:200px;
+    text-align: center;
+    border-radius:15px;
+    text-decoration: none;
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.button_yes_answered {
+    display: inline-block;
+    background-color: #4CAF50;
+    color: white;
+    border: 4px solid #4CAF50;
+    padding:20px;
+    font-size: 2em;
+    min-width:200px;
+    border-radius:15px;
+    text-decoration: none;
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.button_no {
+    display: inline-block;
+    background-color: white;
+    color: #af4c4c;
+    border: 4px solid #af4c4c;
+    padding:20px;
+    font-size: 2em;
+    min-width:200px;
+    text-align: center;
+    border-radius:15px;
+    text-decoration: none;
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.button_no_answered {
+    display: inline-block;
+    background-color: #af4c4c;
+    color: white;
+    border: 4px solid #af4c4c;
+    padding:20px;
+    font-size: 2em;
+    min-width:200px;
+    border-radius:15px;
+    text-decoration: none;
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.form-block {
+    display: block;
+}
+
+form {
+    font-size:1.5em;
+}
+
+input {
+    font-size:1.1em !important;
+}
+
+select {
+    font-size:1.1em !important;
+}
+
+button {
+    margin-top:25px;
+    font-size:1.5em !important;
+}

vote/templates/vote/index.html

@@ -2,22 +2,33 @@
 {% load django_bootstrap5 %}
 
 {% block content %}
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-sm-12 col-md-6 col-lg-3">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="text-center">
-                            <h3>Vote on this issue</h3>
-                        </div>
-                        <form method="POST" class="form">
-                            {% csrf_token %}
-                            {% bootstrap_form form %}
-                            {% bootstrap_button button_type="submit" content="Next" extra_classes="w-100" %}
-                        </form>
+<div class="app-container">
+    <div class="shadow-md border-end" id="form-container">
+        <div class="form-block">
+            <div class="text-center mb-5">
+                <h1 class="display-3"><i class="ri-voiceprint-line"></i> AskPatron</h1>
+            </div>
+            <form method="post">
+                {% csrf_token %}
+                {% bootstrap_form form %}
+                {% bootstrap_button button_type="submit" content="Submit" extra_classes="w-100" %}
+            </form>
+        </div>
+    </div>
+    <div class="" id="poll-container">
+        <div class="questions">
+            {% for question in questions %}
+                <div class="poll-item">
+                    <div class="poll-question">
+                        {{ question }}
+                    </div>
+                    <div class="text-center">
+                        <a href="" class="button_no">No</a>
+                        <a href="" class="button_yes">Yes</a>
                     </div>
                 </div>
-            </div>
+            {% endfor %}
         </div>
     </div>
+</div>
 {% endblock %}

vote/templates/vote/layout.html

@@ -1,3 +1,4 @@
+{% load static %}
 <!doctype html>
 <html lang="en">
   <head>
@@ -5,11 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>AskPatron</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+    <link href="{% static '/css/app.css' %}" rel="stylesheet">
   </head>
-  <body class="bg-dark">
-    <div class="text-center mb-5">
-        <h1 class="text-light">AskPatron</h1>
-    </div>
+  <body>
     {% block content %}{% endblock %}
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </body>

vote/views.py

@@ -1,5 +1,6 @@
 from django.shortcuts import render
 from . forms import VoterRegistrationForm
+from . models import *
 
 
 # Create your views here.
@@ -15,8 +16,11 @@ def index(request):
         else:
             print('Invalid')
 
+    questions = Question.objects.all()
+
     context = {
         'form': voter_registration_form,
+        'questions': questions,
     }
 
     return render(request, 'vote/index.html', context=context)