Styling tweaks

src/App.tsx

@@ -23,10 +23,14 @@ export default function App() {
         </ol>
         <p>
           <strong>Markeren</strong> kan door het vakje rechts te selecteren.
+          <br />
+          Dit mag je gebruiken als je hier bijvoorbeeld extra aandacht aan wilt
+          besteden of een vraag over hebt.
+          <br />
           Onder aan de pagina verschijnt een lijst van gemarkeerde items.
         </p>
       </div>
-      <hr />
+
       <Table state={state} select={select} mark={mark} />
       <hr />
       <Results state={state} mark={mark} note={note} />

src/CompetenceResult.tsx

@@ -7,7 +7,7 @@ export default function CompetenceResult({ state }: { state: State }) {
         const [score, max] = theme.experiences.reduce(
           (acc, exp) => {
             return [
-              acc[0] + exp.competences[index] * exp.level,
+              acc[0] + exp.competences[index] * Math.max(exp.level - 1, 0),
               acc[1] + exp.competences[index] * MAX_LEVEL,
             ];
           },

src/ExperienceRow.tsx

@@ -6,6 +6,7 @@ interface ExperienceRowProps {
   levels: string[];
   selected: number;
   marked: boolean;
+  last: boolean;
   onMark: (marked: boolean) => void;
   onSelect: (level: number) => void;
 }
@@ -17,17 +18,21 @@ export default function ExperienceRow({
   color,
   levels,
   marked,
+  last,
   selected,
   onMark,
   onSelect,
 }: ExperienceRowProps) {
+  const border = `1px solid ${color}`;
+  const style = { borderBottom: last ? border : undefined };
+
   return (
     <tr className={`selectable ${marked ? 'marked' : ''}`}>
       <th
         scope="row"
         style={{
-          borderBottomColor: color,
-          borderLeftColor: color,
+          ...style,
+          borderLeft: border,
         }}
       >
         {name}
@@ -38,12 +43,7 @@ export default function ExperienceRow({
           key: `option-${themeIndex}-${index}-${levelIndex}`,
         }))
         .map(({ level, key }, levelIndex) => (
-          <td
-            key={level}
-            style={{
-              borderBottomColor: color,
-            }}
-          >
+          <td key={level} style={style}>
             <label htmlFor={key} data-tooltip={level}>
               <input
                 type="radio"
@@ -59,8 +59,8 @@ export default function ExperienceRow({
         ))}
       <td
         style={{
-          borderBottomColor: color,
-          borderRightColor: color,
+          ...style,
+          borderRight: border,
         }}
       >
         <label htmlFor={`check-${themeIndex}-${index}`} data-tooltip="markeren">

src/Results.tsx

@@ -27,7 +27,7 @@ export default function Results({ state, mark, note }: ResultProps) {
         competentie.
       </p>
       <hr />
-      <h2>Remarkeerde ervaringen</h2>
+      <h2>Gemarkeerde ervaringen</h2>
       <Marked state={state} mark={mark} />
       <hr />
       <h2>Notities</h2>

src/ThemeResult.tsx

@@ -6,7 +6,10 @@ export default function ThemeResult({ state }: { state: State }) {
 
   const results = state.themes.map((theme) => {
     const max = theme.experiences.length * MAX_LEVEL;
-    const score = theme.experiences.reduce((acc, exp) => acc + exp.level, 0);
+    const score = theme.experiences.reduce(
+      (acc, exp) => acc + Math.max(exp.level - 1, 0),
+      0
+    );
 
     totalScore += score;
     totalMax += max;

src/ThemeSection.tsx

@@ -18,10 +18,14 @@ export default function ThemeSection({
 }: ThemeProps) {
   return (
     <>
+      <tr>
+        <td colSpan={7} className="white"></td>
+      </tr>
       <tr>
         <th
           style={{
-            borderBottomColor: color,
+            borderColor: color,
+            backgroundColor: color,
           }}
           colSpan={7}
           className="theme"
@@ -40,6 +44,7 @@ export default function ThemeSection({
           index={index}
           levels={levels}
           color={color}
+          last={index === experiences.length - 1}
           selected={experience.level}
           marked={experience.marked}
           onMark={(marked: boolean) => mark(themeIndex, index, marked)}

src/index.css

@@ -3,7 +3,15 @@
 html {
   box-sizing: border-box;
   font-size: 16px;
-  min-width: 454px;
+  min-width: 450px;
+}
+
+html,
+body {
+  overflow-x: hidden;
+  padding: 0;
+  margin: 0;
+  width: 100%;
 }
 
 *,
@@ -44,6 +52,7 @@ body {
   font-family: "Open Sans", Helvetica, Arial, sans-serif;
   line-height: 1.4;
   padding: 2rem;
+  position: relative;
 }
 
 @media screen and (max-width: 768px) {
@@ -115,7 +124,6 @@ textarea {
   margin-bottom: 0.5rem;
   border: 1px solid #eaeaea;
   background-color: #fafafa;
-  max-width: 30rem;
 }
 
 .legenda h2 {
@@ -132,6 +140,7 @@ table {
   border-collapse: collapse;
   height: 1px;
   margin-bottom: 1rem;
+  width: 100%;
 }
 
 tbody th {
@@ -151,8 +160,13 @@ th {
 /* table form styling */
 
 table.form th.theme {
-  border: none;
-  border-bottom: 1px solid #000;
+  border: 1px solid;
+  padding: 1.5rem 1rem;
+}
+
+table.form td.white {
+  height: 1rem;
+  border: 0;
 }
 
 table.form tr.marked {
@@ -161,6 +175,7 @@ table.form tr.marked {
 
 table.form thead th {
   padding: 0.25rem 0.5rem;
+  position: relative;
 }
 
 table.form thead th svg {
@@ -169,29 +184,27 @@ table.form thead th svg {
 
 table.form tbody td {
   width: 2.5rem;
+  position: relative;
 }
 
 table.form tbody td label {
-  position: relative;
+  position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   cursor: pointer;
+  top: 0;
 }
 
 table.form h3 {
-  margin-top: 1rem;
+  margin: 0;
+  padding: 0;
+  color: white;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 table.form h3 span {
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
-  text-align: center;
-  border-radius: 1rem;
-  margin-right: 1rem;
-  color: #fff;
+  margin-right: 0.5rem;
 }
 
 table.form tbody input {
@@ -221,12 +234,12 @@ table.form tr.selectable:hover {
 /* result table styling */
 
 .result table {
-  max-width: 100%;
+  width: 100%;
+  max-width: 60rem;
 }
 
 .result .progress {
   position: relative;
-  width: 30rem;
   padding: 0.25rem;
 }
 
@@ -249,16 +262,19 @@ table.form tr.selectable:hover {
 }
 
 .result th {
-  padding: 0.25rem
+  padding: 0.25rem;
+  width: 50%;
 }
 
 .result td {
   vertical-align: top;
+  width: 50%;
 }
 
 .result td:nth-child(2) {
   text-align: right;
-  padding: 0.25rem 1rem;
+  padding: 0.25rem 0.5rem;
+  width: 2.5rem;
 }
 
 @media screen and (max-width: 768px) {
@@ -298,7 +314,7 @@ table.form tr.selectable:hover {
 }
 
 [data-tooltip] {
-  position: relative;
+  position: absolute;
 }
 
 [data-tooltip]::before {

src/usePersistence.ts

@@ -67,7 +67,7 @@ export type Action =
 
 const data = rawData as State;
 
-export const MAX_LEVEL = data.levels.length;
+export const MAX_LEVEL = data.levels.length - 1;
 
 function updateState(
   state: State,