diff --git a/src/CheckItem.tsx b/src/CheckItem.tsx
new file mode 100644
index 0000000..4ad0ad8
--- /dev/null
+++ b/src/CheckItem.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function CheckItem({ label, checked }) {
+ if (checked) {
+ return (
+
+ {label}
+
+ );
+ }
+ return (
+
+ {label}
+
+ );
+}
diff --git a/src/Vote.jsx b/src/Vote.jsx
index ca6df21..102f4cd 100644
--- a/src/Vote.jsx
+++ b/src/Vote.jsx
@@ -15,6 +15,7 @@ import moment from "moment-timezone";
import { breakpoint, confirm, snackbar } from "mdui";
import { redirect } from "react-router-dom";
import { capitalizeWords } from "./admin/utils";
+import CheckItem from "./CheckItem";
export default function Vote() {
const refs = useRef([]);
const urlParams = new URLSearchParams(window.location.search);
@@ -233,52 +234,53 @@ export default function Vote() {
)}
+
setFirstName(capitalizeWords(e.target.value))}
+ icon="person"
>
setLastName(capitalizeWords(e.target.value))}
+ icon="badge"
>
-
+
setGrade(e.target.value)}
+ icon="school"
>
setListIndex(e.target.value)}
+ icon="format_list_numbered"
>
{extraFields?.map((e, i) => (
handleInputChange(i, capitalizeWords(e.target.value))
}
+ icon="edit"
>
@@ -291,7 +293,10 @@ export default function Vote() {
{selectCount > 1 && (
-
(refs.current[index] = el)}>
+ (refs.current[index] = el)}
+ >
{index + 1}. Wahl
)}
@@ -306,8 +311,12 @@ export default function Vote() {
style={{
cursor:
selected[index] !== e.id && selected.includes(e.id)
- ? "default"
+ ? "not-allowed"
: "pointer",
+ backgroundColor:
+ selected[index] !== e.id &&
+ selected.includes(e.id) &&
+ "rgba(0, 0, 0, 0.5)",
}}
class={`option-card ${
selected[index] === e.id ? "selected" : ""
@@ -329,20 +338,37 @@ export default function Vote() {
: !selected.includes(e.id) && select(index, e.id);
}}
>
- {e.title}
-
{e.teacher}
- {e.description}
- max. {e.max} SchülerInnen
+
+ {e.title}
+
+
+ {e.max}
+
+
+ {e.teacher && (
+
+
+ {e.teacher}
+
+ )}
+ {e.description && (
+ {e.description}
+ )}
))}
+
+
))}
-
-
-
+
(refs.current[selectCount] = el)}
@@ -384,14 +410,53 @@ export default function Vote() {
)}
{submitDisabled() ? (
- Weiter
+ Überprüfen
) : (
- Weiter
+ Überprüfen
)}
+
+
+
= 2}
+ />
+ = 2}
+ />
+
+
+
+
+ {extraFields?.map((e, i) => (
+ <>
+
+
+ >
+ ))}
+ {Array.from({ length: selectCount }).map((e, index) => (
+
+ ))}
+
);
diff --git a/src/styles.css b/src/styles.css
index 6e61ad0..29d07b7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -94,6 +94,11 @@ button:not(:disabled):hover {
background-color: #f89e24;
}
+.break{
+ flex-basis: 100%;
+ height: 0;
+}
+
.vote {
width: 600px;
max-width: 100%;
@@ -147,14 +152,28 @@ button:not(:disabled):hover {
cursor: not-allowed;
}
-.option .title {
+.title {
font-size: 20px;
font-weight: bold;
+ display: flex;
+ justify-content: space-between;
+}
+
+.option-card .teacher{
+ font-size: 14px;
+ font-style: italic;
+ display: flex;
+ align-items: center;
+ gap: 5px;
}
.option .teacher,
.option .description {
font-size: 14px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
}
.option .description {
@@ -433,6 +452,7 @@ button:not(:disabled):hover {
gap: 10px;
padding: 20px;
flex: 1 1 45%;
+ border: 5px solid transparent;
}
.option-card.selected {