Merge pull request #46 from UW-Macrostrat/touchup

Styling Updates

Author: davidsklar99

package.json

@@ -54,6 +54,7 @@
     "@macrostrat-web/utility-functions": "workspace:*",
     "@macrostrat/color-utils": "^1.0.0",
     "@macrostrat/corelle": "^2.0.1",
+    "@macrostrat/data-components": "latest",
     "@macrostrat/form-components": "^0.1.2",
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/map-interface": "^1.2.2",

pages/checkin/index.ts

@@ -13,6 +13,7 @@ import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface"
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { MapPosition } from "@macrostrat/mapbox-utils";
 import { PanelCard } from "@macrostrat/map-interface";
+import { LithologyList } from "@macrostrat/data-components";
 
 const h = hyper.styled(styles);
 
@@ -63,19 +64,15 @@ export function Checkins({checkinID}) {
 
     observations.push(
         h('div', {className: 'observation'}, [
-            headerImgUrl ? h(BlankImage, { className: 'observation-image', src: headerImgUrl, onClick: () => {
-                setOverlayBody(h('div.observation-body',headerBody));
-                setOverlayImage(headerImgUrl);
-                setOverlayOpen(!overlayOpen);
-                }
-            }) : null,
+            headerImgUrl ? h('a', {href: "/photo/" + checkin.photo}, 
+                h(BlankImage, { className: 'observation-image', src: headerImgUrl})
+            ) : null,
             h("div.observation-body", headerBody),
         ])
     );
 
     // add observations
     checkin.observations.forEach(observation => {
-        console.log("obs", observation.photo, observation);
         if(Object.keys(observation.rocks).length != 0) {
             // if photo exists
             const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo;
@@ -84,11 +81,9 @@ export function Checkins({checkinID}) {
 
             observations.push(
                 h('div', {className: 'observation'}, [
-                    observationURL ? h(BlankImage, { className: 'observation-image', src: observationURL, onClick: () => {
-                        setOverlayImage(imageSrc);
-                        setOverlayBody(observationBody);
-                        setOverlayOpen(!overlayOpen);
-                    }}) : null,
+                    observationURL ? h('a', {href: "/photo/" + observation.photo}, 
+                        h(BlankImage, { className: 'observation-image', src: observationURL})
+                    ) : null,
                     observationBody,
                 ])
             );
@@ -125,7 +120,6 @@ export function Checkins({checkinID}) {
         h('div', { className: showMap ? 'hide' : 'main'}, [
             h('div', { className: "checkin-head" }, [
                 h('h1', checkin.notes),
-                h(DarkModeButton, { className: 'dark-mode-button', showText: true }),
             ]),
             h(BlankImage, { className: "location-img", src: "https://api.mapbox.com/styles/v1/jczaplewski/cje04mr9l3mo82spihpralr4i/static/geojson(%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B" + checkin.lng + "%2C" + checkin.lat + "%5D%7D)/" + checkin.lng + "," + checkin.lat + ",5,0/1200x400?access_token=" + SETTINGS.mapboxAccessToken }),
             h('div', { className: 'stop-header', onClick: () => { setShowMap(true); console.log("center", center) } }, [
@@ -168,22 +162,75 @@ function observationFooter(observation) {
     let liths = [];
     for(var j = 0; j < rocks.liths.length; j++) {                
         liths.push(h('p', { className: "observation-detail liths"}, rocks.liths[j].name));
+    }    
+
+    function rgbaStringToHex(rgba: string): string {
+        // Split the input string by commas and trim whitespace
+        const values = rgba.split(',').map(value => value.trim());
+    
+        // Extract r, g, b values and ignore alpha
+        const r = parseInt(values[0], 10);
+        const g = parseInt(values[1], 10);
+        const b = parseInt(values[2], 10);
+    
+        // Convert r, g, b to two-digit hex values
+        const red = r.toString(16).padStart(2, '0');
+        const green = g.toString(16).padStart(2, '0');
+        const blue = b.toString(16).padStart(2, '0');
+    
+        // Return the HEX string without alpha
+        return `#${red}${green}${blue}`;
     }
 
-    // observation body
     let obsAge = observation.age_est ? observation.age_est.name + " (" + observation.age_est.b_age + " - " + observation?.age_est?.t_age + ")" : null;
+
+    let lithologies = [];
+    rocks.liths.forEach(lith => {
+        if(!lith.color.includes("#")) {
+            lithologies.push({
+                name: lith.name,
+                color: rgbaStringToHex(lith.color)});
+        } else {
+            lithologies.push(lith);
+        }
+    });
+
+    if (rocks.strat_name?.strat_name_long) {
+        lithologies.push({
+            name: rocks.strat_name?.strat_name_long,
+        })
+    }
+
+    if(rocks.map_unit?.unit_name) {
+        lithologies.push({
+            name: rocks.map_unit?.unit_name
+        })
+    }
+    
+    if(obsAge) {
+        lithologies.push({
+            name: obsAge
+        })
+    }
+    if(rocks.interval.name) {
+        lithologies.push({
+            name: rocks.interval.name
+        })
+    }
+    if(observation.orientation.feature?.name) {
+        lithologies.push({
+            name: observation.orientation.feature?.name
+        })
+    }
+
+    // observation body
     return h('div', {className: 'observation-body'}, [
         observation.lat && rocks.strat_name?.strat_name_long ? h('h4', {className: 'observation-header'}, [
             rocks.strat_name?.strat_name_long,
             observation.lat ? LngLatCoords(LngLatProps) : null,
         ]) : null,
         h('div', {className: 'observation-details'}, [
-            rocks.strat_name?.strat_name_long ? h('p', {className: 'observation-detail'}, rocks.strat_name?.strat_name_long) : null,
-            rocks.map_unit?.unit_name ? h('p', {className: 'observation-detail'}, rocks.map_unit?.unit_name) : null,
-            obsAge ? h('p', {className: 'observation-detail'}, obsAge) : null,
-            rocks.interval.name ? h('p', {className: 'observation-detail interval'}, rocks.interval.name) : null,
-            liths,
-            observation.orientation.feature?.name ? h('p', {className: 'observation-detail'}, observation.orientation.feature?.name) : null,
+            h(LithologyList, { lithologies }),
             h('p', {className: "notes"}, rocks.notes),
         ]),
     ]);
@@ -221,7 +268,6 @@ function Map({center, showMap, setShowMap}) {
                 setShowMap(!showMap);
               }}),
             h(PanelCard, {className: "banner-button", onClick: () => {
-                console.log("clicked");
                 setStyle(style == whiteStyle ? sateliteStyle : whiteStyle);
                 setStyleText(styleText == whiteText ? sateliteText : whiteText);
             }}, styleText),

pages/checkin/main.sass

@@ -105,21 +105,13 @@ h1, p
 .marker
   height: 15px
 
-.edited
-  color: grey
-
 h4
   padding: 0
   margin: 0
 
 .checkin-head
   padding: 30px 0
   width: 100%
-  display: grid
-  grid-template-columns: 80% 20%
-
-  h1
-    padding-right: 15px
 
 .loading
   height: 75vh
@@ -139,12 +131,10 @@ h4
     flex: 0 0 calc(33.33% - 10px)
     margin: 5px
     text-align: center
-    border-radius: 2%
     box-shadow: 0 0 0 1px var(--card-shadow-color)
 
     .observation-image
       width: 100%
-      border-radius: 2% 2% 0 0
       cursor: pointer
 
 .overlay
@@ -159,13 +149,11 @@ h4
   .overlay-body
     margin: 0 30%
     width: 40%
-    border-radius: 2%
     box-shadow: 0 0 0 1px var(--card-shadow-color)
     margin: 5vh 30%
 
     img
       width: 100%
-      border-radius: 2% 2% 0 0
 
     .observation-body
       padding: 3px
@@ -210,9 +198,6 @@ h4
     position: absolute
     right: 15px
 
-.map-container
-  height: 95vh
-
 .hide
   display: none
 

pages/colors.scss

@@ -16,6 +16,7 @@ $colors: (
   translucent-background: rgba(255, 255, 255, 0.5),
   interval-background: rgba(176, 81, 165, .5),
   liths-background: rgba(255, 213, 0, 0.5),
+  button-background: #fff,
 );
 
 $dark-background: #141a1e;
@@ -37,4 +38,5 @@ $dark-colors: (
   translucent-background: rgba(20, 26,30, 0.5),
   interval-background: rgba(79, 174, 90, .5),
   liths-background: rgba(0, 42, 255, 0.5),
+  button-background: #1c2127,
 );