@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.4

package/dist/collection/components/grw-trek-card/grw-trek-card.css

@@ -1,66 +1,103 @@
-.trek-card-container {
-  width: 350px;
-  height: auto;
+.trek-card-container,
+.trek-card-large-view-container {
+  font-family: "Roboto";
   border-radius: 8px;
   box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
   cursor: pointer;
 }
-.trek-card-container .image {
-  width: 100%;
-  height: auto;
+.trek-card-container .image,
+.trek-card-large-view-container .image {
+  object-fit: cover;
 }
-.trek-card-container .sub-container {
+.trek-card-container .sub-container,
+.trek-card-large-view-container .sub-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   padding: 12px;
 }
-.trek-card-container .sub-container .name {
+.trek-card-container .sub-container .name,
+.trek-card-large-view-container .sub-container .name {
   color: var(--color-primary);
   font-size: 24px;
   font-weight: bold;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
-.trek-card-container .sub-container .description {
-  max-height: 24px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: 12px;
+.trek-card-container .sub-container .departure,
+.trek-card-large-view-container .sub-container .departure {
+  color: rgba(0, 0, 0, 0.7);
+  font-size: 16px;
+  margin: 4px 0px;
+}
+.trek-card-container .sub-container .themes-container,
+.trek-card-large-view-container .sub-container .themes-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
 }
-.trek-card-container .sub-container .description p {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
+.trek-card-container .sub-container .themes-container .theme,
+.trek-card-large-view-container .sub-container .themes-container .theme {
+  background-color: var(--color-primary-tint);
+  color: #ffffff;
+  border-radius: 8px;
+  padding: 8px;
+  margin: 0px 8px 8px 0px;
 }
-.trek-card-container .sub-container .icons-labels-container {
+.trek-card-container .sub-container .icons-labels-container,
+.trek-card-large-view-container .sub-container .icons-labels-container {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
 }
-.trek-card-container .sub-container .icons-labels-container .row {
+.trek-card-container .sub-container .icons-labels-container .row,
+.trek-card-large-view-container .sub-container .icons-labels-container .row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
-.trek-card-container .sub-container .icons-labels-container .row:not(:last-child) {
+.trek-card-container .sub-container .icons-labels-container .row:not(:last-child),
+.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child) {
   margin-bottom: 12px;
 }
-.trek-card-container .sub-container .icons-labels-container .row .icon-label {
+.trek-card-container .sub-container .icons-labels-container .row .icon-label,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label {
   display: flex;
-  justify-content: center;
   align-items: center;
-  width: 33.3333333333%;
+  width: 50%;
 }
-.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2) {
+.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label:nth-child(2) {
   margin: 0px 4px;
 }
 .trek-card-container .sub-container .icons-labels-container .row .icon-label img,
-.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg {
+.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg {
   width: 24px;
   height: auto;
-  margin-right: 24px;
+  margin-right: 8px;
 }
-.trek-card-container .sub-container .icons-labels-container .row .practice img {
+.trek-card-container .sub-container .icons-labels-container .row .practice img,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img {
   background-color: var(--color-primary);
+}
+
+.trek-card-container {
+  width: 350px;
+  height: auto;
+}
+.trek-card-container .image {
+  width: 100%;
+}
+
+.trek-card-large-view-container {
+  height: auto;
+  display: flex;
+  flex-direction: row;
+}
+.trek-card-large-view-container .image {
+  width: 250px;
 }

package/dist/collection/components/grw-trek-card/grw-trek-card.js

@@ -1,45 +1,63 @@
-import { Component, Host, h, Prop, Event } from '@stencil/core';
-import state from 'store/store';
+import { Component, Host, h, Prop, Event, State } from '@stencil/core';
+import state, { onChange } from 'store/store';
 import { formatDuration, formatLength, formatAscent } from 'utils/utils';
 import ascentImage from '../../assets/ascent.svg';
 import durationImage from '../../assets/duration.svg';
 import lengthImage from '../../assets/length.svg';
 export class GrwTrekCard {
+  constructor() {
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
+  }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
-    this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
-    this.route = state.routes.find(route => route.id === this.currentTrek.route);
-    this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+    if (this.currentTrek) {
+      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+      this.route = state.routes.find(route => route.id === this.currentTrek.route);
+      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
+    }
+    onChange('currentTrek', () => {
+      this.currentTrek = this.trek ? this.trek : state.currentTrek;
+      if (this.currentTrek) {
+        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+        this.route = state.routes.find(route => route.id === this.currentTrek.route);
+        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
+      }
+    });
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id) },
-      h("div", { class: "trek-card-container" },
-        this.currentTrek.attachments[0] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, loading: "lazy" }),
-        h("div", { class: "sub-container" },
-          h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name),
-          h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }),
-          h("div", { class: "icons-labels-container" },
-            h("div", { class: "row" },
-              h("div", { class: "icon-label difficulty" },
-                ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
-                _d.label),
-              h("div", { class: "icon-label duration" },
-                h("div", { class: "svg-icon", innerHTML: durationImage }),
-                formatDuration(this.currentTrek.duration)),
-              h("div", { class: "icon-label route" },
-                ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
-                _f.route)),
-            h("div", { class: "row" },
-              h("div", { class: "icon-label length" },
-                h("div", { class: "svg-icon", innerHTML: lengthImage }),
-                formatLength(this.currentTrek.length_2d)),
-              h("div", { class: "icon-label ascent" },
-                h("div", { class: "svg-icon", innerHTML: ascentImage }),
-                formatAscent(this.currentTrek.ascent)),
-              h("div", { class: "icon-label practice" },
-                ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
-                _h.name)))))));
+    return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { 'width': this.isLargeView ? '100%' : 'auto', '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container' },
+      this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: `${this.currentTrek.attachments[0].thumbnail}`, loading: "lazy" })),
+      h("div", { class: "sub-container" },
+        h("div", { class: "departure" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.departure),
+        h("div", { class: "name" }, (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.name),
+        h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label)))),
+        h("div", { class: "icons-labels-container" },
+          h("div", { class: "row" },
+            h("div", { class: "icon-label difficulty" },
+              ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
+              _d.label),
+            h("div", { class: "icon-label duration" },
+              h("div", { class: "svg-icon", innerHTML: durationImage }),
+              formatDuration(this.currentTrek.duration))),
+          h("div", { class: "row" },
+            h("div", { class: "icon-label length" },
+              h("div", { class: "svg-icon", innerHTML: lengthImage }),
+              formatLength(this.currentTrek.length_2d)),
+            h("div", { class: "icon-label ascent" },
+              h("div", { class: "svg-icon", innerHTML: ascentImage }),
+              formatAscent(this.currentTrek.ascent))),
+          h("div", { class: "row" },
+            h("div", { class: "icon-label route" },
+              ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
+              _f.route),
+            h("div", { class: "icon-label practice" },
+              ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
+              _h.name))))))));
   }
   static get is() { return "grw-trek-card"; }
   static get encapsulation() { return "shadow"; }
