1
0
mirror of https://github.com/flarum/core.git synced 2025-10-12 07:24:27 +02:00

Major CSS revamp

- Get rid of Bootstrap (except we still rely on some JS)
- Use BEM class names
- Rework variables/theme config
- Fix various bugs, including some on mobile

The CSS is still not ideal – it needs to be cleaned up some more. But
that can be a focus for after beta.
This commit is contained in:
Toby Zerner
2015-07-17 14:47:49 +09:30
parent 76678f72f2
commit a9ded36b57
206 changed files with 4337 additions and 8830 deletions

View File

@@ -53,42 +53,42 @@ export default class NotificationList extends Component {
}
return (
<div className="notification-list">
<div className="notifications-header">
<div className="primary-control">
<div className="NotificationList">
<div className="NotificationList-header">
<div className="App-primaryControl">
{Button.component({
className: 'btn btn-icon btn-link btn-sm',
className: 'Button Button--icon Button--link',
icon: 'check',
title: 'Mark All as Read',
onclick: this.markAllAsRead.bind(this)
})}
</div>
<h4 className="title-control">Notifications</h4>
<h4 className="App-titleControl App-titleControl--text">Notifications</h4>
</div>
<div className="notifications-content">
<div className="NotificationList-content">
{groups.length
? groups.map(group => {
const badges = group.discussion && group.discussion.badges().toArray();
return (
<div className="notification-group">
<div className="NotificationGroup">
{group.discussion
? (
<a className="notification-group-header"
<a className="NotificationGroup-header"
href={app.route.discussion(group.discussion)}
config={m.route}>
{badges && badges.length ? <ul className="badges">{listItems(badges)}</ul> : ''}
{badges && badges.length ? <ul className="NotificationGroup-badges">{listItems(badges)}</ul> : ''}
{group.discussion.title()}
</a>
) : (
<div className="notification-group-header">
<div className="NotificationGroup-header">
{app.forum.attribute('title')}
</div>
)}
<ul className="notification-group-list">
<ul className="NotificationGroup-content">
{group.notifications.map(notification => {
const NotificationComponent = app.notificationComponents[notification.contentType()];
return NotificationComponent ? <li>{NotificationComponent.component({notification})}</li> : '';
@@ -98,8 +98,8 @@ export default class NotificationList extends Component {
);
})
: !this.loading
? <div className="no-notifications">No Notifications</div>
: LoadingIndicator.component({className: 'loading-indicator-block'})}
? <div className="NotificationList-empty">No Notifications</div>
: LoadingIndicator.component({className: 'LoadingIndicator--block'})}
</div>
</div>
);