- '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 changesmain
parent
3efd2d2a22
commit
cfd73fc106
@ -1,18 +1,20 @@
|
||||
<div>
|
||||
<div>
|
||||
{{ poll.question }}
|
||||
<div class="h1 kanit-semibold">
|
||||
{{ poll.question }}
|
||||
</div>
|
||||
<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 %}"
|
||||
hx-target="#poll-details"
|
||||
>
|
||||
Option: {{ option.text }}
|
||||
</div>
|
||||
{% empty %}
|
||||
<div>
|
||||
Options!
|
||||
{% for option in options %}
|
||||
<div
|
||||
hx-post="{% url 'cast-vote' poll.pk option.pk %}"
|
||||
hx-target="#poll-details"
|
||||
>
|
||||
Option: {{ option.text }}
|
||||
</div>
|
||||
{% empty %}
|
||||
No options defined for Question!
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<div class="h1 kanit-semibold">
|
||||
{{ poll.question }}
|
||||
</div>
|
||||
<div class="h2 kanit-light-italic">
|
||||
Review the poll results below
|
||||
</div>
|
||||
<div>
|
||||
{% for result in results %}
|
||||
<div>
|
||||
{{ poll.question }}
|
||||
{{ result.option.text }} - {{ result.count }}
|
||||
</div>
|
||||
{% empty %}
|
||||
<div>
|
||||
Results!
|
||||
{% for result in results %}
|
||||
<div>
|
||||
{{ result.option.text }} - {{ result.count }}
|
||||
</div>
|
||||
{% empty %}
|
||||
No options defined for Question!
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
Loading…
Reference in new issue