mirror of
https://github.com/flarum/core.git
synced 2025-07-30 21:20:24 +02:00
Big front-end asset/filestructure refactor
- Extract shared Ember components into a “flarum-common” ember-cli addon. This can be used by both the forum + admin Ember apps, keeping things DRY - Move LESS styles into their own top-level directory and do a similar thing (extract common styles) - Add LESS/JS compilation and versioning to PHP (AssetManager) - Set up admin entry point (Theoretical) upgrade instructions: - Delete everything in [app_root]/public - Set up tooling in forum/admin Ember apps (npm install/update, bower install/update) and then build them (ember build) - php artisan vendor:publish - Upgrade flarum/flarum repo (slight change in a config file) - If you need to trigger a LESS/JS recompile, delete the .css/.js files in [app_root]/public/flarum. I set up LiveReload to do this for me when I change files in less/ or ember/ Todo: - Start writing admin app! - Remove bootstrap/font-awesome from repo and instead depend on their composer packages? Maybe? (Bower is not an option here)
This commit is contained in:
91
less/common/bootstrap/mixins/grid-framework.less
Executable file
91
less/common/bootstrap/mixins/grid-framework.less
Executable file
@@ -0,0 +1,91 @@
|
||||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `@grid-columns`.
|
||||
|
||||
.make-grid-columns() {
|
||||
// Common styles for all sizes of grid columns, widths 1-12
|
||||
.col(@index) { // initial
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
|
||||
.float-grid-columns(@class) {
|
||||
.col(@index) { // initial
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
|
||||
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
|
||||
.col-@{class}-@{index} {
|
||||
width: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
|
||||
.col-@{class}-push-@{index} {
|
||||
left: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
|
||||
.col-@{class}-push-0 {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
|
||||
.col-@{class}-pull-@{index} {
|
||||
right: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
|
||||
.col-@{class}-pull-0 {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = offset) {
|
||||
.col-@{class}-offset-@{index} {
|
||||
margin-left: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Basic looping in LESS
|
||||
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
|
||||
.calc-grid-column(@index, @class, @type);
|
||||
// next iteration
|
||||
.loop-grid-columns((@index - 1), @class, @type);
|
||||
}
|
||||
|
||||
// Create grid for specific class
|
||||
.make-grid(@class) {
|
||||
.float-grid-columns(@class);
|
||||
.loop-grid-columns(@grid-columns, @class, width);
|
||||
.loop-grid-columns(@grid-columns, @class, pull);
|
||||
.loop-grid-columns(@grid-columns, @class, push);
|
||||
.loop-grid-columns(@grid-columns, @class, offset);
|
||||
}
|
Reference in New Issue
Block a user