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:
parent
0ed4fe8809
commit
e0563d7b9b
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue