Skip to content

Commit e554184

Browse files
davenquinndavenquinn
authored
Merge pull request #281 from UW-Macrostrat/column-page-reorg
Fix column page styles
2 parents fbda26a + 7209a34 commit e554184

File tree

12 files changed

+290
-210
lines changed

12 files changed

+290
-210
lines changed

‎pages/columns/+Page.ts‎

Lines changed: 109 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import { ContentPage } from "~/layouts";
2-
import { PageHeader, Link, AssistantLinks, DevLinkButton } from "~/components";
3-
import { Divider, AnchorButton, Card, Icon } from "@blueprintjs/core";
2+
import {
3+
AssistantLinks,
4+
DevLinkButton,
5+
PageBreadcrumbs,
6+
StickyHeader,
7+
} from "~/components";
8+
import { AnchorButton, ButtonGroup, InputGroup } from "@blueprintjs/core";
9+
import { Tag } from "@macrostrat/data-components";
410
import { useState } from "react";
5-
import h from "./main.module.scss";
11+
import h from "./main.module.sass";
612
import { useData } from "vike-react/useData";
713
import { ClientOnly } from "vike-react/ClientOnly";
14+
import { navigate } from "vike/client/router";
815

916
export function Page(props) {
1017
return h(ColumnListPage, props);
@@ -55,40 +62,59 @@ function ColumnListPage({ title = "Columns", linkPrefix = "/" }) {
5562
.map((col) => col.col_id)
5663
);
5764

58-
const handleInputChange = (event) => {
59-
setColumnInput(event.target.value.toLowerCase());
65+
const handleInputChange = (value, target) => {
66+
setColumnInput(value.toLowerCase());
6067
};
6168

6269
const allGroups = filteredGroups ?? columnGroups ?? [];
6370

6471
return h("div.column-list-page", [
65-
h(AssistantLinks, [
66-
h(AnchorButton, { href: "/projects", minimal: true }, "Projects"),
67-
h(DevLinkButton, { href: "/columns/correlation" }, "Correlation chart"),
68-
h(ColumnMapContainer, { columnIDs, projectID: project?.project_id }),
69-
]),
7072
h(ContentPage, [
71-
h(PageHeader, { title }),
72-
h(Card, { className: "search-bar" }, [
73-
h(Icon, { icon: "search" }),
74-
h("input", {
75-
type: "text",
76-
placeholder: "Search columns...",
77-
onChange: handleInputChange,
78-
}),
73+
h("div.flex-row", [
74+
h("div.main", [
75+
h(StickyHeader, [
76+
h(PageBreadcrumbs, { showLogo: true }),
77+
h("div.search-bar", [
78+
h(InputGroup, {
79+
placeholder: "Search columns...",
80+
onValueChange: handleInputChange,
81+
leftIcon: "search",
82+
large: true,
83+
fill: true,
84+
}),
85+
]),
86+
]),
87+
h(
88+
"div.column-groups",
89+
allGroups.map((d) =>
90+
h(ColumnGroup, {
91+
data: d,
92+
key: d.id,
93+
linkPrefix,
94+
columnInput,
95+
shouldFilter,
96+
})
97+
)
98+
),
99+
]),
100+
h("div.sidebar", [
101+
h("div.sidebar-content", [
102+
h(ButtonGroup, { vertical: true, large: true }, [
103+
h(AnchorButton, { href: "/projects", minimal: true }, "Projects"),
104+
h(
105+
DevLinkButton,
106+
{ href: "/columns/correlation" },
107+
"Correlation chart"
108+
),
109+
]),
110+
h(ColumnMapContainer, {
111+
columnIDs,
112+
projectID: project?.project_id,
113+
className: "column-map-container",
114+
}),
115+
]),
116+
]),
79117
]),
80-
h(
81-
"div.column-groups",
82-
allGroups.map((d) =>
83-
h(ColumnGroup, {
84-
data: d,
85-
key: d.id,
86-
linkPrefix,
87-
columnInput,
88-
shouldFilter,
89-
})
90-
)
91-
),
92118
]),
93119
]);
94120
}
@@ -117,29 +143,66 @@ function ColumnGroup({ data, linkPrefix, columnInput, shouldFilter }) {
117143
),
118144
]),
119145
h("div.column-list", [
120-
h(Divider),
121-
h("div.column-table", [
122-
h("div.column-row.column-header", [
123-
h("span.col-id", "Id"),
124-
h("span.col-name", "Name"),
146+
h("table.column-table", [
147+
h("thead.column-row.column-header", [
148+
h("tr", [
149+
h("th.col-id", "ID"),
150+
h("th.col-name", "Name"),
151+
h("th.col-status", "Status"),
152+
]),
153+
]),
154+
h("tbody", [
155+
filteredColumns.map((data) => h(ColumnItem, { data, linkPrefix })),
125156
]),
126-
h(Divider),
127-
filteredColumns.map((data) => h(ColumnItem, { data, linkPrefix })),
128157
]),
129158
]),
130159
]
131160
);
132161
}
133162

134163
function ColumnItem({ data, linkPrefix = "/" }) {
135-
const { col_id, col_name, status } = data;
136-
const href = linkPrefix + `columns/${col_id}`;
137-
return h("div.column-row", [
138-
h("span.col-id", "#" + col_id),
139-
h(Link, { className: "col-link", href }, [col_name]),
140-
]);
141-
}
164+
const { col_id, col_name } = data;
165+
166+
let nUnits = 0;
167+
try {
168+
nUnits = parseInt(data.t_units);
169+
} catch (e) {
170+
console.warn("Invalid number of units for column", col_id, data.t_units);
171+
}
172+
173+
const unitsText = nUnits > 0 ? `${nUnits} units` : "empty";
142174

143-
function UpperCase(str) {
144-
return str.charAt(0).toUpperCase() + str.slice(1);
175+
const href = linkPrefix + `columns/${col_id}`;
176+
return h(
177+
"tr.column-row",
178+
{
179+
onClick() {
180+
navigate(href);
181+
},
182+
},
183+
[
184+
h("td.col-id", h("code.bp5-code", col_id)),
185+
// Keep the semantic HTML structure for accessibility
186+
h("td.col-name", h("a", { href }, col_name)),
187+
h("td.col-status", [
188+
h.if(data.status == "in process")([
189+
h(
190+
Tag,
191+
{ minimal: true, color: "lightgreen", size: "small" },
192+
"in process"
193+
),
194+
]),
195+
" ",
196+
h(
197+
Tag,
198+
{
199+
minimal: true,
200+
size: "small",
201+
color: nUnits == 0 ? "orange" : "dodgerblue",
202+
},
203+
unitsText
204+
),
205+
]),
206+
]
207+
);
145208
}

‎pages/columns/@column/column-inspector/index.module.sass‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,13 @@
2828
flex-direction: column
2929
padding: 2em 0
3030

31+
& > *
32+
border-radius: 4px
33+
3134
.right-column-boxes
3235
display: flex
3336
flex-direction: column
34-
gap: 2em
37+
gap: 1em
3538

3639

3740
.column-view

‎pages/columns/@column/column-inspector/index.ts‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -62,34 +62,48 @@ function ColumnPageInner({ columnInfo, linkPrefix = "/", projectID }) {
6262
[setSelectedUnitID]
6363
);
6464

65+
let assistantContent = h("div.column-info", [
66+
h("h1.page-title", [
67+
h("span.col-name", columnInfo.col_name),
68+
h.if(columnInfo.col_group != null)("span.subtitle", [
69+
h("span.separator", " – "),
70+
h("span.col-group", `${columnInfo.col_group}`),
71+
]),
72+
]),
73+
h("p.column-details", [
74+
h("span.column-id", ["#", columnInfo.col_id]),
75+
", ",
76+
h("span.project", ["project ", columnInfo.project_id]),
77+
", ",
78+
h(
79+
"a",
80+
{
81+
href: `/map/loc/${lon}/${lat}/column#z=${zoom}&show=columns,geology`,
82+
},
83+
"show in map"
84+
),
85+
".",
86+
]),
87+
]);
88+
89+
if (selectedUnit != null) {
90+
assistantContent = h(ModalUnitPanel, {
91+
unitData: units,
92+
className: "unit-details-panel",
93+
selectedUnit,
94+
onSelectUnit: setSelectedUnitID,
95+
});
96+
}
97+
6598
return h("div.page-container", [
6699
h("div.main", [
67100
h("div.left-column", [
68101
h("div.column-header", [
69-
h("nav", [h(PageBreadcrumbs, { showLogo: true })]),
70-
h("h1.page-title", [
71-
h("span.col-name", columnInfo.col_name),
72-
h.if(columnInfo.col_group != null)("span.subtitle", [
73-
h("span.separator", " – "),
74-
h("span.col-group", `${columnInfo.col_group}`),
75-
]),
102+
h("nav", [
103+
h(PageBreadcrumbs, { showLogo: true, title: columnInfo.col_name }),
76104
]),
77105
]),
78106
h("div.column-view", [
79-
h("p.column-details", [
80-
h("span.column-id", ["#", columnInfo.col_id]),
81-
", ",
82-
h("span.project", ["project ", columnInfo.project_id]),
83-
", ",
84-
h(
85-
"a",
86-
{
87-
href: `/map/loc/${lon}/${lat}/column#z=${zoom}&show=columns,geology`,
88-
},
89-
"show in map"
90-
),
91-
".",
92-
]),
93107
h(Column, {
94108
units,
95109
unitComponent: ColoredUnitComponent,
@@ -111,12 +125,7 @@ function ColumnPageInner({ columnInfo, linkPrefix = "/", projectID }) {
111125
selectedColumn: columnInfo.col_id,
112126
onSelectColumn,
113127
}),
114-
h(ModalUnitPanel, {
115-
unitData: units,
116-
className: "unit-details-panel",
117-
selectedUnit,
118-
onSelectUnit: setSelectedUnitID,
119-
}),
128+
assistantContent,
120129
]),
121130
]),
122131
]),

0 commit comments

Comments
 (0)