Make details expandable in list view

2 files changed, 30 insertions, 2 deletions

diff --git a/src/components/ObjectComponent.js b/src/components/ObjectComponent.js
index 9650c86..2255585 100644
--- a/src/components/ObjectComponent.js
+++ b/src/components/ObjectComponent.js
@@ -1,7 +1,11 @@
 import React from "react";
 
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
 import Alert from "@mui/material/Alert";
 import Card from "@mui/material/Card";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 class ObjectComponent extends React.Component {
     render() {
@@ -42,14 +46,14 @@ class ObjectComponent extends React.Component {
                         </tr>
                     </tbody>
                 </table>
-                {!this.props.summary && <Details {...this.props} />}
+                <Details {...this.props} />
             </Card>
         );
     }
 }
 
 function Details(props) {
-    return (
+    let content = (
         <>
             {props.user_presentation.description && (
                 <Alert severity="info" sx={{ marginTop: "1em" }}>
@@ -62,6 +66,19 @@ function Details(props) {
             />
         </>
     );
+    if (props.summary) {
+        return (
+            <div>
+                <Accordion elevation={0} disableGutters={true}>
+                    <AccordionSummary
+                        expandIcon={<ExpandMoreIcon fontSize="small" />}
+                    ></AccordionSummary>
+                    <AccordionDetails>{content}</AccordionDetails>
+                </Accordion>
+            </div>
+        );
+    }
+    return content;
 }
 
 function UserPresentation(props) {
diff --git a/src/styles/main.css b/src/styles/main.css
index 8cd5431..44e24cd 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -57,6 +57,17 @@ a:visited {
     padding-right: 2em;
 }
 
+.object .MuiAccordionSummary-content {
+    display: none !important;
+}
+
+.object .MuiAccordion-root {
+    margin-top: 2em !important;
+}
+
+.object .MuiAccordionSummary-root {
+}
+
 /* List */
 
 #list-container > #controls {