mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-05 07:57:46 +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 (
<div {...attrs}>
<div className={classList('Alert-container', attrs.containerClassName)}>
{!!title && (
<div className="Alert-title">
{!!icon && (
<span className="Alert-title-icon">
<Icon name={icon} />
</span>
)}
<span className="Alert-title-text">{title}</span>
</div>
)}
<span className="Alert-body">{content}</span>
<div className="Alert-content">
{!!title && (
<div className="Alert-title">
{!!icon && (
<span className="Alert-title-icon">
<Icon name={icon} />
</span>
)}
<span className="Alert-title-text">{title}</span>
</div>
)}
<span className="Alert-body">{content}</span>
</div>
<ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
</div>
</div>

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

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