github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-05-23 15:19:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Major CSS revamp

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

17
js/forum/src/components/NotificationGrid.js
View File

@ -58,12 +58,12 @@ export default class NotificationGrid extends Component {
view() {
return (
<table className="notification-grid">
<table className="NotificationGrid">
<thead>
<tr>
<td/>
{this.methods.map(method => (
<th className="toggle-group" onclick={this.toggleMethod.bind(this, method.name)}>
<th className="NotificationGrid-groupToggle" onclick={this.toggleMethod.bind(this, method.name)}>
{icon(method.icon)} {method.label}
</th>
))}
@ -73,11 +73,11 @@ export default class NotificationGrid extends Component {
<tbody>
{this.types.map(type => (
<tr>
<td className="toggle-group" onclick={this.toggleType.bind(this, type.name)}>
<td className="NotificationGrid-groupToggle" onclick={this.toggleType.bind(this, type.name)}>
{type.label}
</td>
{this.methods.map(method => (
<td className="checkbox-cell">
<td className="NotificationGrid-checkbox">
{this.inputs[this.preferenceKey(type.name, method.name)].render()}
</td>
))}
@ -91,13 +91,12 @@ export default class NotificationGrid extends Component {
config(isInitialized) {
if (isInitialized) return;
var self = this;
this.$('thead .toggle-group').bind('mouseenter mouseleave', function(e) {
var i = parseInt($(this).index()) + 1;
self.$('table').find('td:nth-child('+i+')').toggleClass('highlighted', e.type === 'mouseenter');
this.$('thead .NotificationGrid-groupToggle').bind('mouseenter mouseleave', function(e) {
const i = parseInt($(this).index(), 10) + 1;
$(this).parents('table').find('td:nth-child(' + i + ')').toggleClass('highlighted', e.type === 'mouseenter');
});
this.$('tbody .toggle-group').bind('mouseenter mouseleave', function(e) {
this.$('tbody .NotificationGrid-groupToggle').bind('mouseenter mouseleave', function(e) {
$(this).parent().find('td').toggleClass('highlighted', e.type === 'mouseenter');
});
}