multiple changes

ValentinKolb · Oct 19, 2023 · 08f719d · 08f719d
1 parent d47448f
commit 08f719d
Show file tree

Hide file tree

Showing 30 changed files with 822 additions and 527 deletions.
diff --git a/src/components/FieldLink/index.module.css b/src/components/FieldLink/index.module.css
@@ -1,8 +1,24 @@
 .container {
+    position: relative;
+    display: flex;
+    width: 100%;
+
+    &[data-scrollable="true"] {
+        max-height: 100%;
+        min-height: 0;
+    }
+}
+
+.link {
     border: 1px solid var(--mantine-color-gray-3);
     border-radius: var(--mantine-radius-sm);
     padding: var(--mantine-spacing-md);
-    position: relative;
+    display: block;
+    width: 100%;
+
+    &[data-scrollable="true"] {
+        overflow-y: auto;
+    }
 }
 
 .legend {
@@ -11,15 +27,20 @@
     position: absolute;
     top: calc(-0.5 * var(--legend-font-size));
     left: var(--mantine-spacing-lg);
+
     background-color: var(--mantine-color-body);
+    box-shadow: 0 0 5px var(--mantine-color-body);
+
     font-weight: 500;
     font-size: var(--legend-font-size);
     line-height: 1;
     color: var(--mantine-color-dimmed);
 
+    z-index: 10;
+
     & > svg {
         vertical-align: bottom;
         height: var(--legend-font-size);
         width: var(--legend-font-size);
     }
-}
+}
diff --git a/src/components/FieldLink/index.tsx b/src/components/FieldLink/index.tsx
@@ -4,18 +4,57 @@ import classes from "./index.module.css";
 import {IconChevronRight} from "@tabler/icons-react";
 import {CustomLink} from "../layout/Navigation/Custom/CustomLink.tsx";
 
-export default function FieldLink({children, ariaLabel, legend, ...props}: {
+export default function FieldLink({
+                                      children,
+                                      ariaLabel,
+                                      legend,
+                                      scrollable,
+                                      ...props
+                                  }: {
     legend: string
+    scrollable?: boolean
     children: ReactNode
     ariaLabel?: string
 } & LinkProps) {
-    return <CustomLink aria-label={ariaLabel || legend} {...props}>
-        <div className={classes.container}>
+
+    return (
+        <div className={classes.container} data-scrollable={scrollable}>
+
             <div className={classes.legend}>
                 {legend}
                 <IconChevronRight/>
             </div>
-            {children}
+
+            <CustomLink
+                aria-label={ariaLabel || legend} {...props}
+                className={`${classes.link}`}
+                data-scrollable={scrollable}
+            >
+                {children}
+            </CustomLink>
+        </div>
+    )
+}
+
+export function FieldDiv({children, legend, scrollable}: {
+    legend: string
+    children: ReactNode
+    scrollable?: boolean
+}) {
+    return (
+        <div className={classes.container} data-scrollable={scrollable}>
+
+            <div className={classes.legend}>
+                {legend}
+            </div>
+
+            <div
+                aria-label={legend}
+                className={`${classes.link}`}
+                data-scrollable={scrollable}
+            >
+                {children}
+            </div>
         </div>
-    </CustomLink>
+    )
 }
diff --git a/src/components/layout/Navigation/ActionSearch/index.module.css b/src/components/layout/Navigation/ActionSearch/index.module.css
@@ -25,3 +25,42 @@
         display: none;
     }
 }
+
+.group {
+    display: flex;
+    align-items: center;
+    gap: var(--mantine-spacing-xs);
+}
+
+.searchResultContainer {
+    display: flex;
+    align-items: center;
+    gap: var(--mantine-spacing-xs);
+    max-width: 100%;
+}
+
+.searchResult {
+    min-width: 0;
+    max-width: 100%;
+
+    & > * {
+        font-size: var(--mantine-font-size-md) !important;
+        font-weight: 400;
+        color: var(--mantine-color-dimmed);
+    }
+}
+
+.actionList {
+
+    & > * {
+        max-width: 100% !important;
+
+        & > * {
+            & > * {
+                & > * {
+                    display: block !important;
+                }
+            }
+        }
+    }
+}