mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-05 16:07:34 +02:00
Code Issues Releases Wiki Activity

fix: alert component broken layout (#4087)

Browse Source
This commit is contained in:
雨
2024-10-23 01:24:20 +08:00
committed by GitHub
parent 51015b3ca4
commit dc5a7ac647
2 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
framework/core/js/src/common/components/Alert.tsx
View File

@@ -61,17 +61,19 @@ export default class Alert<T extends AlertAttrs = AlertAttrs> extends Component<
return ( return (
<div {...attrs}> <div {...attrs}>
<div className={classList('Alert-container', attrs.containerClassName)}> <div className={classList('Alert-container', attrs.containerClassName)}>
{!!title && ( <div className="Alert-content">
<div className="Alert-title"> {!!title && (
{!!icon && ( <div className="Alert-title">
<span className="Alert-title-icon"> {!!icon && (
<Icon name={icon} /> <span className="Alert-title-icon">
</span> <Icon name={icon} />
)} </span>
<span className="Alert-title-text">{title}</span> )}
</div> <span className="Alert-title-text">{title}</span>
)} </div>
<span className="Alert-body">{content}</span> )}
<span className="Alert-body">{content}</span>
</div>
<ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul> <ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
</div> </div>
</div> </div>

8
framework/core/less/common/Alert.less
View File

@@ -67,13 +67,17 @@
display: none; display: none;
} }
} }
.Alert-content {
flex-direction: column;
}
.Alert-title { .Alert-title {
margin-bottom: 8px; margin-bottom: 8px;
font-weight: bold; font-weight: bold;
display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
.Alert-container { .Alert-container,
.Alert-content,
.Alert-title {
display: flex; display: flex;
} }