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 {