improve touristic content

GeotrekCE · Nov 14, 2023 · 5f5283f · 5f5283f
1 parent 554b431
commit 5f5283f
Show file tree

Hide file tree

Showing 21 changed files with 876 additions and 81 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -90,6 +90,22 @@ export namespace Components {
     interface GrwTouristicContent {
         "touristicContent": TouristicContent;
     }
+    interface GrwTouristicContentDetail {
+        "colorBackground": string;
+        "colorOnPrimaryContainer": string;
+        "colorOnSecondaryContainer": string;
+        "colorOnSurface": string;
+        "colorPrimaryApp": string;
+        "colorPrimaryContainer": string;
+        "colorSecondaryContainer": string;
+        "colorSurfaceContainerLow": string;
+        "isLargeView": boolean;
+    }
+    interface GrwTouristicContentProvider {
+        "api": string;
+        "languages": string;
+        "touristicContentId": string;
+    }
     interface GrwTrekCard {
         "colorOnSecondaryContainer": string;
         "colorOnSurface": string;
@@ -154,6 +170,10 @@ export interface GrwMapCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLGrwMapElement;
 }
+export interface GrwTouristicContentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLGrwTouristicContentElement;
+}
 export interface GrwTrekCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLGrwTrekCardElement;
@@ -223,6 +243,18 @@ declare global {
         prototype: HTMLGrwTouristicContentElement;
         new (): HTMLGrwTouristicContentElement;
     };
+    interface HTMLGrwTouristicContentDetailElement extends Components.GrwTouristicContentDetail, HTMLStencilElement {
+    }
+    var HTMLGrwTouristicContentDetailElement: {
+        prototype: HTMLGrwTouristicContentDetailElement;
+        new (): HTMLGrwTouristicContentDetailElement;
+    };
+    interface HTMLGrwTouristicContentProviderElement extends Components.GrwTouristicContentProvider, HTMLStencilElement {
+    }
+    var HTMLGrwTouristicContentProviderElement: {
+        prototype: HTMLGrwTouristicContentProviderElement;
+        new (): HTMLGrwTouristicContentProviderElement;
+    };
     interface HTMLGrwTrekCardElement extends Components.GrwTrekCard, HTMLStencilElement {
     }
     var HTMLGrwTrekCardElement: {
@@ -264,6 +296,8 @@ declare global {
         "grw-select-language": HTMLGrwSelectLanguageElement;
         "grw-sensitive-area-detail": HTMLGrwSensitiveAreaDetailElement;
         "grw-touristic-content": HTMLGrwTouristicContentElement;
+        "grw-touristic-content-detail": HTMLGrwTouristicContentDetailElement;
+        "grw-touristic-content-provider": HTMLGrwTouristicContentProviderElement;
         "grw-trek-card": HTMLGrwTrekCardElement;
         "grw-trek-detail": HTMLGrwTrekDetailElement;
         "grw-trek-provider": HTMLGrwTrekProviderElement;
@@ -355,8 +389,25 @@ declare namespace LocalJSX {
         "sensitiveArea"?: SensitiveArea;
     }
     interface GrwTouristicContent {
+        "onTouristicContentCardPress"?: (event: GrwTouristicContentCustomEvent<number>) => void;
         "touristicContent"?: TouristicContent;
     }
+    interface GrwTouristicContentDetail {
+        "colorBackground"?: string;
+        "colorOnPrimaryContainer"?: string;
+        "colorOnSecondaryContainer"?: string;
+        "colorOnSurface"?: string;
+        "colorPrimaryApp"?: string;
+        "colorPrimaryContainer"?: string;
+        "colorSecondaryContainer"?: string;
+        "colorSurfaceContainerLow"?: string;
+        "isLargeView"?: boolean;
+    }
+    interface GrwTouristicContentProvider {
+        "api"?: string;
+        "languages"?: string;
+        "touristicContentId"?: string;
+    }
     interface GrwTrekCard {
         "colorOnSecondaryContainer"?: string;
         "colorOnSurface"?: string;
@@ -430,6 +481,8 @@ declare namespace LocalJSX {
         "grw-select-language": GrwSelectLanguage;
         "grw-sensitive-area-detail": GrwSensitiveAreaDetail;
         "grw-touristic-content": GrwTouristicContent;
+        "grw-touristic-content-detail": GrwTouristicContentDetail;
+        "grw-touristic-content-provider": GrwTouristicContentProvider;
         "grw-trek-card": GrwTrekCard;
         "grw-trek-detail": GrwTrekDetail;
         "grw-trek-provider": GrwTrekProvider;
@@ -451,6 +504,8 @@ declare module "@stencil/core" {
             "grw-select-language": LocalJSX.GrwSelectLanguage & JSXBase.HTMLAttributes<HTMLGrwSelectLanguageElement>;
             "grw-sensitive-area-detail": LocalJSX.GrwSensitiveAreaDetail & JSXBase.HTMLAttributes<HTMLGrwSensitiveAreaDetailElement>;
             "grw-touristic-content": LocalJSX.GrwTouristicContent & JSXBase.HTMLAttributes<HTMLGrwTouristicContentElement>;
+            "grw-touristic-content-detail": LocalJSX.GrwTouristicContentDetail & JSXBase.HTMLAttributes<HTMLGrwTouristicContentDetailElement>;
+            "grw-touristic-content-provider": LocalJSX.GrwTouristicContentProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicContentProviderElement>;
             "grw-trek-card": LocalJSX.GrwTrekCard & JSXBase.HTMLAttributes<HTMLGrwTrekCardElement>;
             "grw-trek-detail": LocalJSX.GrwTrekDetail & JSXBase.HTMLAttributes<HTMLGrwTrekDetailElement>;
             "grw-trek-provider": LocalJSX.GrwTrekProvider & JSXBase.HTMLAttributes<HTMLGrwTrekProviderElement>;

diff --git a/src/components/grw-app/grw-app.scss b/src/components/grw-app/grw-app.scss
@@ -145,8 +145,10 @@ grw-app {
 
 .app-treks-list-container,
 .app-trek-detail-container,
+.app-touristic-content-detail-container,
 .large-view-app-treks-list-container,
 .large-view-app-trek-detail-container {
+  max-width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -204,7 +206,8 @@ grw-app {
   width: 100%;
 }
 
-grw-treks-list {
+grw-treks-list,
+grw-touristic-content-detail {
   max-height: calc(100vh - 64px);
 }
 
@@ -222,7 +225,8 @@ grw-trek-detail {
 }
 
 .large-view-app-treks-list-container,
-.large-view-app-trek-detail-container {
+.large-view-app-trek-detail-container,
+.large-view-app-touristic-content-detail-container {
   width: 50%;
 }