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