Improve ove styling

src/packages/react-utils/TitledSection.tsx

@@ -18,6 +18,13 @@ export interface TitledSectionProps {
      */
     title?: string | ReactNode | undefined;
 
+    /**
+     * Properties for the automatically generated section heading.
+     *
+     * NOTE: This is only applied if `title` is a string.
+     */
+    sectionHeadingProps?: SectionHeadingProps | undefined;
+
     /**
      * Children are rendered without any modifications.
      */
@@ -68,9 +75,14 @@ export interface TitledSectionProps {
  * ```
  */
 export function TitledSection(props: TitledSectionProps): JSX.Element {
-    const { title, children } = props;
+    const { title, sectionHeadingProps, children } = props;
     const currentLevel = useContext(LevelContext);
-    const heading = typeof title === "string" ? <SectionHeading>{title}</SectionHeading> : title;
+    const heading =
+        typeof title === "string" ? (
+            <SectionHeading {...sectionHeadingProps}>{title}</SectionHeading>
+        ) : (
+            title
+        );
 
     return (
         <>

src/samples/showcase/showcase-app/build.config.mjs

@@ -4,6 +4,7 @@ import { defineBuildConfig } from "@open-pioneer/build-support";
 
 export default defineBuildConfig({
     i18n: ["en", "de"],
+    styles: "./styles.scss",
     services: {
         MapConfigProviderImpl: {
             provides: ["map.MapConfigProvider"],

src/samples/showcase/showcase-app/demos/TocLegendDemo.tsx

@@ -16,8 +16,11 @@ export function createTocAndLegendDemo({ intl, mapModel }: SharedDemoOptions): D
         title: intl.formatMessage({ id: "demos.tocLegend.title" }),
         createModel() {
             function setDemoLayerVisible(visible: boolean = true): void {
-                const layer = mapModel.layers.getLayerById("verwaltungsgebiete") as Layer;
-                layer.setVisible(visible);
+                const layer1 = mapModel.layers.getLayerById("verwaltungsgebiete") as Layer;
+                layer1.setVisible(visible);
+
+                const layer2 = mapModel.layers.getLayerById("krankenhaus") as Layer;
+                layer2.setVisible(visible);
             }
             function resetDemoLayers(): void {
                 setDemoLayerVisible(false);
@@ -51,19 +54,16 @@ function TocLegendView() {
                         </SectionHeading>
                     }
                 >
-                    {/*todo responsive design*/}
-                    <Box overflowY="auto" maxHeight={200}>
-                        <Toc
-                            mapId={MAP_ID}
-                            showTools={true}
-                            basemapSwitcherProps={{
-                                allowSelectingEmptyBasemap: true
-                            }}
-                        />
-                    </Box>
+                    <Toc
+                        mapId={MAP_ID}
+                        showTools={true}
+                        basemapSwitcherProps={{
+                            allowSelectingEmptyBasemap: true
+                        }}
+                    />
                 </TitledSection>
             </Box>
-            <Box role="dialog" aria-labelledby={legendTitleId}>
+            <Box pt={2} role="dialog" aria-labelledby={legendTitleId}>
                 <TitledSection
                     title={
                         <SectionHeading id={legendTitleId} size="md" mb={2}>
@@ -73,10 +73,7 @@ function TocLegendView() {
                         </SectionHeading>
                     }
                 >
-                    {/*todo responsive design*/}
-                    <Box overflowY="auto" maxHeight={300}>
-                        <Legend mapId={MAP_ID} showBaseLayers={true} />
-                    </Box>
+                    <Legend mapId={MAP_ID} showBaseLayers={true} />
                 </TitledSection>
             </Box>
         </>

src/samples/showcase/showcase-app/i18n/de.yaml

@@ -1,8 +1,10 @@
 messages:
   header:
     title: Component Showcase
-  # NOTE: 'description' supports arbitrary HTML!
+  ariaLabels:
+    map: "Karte. Mit den Pfeiltasten kannst du die Karte bewegen. Mit der Plus Taste hineinzoomen und mit der Minus Taste herauszoomen."
   demos:
+    # NOTE: 'description' supports arbitrary HTML!
     geolocation:
       title: Geolocation
       description: Diese Demo zeigt, wie das <code>Geolocation</code>-Tool verwendet werden kann, um die aktuelle Position des Geräts zu erhalten.

src/samples/showcase/showcase-app/i18n/en.yaml

@@ -1,8 +1,10 @@
 messages:
   header:
     title: Component Showcase
-  # NOTE: 'description' supports arbitrary HTML!
+  ariaLabels:
+    map: "Map. Use the arrow keys to move the map. Zoom in with the plus button and zoom out with the minus button."
   demos:
+  # NOTE: 'description' supports arbitrary HTML!
     geolocation:
       title: Geolocation
       description: This demo shows how to use the <code>Geolocation</code> tool to get the current position of the device.

src/samples/showcase/showcase-app/styles.scss

@@ -0,0 +1,15 @@
+.map-anchor.main-map-anchor {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.map-container:focus-visible {
+    border: 3px solid var(--chakra-colors-trails-500);
+    outline: none;
+}
+
+@media screen and (max-width: 48em) {
+    .map-anchor.main-map-anchor {
+        max-height: 45%;    
+    }    
+}

src/samples/showcase/showcase-app/ui/AppUI.tsx

@@ -5,7 +5,7 @@ import { MapAnchor, MapContainer } from "@open-pioneer/map";
 import { Notifier } from "@open-pioneer/notifier";
 import { TitledSection } from "@open-pioneer/react-utils";
 import { useReactiveSnapshot } from "@open-pioneer/reactivity";
-import { useService } from "open-pioneer:react-hooks";
+import { useIntl, useService } from "open-pioneer:react-hooks";
 import { ReactNode } from "react";
 import { MAP_ID } from "../MapConfigProviderImpl";
 import { AppInitModel, AppStateReady } from "../model/AppInitModel";
@@ -31,6 +31,7 @@ export function AppUI() {
 }
 
 function AppContent(props: { state: AppStateReady }) {
+    const intl = useIntl();
     const appModel = props.state.appModel;
     const { currentDemo, currentDemoModel } = useReactiveSnapshot(
         () => ({
@@ -53,12 +54,21 @@ function AppContent(props: { state: AppStateReady }) {
                         <MapContainer
                             mapId={MAP_ID}
                             role="main"
-                            /* TODO: aria-label={intl.formatMessage({ id: "ariaLabel.map" })} */
+                            aria-label={intl.formatMessage({ id: "ariaLabels.map" })}
                         >
-                            <MapAnchor position="top-left" horizontalGap={10}>
-                                <Box bgColor="whiteAlpha.800">
-                                    <TitledSection title={currentDemo.title}>
+                            <MapAnchor
+                                className="main-map-anchor"
+                                position="top-left"
+                                horizontalGap={10}
+                                verticalGap={10}
+                            >
+                                <Box bgColor="white" borderRadius={10} p={2} maxW="500px">
+                                    <TitledSection
+                                        title={currentDemo.title}
+                                        sectionHeadingProps={{ size: "lg" }}
+                                    >
                                         <Text
+                                            py={4}
                                             dangerouslySetInnerHTML={{
                                                 __html: currentDemoModel.description
                                             }}