job: accordion -> details

ceph · Sep 27, 2024 · deeffad · deeffad
1 parent 9a533ff
commit deeffad
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/src/pages/+Layout.css b/src/pages/+Layout.css
@@ -125,6 +125,22 @@ body {
   }
 }
 
+/* Accordion */
+details {
+  background-color: var(--mui-palette-background-paper);
+  border-radius: var(--mui-shape-borderRadius);
+  padding: calc(var(--mui-spacing) * 2);
+
+  summary * {
+    display: inline-block;
+  }
+
+}
+
+details>div {
+  margin-top: calc(var(--mui-spacing) * 2);
+}
+
 [data-mui-color-scheme="dark"] {
 
   /* @media (prefers-color-scheme: dark) { */

diff --git a/src/pages/runs/@name/jobs/@id/+Page.tsx b/src/pages/runs/@name/jobs/@id/+Page.tsx
@@ -1,12 +1,8 @@
 import { useData } from 'vike-react/useData'
 import Grid from '@mui/material/Grid2';
 import Typography from "@mui/material/Typography";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import FolderIcon from '@mui/icons-material/Folder';
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
@@ -166,17 +162,14 @@ export default function Job() {
       </Helmet>
       <JobHeader data={data} />
       <Grid size={12}>
-        <Accordion
-          TransitionProps={{ unmountOnExit: true }}
+        <details
           style={{ marginTop: "20px" }}
         >
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <summary>
             <Typography>Full job details</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
+          </summary>
             <JobDetails data={data} />
-          </AccordionDetails>
-        </Accordion>
+        </details>
       </Grid>
     </Grid>
   );