Skip to content

Commit ca3b516

Browse files
davidsklar99davidsklar99
authored
Merge pull request #53 from UW-Macrostrat/pagination
Pagination and Styling
2 parents e542d4f + 9943e74 commit ca3b516

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2960
-2938
lines changed

‎packages/qgis-integration/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
Basic QGIS layers for Macrostrat. If we want to deepen this
2-
integration, we could pull it out of the web repository and
3-
integrate it with one of the Python APIs.
1+
Basic QGIS layers for Macrostrat. If we want to deepen this integration, we
2+
could pull it out of the web repository and integrate it with one of the Python
3+
APIs.

‎packages/settings/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,5 @@ export const SETTINGS = {
3434
satelliteMapURL,
3535
burwellTileDomain,
3636
mapboxAccessToken,
37-
rockdApiOldURL
37+
rockdApiOldURL,
3838
};

‎packages/text-toolchain/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Toolchain for text compilation in Vite.
22

3-
This is used to compile an Obsidian-compatible documentation
4-
site from a set of Markdown files. This is generated from
3+
This is used to compile an Obsidian-compatible documentation site from a set of
4+
Markdown files. This is generated from
55
[DigitalCrust's website](https://github.com/DigitalCrust/digitalcrust-website),
66
and will eventually be merged with that implementation.

‎pages/+Page.client.ts‎

Lines changed: 125 additions & 133 deletions
Large diffs are not rendered by default.

‎pages/_error/+Page.client.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { h } from '@macrostrat/map-interface'
22
import { usePageContext } from 'vike-react/usePageContext'
33
import "./main.styl"
4-
import { Image } from "../index"
4+
import { Image } from "~/components/general"
55

66
function pageDoesntExist() {
77

‎pages/checkin/@id/+Page.client.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import h from "@macrostrat/hyper";
2-
import { usePageContext } from 'vike-react/usePageContext';
32
import { Checkins } from "../index";
3+
import { useData } from "vike-react/useData";
44

55
export function Page() {
6-
const pageContext = usePageContext();
7-
const checkinID = parseInt(pageContext.urlParsed.pathname.split("/")[2]);
8-
return h(Checkins, { checkinID });
6+
const { checkin } = useData();
7+
console.log("Checkin data:", checkin);
8+
return h(Checkins, { checkin });
99
}

‎pages/checkin/@id/+data.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { fetchAPIData } from "~/components/general";
2+
import { rockdApiURL } from "@macrostrat-web/settings";
3+
4+
export async function data(pageContext) {
5+
const id = parseInt(pageContext.urlParsed.pathname.split("/")[2]);
6+
const data = await fetch(
7+
`${rockdApiURL}/protected/checkins?checkin_id=${id}`
8+
).then((response) => {
9+
if (!response.ok) {
10+
throw new Error(`HTTP error! status: ${response.status}`);
11+
}
12+
return response.json();
13+
});
14+
return { checkin: data.success.data[0] };
15+
}

‎pages/checkin/index.ts‎

Lines changed: 74 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,58 @@
1-
import hyper from "@macrostrat/hyper";
21
import { LngLatCoords } from "@macrostrat/map-interface";
3-
import { useEffect, useState, useRef } from 'react';
2+
import { useState, useCallback } from 'react';
43
import 'mapbox-gl/dist/mapbox-gl.css';
5-
import { BlankImage, imageExists, Footer, getProfilePicUrl, useRockdAPI, getImageUrl } from "../index";
4+
import { BlankImage, imageExists, Footer, getProfilePicUrl, getImageUrl } from "~/components/general";
65
import { Icon } from "@blueprintjs/core";
7-
import styles from "../main.module.sass";
6+
import h from "./main.module.sass";
87
import { SETTINGS } from "@macrostrat-web/settings";
9-
import "./main.sass";
108
import "@macrostrat/style-system";
9+
import { Overlay2 } from "@blueprintjs/core";
1110
import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface";
1211
import 'mapbox-gl/dist/mapbox-gl.css';
1312
import { MapPosition } from "@macrostrat/mapbox-utils";
1413
import { PanelCard } from "@macrostrat/map-interface";
1514
import { LithologyList } from "@macrostrat/data-components";
15+
import { ClientOnly } from "vike-react/ClientOnly";
1616

17-
const h = hyper.styled(styles);
17+
function Map(props) {
18+
return h(
19+
ClientOnly,
20+
{
21+
load: () => import("./map.client").then((d) => d.MapContainer),
22+
fallback: h("div.loading", "Loading map..."),
23+
},
24+
(component) => h(component, props)
25+
);
26+
}
1827

19-
export function Checkins({checkinID}) {
20-
const checkinData = useRockdAPI("/protected/checkins?checkin_id=" + checkinID);
21-
const [overlayOpen, setOverlayOpen] = useState(false);
22-
const [showMap, setShowMap] = useState(false);
28+
export function Checkins({checkin}) {
29+
/*
30+
const [isOpen, setIsOpen] = useState(false);
31+
const toggleOverlay = useCallback(() => setIsOpen(open => !open), [setIsOpen]);
2332
24-
if (!checkinData) {
25-
return h("div", { className: 'loading' }, [
26-
h("h1", "Loading checkin..."),
27-
]);
28-
}
33+
return h("div.container", [
34+
h('button', {
35+
className: "bp3-button bp3-intent-primary",
36+
onClick: toggleOverlay
37+
}, "Open Overlay"),
38+
h(Overlay2,
39+
{
40+
isOpen,
41+
onClose: toggleOverlay,
42+
className: "checkin-overlay",
43+
usePortal: true,
44+
canEscapeKeyClose: true,
45+
canOutsideClickClose: true,
46+
hasBackdrop: true,
47+
}, "hello"
48+
49+
)
50+
]);
51+
*/
2952

30-
if (checkinData.success.data.length == 0) {
31-
return h("div", { className: 'error' }, [
32-
h(BlankImage, {className: "error-img", src: "https://rockd.org/assets/img/404.jpg"}),
33-
h("h1", "Checkin " + checkinID + " not found!"),
34-
]);
35-
}
53+
const [overlayOpen, setOverlayOpen] = useState(false);
54+
const [showMap, setShowMap] = useState(false);
3655

37-
const checkin = checkinData.success.data[0];
3856
const center = {
3957
lat: checkin.lat,
4058
lng: checkin.lng
@@ -96,26 +114,36 @@ export function Checkins({checkinID}) {
96114
zoom: 10
97115
};
98116

99-
// overlay
100-
let overlay = h('div', {className: 'overlay'}, [
101-
h('div.overlay-header', [
102-
h(Icon, {className: "back-arrow", icon: "arrow-left", iconSize: "5vh", style: {color: 'black'},
103-
onClick: () => {
104-
setOverlayOpen(!overlayOpen);
105-
}
106-
}),
107-
]),
108-
]);
109-
110-
const map = h(Map, {center, showMap, setShowMap});
111117

112118
let main = h('div', { className: "container" }, [
113119
h('div', { className: showMap ? 'hide' : 'main'}, [
114120
h('div', { className: "checkin-head" }, [
115121
h('h1', checkin.notes),
116122
]),
117-
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 }),
118-
h('div', { className: 'stop-header', onClick: () => { setShowMap(true); console.log("center", center) } }, [
123+
h(Overlay, {
124+
checkin,
125+
center,
126+
LngLatProps,
127+
ratingArr,
128+
profile_pic,
129+
}),
130+
h('div', { className: 'observations' }, observations),
131+
]),
132+
h('div', { className: showMap ? 'hide' : 'bottom' }, [
133+
h(Footer),
134+
]),
135+
])
136+
137+
return main;
138+
}
139+
140+
function Overlay({checkin, center, LngLatProps, ratingArr, profile_pic}) {
141+
const [overlayOpen, setOverlayOpen] = useState(false);
142+
const map = h(Map, {center, setOverlayOpen});
143+
144+
return h('div.overlay', [
145+
h.if(!overlayOpen)(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 }),
146+
h.if(!overlayOpen)('div', { className: 'stop-header', onClick: () => { setOverlayOpen(true); console.log("center", center) } }, [
119147
profile_pic,
120148
h('div', {className: 'stop-main-info'}, [
121149
h('h3', {className: 'name'}, checkin.first_name + " " + checkin.last_name),
@@ -127,16 +155,16 @@ export function Checkins({checkinID}) {
127155
h('h3', {className: 'rating'}, ratingArr),
128156
]),
129157
]),
130-
h('div', { className: 'observations' }, observations),
131-
]),
132-
h('div', { className: showMap ? 'hide' : 'bottom' }, [
133-
h(Footer),
134-
]),
135-
h('div', { className: !showMap ? 'hide' : 'map'}, map)
136-
])
137-
138-
139-
return overlayOpen ? overlay : main;
158+
h(Overlay2, {
159+
isOpen: overlayOpen,
160+
onClose: () => setOverlayOpen(false),
161+
className: "map",
162+
usePortal: true,
163+
canEscapeKeyClose: true,
164+
canOutsideClickClose: true,
165+
hasBackdrop: false,
166+
}, map),
167+
])
140168
}
141169

