Skip to content

Improve atlas field panel styling #571

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SvenVw merged 10 commits into from
Apr 22, 2026
Merged

Improve atlas field panel styling #571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e2ec73c
Improve atlas field panel styling
BoraIneviNMI Apr 16, 2026
9ff980b
Add changeset
BoraIneviNMI Apr 16, 2026
dcd88b2
Remove click handlers that don't work
BoraIneviNMI Apr 16, 2026
a5aeff6
Nitpicks
BoraIneviNMI Apr 17, 2026
93ee44c
Add scroll area endpoint fade effect to the field selection list
BoraIneviNMI Apr 20, 2026
500ad9c
Hide hover panel when zoomed out too much
BoraIneviNMI Apr 20, 2026
5cf34dc
Make add selected fields button full-width
BoraIneviNMI Apr 20, 2026
7c54ea2
Nitpicks
BoraIneviNMI Apr 20, 2026
b85e83d
Merge branch 'development' into FDM538
SvenVw Apr 22, 2026
2a123b7
refactor: use sepator with chevron to indicate whether it can be scro…
SvenVw Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/moody-berries-wave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nmi-agro/fdm-app": patch
---

The cultivation and field count list seen on field selection atlas pages now becomes scrollable when there are too many different cultivations to display, ensuring that the "Sla geselecteerde percelen op" button is always reachable.
269 changes: 199 additions & 70 deletions fdm-app/app/components/blocks/atlas/atlas-panels.tsx
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions fdm-app/app/components/blocks/atlas/atlas-styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,17 @@ function getFieldsStyleInner(layerId: string): LayerProps {
}

if (layerId === "fieldsSelected") {
// This layer should not be visible but still clickable
return {
type: "fill",
paint: {
"fill-color": "#000000",
"fill-opacity": 0,
},
}
}

if (layerId === "fieldsSelectedOutline") {
return {
type: "line",
paint: {
Expand Down
9 changes: 2 additions & 7 deletions fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,17 +235,12 @@ export default function FarmAtlasFieldsBlock() {
</FieldsSourceNotClickable>
)}

<div className="fields-panel grid gap-4 w-[350px]">
<div className="fields-panel">
<FieldsPanelHover
zoomLevelFields={ZOOM_LEVEL_FIELDS}
layer={fieldsAvailableId}
layerExclude={id}
layer={[fieldsAvailableId, id]}
clickRedirectsToDetailsPage={true}
/>
<FieldsPanelHover
zoomLevelFields={ZOOM_LEVEL_FIELDS}
layer={id}
/>
</div>
</MapGL>
)
Expand Down
21 changes: 12 additions & 9 deletions fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ export default function Index() {
const calendar = loaderData.calendar
const fieldsSavedStyle = getFieldsStyle(fieldsSavedId)

const fieldsSelectedOutlineStyle = getFieldsStyle("fieldsSelectedOutline")
const fieldsSavedOutlineStyle = getFieldsStyle("fieldsSavedOutline")

// Set selected fields
Expand Down Expand Up @@ -306,7 +307,7 @@ export default function Index() {
{...viewState} // Use viewState directly
ref={mapRef}
style={{
height: "calc(100vh - 64px - 123px)",
height: "calc(100vh - 64px - 123px - 24px)",
width: "100%",
}}
interactive={true}
Expand Down Expand Up @@ -398,6 +399,12 @@ export default function Index() {
layout: layerLayout,
} as any)}
/>
<Layer
{...({
...fieldsSelectedOutlineStyle,
layout: layerLayout,
} as any)}
/>
</FieldsSourceSelected>

<FieldsSourceNotClickable
Expand All @@ -414,7 +421,7 @@ export default function Index() {
/>
</FieldsSourceNotClickable>

<div className="fields-panel grid gap-4 w-[350px]">
<div className="fields-panel">
<FieldsPanelSelection
fields={selectedFieldsData}
numFieldsSaved={
Expand All @@ -428,15 +435,11 @@ export default function Index() {
/>
<FieldsPanelHover
zoomLevelFields={ZOOM_LEVEL_FIELDS}
layer={fieldsAvailableId}
layerExclude={[
layer={[
fieldsAvailableId,
fieldsSelectedId,
fieldsSavedId,
]}
/>
<FieldsPanelHover
zoomLevelFields={ZOOM_LEVEL_FIELDS}
layer={fieldsSelectedId}
layerExclude={[fieldsSavedId]}
/>
</div>
</MapGL>
Expand Down
19 changes: 11 additions & 8 deletions fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,7 @@ export default function Index() {
const fieldsSaved = loaderData.fieldsSaved
const fieldsSavedStyle = getFieldsStyle(fieldsSavedId)

const fieldsSelectedOutlineStyle = getFieldsStyle("fieldsSelectedOutline")
const fieldsSavedOutlineStyle = getFieldsStyle("fieldsSavedOutline")

// Set selected fields
Expand Down Expand Up @@ -367,6 +368,12 @@ export default function Index() {
layout: layerLayout,
} as any)}
/>
<Layer
{...({
...fieldsSelectedOutlineStyle,
layout: layerLayout,
} as any)}
/>
</FieldsSourceSelected>

<FieldsSourceNotClickable
Expand All @@ -383,7 +390,7 @@ export default function Index() {
/>
</FieldsSourceNotClickable>

<div className="fields-panel grid gap-4 w-[350px]">
<div className="fields-panel">
<FieldsPanelSelection
fields={selectedFieldsData}
numFieldsSaved={
Expand All @@ -397,15 +404,11 @@ export default function Index() {
/>
<FieldsPanelHover
zoomLevelFields={ZOOM_LEVEL_FIELDS}
layer={fieldsAvailableId}
layerExclude={[
layer={[
fieldsAvailableId,
fieldsSelectedId,
fieldsSavedId,
]}
/>
<FieldsPanelHover
zoomLevelFields={ZOOM_LEVEL_FIELDS}
layer={fieldsSelectedId}
layerExclude={[fieldsSavedId]}
/>
</div>
</MapGL>
Expand Down
12 changes: 9 additions & 3 deletions fdm-app/app/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,13 +165,19 @@

.fields-panel {
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
/* max-width: 320px; */
max-height: 100%;
width: 320px;
/* background: #fff; */
/* box-shadow: 0 2px 4px rgba(0,0,0,0.3); */
padding: 12px 24px;
margin: 20px;
display: flex;
flex-direction: column;
margin-left: 44px;
padding-block: 32px;
gap: 16px;
/* margin: 20px; */
/* font-size: 13px; */
/* line-height: 2; */
/* color: #6b6b76; */
Expand Down
Loading