Close buttons for dialogs

Resolves #4
This commit is contained in:
Emilia Allison 2023-06-06 18:46:04 -04:00
parent 421d937037
commit 659c27c4e5
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
4 changed files with 34 additions and 2 deletions

View File

@ -0,0 +1,29 @@
@use "sass:color";
@use "../variables" as *;
dialog {
border: 3px solid $color-dark;
border-radius: 2%;
}
dialog > form[method="dialog"] {
position: absolute;
top: 0;
right: 0;
line-height: 0px;
button {
padding-top: 5px;
padding-left: 3px;
font-size: 140%;
line-height: 0px;
border: 0;
background: transparent;
&::before {
text-align: center;
vertical-align: middle;
content: "\00d7"; // Nicer X
}
}
}

View File

@ -4,3 +4,4 @@
@forward "tree";
@forward "transfer_menu";
@forward "upper_menu";
@forward "dialog";

View File

@ -99,6 +99,7 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
<label for="npt_dest">{"Destination"}</label>
<input type="submit" name="new_plate_button" value="Create" />
</form>
<form class="modal_close" method="dialog"><button /></form>
</dialog>
}
}

View File

@ -270,10 +270,11 @@ fn PlateInfoModal(props: &PlateInfoModalProps) -> Html {
}
html! {
<dialog id="crab" ref={dialog_ref} class="dialog" onclose={onclose}>
<dialog ref={dialog_ref} class="dialog" onclose={onclose}>
<h2>{"Plate Info"}</h2>
<h3 id="horse">{"Name: "}<input type="text" id="shrimp" value={plate_name} onchange={rename_onchange}/></h3>
<h3>{"Name: "}<input type="text" value={plate_name} onchange={rename_onchange}/></h3>
<button onclick={delete_onclick}>{"Delete"}</button>
<form class="modal_close" method="dialog"><button /></form>
</dialog>
}
}