diff --git a/src/Client/Views/Prescribe.fs b/src/Client/Views/Prescribe.fs
index 3917dd2..0fd03c7 100644
--- a/src/Client/Views/Prescribe.fs
+++ b/src/Client/Views/Prescribe.fs
@@ -191,7 +191,7 @@ module Prescribe =
let context = React.useContext(Global.context)
let lang = context.Localization
- let isMobile = Mui.Hooks.useMediaQuery "(max-width:1200px)"
+ let isMobile = Mui.Hooks.useMediaQuery "(max-width:900px)"
let getTerm defVal term =
props.localizationTerms
@@ -294,24 +294,35 @@ module Prescribe =
let ord = sc.Order
- let item icon prim sec =
+ let item key icon prim sec =
let rows =
let cells row =
row
- |> Array.map (fun cell ->
+ |> Array.mapi (fun i cell ->
JSX.jsx $"""
-
+
{cell |> typoGraphy}
"""
)
+ let sec =
+ if not isMobile then sec
+ else
+ [|
+ [|
+ sec
+ |> Array.collect id
+ |> Array.collect id
+ |]
+ |]
+
sec
- |> Array.map (fun row ->
+ |> Array.mapi (fun i row ->
JSX.jsx $"""
-
+
{cells row}
-
+
"""
)
@@ -323,7 +334,7 @@ module Prescribe =
import TableContainer from '@mui/material/TableContainer';
import TableRow from '@mui/material/TableRow';
-
+
{icon}
@@ -333,8 +344,8 @@ module Prescribe =
{prim}
-
-
+
+
{rows}
@@ -352,10 +363,10 @@ module Prescribe =
{
[|
- item Mui.Icons.Notes (Terms.``Prescribe Prescription`` |> getTerm "Voorschrift") sc.Prescription
+ item "prescription" Mui.Icons.Notes (Terms.``Prescribe Prescription`` |> getTerm "Voorschrift") sc.Prescription
if sc.Preparation |> Array.length > 0 then
- item Mui.Icons.Vaccines (Terms.``Prescribe Preparation`` |> getTerm "Bereiding") sc.Preparation
- item Mui.Icons.MedicationLiquid (Terms.``Prescribe Administration`` |> getTerm "Toediening") sc.Administration
+ item "preparation" Mui.Icons.Vaccines (Terms.``Prescribe Preparation`` |> getTerm "Bereiding") sc.Preparation
+ item "administration" Mui.Icons.MedicationLiquid (Terms.``Prescribe Administration`` |> getTerm "Toediening") sc.Administration
|]
|> unbox
|> React.fragment
@@ -398,7 +409,7 @@ module Prescribe =
"""
let stackDirection =
- if Mui.Hooks.useMediaQuery "(max-width:900px)" then "column" else "row"
+ if isMobile then "column" else "row"
let cards =
JSX.jsx
@@ -471,16 +482,6 @@ module Prescribe =
|> Array.map (fun s -> s |> ScenarioResult.doseTypeToString, s |> ScenarioResult.doseTypeToDescription)
|> select isLoading lbl sel (DoseTypeChange >> dispatch)
- (*
- if isMobile then
- items
- |> Array.map (fun s -> s |> ScenarioResult.doseTypeToString, s |> ScenarioResult.doseTypeToDescription)
- |> select isLoading lbl sel (DoseTypeChange >> dispatch)
- else
- items
- |> Array.map (fun s -> s |> ScenarioResult.doseTypeToString, s |> ScenarioResult.doseTypeToDescription)
- |> autoComplete isLoading lbl sel (DoseTypeChange >> dispatch)
- *)
| _ -> JSX.jsx $"<>>"
}