diff --git a/assets/scss/default_theme/components/_plates.scss b/assets/scss/default_theme/components/_plates.scss
index da9d568..0c34a3b 100644
--- a/assets/scss/default_theme/components/_plates.scss
+++ b/assets/scss/default_theme/components/_plates.scss
@@ -13,6 +13,11 @@ table, tr, td {
user-select: none; /* Prevents dragging issue */
border-spacing: 0px;
}
+th {
+ font-size: 0.5em;
+}
+
+
td.plate_cell {
height: 2.3vmin;
background: none;
diff --git a/src/components/plates/destination_plate.rs b/src/components/plates/destination_plate.rs
index 9d21143..cf4611b 100644
--- a/src/components/plates/destination_plate.rs
+++ b/src/components/plates/destination_plate.rs
@@ -12,7 +12,7 @@ use crate::data::transfer_region::Region;
use crate::components::plates::util::Palettes;
const PALETTE: super::util::ColorPalette = Palettes::RAINBOW;
-use super::super::transfer_menu::RegionDisplay;
+use super::super::transfer_menu::{RegionDisplay, num_to_letters};
#[derive(Properties, PartialEq)]
pub struct DestinationPlateProps {
@@ -97,8 +97,17 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
let mouseleave_callback = Callback::clone(&mouseup_callback);
+ let column_header = {
+ let headers = (1..=props.destination_plate.plate.size().1)
+ .map(|j| {
+ html! {
{j} | }
+ })
+ .collect::();
+ html!{ | { headers }
}
+ };
let rows = (1..=props.destination_plate.plate.size().0)
.map(|i| {
+ let row_header = html! {{num_to_letters(i)} | };
let row = (1..=props.destination_plate.plate.size().1).map(|j| {
html! {
Html {
}).collect::();
html! {
- { row }
+ { row_header }{ row }
}
})
@@ -126,7 +135,7 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
onmouseleave={move |e| {
mouseleave_callback.emit(e);
}}>
- { rows }
+ { column_header }{ rows }
}
diff --git a/src/components/plates/source_plate.rs b/src/components/plates/source_plate.rs
index 02ccc83..d011624 100644
--- a/src/components/plates/source_plate.rs
+++ b/src/components/plates/source_plate.rs
@@ -12,7 +12,7 @@ use crate::data::transfer_region::Region;
use crate::components::plates::util::Palettes;
const PALETTE: super::util::ColorPalette = Palettes::RAINBOW;
-use super::super::transfer_menu::RegionDisplay;
+use super::super::transfer_menu::{RegionDisplay, num_to_letters};
#[derive(PartialEq, Properties)]
pub struct SourcePlateProps {
@@ -98,8 +98,17 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
let mouseleave_callback = Callback::clone(&mouseup_callback);
+ let column_header = {
+ let headers = (1..=props.source_plate.plate.size().1)
+ .map(|j| {
+ html! {{j} | }
+ })
+ .collect::();
+ html!{ | { headers }
}
+ };
let rows = (1..=props.source_plate.plate.size().0)
.map(|i| {
+ let row_header = html! {{num_to_letters(i)} | };
let row = (1..=props.source_plate.plate.size().1)
.map(|j| {
html! {
@@ -114,7 +123,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
.collect::();
html! {
- { row }
+ { row_header }{ row }
}
})
@@ -129,6 +138,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
onmouseleave={move |e| {
mouseleave_callback.emit(e);
}}>
+ { column_header }
{ rows }