github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-05-23 23:29:57 +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

54
js/forum/src/components/Composer.js
View File

@ -62,7 +62,7 @@ class Composer extends Component {
view() {
const classes = {
'minimized': this.position === Composer.PositionEnum.MINIMIZED,
'full-screen': this.position === Composer.PositionEnum.FULLSCREEN
'fullScreen': this.position === Composer.PositionEnum.FULLSCREEN
};
classes.visible = this.position === Composer.PositionEnum.NORMAL || classes.minimized || classes.fullScreen;
@ -76,10 +76,10 @@ class Composer extends Component {
};
return (
<div className={'composer ' + classList(classes)}>
<div className="composer-handle"/>
<ul className="composer-controls">{listItems(this.controlItems().toArray())}</ul>
<div className="composer-content" onclick={showIfMinimized}>
<div className={'Composer ' + classList(classes)}>
<div className="Composer-handle" config={this.configHandle.bind(this)}/>
<ul className="Composer-controls">{listItems(this.controlItems().toArray())}</ul>
<div className="Composer-content" onclick={showIfMinimized}>
{this.component ? this.component.render() : ''}
</div>
</div>
@ -113,20 +113,8 @@ class Composer extends Component {
return (this.component && this.component.preventExit()) || null;
};
// Add the necessary event handlers to the composer's handle so that it can
// be used to resize the composer.
const composer = this;
const handlers = {};
this.$('.composer-handle').css('cursor', 'row-resize')
.bind('dragstart mousedown', e => e.preventDefault())
.mousedown(function(e) {
composer.mouseStart = e.clientY;
composer.heightStart = composer.$().height();
composer.handle = $(this);
$('body').css('cursor', 'row-resize');
});
$(window).on('resize', handlers.onresize = this.updateHeight.bind(this)).resize();
$(document)
@ -142,6 +130,28 @@ class Composer extends Component {
};
}
/**
* Add the necessary event handlers to the composer's handle so that it can
* be used to resize the composer.
*
* @param {DOMElement} element
* @param {Boolean} isInitialized
*/
configHandle(element, isInitialized) {
if (isInitialized) return;
const composer = this;
$(element).css('cursor', 'row-resize')
.bind('dragstart mousedown', e => e.preventDefault())
.mousedown(function(e) {
composer.mouseStart = e.clientY;
composer.heightStart = composer.$().height();
composer.handle = $(this);
$('body').css('cursor', 'row-resize');
});
}
/**
* Resize the composer according to mouse movement.
*
@ -185,15 +195,17 @@ class Composer extends Component {
* of any flexible elements inside the composer's body.
*/
updateHeight() {
// TODO: update this in a way that is independent of the TextEditor being
// present.
const height = this.computedHeight();
const $flexible = this.$('.flexible-height');
const $flexible = this.$('.TextEditor-flexible');
this.$().height(height);
if ($flexible.length) {
const headerHeight = $flexible.offset().top - this.$().offset().top;
const paddingBottom = parseInt($flexible.css('padding-bottom'), 10);
const footerHeight = this.$('.text-editor-controls').outerHeight(true);
const footerHeight = this.$('.TextEditor-controls').outerHeight(true);
$flexible.height(height - headerHeight - paddingBottom - footerHeight);
}
@ -209,7 +221,7 @@ class Composer extends Component {
this.position !== Composer.PositionEnum.MINIMIZED;
const paddingBottom = visible
? this.computedHeight() - parseInt($('#page').css('padding-bottom'), 10)
? this.computedHeight() - parseInt($('#app').css('padding-bottom'), 10)
: 0;
$('#content').css({paddingBottom});
}
@ -431,7 +443,7 @@ class Composer extends Component {
icon: 'minus minimize',
title: 'Minimize',
onclick: this.minimize.bind(this),
wrapperClass: 'back-control'
itemClassName: 'App-backControl'
}));
items.add('fullScreen', ComposerButton.component({