Various layout and style improvements for place details

app/components/place-details.gjs

@@ -67,6 +67,11 @@ export default class PlaceDetails extends Component {
     return this.place.url || this.tags.website || this.tags['contact:website'];
   }
 
+  get websiteDomain() {
+    const url = new URL(this.website);
+    return url.hostname;
+  }
+
   get openingHours() {
     return this.tags.opening_hours;
   }
@@ -106,6 +111,10 @@ export default class PlaceDetails extends Component {
     return `https://www.openstreetmap.org/${type}/${id}`;
   }
 
+  get gmapsUrl() {
+    return `https://www.google.com/maps/search/?api=1&query=${this.name}&query=${this.place.lat},${this.place.lon}`;
+  }
+
   <template>
     <div class="place-details">
       <h3>{{this.name}}</h3>
@@ -129,6 +138,7 @@ export default class PlaceDetails extends Component {
       </div>
 
       <div class="meta-info">
+
         {{#if this.cuisine}}
           <p>
             <strong>Cuisine:</strong>
@@ -153,7 +163,7 @@ export default class PlaceDetails extends Component {
         {{#if this.website}}
           <p class="content-with-icon">
             <Icon @name="globe" @title="Website" />
-            <span><a href={{this.website}} target="_blank" rel="noopener noreferrer">Website</a></span>
+            <span><a href={{this.website}} target="_blank" rel="noopener noreferrer">{{this.websiteDomain}}</a></span>
           </p>
         {{/if}}
 
@@ -164,7 +174,8 @@ export default class PlaceDetails extends Component {
           </p>
         {{/if}}
 
-        <hr class="meta-divider">
+      </div>
+      <div class="meta-info">
 
         {{#if this.address}}
           <p class="content-with-icon">
@@ -192,6 +203,16 @@ export default class PlaceDetails extends Component {
             </span>
           </p>
         {{/if}}
+
+        <p class="content-with-icon">
+          <Icon @name="map" @title="OSM ID" />
+          <span>
+            <a href={{this.gmapsUrl}} target="_blank" rel="noopener noreferrer">
+              Google Maps
+            </a>
+          </span>
+        </p>
+
       </div>
     </div>
   </template>

app/components/places-sidebar.gjs

@@ -124,7 +124,6 @@ export default class PlacesSidebar extends Component {
             class="back-btn"
             {{on "click" this.clearSelection}}
           >←</button>
-          <h2>Details</h2>
         {{else}}
           <h2>Nearby Places</h2>
         {{/if}}

app/styles/app.css

@@ -97,6 +97,10 @@ body {
 .place-details .place-description {
 }
 
+.place-details .actions {
+  padding-bottom: 0.3rem;
+}
+
 .btn-primary {
   background: #007bff;
   color: white;
@@ -149,13 +153,16 @@ body {
 }
 
 .meta-info {
-  margin-top: 1.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid #eee;
   font-size: 0.9rem;
   text-align: left;
 }
 
+.meta-info p:first-child {
+  margin-top: 1.2rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid #eee;
+}
+
 .meta-info p {
   margin: 0.75rem 0;
   line-height: 1.4;
@@ -169,18 +176,13 @@ body {
 .meta-info a {
   color: #007bff;
   text-decoration: none;
+  padding-bottom: 4rem;
 }
 
 .meta-info a:hover {
   text-decoration: underline;
 }
 
-.meta-divider {
-  border: 0;
-  border-top: 1px dashed #ddd;
-  margin: 1rem 0;
-}
-
 /* Map Search Pulse Animation */
 .search-pulse {
   border-radius: 50%;

app/templates/place.gjs

@@ -53,7 +53,7 @@ export default class PlaceTemplate extends Component {
         geohash: undefined
       };
     }
-    
+
     return model;
   }