- Add some styles and fonts - views and templates for landing page and polls subpagemain
parent
53ad0e8ce6
commit
43eefd6bc1
@ -0,0 +1,11 @@
|
||||
{% extends "base_template.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div hx-get="{% url 'polls' %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,11 @@
|
||||
from django.urls import path
|
||||
|
||||
from landing.views import landing
|
||||
|
||||
urlpatterns = [
|
||||
path(
|
||||
"",
|
||||
landing,
|
||||
name="landing",
|
||||
),
|
||||
]
|
||||
@ -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,
|
||||
)
|
||||
|
||||
@ -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>
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="poll-entry"
|
||||
hx-target="#poll-details"
|
||||
hx-get="{% url 'poll-details' poll.pk %}"
|
||||
>
|
||||
{{ poll.question }}
|
||||
</div>
|
||||
@ -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>
|
||||
@ -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",
|
||||
),
|
||||
]
|
||||
@ -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,
|
||||
)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in new issue