142170
function observationFooter(observation) {
@@ -227,45 +255,4 @@ function observationFooter(observation) {
227255
h('p', {className: "notes"}, rocks.notes),
228256
]),
229257
]);
230-
}
231-
232-
function Map({center, showMap, setShowMap}) {
233-
const [style, setStyle] = useState("mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i");
234-
const [styleText, setStyleText] = useState("Show Satelite");
235-
236-
const newMapPosition: MapPosition = {
237-
camera: {
238-
lat: center.lat, // Latitude
239-
lng: center.lng, // Longitude
240-
altitude: 300000, // Altitude (height from the Earth's surface)
241-
},
242-
};
243-
244-
const sateliteStyle = 'mapbox://styles/mapbox/satellite-v9';
245-
const whiteStyle = "mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i";
246-
const whiteText = "Show White";
247-
const sateliteText = "Show Satelite";
248-
249-
let map = h("div.map", [
250-
h(MapAreaContainer, { style: {height: "93vh", top: "7vh"} },
251-
[
252-
h(MapView, { style: style, mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition }, [
253-
h(MapMarker, {
254-
position: center,
255-
}),
256-
]),
257-
]
258-
),
259-
h('div', {className: 'banner'}, [
260-
h(Icon, {className: "banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}, onClick: () => {
261-
setShowMap(!showMap);
262-
}}),
263-
h(PanelCard, {className: "banner-button", onClick: () => {
264-
setStyle(style == whiteStyle ? sateliteStyle : whiteStyle);
265-
setStyleText(styleText == whiteText ? sateliteText : whiteText);
266-
}}, styleText),
267-
]),
268-
])
269-
270-
return map;
271258
}

