static site frontend for mapped.at mapped.at
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve details view

+29 -3
+21 -3
script.js
··· 394 394 395 395 const card = document.createElement('activity-card'); 396 396 card.post = post; 397 + card.hideLink = true; 397 398 shadow.querySelector('.detail-page').appendChild(card); 398 399 } 399 400 } ··· 406 407 // container.appendChild(el); 407 408 class ActivityCard extends HTMLElement { 408 409 set post(value) { this._post = value; } 410 + set hideLink(value) { this._hideLink = value; } 409 411 410 412 connectedCallback() { 411 413 const shadow = this.attachShadow({ mode: 'open' }); ··· 464 466 ${showElevation ? `<span>📈 ${post.stats.elevation}m elev</span>` : ''} 465 467 <span>📍 ${post.location?.name ?? '—'}</span> 466 468 </div> 467 - <a class="view-link" href="?view=post&id=${post.rkey}">View post →</a> 469 + ${!this._hideLink ? `<a class="view-link" href="?view=post&id=${post.rkey}">View post →</a>` : ''} 468 470 </div> 469 471 </div> 470 472 `; ··· 494 496 </div> 495 497 </div> 496 498 <p class="caption">${post.text ?? 'No description'}</p> 497 - <a class="view-link" href="?view=post&id=${post.rkey}">View post →</a> 499 + ${!this._hideLink ? `<a class="view-link" href="?view=post&id=${post.rkey}">View post →</a>` : ''} 498 500 </div> 499 501 </div> 500 502 `; ··· 641 643 const card = document.createElement('trail-card'); 642 644 card.trail = trail; 643 645 card.trailKey = trail.rkey; 646 + card.hideLink = true; 644 647 shadow.querySelector('.detail-page').appendChild(card); 648 + 649 + const relatedPosts = data.posts.filter(p => p.trail?.rkey === this._trailId); 650 + if (relatedPosts.length > 0) { 651 + const heading = document.createElement('h3'); 652 + heading.className = 'detail-section-heading'; 653 + heading.textContent = 'Posts on this trail'; 654 + shadow.querySelector('.detail-page').appendChild(heading); 655 + 656 + for (const post of relatedPosts) { 657 + const postCard = document.createElement('activity-card'); 658 + postCard.post = post; 659 + shadow.querySelector('.detail-page').appendChild(postCard); 660 + } 661 + } 645 662 } 646 663 } 647 664 ··· 655 672 set trailKey(value) { 656 673 this._trailKey = value; 657 674 } 675 + set hideLink(value) { this._hideLink = value; } 658 676 659 677 connectedCallback() { 660 678 this._render(); ··· 682 700 <div class="trail-map"></div> 683 701 <div class="card-body"> 684 702 <div class="trail-info"> 685 - <a class="view-link" href="?view=trail&id=${this._trailKey}">View trail →</a> 703 + ${!this._hideLink ? `<a class="view-link" href="?view=trail&id=${this._trailKey}">View trail →</a>` : ''} 686 704 </div> 687 705 </div> 688 706 </div>
+8
styles.css
··· 716 716 margin-top: 2rem; 717 717 } 718 718 719 + .detail-section-heading { 720 + font-size: 0.95rem; 721 + font-weight: 600; 722 + color: var(--color-text-secondary, #666); 723 + margin: 1.5rem 0 0.75rem; 724 + padding: 0; 725 + } 726 + 719 727 /* ── Card view links ──────────────────────────────────────────── */ 720 728 .view-link { 721 729 display: inline-block;