@@ -55,7 +73,7 @@ export class GrwTrekCard {
       "mutable": false,
       "complexType": {
         "original": "Trek",
-        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; duration: number; length_2d: number; ascent: number; geometry?: LineString; departure_geom?: Position; }",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; }",
         "references": {
           "Trek": {
             "location": "import",
@@ -69,8 +87,69 @@ export class GrwTrekCard {
         "tags": [],
         "text": ""
       }
+    },
+    "colorPrimary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorPrimaryTint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-tint",
+      "reflect": false,
+      "defaultValue": "'#974c6e'"
+    },
+    "isLargeView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-large-view",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "currentTrek": {},
+    "difficulty": {},
+    "route": {},
+    "practice": {},
+    "themes": {}
+  }; }
   static get events() { return [{
       "method": "trekCardPress",
       "name": "trekCardPress",

package/dist/collection/components/grw-trek-detail/grw-trek-detail.css

@@ -1,7 +1,8 @@
 .trek-detail-container {
+  font-family: "Roboto";
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 64px);
+  height: 100%;
   overflow-y: auto;
 }
 .trek-detail-container .name {
@@ -11,6 +12,7 @@
   padding: 24px;
 }
 .trek-detail-container .image {
+  border-radius: 8px;
   align-self: center;
   width: 100%;
   max-width: 700px;
@@ -53,6 +55,39 @@
 .trek-detail-container .sub-container .icons-labels-container .row .practice img {
   background-color: var(--color-primary);
 }
+.trek-detail-container .downloads-container {
+  padding: 0px 24px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.trek-detail-container .downloads-container .download-title {
+  color: var(--color-primary);
+  font-size: 18px;
+  margin-bottom: 18px;
+}
+.trek-detail-container .downloads-container .links-container a {
+  background-color: var(--color-primary);
+  padding: 8px;
+  color: #ffffff;
+  text-decoration: none;
+  border-radius: 8px;
+}
+.trek-detail-container .downloads-container .links-container a:nth-child(2) {
+  margin: 0px 12px;
+}
+.trek-detail-container .downloads-container .links-container a:hover {
+  background-color: var(--color-primary-shade);
+}
 .trek-detail-container .description {
   padding: 0px 24px 24px 24px;
+}
+.trek-detail-container .pois-title,
+.trek-detail-container .sensitive-areas-title,
+.trek-detail-container .information-desks-title {
+  color: var(--color-primary);
+  font-size: 36px;
+  font-weight: bold;
+  padding: 16px;
 }

package/dist/collection/components/grw-trek-detail/grw-trek-detail.js

@@ -1,45 +1,74 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-import state from 'store/store';
+import { Component, Host, h, Prop, State } from '@stencil/core';
+import state, { onChange } from 'store/store';
 import { formatDuration, formatLength, formatAscent } from 'utils/utils';
 import ascentImage from '../../assets/ascent.svg';
 import durationImage from '../../assets/duration.svg';
 import lengthImage from '../../assets/length.svg';
 export class GrwTrekDetail {
+  constructor() {
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryShade = '#4a0021';
+    this.colorPrimaryTint = '#974c6e';
+  }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
-    this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
-    this.route = state.routes.find(route => route.id === this.currentTrek.route);
-    this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+    if (this.currentTrek) {
+      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+      this.route = state.routes.find(route => route.id === this.currentTrek.route);
+      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+    }
+    onChange('currentTrek', () => {
+      this.currentTrek = this.trek ? this.trek : state.currentTrek;
+      if (this.currentTrek) {
+        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+        this.route = state.routes.find(route => route.id === this.currentTrek.route);
+        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+      }
+    });
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    return (h(Host, null,
-      h("div", { class: "trek-detail-container" },
-        h("div", { class: "name" }, this.currentTrek.name),
-        this.currentTrek.attachments[0] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, loading: "lazy" }),
-        h("div", { class: "sub-container" },
-          h("div", { class: "icons-labels-container" },
-            h("div", { class: "row" },
-              h("div", { class: "icon-label difficulty" },
-                ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
-                _b.label),
-              h("div", { class: "icon-label duration" },
-                h("div", { class: "svg-icon", innerHTML: durationImage }),
-                formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)),
-              h("div", { class: "icon-label route" },
-                ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
-                _e.route)),
-            h("div", { class: "row" },
-              h("div", { class: "icon-label length" },
-                h("div", { class: "svg-icon", innerHTML: lengthImage }),
-                formatLength(this.currentTrek.length_2d)),
-              h("div", { class: "icon-label ascent" },
-                h("div", { class: "svg-icon", innerHTML: ascentImage }),
-                formatAscent(this.currentTrek.ascent)),
-              h("div", { class: "icon-label practice" },
-                ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
-                _g.name)))),
-        h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-shade': this.colorPrimaryShade, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-detail-container" },
+      h("div", { class: "name" }, this.currentTrek.name),
+      this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: this.currentTrek.attachments[0].thumbnail, loading: "lazy" })),
+      h("div", { class: "sub-container" },
+        h("div", { class: "icons-labels-container" },
+          h("div", { class: "row" },
+            h("div", { class: "icon-label difficulty" },
+              ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
+              _b.label),
+            h("div", { class: "icon-label duration" },
+              h("div", { class: "svg-icon", innerHTML: durationImage }),
+              formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)),
+            h("div", { class: "icon-label route" },
+              ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
+              _e.route)),
+          h("div", { class: "row" },
+            h("div", { class: "icon-label length" },
+              h("div", { class: "svg-icon", innerHTML: lengthImage }),
+              formatLength(this.currentTrek.length_2d)),
+            h("div", { class: "icon-label ascent" },
+              h("div", { class: "svg-icon", innerHTML: ascentImage }),
+              formatAscent(this.currentTrek.ascent)),
+            h("div", { class: "icon-label practice" },
+              ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
+              _g.name)))),
+      h("div", { class: "downloads-container" },
+        h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"),
+        h("div", { class: "links-container" },
+          h("a", { href: `${this.currentTrek.gpx}` }, "GPX"),
+          h("a", { href: `${this.currentTrek.kml}` }, "KML"),
+          h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))),
+      h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }),
+      state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", { class: "sensitive-areas-container" },
+        h("div", { class: "sensitive-areas-title" }, "Zones sensibles"),
+        state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))),
+      state.currentInformationDesks && state.currentInformationDesks.length > 0 && (h("div", { class: "information-desks-container" },
+        h("div", { class: "information-desks-title" }, "Lieux de renseignement"),
+        state.currentInformationDesks.map(informationDesk => (h("grw-information-desk-detail", { informationDesk: informationDesk }))))),
+      state.currentPois && state.currentPois.length > 0 && (h("div", { class: "pois-container" },
+        h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"),
+        state.currentPois.map(poi => (h("grw-poi-detail", { poi: poi })))))))));
   }
   static get is() { return "grw-trek-detail"; }
   static get encapsulation() { return "shadow"; }
