Brukar listeelement til å rendre lista av møter

slik at html-en i større grad reflekterar rollene til objekta Gjer også at vi ikkje får ekstra mellomrom i botnen av popover når det ikkje er nokre møter å vise.
navikt · Feb 22, 2024 · b22db93 · b22db93
1 parent af450d6
commit b22db93
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/minoversikt/moteplan/moteplan.css b/src/minoversikt/moteplan/moteplan.css
@@ -11,17 +11,22 @@
     max-height: max(50vh, 25rem); /* Minst 400px-rem høg, max halve skjermhøgda. Relativt vilkårlege verdiar. */
     overflow-y: auto;
 }
-.veilarbportefoljeflatefs .moteplan_content div:first-child h3 {
-    margin-top: 0;
+.veilarbportefoljeflatefs .moteplan_content ol {
+    /* Nullstillar nettleser-styling av liste */
+    margin: 0;
+    padding: 0;
 }
-.veilarbportefoljeflatefs .moteplan_content > div:last-child {
-    /* Om eit møte er siste elementet i lista legg vi til litt luft under det
-     * så det er tydeleg for brukaren at dei kan sjå alle elementa. */
+.veilarbportefoljeflatefs .moteplan_content li {
+    list-style-type: none; /* Nullstillar nettleserstyling av listeelement */
+    margin-bottom: 0.5rem;
+}
+.veilarbportefoljeflatefs .moteplan_content li:last-child {
+    margin-bottom: 0;
+}
+.veilarbportefoljeflatefs .moteplan_content ol:last-child {
     margin-bottom: 2rem;
 }
 .veilarbportefoljeflatefs .moteplan_tittel {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
     margin-left: 0.75rem;
 }
 .veilarbportefoljeflatefs .moteplan_tabell_tittelrad th {

diff --git a/src/minoversikt/moteplan/moteplan.tsx b/src/minoversikt/moteplan/moteplan.tsx
@@ -60,7 +60,7 @@ function Moteplan({veileder, enhet}: MoteplanProps) {
                 onClose={() => setErOpen(false)}
                 anchorEl={buttonRef.current}
                 /* Placement kan bli "left-start" igjen når vi oppdaterer @navikt/ds-react til nyare enn v5.6.5
-                 * og kan ta i bruk "flip"-prop. */
+                 * og kan ta i bruk "flip"-prop. - Ingrid, 2024-02-22 */
                 placement="bottom"
             >
                 <Popover.Content className="moteplan_content">
@@ -73,9 +73,11 @@ function Moteplan({veileder, enhet}: MoteplanProps) {
                             Ingen møter
                         </Alert>
                     ) : (
-                        dager
-                            .slice(0, maxAntallDager)
-                            .map((dag, key) => <MoteTabell dato={dag} moter={moter} enhetId={enhet} key={key} />)
+                        <ol>
+                            {dager.slice(0, maxAntallDager).map((dag, key) => (
+                                <MoteTabell dato={dag} moter={moter} enhetId={enhet} key={key} />
+                            ))}
+                        </ol>
                     )}
                     <SeFlereMoterKnapp
                         cssId={'seFlereMoterKnapp'}

diff --git a/src/minoversikt/moteplan/motetabell.tsx b/src/minoversikt/moteplan/motetabell.tsx
@@ -12,7 +12,7 @@ interface MoteTabellProps {
 
 function MoteTabell({dato, moter, enhetId}: MoteTabellProps) {
     return (
-        <div>
+        <li>
             <Heading className="moteplan_tittel" size="small" level="2">
                 {dagFraDato(dato)} {dato.getDate()}. {dato.toLocaleString('default', {month: 'long'})}
             </Heading>
@@ -36,7 +36,7 @@ function MoteTabell({dato, moter, enhetId}: MoteTabellProps) {
                         moter.map((mote, key) => <MoteKollonne dato={dato} mote={mote} enhetId={enhetId} key={key} />)}
                 </Table.Body>
             </Table>
-        </div>
+        </li>
     );
 }