chipmunkmc/gamja-old
1
0
Fork 0
mirror of https://git.sr.ht/~emersion/gamja synced 2024-11-24 00:28:06 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Turn dialog close button into a <button>

Browse source 
This is semantically more correct.
This commit is contained in:
Simon Ser 2021-06-22 16:02:55 +02:00
parent 1ea3180f5b
commit 0d36e8a3fc
2 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/dialog.js
View file

@ -50,8 +50,8 @@ export default class Dialog extends Component {
<div class="dialog" onClick=${this.handleBackdropClick}>
<div class="dialog-body" ref=${this.body}>
<div class="dialog-header">
<a href="#" class="dialog-close" onClick=${this.handleCloseClick}>×</span>
<h2>${this.props.title}</h2>
<button class="dialog-close" onClick=${this.handleCloseClick}>×</button>
</div>
${this.props.children}
</div>

18
style.css
View file

@ -460,7 +460,7 @@ details summary[role="button"] {
margin: 0.5rem;
}
#error-msg button {
#error-msg button, .dialog button.dialog-close {
border: none;
background: transparent;
color: inherit;
@ -489,11 +489,19 @@ details summary[role="button"] {
padding: 15px;
border: 1px solid rgba(0, 0, 0, 0.6);
}
.dialog a.dialog-close {
float: right;
text-decoration: none;
.dialog .dialog-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 1em;
}
.dialog .dialog-header h2 {
flex-grow: 1;
margin: 0;
}
.dialog .dialog-header button.dialog-close {
font-size: 1.5em;
color: inherit;
padding: 0 5px;
}
.dialog h2 {
margin-top: 0;