chipmunkmc/gamja
1
0
Fork 0
mirror of https://codeberg.org/emersion/gamja.git synced 2024-11-24 16:28:05 -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" onClick=${this.handleBackdropClick}>
<div class="dialog-body" ref=${this.body}> <div class="dialog-body" ref=${this.body}>
<div class="dialog-header"> <div class="dialog-header">
<a href="#" class="dialog-close" onClick=${this.handleCloseClick}>×</span>
<h2>${this.props.title}</h2> <h2>${this.props.title}</h2>
<button class="dialog-close" onClick=${this.handleCloseClick}>×</button>
</div> </div>
${this.props.children} ${this.props.children}
</div> </div>

18
style.css
View file

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