TV Addicts',
- // forumTitle: '
',
- // forumTitle: ' Med Students Forum',
- pageTitle: '',
- documentTitle: function() {
- return this.get('pageTitle') || this.get('forumTitle');
- }.property('pageTitle', 'forumTitle'),
- _updateTitle: function() {
+ // The title of the current page. This should be set as appropriate in
+ // controllers/views.
+ pageTitle: '',
+
+ // When either the forum title or the page title changes, we want to
+ // refresh the document's title.
+ updateTitle: function() {
var parts = [this.get('forumTitle')];
var pageTitle = this.get('pageTitle');
- if (pageTitle) parts.unshift(pageTitle);
+ if (pageTitle) {
+ parts.unshift(pageTitle);
+ }
document.title = parts.join(' - ');
}.observes('pageTitle', 'forumTitle'),
+ // Whether or not a pane is currently pinned to the side of the interface.
+ panePinned: false,
+
searchQuery: '',
searchActive: false,
- showDiscussionStream: false,
-
- // notificationMessage: NotificationMessage.create({text: 'Sorry, you do not have permission to do that!', class: 'message-warning'}), // currently displaying notification message object
-
- currentUser: null,
-
actions: {
-
- hideMessage: function() {
- this.set('notificationMessage', null);
- },
-
search: function(query) {
- this.transitionToRoute('discussions', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
- },
-
+ this.transitionToRoute('index', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
+ }
}
-
});
diff --git a/framework/core/ember/app/controllers/composer.js b/framework/core/ember/app/controllers/composer.js
index 199a258fa..ed8fb90ae 100644
--- a/framework/core/ember/app/controllers/composer.js
+++ b/framework/core/ember/app/controllers/composer.js
@@ -2,7 +2,9 @@ import Ember from 'ember';
export default Ember.Controller.extend({
- needs: ['discussions'],
+ needs: ['index'],
+
+ user: Ember.Object.create({avatarNumber: 1}),
showing: false,
diff --git a/framework/core/ember/app/controllers/discussion.js b/framework/core/ember/app/controllers/discussion.js
index 2558c1864..dc38ff961 100644
--- a/framework/core/ember/app/controllers/discussion.js
+++ b/framework/core/ember/app/controllers/discussion.js
@@ -1,6 +1,6 @@
import Ember from 'ember';
-import Stream from '../models/stream';
+import PostStream from '../models/post-stream';
export default Ember.ObjectController.extend(Ember.Evented, {
@@ -19,7 +19,7 @@ export default Ember.ObjectController.extend(Ember.Evented, {
// Set up the post stream object. It needs to know about the discussion
// its representing the posts for, and we also need to inject the Ember
// data store.
- var stream = Stream.create();
+ var stream = PostStream.create();
stream.set('discussion', discussion);
stream.set('store', this.get('store'));
this.set('stream', stream);
@@ -30,74 +30,25 @@ export default Ember.ObjectController.extend(Ember.Evented, {
var promise = discussion.get('posts') ? Ember.RSVP.resolve(discussion) : discussion.reload();
// When we know we have the post IDs, we can set up the post stream with
- // them. Then we're ready to load some posts!
+ // them. Then the view will trigger the stream to load as it sees fit.
var controller = this;
promise.then(function(discussion) {
stream.setup(discussion.get('postIds'));
controller.set('loaded', true);
- controller.send('jumpToNumber', controller.get('start'));
});
},
actions: {
-
reply: function() {
this.set('controllers.composer.showing', true);
this.set('controllers.composer.title', 'Replying to '+this.get('model.title')+'');
},
- jumpToNumber: function(number) {
- // In some instances, we might be given a placeholder start index
- // value. We need to convert this into a numerical value.
- switch (number) {
- case 'last':
- number = this.get('model.lastPostNumber');
- break;
-
- case 'unread':
- number = this.get('model.readNumber') + 1;
- break;
- }
-
- number = Math.max(number, 1);
-
- // Let's start by telling our listeners that we're going to load
- // posts near this number. The discussion view will listen and
- // consequently scroll down to the appropriate position in the
- // discussion.
- this.trigger('loadingNumber', number);
-
- // Now we have to actually make sure the posts around this new start
- // position are loaded. We will tell our listeners when they are.
- // Again, the view will scroll down to the appropriate post.
- var controller = this;
- this.get('stream').loadNearNumber(number).then(function() {
- Ember.run.scheduleOnce('afterRender', function() {
- controller.trigger('loadedNumber', number);
- });
- });
- },
-
- jumpToIndex: function(index) {
- // Let's start by telling our listeners that we're going to load
- // posts at this index. The discussion view will listen and
- // consequently scroll down to the appropriate position in the
- // discussion.
- this.trigger('loadingIndex', index);
-
- // Now we have to actually make sure the posts around this index are
- // loaded. We will tell our listeners when they are. Again, the view
- // will scroll down to the appropriate post.
- var controller = this;
- this.get('stream').loadNearIndex(index).then(function() {
- Ember.run.scheduleOnce('afterRender', function() {
- controller.trigger('loadedIndex', index);
- });
- });
- },
-
- loadRange: function(start, end, backwards) {
- this.get('stream').loadRange(start, end, backwards);
+ // This action is called when the start position of the discussion
+ // currently being viewed changes (i.e. when the user scrolls up/down
+ // the post stream.)
+ updateStart: function(start) {
+ this.set('start', start);
}
}
});
diff --git a/framework/core/ember/app/controllers/discussions.js b/framework/core/ember/app/controllers/index.js
similarity index 67%
rename from framework/core/ember/app/controllers/discussions.js
rename to framework/core/ember/app/controllers/index.js
index 1f8da14b0..c988f69ab 100644
--- a/framework/core/ember/app/controllers/discussions.js
+++ b/framework/core/ember/app/controllers/index.js
@@ -2,44 +2,16 @@ import Ember from 'ember';
import DiscussionResult from '../models/discussion-result';
import PostResult from '../models/post-result';
+import PaneableMixin from '../mixins/paneable';
-export default Ember.ArrayController.extend(Ember.Evented, {
+export default Ember.ArrayController.extend(Ember.Evented, PaneableMixin, {
needs: ['application', 'composer'],
- paned: false,
- paneShowing: false,
- paneTimeout: null,
- panePinned: false,
-
- current: null,
-
- index: function() {
- var index = '?';
- var id = this.get('current.id');
- this.get('model').some(function(result, i) {
- if (result.get('id') == id) {
- index = i + 1;
- return true;
- }
- });
- return index;
- }.property('current', 'model.@each'),
-
count: function() {
return this.get('model.length');
}.property('model.@each'),
- previous: function() {
- var result = this.get('model').objectAt(this.get('index') - 2);
- return result && result.get('content');
- }.property('index'),
-
- next: function() {
- var result = this.get('model').objectAt(this.get('index'));
- return result && result.get('content');
- }.property('index'),
-
queryParams: ['sort', 'show', {searchQuery: 'q'}, 'filter'],
sort: 'recent',
show: 'discussions',
@@ -55,8 +27,12 @@ export default Ember.ArrayController.extend(Ember.Evented, {
{sort: 'oldest', label: 'Oldest'},
],
- displayStartUsers: function() {
- return ['newest', 'oldest'].indexOf(this.get('sort')) != -1;
+ terminalPostType: function() {
+ return ['newest', 'oldest'].indexOf(this.get('sort')) != -1 ? 'start' : 'last';
+ }.property('sort'),
+
+ countType: function() {
+ return this.get('sort') == 'replies' ? 'replies' : 'unread';
}.property('sort'),
discussionsCount: function() {
@@ -80,10 +56,11 @@ export default Ember.ArrayController.extend(Ember.Evented, {
var show = this.get('show');
var searchQuery = this.get('searchQuery');
- if (sort == 'newest') sort = 'created';
- else if (sort == 'oldest') {
+ if (sort == 'newest') {
+ sort = 'created';
+ order = 'desc';
+ } else if (sort == 'oldest') {
sort = 'created';
- order = 'asc';
}
else if (sort == 'recent') {
sort = '';
@@ -124,37 +101,24 @@ export default Ember.ArrayController.extend(Ember.Evented, {
},
actions: {
- showDiscussionPane: function() {
- this.set('paneShowing', true);
- },
-
- hideDiscussionPane: function() {
- this.set('paneShowing', false);
- },
-
- togglePinned: function() {
- this.set('panePinned', ! this.get('panePinned'));
- },
-
loadMore: function() {
var self = this;
this.set('start', this.get('length'));
- this.set('loadingMore', true);
+ this.set('resultsLoading', true);
this.getResults(this.get('start')).then(function(results) {
self.get('model').addObjects(results);
self.set('meta', results.get('meta'));
- // self.set('moreResults', !! results.get('meta.moreUrl'));
- self.set('loadingMore', false);
+ self.set('resultsLoading', false);
});
},
- delete: function(discussion) {
- alert('are you sure you want to delete discusn: '+discussion.get('title'));
+ transitionFromBackButton: function() {
+ this.transitionToRoute('index');
}
},
- queryDidChange: function(q) {
+ searchQueryDidChange: function(q) {
this.get('controllers.application').set('searchQuery', this.get('searchQuery'));
this.get('controllers.application').set('searchActive', !! this.get('searchQuery'));
diff --git a/framework/core/ember/app/controllers/discussions/index.js b/framework/core/ember/app/controllers/index/index.js
similarity index 66%
rename from framework/core/ember/app/controllers/discussions/index.js
rename to framework/core/ember/app/controllers/index/index.js
index 11f03b553..e2128002e 100644
--- a/framework/core/ember/app/controllers/discussions/index.js
+++ b/framework/core/ember/app/controllers/index/index.js
@@ -1,5 +1,5 @@
import Ember from 'ember';
export default Ember.ArrayController.extend({
- needs: ['application', 'composer']
+ needs: ['application']
});
diff --git a/framework/core/ember/app/helpers/fa-icon.js b/framework/core/ember/app/helpers/fa-icon.js
index b1b464acc..6c5375e9d 100644
--- a/framework/core/ember/app/helpers/fa-icon.js
+++ b/framework/core/ember/app/helpers/fa-icon.js
@@ -1,6 +1,6 @@
import Ember from 'ember';
export default Ember.Handlebars.makeBoundHelper(function(icon, options) {
- return new Handlebars.SafeString('');
+ return new Handlebars.SafeString('');
});
diff --git a/framework/core/ember/app/mixins/paneable.js b/framework/core/ember/app/mixins/paneable.js
new file mode 100644
index 000000000..8d1dc076d
--- /dev/null
+++ b/framework/core/ember/app/mixins/paneable.js
@@ -0,0 +1,47 @@
+import Ember from 'ember';
+
+// This mixin defines a "paneable" controller - this is, one that has a
+// portion of its interface that can be turned into a pane which slides out
+// from the side of the screen. This is useful, for instance, when you have
+// nested routes (index > discussion) and want to have the parent
+// route's interface transform into a side pane when entering the child route.
+export default Ember.Mixin.create({
+ needs: ['application'],
+
+ // Whether or not the "paneable" interface element is paned.
+ paned: false,
+
+ // Whether or not the pane should be visible on screen.
+ paneShowing: false,
+ paneHideTimeout: null,
+
+ // Whether or not the pane is always visible on screen, even when the
+ // mouse is taken away.
+ panePinned: false,
+
+ actions: {
+ showPane: function() {
+ if (this.get('paned')) {
+ clearTimeout(this.get('paneHideTimeout'));
+ this.set('paneShowing', true);
+ }
+ },
+
+ hidePane: function(delay) {
+ var controller = this;
+ controller.set('paneHideTimeout', setTimeout(function() {
+ controller.set('paneShowing', false);
+ }, delay || 250));
+ },
+
+ togglePinned: function() {
+ this.toggleProperty('panePinned');
+ }
+ },
+
+ // Tell the application controller when we pin/unpin the pane so that
+ // other parts of the interface can respond appropriately.
+ panePinnedChanged: function() {
+ this.set('controllers.application.panePinned', this.get('paned') && this.get('panePinned'));
+ }.observes('paned', 'panePinned')
+});
\ No newline at end of file
diff --git a/framework/core/ember/app/mixins/post-stream.js b/framework/core/ember/app/mixins/post-stream.js
deleted file mode 100644
index bce952d97..000000000
--- a/framework/core/ember/app/mixins/post-stream.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export default Ember.Mixin.create({
- // Find the DOM element of the item that is nearest to a post with a certain
- // number. This will either be another post (if the requested post doesn't
- // exist,) or a gap presumed to container the requested post.
- findNearestToNumber: function(number) {
- var nearestItem = $();
- $('.posts .item').each(function() {
- var $this = $(this),
- thisNumber = $this.data('number');
- if (thisNumber > number) {
- return false;
- }
- nearestItem = $this;
- });
- return nearestItem;
- },
-
- findNearestToIndex: function(index) {
- var nearestItem = $('.posts .item[data-start='+index+'][data-end='+index+']');
-
- if (! nearestItem.length) {
- $('.posts .item').each(function() {
- var $this = $(this);
- if ($this.data('start') <= index && $this.data('end') >= index) {
- nearestItem = $this;
- return false;
- }
- });
- }
-
- return nearestItem;
- }
-});
diff --git a/framework/core/ember/app/models/discussion-state.js b/framework/core/ember/app/models/discussion-state.js
deleted file mode 100644
index d2cb576c6..000000000
--- a/framework/core/ember/app/models/discussion-state.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Ember from 'ember';
-import DS from 'ember-data';
-
-export default DS.Model.extend({
- readTime: DS.attr('date'),
- readNumber: DS.attr('number')
-});
diff --git a/framework/core/ember/app/models/stream.js b/framework/core/ember/app/models/post-stream.js
similarity index 81%
rename from framework/core/ember/app/models/stream.js
rename to framework/core/ember/app/models/post-stream.js
index c4d19fd7d..9e3aa997e 100644
--- a/framework/core/ember/app/models/stream.js
+++ b/framework/core/ember/app/models/post-stream.js
@@ -6,8 +6,10 @@ import Ember from 'ember';
export default Ember.ArrayProxy.extend(Ember.Evented, {
// An array of all of the post IDs, in chronological order, in the discussion.
- ids: Em.A(),
- content: Em.A(),
+ ids: null,
+
+ content: null,
+
store: null,
discussion: null,
@@ -19,12 +21,14 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
setup: function(ids) {
this.set('ids', ids);
- this.clear();
+ this.get('content').objectAt(0).set('indexEnd', this.get('count') - 1);
},
- count: function() {
- return this.get('ids.length');
- }.property('ids'),
+ count: Ember.computed.alias('ids.length'),
+
+ loadedCount: function() {
+ return this.get('content').filterBy('content').length;
+ }.property('content.@each'),
firstLoaded: function() {
var first = this.objectAt(0);
@@ -38,15 +42,15 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
// Clear the contents of the post stream, resetting it to one big gap.
clear: function() {
- var stream = this.get('content');
- stream.enumerableContentWillChange();
- stream.clear().pushObject(Em.Object.create({
+ var content = Ember.A();
+ content.clear().pushObject(Em.Object.create({
gap: true,
indexStart: 0,
indexEnd: this.get('count') - 1,
loading: true
}));
- stream.enumerableContentDidChange();
+ this.set('content', content);
+ this.set('ids', Ember.A());
},
loadRange: function(start, end, backwards) {
@@ -92,8 +96,8 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
// request.) Or, if it's a gap, we'll switch on its loading flag.
var item = this.findNearestToNumber(number);
if (item) {
- if (item.get('post.number') == number) {
- return Ember.RSVP.resolve([item.get('post')]);
+ if (item.get('content.number') == number) {
+ return Ember.RSVP.resolve([item.get('content')]);
} else if (item.gap) {
item.set('direction', 'down').set('loading', true);
}
@@ -102,7 +106,8 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
var stream = this;
return this.store.find('post', {
discussions: this.get('discussion.id'),
- near: number
+ near: number,
+ count: this.get('postLoadCount')
}).then(function(posts) {
stream.addPosts(posts);
});
@@ -116,11 +121,11 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
var item = this.findNearestToIndex(index);
if (item) {
if (! item.gap) {
- return Ember.RSVP.resolve([item.get('post')]);
+ return Ember.RSVP.resolve([item.get('content')]);
} else {
item.set('direction', 'down').set('loading', true);
}
- return this.loadRange(Math.max(item.indexStart, index - 10), item.indexEnd);
+ return this.loadRange(Math.max(item.indexStart, index - this.get('postLoadCount') / 2), item.indexEnd);
}
return Ember.RSVP.reject();
@@ -158,7 +163,7 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
newItems.push(Ember.Object.create({
indexStart: index,
indexEnd: index,
- post: post
+ content: post
}));
if (item.indexEnd > index) {
newItems.push(Ember.Object.create({
@@ -167,35 +172,29 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
indexEnd: item.indexEnd
}));
}
- content.enumerableContentWillChange();
content.replace(i, 1, newItems);
- content.enumerableContentDidChange();
return true;
}
- });
+ });
+ },
+
+ findNearestTo: function(index, property) {
+ var nearestItem;
+ this.get('content').some(function(item) {
+ nearestItem = item;
+ if (item.get(property) > index) {
+ return true;
+ }
+ });
+ return nearestItem;
},
findNearestToNumber: function(number) {
- var nearestItem;
- this.get('content').some(function(item) {
- var thisNumber = item.get('post.number');
- if (thisNumber > number) {
- return true;
- }
- nearestItem = item;
- });
- return nearestItem;
+ return this.findNearestTo(number, 'content.number');
},
findNearestToIndex: function(index) {
- var nearestItem;
- this.get('content').some(function(item) {
- if (item.indexStart <= index && item.indexEnd >= index) {
- nearestItem = item;
- return true;
- }
- });
- return nearestItem;
+ return this.findNearestTo(index, 'indexEnd');
}
});
diff --git a/framework/core/ember/app/router.js b/framework/core/ember/app/router.js
index 7e5ad6637..86b1f3ac9 100644
--- a/framework/core/ember/app/router.js
+++ b/framework/core/ember/app/router.js
@@ -1,14 +1,13 @@
import Ember from 'ember';
import config from './config/environment';
-console.log(config.locationType);
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
- this.resource('discussions', {path: '/'}, function() {
+ this.resource('index', {path: '/'}, function() {
this.resource('discussion', {path: '/:id/:slug'}, function() {
this.route('near', {path: '/:near'});
});
diff --git a/framework/core/ember/app/routes/discussion.js b/framework/core/ember/app/routes/discussion.js
index c0dee2df9..e745e0496 100644
--- a/framework/core/ember/app/routes/discussion.js
+++ b/framework/core/ember/app/routes/discussion.js
@@ -16,40 +16,45 @@ export default Ember.Route.extend({
controller.set('start', '1');
controller.set('searchQuery', '');
controller.set('loaded', false);
- controller.set('postStream', null);
+ controller.set('stream', null);
},
setupController: function(controller, model) {
controller.setup(model);
- this.controllerFor('application').set('showDiscussionStream', true);
- this.controllerFor('discussions').set('paned', true);
- this.controllerFor('discussions').set('current', model);
+ // Tell the discussions controller that the discussions list should be
+ // displayed as a pane, hidden on the side of the screen. Also set the
+ // application back button's target as the discussions controller.
+ this.controllerFor('index').set('paned', true);
+ this.controllerFor('application').set('backButtonTarget', this.controllerFor('index'));
},
actions: {
queryParamsDidChange: function(params) {
- // We're only interested in changes to the ?start param, and we're
- // not interested if nothing has actually changed. If the start
- // param has changed, we want to tell the controller to load posts
- // near it.
- if (! params.start || params.start == this.get('controller.start') || ! this.get('controller.loaded')) {
- return;
- }
- this.get('controller').send('jumpToNumber', params.start);
+ // If the ?start param has changed, we want to tell the view to
+ // tell the streamContent component to jump to this start point.
+ // We postpone running this code until the next run loop because
+ // when transitioning directly from one discussion to another,
+ // queryParamsDidChange is fired before the controller is reset.
+ // Thus, controller.loaded would still be true and the
+ // startWasChanged event would be triggered inappropriately.
+ var controller = this.get('controller'),
+ oldStart = this.get('controller.start');
+ Ember.run.next(function() {
+ if (! params.start || ! controller || ! controller.get('loaded') || params.start == oldStart) {
+ return;
+ }
+ controller.trigger('startWasChanged', params.start);
+ });
},
willTransition: function(transition) {
- // If we're going to transition out, we need to abort any unfinished
- // AJAX requests. We need to do this because sometimes a transition
- // to another discussion will happen very rapidly (i.e. when using
- // the arrow buttons on the result stream.) If a previous
- // discussion's posts finish loading while displaying a new
- // discussion, strange things will happen.
- this.store.adapterFor('discussion').xhr.forEach(function(xhr) {
- xhr.abort();
- });
+ // When we transition away from this discussion, we want to hide
+ // the discussions list pane. This means that when the user
+ // selects a different discussion within the pane, the pane will
+ // slide away.
+ this.controllerFor('index').set('paneShowing', false);
}
}
diff --git a/framework/core/ember/app/routes/discussions/index.js b/framework/core/ember/app/routes/discussions/index.js
deleted file mode 100644
index 41b5f5b11..000000000
--- a/framework/core/ember/app/routes/discussions/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-
- setupController: function(controller, model) {
- this.controllerFor('discussions').set('paneShowing', false);
- this.controllerFor('discussions').set('paned', false);
- this.controllerFor('application').set('showDiscussionStream', false);
- this._super(controller, model);
- }
-
-});
diff --git a/framework/core/ember/app/routes/discussions.js b/framework/core/ember/app/routes/index.js
similarity index 99%
rename from framework/core/ember/app/routes/discussions.js
rename to framework/core/ember/app/routes/index.js
index b3f55afa8..ef31d3be6 100644
--- a/framework/core/ember/app/routes/discussions.js
+++ b/framework/core/ember/app/routes/index.js
@@ -8,7 +8,7 @@ export default Ember.Route.extend({
if ( ! model.get('length')) {
controller.set('resultsLoading', true);
-
+
controller.getResults().then(function(results) {
controller
.set('resultsLoading', false)
diff --git a/framework/core/ember/app/routes/index/index.js b/framework/core/ember/app/routes/index/index.js
new file mode 100644
index 000000000..8cd8adfc1
--- /dev/null
+++ b/framework/core/ember/app/routes/index/index.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+
+ // When we enter the discussions list view, we no longer want the
+ // discussions list to be in pane mode.
+ setupController: function(controller, model) {
+ this.controllerFor('index').set('paned', false);
+ this.controllerFor('index').set('paneShowing', false);
+ this._super(controller, model);
+ }
+
+});
diff --git a/framework/core/ember/app/styles/app.less b/framework/core/ember/app/styles/app.less
index cd63f717d..6ba7349be 100644
--- a/framework/core/ember/app/styles/app.less
+++ b/framework/core/ember/app/styles/app.less
@@ -1,12 +1,24 @@
+// This files is where our LESS journey begins.
+
+// We begin by importing our own configuration variables, which are used all
+// throughout the stylesheets. These pertain to
// @import "config-default.less";
@import "config.less";
-@flarum-base: "flarum/";
-@bootstrap-base: "../../bower_components/bootstrap/less/";
+@flarum-base: "flarum/";
+@bootstrap-base: "../../bower_components/bootstrap/less/";
@font-awesome-base: "../../bower_components/font-awesome/less/";
@import "bootstrap/bootstrap.less";
-@import "@{font-awesome-base}font-awesome.less";
+// We want to specify the @fa-font-path variable AFTER we import font awesome
+// so that it overrides the default definition.
+@import "@{font-awesome-base}font-awesome.less";
@fa-font-path: "../font-awesome/fonts";
+// Finally, with our vendor CSS loaded, we can import Flarum-specific stuff.
+@import "@{flarum-base}components.less";
+@import "@{flarum-base}layout.less";
+
+@import "@{flarum-base}index.less";
+@import "@{flarum-base}discussion.less";
\ No newline at end of file
diff --git a/framework/core/ember/app/styles/bootstrap/bootstrap.less b/framework/core/ember/app/styles/bootstrap/bootstrap.less
index 18e83472b..de196ca7f 100644
--- a/framework/core/ember/app/styles/bootstrap/bootstrap.less
+++ b/framework/core/ember/app/styles/bootstrap/bootstrap.less
@@ -25,19 +25,19 @@
// @import "@{bootstrap-base}navs.less";
// @import "@{bootstrap-base}navbar.less";
// @import "@{bootstrap-base}breadcrumbs.less";
-@import "@{bootstrap-base}pagination.less";
+// @import "@{bootstrap-base}pagination.less";
// @import "@{bootstrap-base}pager.less";
// @import "@{bootstrap-base}labels.less";
// @import "@{bootstrap-base}badges.less";
// @import "@{bootstrap-base}jumbotron.less";
// @import "@{bootstrap-base}thumbnails.less";
// @import "@{bootstrap-base}alerts.less";
-@import "@{bootstrap-base}progress-bars.less";
+// @import "@{bootstrap-base}progress-bars.less";
// @import "@{bootstrap-base}media.less";
// @import "@{bootstrap-base}list-group.less";
// @import "@{bootstrap-base}panels.less";
// @import "@{bootstrap-base}wells.less";
-@import "@{bootstrap-base}close.less";
+// @import "@{bootstrap-base}close.less";
// Components w/ JavaScript
@import "@{bootstrap-base}modals.less";
diff --git a/framework/core/ember/app/styles/bootstrap/variables.less b/framework/core/ember/app/styles/bootstrap/variables.less
index c25915906..9fa87c801 100644
--- a/framework/core/ember/app/styles/bootstrap/variables.less
+++ b/framework/core/ember/app/styles/bootstrap/variables.less
@@ -1 +1,19 @@
-@btn-primary-bg: @fl-primary-color;
\ No newline at end of file
+@brand-primary: @fl-primary-color;
+
+@body-bg: @fl-body-bg;
+@text-color: @fl-body-color;
+@font-size-base: 13px;
+
+@font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+@padding-base-vertical: 8px;
+@padding-base-horizontal: 13px;
+
+@btn-default-bg: @fl-body-control-bg;
+@btn-default-color: @fl-body-control-color;
+
+@input-bg: @fl-body-control-bg;
+@input-border-focus: darken(@fl-body-control-bg, 5%);
+@input-border: @fl-body-control-bg;
+@input-color: @fl-body-control-color;
+@input-color-placeholder: @fl-body-control-color;
\ No newline at end of file
diff --git a/framework/core/ember/app/styles/config.less b/framework/core/ember/app/styles/config.less
index 83426b9c4..bc1b75392 100644
--- a/framework/core/ember/app/styles/config.less
+++ b/framework/core/ember/app/styles/config.less
@@ -1,4 +1,4 @@
-@fl-primary-color: #4d698e;
+@fl-primary-color: #4d698e;//#E7562E;
@fl-secondary-color: #edf2f7;
@fl-dark-hdr: false;
@@ -7,7 +7,7 @@
@fl-body-bg: #fff;
@fl-body-color: #444;
-@fl-body-muted-color: hsl(hue(@fl-secondary-color), 18%, 72%); // todo
+@fl-body-muted-color: hsv(hue(@fl-secondary-color), 18%, 72%); // todo
@fl-body-muted-more-color: #bbb;
@fl-body-heading-color: @fl-body-color;
@@ -20,14 +20,24 @@
// ---------------------------------
// HEADER
-@fl-hdr-light-bg: @fl-body-bg;
-@fl-hdr-light-color: @fl-primary-color;
-@fl-hdr-light-muted-color: @fl-body-muted-color;
-@fl-hdr-light-control-bg: @fl-body-control-bg;
-@fl-hdr-light-control-color: @fl-body-control-color;
+.define-hdr-variables(@fl-dark-hdr);
+.define-hdr-variables(false) {
+ @fl-hdr-bg: @fl-body-bg;
+ @fl-hdr-color: @fl-primary-color;
+ @fl-hdr-muted-color: @fl-body-muted-color;
+ @fl-hdr-control-bg: @fl-body-control-bg;
+ @fl-hdr-control-color: @fl-body-control-color;
-@fl-hdr-dark-bg: @fl-primary-color;
-@fl-hdr-dark-color: #fff;
-@fl-hdr-dark-muted-color: fade(#fff, 0.5);
-@fl-hdr-dark-control-bg: fade(#000, 0.1);
-@fl-hdr-dark-control-color: #fff;
\ No newline at end of file
+ @fl-body-hero-bg: @fl-primary-color;
+ @fl-body-hero-color: #fff;
+}
+.define-hdr-variables(true) {
+ @fl-hdr-bg: @fl-primary-color;
+ @fl-hdr-color: #fff;
+ @fl-hdr-muted-color: fade(#fff, 0.5);
+ @fl-hdr-control-bg: fade(#000, 0.1);
+ @fl-hdr-control-color: #fff;
+
+ @fl-body-hero-bg: @fl-secondary-color;
+ @fl-body-hero-color: @fl-body-muted-color;
+}
\ No newline at end of file
diff --git a/framework/core/ember/app/styles/flarum/components.less b/framework/core/ember/app/styles/flarum/components.less
new file mode 100644
index 000000000..1787924a8
--- /dev/null
+++ b/framework/core/ember/app/styles/flarum/components.less
@@ -0,0 +1,224 @@
+// ------------------------------------
+// Buttons
+
+.btn {
+ border: 0;
+ .box-shadow(none);
+ line-height: 20px;
+
+ & .fa {
+ font-size: 14px;
+ }
+}
+.btn-group .btn + .btn {
+ margin-left: 1px;
+}
+.btn-icon {
+ padding-left: 9px;
+ padding-right: 9px;
+}
+.btn-link {
+ color: @fl-body-muted-color;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+}
+.btn-primary {
+ font-weight: bold;
+ & .icon-glyph {
+ display: none;
+ }
+}
+
+// Redefine Bootstrap's mixin to make some general changes
+.button-variant(@color; @background; @border) {
+ &:hover,
+ &:focus,
+ &.focus,
+ &:active,
+ &.active,
+ .open > .dropdown-toggle& {
+ background-color: darken(@background, 5%);
+ }
+ &.active {
+ .box-shadow(none);
+ }
+}
+
+// Little round icon buttons
+.btn-icon.btn-sm {
+ border-radius: 12px;
+ height: 24px;
+ width: 24px;
+ text-align: center;
+ padding: 3px 0;
+
+ & .label, & .icon-caret {
+ display: none;
+ }
+ & .fa-ellipsis-v {
+ font-size: 17px;
+ vertical-align: middle;
+ }
+}
+
+// Buttons that blend into the background
+.btn-blend {
+ background: transparent;
+ &:hover {
+ background: @fl-body-control-bg;
+ }
+}
+
+// ------------------------------------
+// Form Controls
+
+.form-control {
+ .box-shadow(none);
+ &:focus,
+ &.focus {
+ background-color: @input-border-focus;
+ .box-shadow(none);
+ }
+}
+
+// Search inputs
+// @todo Extract some of this into header-specific definitions
+.search-input {
+ margin-right: 10px;
+ &:before {
+ .fa();
+ content: @fa-var-search;
+ float: left;
+ margin-right: -36px;
+ width: 36px;
+ font-size: 14px;
+ text-align: center;
+ color: @fl-body-muted-color;
+ position: relative;
+ padding: @padding-base-vertical - 1 0;
+ line-height: @line-height-base;
+ pointer-events: none;
+ }
+}
+.search-input .form-control {
+ float: left;
+ width: 225px;
+ padding-left: 36px;
+ padding-right: 36px;
+ .transition(~"all 0.4s");
+
+ &:focus {
+ width: 400px;
+ }
+}
+.search-input .clear {
+ float: left;
+ margin-left: -36px;
+ vertical-align: top;
+ .scale(0.001);
+ .transition(~"transform 0.15s");
+}
+.search-input.clearable .clear {
+ .scale(1);
+}
+
+// Select inputs
+.select-input {
+ display: inline-block;
+ vertical-align: middle;
+}
+.select-input select {
+ display: inline-block;
+ width: auto;
+ -webkit-appearance: none;
+ padding-right: @padding-base-horizontal + 16;
+ cursor: pointer;
+}
+.select-input .fa {
+ margin-left: -@padding-base-horizontal - 16;
+ pointer-events: none;
+ color: @fl-body-muted-color;
+}
+
+// ------------------------------------
+// Dropdown Menus
+
+.dropdown-menu {
+ border: 0;
+ padding: 8px 0;
+ margin-top: 7px;
+ .box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
+
+ & > li > a {
+ padding: 8px 15px;
+ color: @fl-body-color;
+ &:hover, &:focus {
+ color: @fl-body-color;
+ background-color: @fl-secondary-color;
+ }
+ & .fa {
+ margin-right: 5px;
+ font-size: 14px;
+ }
+ }
+ & .divider {
+ margin: 10px 0;
+ background-color: darken(@fl-secondary-color, 2%);
+ }
+}
+.dropdown-split.item-count-1 {
+ & .btn {
+ border-radius: @border-radius-base !important;
+ }
+ & .dropdown-toggle {
+ display: none;
+ }
+}
+
+// ------------------------------------
+// Tooltips
+
+.tooltip-inner {
+ padding: 5px 10px;
+}
+
+// ------------------------------------
+// Loading Indicators
+
+.loading-indicator {
+ position: relative;
+ color: @fl-primary-color;
+}
+.loading-indicator-block {
+ height: 100px;
+}
+
+// ------------------------------------
+// Avatars
+
+.avatar-size(@size) {
+ width: @size;
+ height: @size;
+ border-radius: @size / 2;
+ font-size: @size / 2;
+ line-height: @size;
+}
+.avatar {
+ display: inline-block;
+ color: #fff;
+ font-weight: 300;
+ text-align: center;
+ vertical-align: top;
+ .avatar-size(48px);
+
+ & img {
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ border-radius: 100%;
+ vertical-align: top;
+ }
+}
\ No newline at end of file
diff --git a/framework/core/ember/app/styles/flarum/composer.less b/framework/core/ember/app/styles/flarum/composer.less
new file mode 100644
index 000000000..f33c744b2
--- /dev/null
+++ b/framework/core/ember/app/styles/flarum/composer.less
@@ -0,0 +1,61 @@
+// ------------------------------------
+// Composer
+
+.composer-container {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: @zindex-navbar-fixed;
+ pointer-events: none;
+}
+.composer {
+ pointer-events: auto;
+ margin-left: 200px;
+ .box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
+ border-radius: 4px 4px 0 0;
+ background: rgba(255, 255, 255, 0.98);
+ transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
+}
+.composer-content {
+ padding: 0 20px 15px;
+}
+.composer-handle {
+ height: 20px;
+ cursor: row-resize;
+}
+.composer-controls {
+ float: right;
+ margin: -5px 15px 0 0;
+}
+.composer-avatar {
+ float: left;
+ width: 64px;
+ height: 64px;
+}
+.composer-body {
+ margin-left: 84px;
+
+ & h3 {
+ margin: 5px 0 10px;
+ color: @fl-body-muted-color;
+ font-size: 16px;
+ font-weight: normal;
+ }
+}
+.composer-editor textarea {
+ background: none;
+ border-radius: 0;
+ padding: 0;
+ margin-bottom: 10px;
+ height: 200px;
+ border: 0;
+ resize: none;
+ color: @fl-body-color;
+ font-size: 15px;
+ line-height: 1.6;
+
+ &:focus {
+ background: none;
+ }
+}
\ No newline at end of file
diff --git a/framework/core/ember/app/styles/flarum/discussion.less b/framework/core/ember/app/styles/flarum/discussion.less
new file mode 100644
index 000000000..fd9af5dee
--- /dev/null
+++ b/framework/core/ember/app/styles/flarum/discussion.less
@@ -0,0 +1,232 @@
+// ------------------------------------
+// Sidebar
+
+.discussion-nav {
+ float: right;
+
+ &, & > ul {
+ width: 150px;
+ }
+ & > ul {
+ position: fixed;
+ margin: 30px 0 0;
+ padding: 0;
+ list-style-type: none;
+
+ & > li {
+ margin-bottom: 10px;
+ }
+ }
+ & .btn-group, & .btn {
+ width: 100%;
+ }
+ & .btn-group:not(.item-count-1) {
+ & .btn {
+ width: 80%;
+ }
+ & .dropdown-toggle {
+ width: 19%;
+ }
+ }
+}
+
+// ------------------------------------
+// Stream
+
+.discussion-posts {
+ margin-top: 40px;
+ margin-right: 225px;
+ & .item {
+ margin-bottom: 40px;
+ }
+}
+.gap {
+ padding: 30px 0;
+ text-align: center;
+ color: #aaa;
+ cursor: pointer;
+ border: 2px dashed @fl-body-bg;
+ background: #f2f2f2;
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: bold;
+ overflow: hidden;
+ position: relative;
+ .transition(padding 0.2s);
+
+ &:hover, &.loading, &.active {
+ padding: 50px 0;
+ &.up:before, &.down:after {
+ opacity: 1;
+ }
+ }
+ &.loading {
+ .transition(none);
+ }
+ &:before, &:after {
+ font-family: 'FontAwesome';
+ display: block;
+ opacity: 0;
+ transition: opacity 0.2s;
+ height: 15px;
+ color: #aaa;
+ }
+ &.up:before {
+ content: '\f077';
+ margin-top: -25px;
+ margin-bottom: 10px;
+ }
+ &.down:after {
+ content: '\f078';
+ margin-bottom: -25px;
+ margin-top: 10px;
+ }
+ &:only-child {
+ background: none;
+ border: 0;
+ color: @fl-primary-color;
+ &:before, &:after {
+ display: none;
+ }
+ }
+}
+
+// ------------------------------------
+// Posts
+
+.post {
+ padding-left: 90px;
+ transition: 0.2s box-shadow;
+
+ & .contextual-controls {
+ float: right;
+ margin: -2px 0 0 10px;
+ visibility: hidden;
+ }
+ &:hover .contextual-controls, & .contextual-controls.open {
+ visibility: visible;
+ }
+}
+.item.highlight .post {
+ border: 10px solid rgba(255, 255, 0, 0.2);
+ border-radius: 10px;
+ padding: 15px 15px 0 105px;
+ margin: -25px -25px -10px -25px;
+}
+
+.post-header {
+ margin-bottom: 10px;
+ color: @fl-body-muted-color;
+
+ & .user {
+ margin: 0;
+ display: inline;
+ font-weight: bold;
+ font-size: 18px;
+ &, & a {
+ color: @fl-body-heading-color;
+ }
+ }
+ & .avatar {
+ margin-left: -90px;
+ float: left;
+ .avatar-size(64px);
+ }
+ & .time {
+ margin-left: 10px;
+ &, & a {
+ color: @fl-body-muted-color;
+ }
+ }
+}
+.post-body {
+ font-size: 15px;
+ line-height: 1.6;
+ padding-bottom: 1px;
+}
+.post-edited {
+ margin-left: 10px;
+ font-size: 14px;
+}
+
+// ------------------------------------
+// Scrubber
+
+@media (min-width: @screen-md-min) {
+ .stream-scrubber {
+ margin: 30px 0 0 0;
+ }
+ .scrubber {
+ & a {
+ margin-left: -5px;
+ color: @fl-body-muted-color;
+ & .fa {
+ font-size: 14px;
+ margin-right: 2px;
+ }
+ &:hover, &:focus {
+ text-decoration: none;
+ color: @link-hover-color;
+ }
+ }
+ }
+ .scrubber-scrollbar {
+ margin: 8px 0 8px 3px;
+ height: 300px;
+ min-height: 50px; // JavaScript sets a max-height
+ position: relative;
+ }
+ .scrubber-before, .scrubber-after {
+ border-left: 1px solid darken(@fl-secondary-color, 2%);
+ }
+ .scrubber-slider {
+ position: relative;
+ width: 100%;
+ padding: 5px 0;
+ }
+ .scrubber-handle {
+ height: 100%;
+ width: 5px;
+ background: @fl-primary-color;
+ border-radius: 4px;
+ float: left;
+ margin-left: -2px;
+ transition: background 0.2s;
+ .disabled & {
+ background: @fl-secondary-color;
+ }
+ }
+ .scrubber-info {
+ height: (2em * @line-height-base);
+ margin-top: (-1em * @line-height-base);
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ left: 15px;
+ & strong {
+ display: block;
+ }
+ & .description {
+ color: @fl-body-muted-color;
+ }
+ }
+ .scrubber-highlights {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ list-style-type: none;
+ pointer-events: none;
+ }
+ .scrubber-highlights li {
+ position: absolute;
+ right: -6px;
+ background: #fc0;
+ height: 8px;
+ width: 13px;
+ border-radius: 4px;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+ opacity: 0.99;
+ }
+}
\ No newline at end of file
diff --git a/framework/core/ember/app/styles/flarum/index.less b/framework/core/ember/app/styles/flarum/index.less
new file mode 100644
index 000000000..dd4467969
--- /dev/null
+++ b/framework/core/ember/app/styles/flarum/index.less
@@ -0,0 +1,253 @@
+// ------------------------------------
+// Sidebar
+
+.index-nav {
+ float: left;
+
+ &, & > ul {
+ width: 175px;
+ }
+ & > ul {
+ margin: 30px 0 0;
+ padding: 0;
+ list-style-type: none;
+
+ &.affix {
+ top: 56px;
+ }
+ & > li {
+ margin-bottom: 10px;
+ }
+ }
+ & .new-discussion {
+ display: block;
+ margin-bottom: 20px;
+ }
+
+ // Expand the dropdown-select component into a normal nav list
+ // @todo Extract this into a mixin as we'll need to do it elsewhere.
+ & .dropdown-select {
+ display: block;
+
+ & .dropdown-toggle {
+ display: none;
+ }
+ & .dropdown-menu {
+ display: block;
+ border: 0;
+ width: auto;
+ margin: 0;
+ padding: 0;
+ min-width: 0;
+ float: none;
+ position: static;
+ background: none;
+ .box-shadow(none);
+ & > li > a {
+ padding: 8px 0;
+ color: @fl-body-muted-color;
+ & .fa {
+ margin-right: 8px;
+ font-size: 15px;
+ }
+ &:hover {
+ background: none;
+ color: @link-hover-color;
+ }
+ }
+ & > li.active > a {
+ background: none;
+ color: @fl-primary-color;
+ font-weight: bold;
+ }
+ }
+ }
+}
+
+// ------------------------------------
+// Results
+
+.index-results {
+ margin-top: 30px;
+ margin-left: 225px;
+ & .loading-indicator {
+ height: 40px;
+ }
+}
+.index-toolbar {
+ margin-bottom: 15px;
+}
+.index-toolbar-view {
+ display: inline-block;
+ & .control-show {
+ margin-right: 10px;
+ }
+}
+.index-toolbar-action {
+ float: right;
+}
+
+// ------------------------------------
+// Discussions Pane
+
+@index-pane-width: 440px;
+
+.index-area {
+ left: -@index-pane-width;
+ width: 100%;
+
+ &.paned {
+ position: fixed;
+ z-index: @zindex-navbar-fixed + 1;
+ overflow: auto;
+ top: 56px;
+ bottom: 0;
+ width: @index-pane-width;
+ background: #fff;
+ padding-bottom: 200px;
+ .box-shadow(2px 2px 6px -2px rgba(0, 0, 0, 0.25));
+ .transition(left 0.2s);
+
+ &.showing, .with-pane & {
+ left: 0;
+ }
+ & .container {
+ width: auto;
+ margin: 0;
+ padding: 0 !important;
+ }
+ & .index-results {
+ margin: 0;
+ }
+ & .hero, & .index-nav, & .index-toolbar {
+ display: none;
+ }
+ & .discussions-list > li {
+ margin: 0;
+ padding-left: 65px + 15px;
+ padding-right: 65px + 25px;
+ &.active {
+ background: @fl-secondary-color;
+ }
+ }
+ & .discussion-summary {
+ & .title {
+ font-size: 15px;
+ }
+ & .count strong {
+ font-size: 18px;
+ }
+ }
+ }
+}
+
+// When the pane is pinned, move the other page content inwards
+.global-main, .global-footer {
+ .transition(margin-left 0.2s);
+
+ .with-pane & {
+ margin-left: @index-pane-width;
+ & .container {
+ max-width: 100%;
+ padding: 0 30px;
+ }
+ }
+}
+.global-header .container {
+ .transition(width 0.2s);
+
+ .with-pane & {
+ width: 100%;
+ }
+}
+
+// ------------------------------------
+// Discussions List
+
+.discussions-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ position: relative;
+
+ & > li {
+ margin-right: -25px;
+ padding-right: 65px + 25px;
+ & .contextual-controls {
+ position: absolute;
+ right: 0;
+ top: 18px;
+ visibility: hidden;
+ }
+ &:hover .contextual-controls, & .contextual-controls.open {
+ visibility: visible;
+ }
+ }
+}
+.discussion-summary {
+ padding-left: 65px;
+ padding-right: 65px;
+ position: relative;
+
+ & .author {
+ float: left;
+ margin-left: -65px;
+ margin-top: 18px;
+ }
+ & .info {
+ display: inline-block;
+ width: 100%;
+ margin-right: -65px;
+ color: @fl-body-muted-color;
+ padding: 20px 0;
+
+ &:hover, &:active, &.active, &:focus {
+ text-decoration: none;
+ & .title {
+ text-decoration: underline;
+ }
+ }
+ &.active .title {
+ text-decoration: none;
+ }
+ }
+ & .title {
+ margin: 0 0 5px;
+ font-size: 16px;
+ line-height: 1.3;
+ &, & a {
+ font-weight: normal;
+ color: @fl-body-muted-color;
+ }
+ .unread&, .unread& a {
+ font-weight: bold;
+ color: @fl-body-heading-color;
+ }
+ }
+ & .count {
+ float: right;
+ margin-top: 18px;
+ margin-right: -65px;
+ width: 60px;
+ text-align: center;
+ text-transform: uppercase;
+ color: @fl-body-muted-color;
+ font-size: 11px;
+
+ & strong {
+ font-size: 20px;
+ display: block;
+ font-weight: 300;
+ }
+ .unread&, .unread& strong {
+ color: @fl-body-heading-color;
+ font-weight: bold;
+ cursor: pointer;
+ }
+ }
+}
+
+.load-more {
+ text-align: center;
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/framework/core/ember/app/styles/flarum/layout.less b/framework/core/ember/app/styles/flarum/layout.less
new file mode 100644
index 000000000..911722059
--- /dev/null
+++ b/framework/core/ember/app/styles/flarum/layout.less
@@ -0,0 +1,158 @@
+body {
+ background: @fl-body-bg;
+ color: @fl-body-color;
+ padding-top: 56px;
+}
+.container-narrow {
+ max-width: 500px;
+ margin: 0 auto;
+}
+
+// ------------------------------------
+// Header
+
+.global-header {
+ background: fade(@fl-hdr-bg, 98%);
+ transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
+ padding: 10px;
+ height: 56px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: @zindex-navbar-fixed;
+ .clearfix();
+ .transition(box-shadow 0.2s);
+
+ .scrolled & {
+ .box-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
+ }
+}
+.header-controls {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ &, & > li {
+ display: inline-block;
+ vertical-align: top;
+ }
+}
+.header-primary {
+ float: left;
+ & h1 {
+ display: inline-block;
+ vertical-align: top;
+ }
+}
+.header-title {
+ font-size: 18px;
+ font-weight: normal;
+ margin: 0;
+ line-height: 36px;
+ &, & a {
+ color: @fl-hdr-color;
+ }
+}
+.header-secondary {
+ float: right;
+}
+
+// Back button
+// @todo Lots of !importants in here, could we be more specific?
+.back-button {
+ float: left;
+ margin-right: 25px;
+
+ & .back {
+ z-index: 3; // z-index of an active .btn-group .btn is 2
+ border-radius: @border-radius-base !important;
+ .transition(border-radius 0.2s);
+ }
+ & .pin {
+ opacity: 0;
+ margin-left: -36px !important;
+ .transition(~"opacity 0.2s, margin-left 0.2s");
+
+ &:not(.active) .fa {
+ .rotate(45deg);
+ }
+ }
+ &.active {
+ & .back {
+ border-radius: @border-radius-base 0 0 @border-radius-base !important;
+ }
+ & .pin {
+ opacity: 1;
+ margin-left: 1px !important;
+ }
+ }
+}
+
+// ------------------------------------
+// Main
+
+.global-main, .paned {
+ border-top: 1px solid @fl-secondary-color;
+}
+
+// Hero
+.hero {
+ background: @fl-body-hero-bg;
+ color: @fl-body-hero-color;
+ margin-top: -1px;
+ text-align: center;
+ padding: 30px 0;
+}
+.hero .close {
+ float: right;
+ margin-top: -10px;
+ color: #fff;
+ opacity: 0.5;
+}
+.hero h2 {
+ margin: 0;
+ font-size: 22px;
+ font-weight: normal;
+}
+.hero p {
+ margin: 10px 0 0;
+}
+
+// ------------------------------------
+// Footer
+
+.global-footer {
+ margin: 100px 0 20px;
+ color: @fl-body-muted-more-color;
+ .clearfix();
+}
+.footer-primary, .footer-secondary {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+
+ & > li {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ & a {
+ color: @fl-body-muted-more-color;
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ color: @link-hover-color;
+ }
+ }
+}
+.footer-primary {
+ display: inline-block;
+ & > li {
+ margin-right: 15px;
+ }
+}
+.footer-secondary {
+ float: right;
+ & > li {
+ margin-left: 15px;
+ }
+}
\ No newline at end of file
diff --git a/framework/core/ember/app/templates/application.hbs b/framework/core/ember/app/templates/application.hbs
index 483f43f9c..a4bc0f819 100644
--- a/framework/core/ember/app/templates/application.hbs
+++ b/framework/core/ember/app/templates/application.hbs
@@ -1,20 +1,14 @@
-
+
--}}
+ {{render "composer"}}
+
+
-
+
-
+ {{back-button target=backButtonTarget}}
-
+
-
-
-
- {{#link-to "discussions" (query-params searchQuery="" sort="recent" show="discussions")}}
+
{{outlet "modal"}}
-{{render "composer"}}
-
-
- {{#link-to "discussions" (query-params searchQuery="" sort="recent" show="discussions")}}
+
+
+ {{#link-to "index" (query-params searchQuery="" sort="recent" show="discussions")}}
{{#if view.image}}
{{else}}
@@ -23,39 +17,39 @@
{{/link-to}}
- {{ui/controls/item-list items=headerPrimaryControls class="nav"}}
-
+ {{ui/controls/item-list items=view.headerPrimaryItems class="header-controls"}}
-
-
-
- {{ui/controls/search-input placeholder="Search forum" value=searchQuery active=searchActive action="search"}}
-
-
- {{ui/controls/item-list items=headerSecondaryControls}}
-
+
+ {{ui/controls/item-list items=view.headerSecondaryItems class="header-controls"}}
-
+
{{outlet}}
+
+ {{!--
-
+ {{#link-to "index" (query-params searchQuery="" sort="recent" show="discussions")}}
{{#if view.image}}
{{else}}
@@ -23,39 +17,39 @@
{{/link-to}}
- {{ui/controls/item-list items=headerPrimaryControls class="nav"}}
-
+ {{ui/controls/item-list items=view.headerPrimaryItems class="header-controls"}}
- {{ui/controls/search-input placeholder="Search forum" value=searchQuery active=searchActive action="search"}}
-
-
- {{ui/controls/item-list items=headerSecondaryControls}}
-
+
+ {{ui/controls/item-list items=view.headerSecondaryItems class="header-controls"}}
+
{{#each alert in alerts}}
{{alert-message message=alert}}
{{/each}}
diff --git a/framework/core/ember/app/templates/components/back-button.hbs b/framework/core/ember/app/templates/components/back-button.hbs
new file mode 100644
index 000000000..5580f43bf
--- /dev/null
+++ b/framework/core/ember/app/templates/components/back-button.hbs
@@ -0,0 +1,8 @@
+{{#if target}}
+
+
+ {{#if target.paned}}
+
+ {{/if}}
+
+{{/if}}
\ No newline at end of file
diff --git a/framework/core/ember/app/templates/components/discussions/discussion-listing.hbs b/framework/core/ember/app/templates/components/discussions/discussion-listing.hbs
index 967931c0c..01f3da42c 100644
--- a/framework/core/ember/app/templates/components/discussions/discussion-listing.hbs
+++ b/framework/core/ember/app/templates/components/discussions/discussion-listing.hbs
@@ -1,47 +1,46 @@
-{{ui/controls/dropdown-button items=controls class="contextual-controls"}}
+{{ui/controls/dropdown-button
+ items=controls
+ class="contextual-controls"
+ buttonClass="btn btn-default btn-icon btn-sm btn-blend"
+ buttonClick="populateControls"
+ menuClass="pull-right"}}
-
+{{#link-to "user" discussion.startUser class="author"}}{{user-avatar discussion.startUser}}{{/link-to}}
- {{#link-to "user" discussion.startUser}}{{user-avatar discussion.startUser}}{{/link-to}}
+
+
+ {{#each badge in badges}}
+ {{fl-badge badge}}
+ {{/each}}
+
-
- {{#each badge in badges}}
- {{fl-badge badge}}
+{{#link-to "discussion" discussion.content (query-params searchQuery=searchQuery start=start) current-when="discussion" class="info"}}
+
+{{/if}}
diff --git a/framework/core/ember/app/templates/components/discussions/post-content-comment.hbs b/framework/core/ember/app/templates/components/discussions/post-content-comment.hbs
index cbfef68a6..5d9f5f9a4 100644
--- a/framework/core/ember/app/templates/components/discussions/post-content-comment.hbs
+++ b/framework/core/ember/app/templates/components/discussions/post-content-comment.hbs
@@ -2,12 +2,12 @@
{{fa-icon "trash-o" class="post-icon"}}
{{/if}}
-{{highlight-words discussion.title searchQuery}}
+ + {{#if displayLastPost}} + {{discussion.lastUser.username}} replied + {{human-time discussion.lastTime}} + {{else}} + {{discussion.startUser.username}} started + {{human-time discussion.startTime}} + {{/if}} + +{{/link-to}} + +
+ {{#if displayUnread}}
+ {{abbreviate-number discussion.unreadCount}} unread
+ {{else}}
+ {{abbreviate-number discussion.repliesCount}} replies
+ {{/if}}
+
+
+{{#if relevantPosts}}
+
+ {{#each post in relevantPosts}}
+ {{#link-to "discussion" discussion.content (query-params start=post.number) class="post item"}}
+ {{user-avatar post.user class="avatar-thumb"}}
+ {{highlight-words post.relevantContent searchQuery}}
+ {{/link-to}}
{{/each}}
-
- {{#link-to "discussion" discussion.content (query-params searchQuery=searchQuery) class="info"}}
-
- {{highlight-words discussion.title searchQuery}}
- - - {{#if displayStartPosts}} - {{#link-to "user" discussion.startUser}}{{discussion.startUser.username}}{{/link-to}} posted - {{#link-to "discussion" discussion.content}}{{abbreviate-time discussion.startTime}}{{/link-to}} - {{else}} - {{#link-to "user" discussion.lastUser}}{{discussion.lastUser.username}}{{/link-to}} posted - {{#link-to "discussion" discussion.content (query-params start="last")}}{{abbreviate-time discussion.lastTime}}{{/link-to}} - {{/if}} - - {{/link-to}} - -
- {{#if discussion.isUnread}}
- {{abbreviate-number discussion.unreadCount}} unread
- {{else}}
- {{abbreviate-number discussion.repliesCount}} replies
- {{/if}}
-
-
- {{#if relevantPosts}}
-
- {{#each post in relevantPosts}}
- {{#link-to "discussion" discussion.content (query-params start=post.number) class="post item"}}
- {{user-avatar post.user class="avatar-thumb"}}
- {{highlight-words post.relevantContent searchQuery}}
- {{/link-to}}
- {{/each}}
-
- {{/if}}
-
-