Add dummy div to plate cells

This exists solely to have the hitbox
for the cells be rectangular while the
appearance of the cells is circular.
This commit is contained in:
Emilia Allison 2023-05-20 21:38:52 -04:00
parent 0ed4fe8809
commit e0563d7b9b
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 11 additions and 2 deletions

View File

@ -1,18 +1,24 @@
table, tr, td { table, tr, td {
box-sizing: border-box; box-sizing: border-box;
user-select: none; /* Prevents dragging issue */ user-select: none; /* Prevents dragging issue */
border-spacing: 0px;
} }
td.plate_cell { td.plate_cell {
width: 30px; width: 30px;
height: 30px; height: 30px;
background: none; background: none;
}
div.plate_cell_inner {
width: 90%;
height: 90%;
border-radius: 50%; border-radius: 50%;
border: 2px solid black; border: 2px solid black;
} }
td.plate_cell:hover { td.plate_cell:hover div.plate_cell_inner {
background: black !important; background: black !important;
} }
td.current_select { td.current_select div.plate_cell_inner {
background: lightblue !important; background: lightblue !important;
} }

View File

@ -76,6 +76,9 @@ fn SourcePlateCell(cx: Scope<PlateCellProps>, i: u8, j: u8, color: Option<String
onmouseup: move |_| { onmouseup: move |_| {
selection_state.write().m_stat = false selection_state.write().m_stat = false
}, },
div {
class: "plate_cell_inner"
}
} }
}) })
} }