Wrapped calendar legend in accordions

chrsrns · Jul 29, 2024 · 1048d37 · 1048d37
1 parent 7e0bc27
commit 1048d37
Showing 1 changed file with 23 additions and 14 deletions.
diff --git a/src-frontend-react/src/components/DragAndDropCalendar/index.js b/src-frontend-react/src/components/DragAndDropCalendar/index.js
@@ -9,7 +9,7 @@ import LoadingOverlay from "react-loading-overlay-ts";
 import { RRule, RRuleSet } from "rrule";
 import Select from "react-select";
 import { customFetch } from "../../utils";
-import { Button, Col, Container, Row } from "react-bootstrap";
+import { Button, Col, Container, Row, Accordion } from "react-bootstrap";
 import { PrintModal } from "../PrintModal";
 import { schedule_state, user_type } from "@prisma/client";
 import Cookies from "js-cookie";
@@ -506,19 +506,28 @@ export default function DragAndDropCalendar({ localizer }) {
         />
         <Container className="justify-content-center mb-2">
           <Row>
-            {Object.keys(appointmentsTypesColors).map((key) => (
-              <Col key={key}>
-                <i
-                  className="bi bi-caret-down-fill"
-                  style={{
-                    color: appointmentsTypesColors[key],
-                    fontSize: "2rem",
-                  }}
-                ></i>
-                <br />
-                {key}
-              </Col>
-            ))}
+            <Accordion>
+              <Accordion.Item eventKey="0">
+                <Accordion.Header>Legend</Accordion.Header>
+                <Accordion.Body>
+                  <Row direction="horizontal">
+                    {Object.keys(appointmentsTypesColors).map((key) => (
+                      <Col key={key}>
+                        <i
+                          className="bi bi-caret-down-fill"
+                          style={{
+                            color: appointmentsTypesColors[key],
+                            fontSize: "2rem",
+                          }}
+                        ></i>
+                        <br />
+                        {key}
+                      </Col>
+                    ))}
+                  </Row>
+                </Accordion.Body>
+              </Accordion.Item>
+            </Accordion>
           </Row>
         </Container>
         <CalendarWithDragAndDrop