Merge branch 'checkin-style'

Author: davidsklar99

CONTRIBUTING.md

@@ -1,7 +1,7 @@
 {
   "name": "@macrostrat/web",
   "private": true,
-  "version": "5.1.1",
+  "version": "2.0.0",
   "description": "Macrostrat map interface",
   "type": "module",
   "scripts": {
@@ -12,7 +12,6 @@
     "server:dev": "tsx --env-file=.env ./server/index.ts",
     "format": "prettier --write src packages",
     "server:prod": "NODE_NO_WARNINGS=1 NODE_ENV=production yarn run server",
-    "dev:storybook": "yarn workspace @macrostrat/storybook run dev",
     "start": "yarn run build && yarn run server",
     "test:runtime": "tsx tests/test-urls.ts",
     "test": "vitest"

package.json

@@ -22,6 +22,7 @@ import { useCallback, useEffect, useState } from "react";
 import { tileserverDomain } from "@macrostrat-web/settings";
 import "./main.styl";
 import { BlankImage, Image } from "../index";
+import { pipeNodeStream } from "vike/dist/esm/node/runtime/html/stream";
 
 export function Page() {
   return h(
@@ -141,8 +142,34 @@ function FeatureDetails() {
 
   if (result == null) return h(Spinner);
   result = result.success.data;
+  console.log("result:",result)
+
+  checkins = createCheckins(result, mapRef, true);
+  
+  return h("div", {className: 'checkin-container'}, [
+      h('div', checkins)
+    ]);
+}
+
+function createCheckins(result, mapRef, showPin) {
+  let checkins = [];
+  let map = mapRef?.current;
 
   result.forEach((checkin) => {
+    let pin = null;
+
+    if(showPin) {
+      pin = h(Image, 
+        { src: "marker_red.png", 
+          className: "marker", 
+          onClick: () => { 
+            console.log("clicked at: ", checkin.lat + " " + checkin.lng);
+            map.flyTo({center: [checkin.lng, checkin.lat], zoom: 12});
+          } 
+        })
+    }
+
+
     // format rating
     let ratingArr = [];
     for(var i = 0; i < checkin.rating; i++) {
@@ -156,11 +183,12 @@ function FeatureDetails() {
 
     if (imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo)) {
       image = h(BlankImage, {className: 'observation-img', src: "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo});
+    } else {
+      image = h(Image, { className: 'observation-img', src: "rockd.jpg"});
     }
 
 
-    let temp = h('a', {className: 'checkin-link', href: "/dev/test-site/checkin?checkin=" + checkin.checkin_id}, [
-      h('div', { className: 'checkin' }, [
+    let temp = h('div', { className: 'checkin' }, [
         h('div', {className: 'checkin-header'}, [
           h('h3', {className: 'profile-pic'}, h(BlankImage, {src: "https://rockd.org/api/v2/protected/gravatar/" + checkin.person_id, className: "profile-pic"})),
           h('div', {className: 'checkin-info'}, [
@@ -169,19 +197,32 @@ function FeatureDetails() {
               h('p', "Near " + checkin.near),
               h('h3', {className: 'rating'}, ratingArr),
           ]),
+          pin,
         ]),
         h('p', {className: 'description'}, checkin.notes),
-        image
-      ]),
-    ]);
+        h('a', {className: 'checkin-link', href: "/dev/test-site/checkin?checkin=" + checkin.checkin_id, target: "_blank"}, [
+          image,
+          h('div', {className: "image-details"}, [
+            h('h1', "Details"),
+            h(Image, {className: 'details-image', src: "explore/white-arrow.png"})
+          ])
+        ]),
+        h('div', {className: 'checkin-footer'}, [
+          h('div', {className: 'likes-container'}, [
+            h(Image, {className: 'likes-image', src: "explore/thumbs-up.png"}),
+            h('h3', {className: 'likes'}, checkin.likes),
+          ]),
+          h('div', {className: 'comments-container'}, [
+            h(Image, {className: 'comments-image', src: "explore/comment.png"}),
+            h('h3', {className: 'comments'}, checkin.comments),
+          ])
+        ]),
+      ]);
 
     checkins.push(temp);
   });
-  
 
-  return h("div", {className: 'checkin-container'}, [
-      h('div', checkins)
-    ]);
+  return checkins;
 }
 
 function WeaverMap({
@@ -192,8 +233,6 @@ function WeaverMap({
   children?: React.ReactNode;
   mapboxToken?: string;
 }) {
-  const mapRef = useMapRef();
-
   const [isOpen, setOpen] = useState(false);
 
   const [type, setType] = useState(types[0]);
@@ -268,48 +307,14 @@ function WeaverMap({
 
 function getSelectedCheckins(result) {
   let checkins = [];
-  console.log("result", result);
+  let mapRef = useMapRef();
 
   // Selected checkin
   if (result == null) {
     return h(Spinner);
   } else {
     result = result.success.data;
-    result.forEach((checkin) => {
-      // format rating
-      let ratingArr = [];
-      for(var i = 0; i < checkin.rating; i++) {
-          ratingArr.push(h(Image, {className: "star", src: "blackstar.png"}));
-      }
-
-      for(var i = 0; i < 5 - checkin.rating; i++) {
-        ratingArr.push(h(Image, {className: "star", src: "emptystar.png"}));
-      }
-      let image;
-  
-      if (imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo)) {
-        image = h(BlankImage, {className: 'observation-img', src: "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo});
-      }
-      
-  
-      let temp = h('a', {className: 'checkin-link', href: "/dev/test-site/checkin?checkin=" + checkin.checkin_id}, [
-        h('div', { className: 'checkin' }, [
-          h('div', {className: 'checkin-header'}, [
-            h('h3', {className: 'profile-pic'}, h(BlankImage, {src: "https://rockd.org/api/v2/protected/gravatar/" + checkin.person_id, className: "profile-pic"})),
-            h('div', {className: 'checkin-info'}, [
-                h('h3', {className: 'name'}, checkin.first_name + " " + checkin.last_name),
-                h('h4', {className: 'edited'}, checkin.created),
-                h('p', "Near " + checkin.near),
-                h('h3', {className: 'rating'}, ratingArr),
-            ]),
-          ]),
-          h('p', {className: 'description'}, checkin.notes),
-          image
-        ]),
-      ]);
-
-      checkins.push(temp);
-    });
+    checkins = createCheckins(result, mapRef, false);
 
     if (checkins.length > 0) {
       return h("div", {className: 'checkin-container'}, checkins);

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

@@ -3,6 +3,7 @@
   text-align left
   box-shadow -4px 0px 7px #aaa
   padding 15px
+  padding-bottom 6px
   border-radius 2%
   font-size 14px
   color #666
@@ -48,29 +49,39 @@
   margin auto
   margin-left 0
 
-.checkin-link:hover
-  text-decoration none
-  background-color green
-
-  .checkin
-    background-color #c9c9c9
-
-.checkin-link
-  text-decoration none
-  background-color green
-
-  .checkin
+.checkin
     background-color white
 
 h3,h4,p
   margin 0
 
-.observation-img
-  margin-top 10px
-  width 100%
-  height 250px
-  object-fit cover
-  border-radius 2%
+.checkin-link
+  position relative
+
+  .image-details
+    position: absolute;
+    top: -250px;
+    left: 0;
+    right: 0;
+    bottom: 0
+    display: flex;
+    justify-content: center
+    align-items: center
+    display none
+    color white
+
+  .observation-img
+    margin-top 10px
+    width 100%
+    height 250px
+    object-fit cover
+    border-radius 2%
+
+.checkin-link:hover 
+  .observation-img 
+    -webkit-filter: brightness(70%)
+  .image-details 
+    display: flex
 
 .description
   margin-top 10px
@@ -123,4 +134,39 @@ h3,h4,p
   width 100%
 
 .no-checkins
-  color black
+  color black
+
+.checkin-footer
+  display flex
+  justify-content center
+
+  .likes-container
+    display grid
+    grid-template-columns 30% 30%
+    width 50%
+    justify-content end
+    place-items center
+
+
+    .likes-image
+      width 40px
+
+  .comments-container
+    display grid
+    grid-template-columns 30% 30%
+    width 50%
+    place-items center
+
+    .comments-image
+      width 40px
+
+.marker
+  height 7vh
+  display grid
+  margin auto
+  margin-right 10px
+
+.details-image
+  width 40px
+  margin-left 10px
+  margin-top 4px