add observations

Author: davidsklar99

pages/dev/test-site/explore/+Page.client.ts

@@ -212,6 +212,10 @@ function createCheckins(result, mapRef, showPin) {
             h(Image, {className: 'likes-image', src: "explore/thumbs-up.png"}),
             h('h3', {className: 'likes'}, checkin.likes),
           ]),
+          h('div', {className: 'observations-container'}, [
+            h(Image, {className: 'observations-image', src: "explore/observations.png"}),
+            h('h3', {className: 'comments'}, checkin.observations.length),
+          ]),
           h('div', {className: 'comments-container'}, [
             h(Image, {className: 'comments-image', src: "explore/comment.png"}),
             h('h3', {className: 'comments'}, checkin.comments),

pages/dev/test-site/explore/main.styl

@@ -197,8 +197,8 @@ h3,h4,p
 
   .likes-container
     display grid
-    grid-template-columns 30% 30%
-    width 50%
+    grid-template-columns 50% 50%
+    width 25%
     justify-content end
     place-items center
 
@@ -208,13 +208,22 @@ h3,h4,p
 
   .comments-container
     display grid
-    grid-template-columns 30% 30%
-    width 50%
+    grid-template-columns 50% 50%
+    width 25%
     place-items center
 
     .comments-image
       width 40px
 
+  .observations-container
+    display grid
+    grid-template-columns 50% 50%
+    width 25%
+    place-items center
+
+    .observations-image
+      width 40px
+      
 .marker
   height 7vh
   display grid