Skip to content

Commit 984a78e

Browse files
nstrnstr
committed
some styling
1 parent 9fd666d commit 984a78e

1 file changed

Lines changed: 61 additions & 50 deletions

File tree

‎web/src/views/FieldDetails.jsx‎

Lines changed: 61 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -212,56 +212,67 @@ export default function FieldDetails() {
212212
<div className="rounded-2xl border bg-white p-4">
213213
<div className="font-semibold mb-2">Forecast</div>
214214
{field.forecast ? (
215-
<dl className="text-sm">
216-
<div className="flex justify-between py-1">
217-
<dt>Year</dt>
218-
<dd>{field.forecast.year}</dd>
219-
</div>
220-
<div className="flex justify-between py-1">
221-
<dt>Blooming peak</dt>
222-
<dd>{field.forecast.ndviPeak ?? "—"}</dd>
223-
</div>
224-
<div className="flex justify-between py-1">
225-
<dt>Blooming start at</dt>
226-
<dd>{field.forecast.ndviStartAt?.slice?.(0, 10) ?? "—"}</dd>
227-
</div>
228-
<div className="flex justify-between py-1">
229-
<dt>Blooming peak at</dt>
230-
<dd>{field.forecast.ndviPeakAt?.slice?.(0, 10) ?? "—"}</dd>
231-
</div>
232-
<div className="flex justify-between py-1">
233-
<dt>Blooming end at</dt>
234-
<dd>{field.forecast.ndviEndAt?.slice?.(0, 10) ?? "—"}</dd>
235-
</div>
236-
<div className="flex justify-between py-1">
237-
<dt>Blooming confidence</dt>
238-
<dd>
239-
{field.forecast.ndviConfidence != null
240-
? Math.round(field.forecast.ndviConfidence * 100) + "%"
241-
: "—"}
242-
</dd>
243-
</div>
244-
<div className="flex justify-between py-1">
245-
<dt>NDVI model</dt>
246-
<dd>{field.forecast.ndviModel ?? "—"}</dd>
247-
</div>
248-
<div className="flex justify-between py-1">
249-
<dt>Yield</dt>
250-
<dd>{field.forecast.yieldTph ?? "—"} t/ha</dd>
251-
</div>
252-
<div className="flex justify-between py-1">
253-
<dt>Confidence yield</dt>
254-
<dd>
255-
{field.forecast.yieldConfidence != null
256-
? Math.round(field.forecast.yieldConfidence * 100) + "%"
257-
: "—"}
258-
</dd>
259-
</div>
260-
<div className="flex justify-between py-1">
261-
<dt>Yield model</dt>
262-
<dd>{field.forecast.yieldModel ?? "—"}</dd>
263-
</div>
264-
</dl>
215+
<>
216+
<dl className="text-sm">
217+
<div className="flex justify-between py-1">
218+
<dt>Year</dt>
219+
<dd>{field.forecast.year}</dd>
220+
</div>
221+
</dl>
222+
223+
<div className="text-xs uppercase text-gray-500 tracking-wide mt-2 mb-1">Phenology (NDVI)</div>
224+
<dl className="text-sm">
225+
<div className="flex justify-between py-1">
226+
<dt>Blooming peak</dt>
227+
<dd>{field.forecast.ndviPeak ?? "—"}</dd>
228+
</div>
229+
<div className="flex justify-between py-1">
230+
<dt>Blooming start at</dt>
231+
<dd>{field.forecast.ndviStartAt?.slice?.(0, 10) ?? "—"}</dd>
232+
</div>
233+
<div className="flex justify-between py-1">
234+
<dt>Blooming peak at</dt>
235+
<dd>{field.forecast.ndviPeakAt?.slice?.(0, 10) ?? "—"}</dd>
236+
</div>
237+
<div className="flex justify-between py-1">
238+
<dt>Blooming end at</dt>
239+
<dd>{field.forecast.ndviEndAt?.slice?.(0, 10) ?? "—"}</dd>
240+
</div>
241+
<div className="flex justify-between py-1">
242+
<dt>Blooming confidence</dt>
243+
<dd>
244+
{field.forecast.ndviConfidence != null
245+
? Math.round(field.forecast.ndviConfidence * 100) + "%"
246+
: "—"}
247+
</dd>
248+
</div>
249+
<div className="flex justify-between py-1">
250+
<dt>NDVI model</dt>
251+
<dd>{field.forecast.ndviModel ?? "—"}</dd>
252+
</div>
253+
</dl>
254+
255+
<div className="mt-3 border-t" />
256+
<div className="text-xs uppercase text-gray-500 tracking-wide mt-2 mb-1">Yield</div>
257+
<dl className="text-sm">
258+
<div className="flex justify-between py-1">
259+
<dt>Yield</dt>
260+
<dd>{field.forecast.yieldTph ?? "—"} t/ha</dd>
261+
</div>
262+
<div className="flex justify-between py-1">
263+
<dt>Confidence yield</dt>
264+
<dd>
265+
{field.forecast.yieldConfidence != null
266+
? Math.round(field.forecast.yieldConfidence * 100) + "%"
267+
: "—"}
268+
</dd>
269+
</div>
270+
<div className="flex justify-between py-1">
271+
<dt>Yield model</dt>
272+
<dd>{field.forecast.yieldModel ?? "—"}</dd>
273+
</div>
274+
</dl>
275+
</>
265276
) : (
266277
<div className="text-sm text-gray-500">No forecast yet.</div>
267278
)}

0 commit comments

Comments
 (0)