pages/checkin/main.sass renamed to pages/checkin/main.module.sass

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ html, body
2828
color: var(--text-subtle-color) !important
2929

3030
body
31-
color: var(--text-color)
31+
color: var(--text-emphasized-color) !important
3232
margin: 0
3333
padding: 0
3434
font-family: 'Source Sans Pro', sans-serif
@@ -53,14 +53,10 @@ body
5353

5454
.main
5555
background-color: var(--background-color)
56-
color: var(--text)
5756
padding: 0 20% 5vh 20%
5857
margin: 0
5958
min-height: 74vh
6059

61-
h4
62-
color: var(--text)
63-
6460
h1, p
6561
padding: 0
6662
margin: 0
@@ -97,6 +93,7 @@ h1, p
9793
display: flex
9894
flex-direction: column
9995
text-align: left
96+
color: black
10097

10198
h3
10299
margin: 0
@@ -115,13 +112,14 @@ h4
115112
.checkin-head
116113
padding: 30px 0
117114
width: 100%
115+
color: var(--text-emphasized-color)
118116

119117
.loading
120118
height: 75vh
121119
padding-top: 20vh
122120
text-align: center
123-
background-color: var(--panel-background-color)
124-
color: var(--panel-text)
121+
background-color: var(--background-color)
122+
color: var(--text-emphasized-color)
125123
font-style: italic
126124

127125
.observations
@@ -140,31 +138,6 @@ h4
140138
width: 100%
141139
cursor: pointer
142140

143-
.overlay
144-
background-color: var(--panel-background-color)
145-
height: 100vh
146-
width: 100%
147-
top: 0
148-
left: 0
149-
overflow: auto
150-
151-
152-
.overlay-body
153-
margin: 0 30%
154-
width: 40%
155-
box-shadow: 0 0 0 1px var(--card-shadow-color)
156-
margin: 5vh 30%
157-
158-
img
159-
width: 100%
160-
161-
.observation-body
162-
padding: 3px
163-
color: var(--text)
164-
text-align: center
165-
padding-top: 10px
166-
width: 100%
167-
168141
.close
169142
position: absolute
170143
top: 10px
@@ -185,10 +158,12 @@ h4
185158
background-color: var(--panel-text)
186159
height: 7vh
187160
display: flex
161+
align-items: center
188162

189163

190164
.banner-arrow
191165
margin-left: 10px
166+
cursor: pointer
192167
svg
193168
height: 7vh
194169

@@ -218,7 +193,7 @@ h4
218193

219194
.observation-detail
220195
padding: 4px
221-
border: 1px solid var(--panel-text)
196+
border: 1px solid var(--text-emphasized-color)
222197
margin: 4px
223198
border-radius: 4px
224199
display: inline-block
@@ -235,6 +210,10 @@ h4
235210

236211
.observation-header
237212
padding: 10px
213+
color: var(--text-emphasized-color)
214+
215+
.lnglat-container
216+
color: var(--text-emphasized-color) !important
238217

239218
.back-arrow
240219
filter: var(--img-color)

0 commit comments

Comments
 (0)