@@ -55,7 +84,7 @@ export class GrwTrekDetail {
       "mutable": false,
       "complexType": {
         "original": "Trek",
-        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; duration: number; length_2d: number; ascent: number; geometry?: LineString; departure_geom?: Position; }",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; }",
         "references": {
           "Trek": {
             "location": "import",
@@ -69,6 +98,66 @@ export class GrwTrekDetail {
         "tags": [],
         "text": ""
       }
+    },
+    "colorPrimary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorPrimaryShade": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-shade",
+      "reflect": false,
+      "defaultValue": "'#4a0021'"
+    },
+    "colorPrimaryTint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-tint",
+      "reflect": false,
+      "defaultValue": "'#974c6e'"
     }
   }; }
+  static get states() { return {
+    "currentTrek": {},
+    "difficulty": {},
+    "route": {},
+    "practice": {}
+  }; }
 }

package/dist/collection/components/grw-treks-list/grw-treks-list.css

@@ -1,19 +1,24 @@
 :host {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  max-height: calc(100vh - 64px);
+  font-family: "Roboto";
+  width: 100%;
+  height: 100%;
+  max-height: 100vh;
   overflow-y: auto;
 }
-@media (min-width: 664px) {
-  :host {
-    justify-content: space-between;
-  }
+
+.current-treks-length {
+  width: 100%;
+  text-align: center;
+  padding: 32px 0px;
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
 }
-@media (min-width: 996px) {
-  :host {
-    justify-content: flex-start;
-  }
+
+.current-treks-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
 }
 
 grw-trek-card {