github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-12 06:03:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweak how discussion sidebar displays on mobile

Browse Source 
Give all items in an item list a class on their <li>. Super helpful for
styling
This commit is contained in:
Toby Zerner 2015-06-25 15:38:29 +09:30
parent 0d5927d812
commit d2c1e3a3d7
4 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
framework/core/js/lib/components/action-button.js
View File

@ -20,7 +20,7 @@ export default class ActionButton extends Component {
attrs.href = attrs.href || 'javascript:;'; attrs.href = attrs.href || 'javascript:;';
return m('a'+(iconName ? '.has-icon' : ''), attrs, [ return m('a'+(iconName ? '.has-icon' : ''), attrs, [
iconName ? icon(iconName+' icon') : '', iconName ? icon(iconName+' icon') : '', ' ',
m('span.label', label) m('span.label', label)
]); ]);
} }

2
framework/core/js/lib/helpers/list-items.js
View File

@ -17,5 +17,5 @@ export default function listItems(array, noWrap) {
} }
}); });
return newArray.map(item => [(noWrap && !isSeparator(item)) ? item : m('li', {className: item.wrapperClass || (item.props && item.props.wrapperClass) || (item.component && item.component.wrapperClass) || ''}, item), ' ']); return newArray.map(item => [(noWrap && !isSeparator(item)) ? item : m('li', {className: 'item-'+item.itemName+' '+(item.wrapperClass || (item.props && item.props.wrapperClass) || (item.component && item.component.wrapperClass) || '')}, item), ' ']);
}; };

3
framework/core/js/lib/utils/item-list.js
View File

@ -22,6 +22,7 @@ export default class ItemList {
var items = []; var items = [];
for (var i in this) { for (var i in this) {
if (this.hasOwnProperty(i) && this[i] instanceof Item) { if (this.hasOwnProperty(i) && this[i] instanceof Item) {
this[i].content.itemName = i;
items.push(this[i]); items.push(this[i]);
} }
} }
@ -49,6 +50,8 @@ export default class ItemList {
// e.g. {before: ['foo', 'bar'], after: ['qux', 'qaz']} // e.g. {before: ['foo', 'bar'], after: ['qux', 'qaz']}
// This way extensions can make sure they are positioned where // This way extensions can make sure they are positioned where
// they want to be relative to other extensions. // they want to be relative to other extensions.
// Alternatively, it might be better to just have a numbered priority
// system, so extensions don't have to make awkward references to each other.
if (key) { if (key) {
var index = array.indexOf(this[key]); var index = array.indexOf(this[key]);
if (index === -1) { if (index === -1) {

21
framework/core/less/forum/discussion.less
View File

@ -4,6 +4,7 @@
.discussion-hero { .discussion-hero {
& .badges { & .badges {
margin-right: 5px; margin-right: 5px;
margin-bottom: -2px;
} }
& .discussion-hero-items { & .discussion-hero-items {
padding: 0; padding: 0;
@ -34,6 +35,22 @@
} }
} }
@media @phone {
.discussion-nav {
margin: 0 -15px;
border-bottom: 1px solid @fl-body-secondary-color;
& > ul > li {
margin: 15px;
display: inline-block;
&.item-controls, &.item-scrubber {
margin: 0;
display: block;
}
}
}
}
@media @tablet, @desktop, @desktop-hd { @media @tablet, @desktop, @desktop-hd {
.discussion-nav { .discussion-nav {
float: right; float: right;
@ -67,7 +84,9 @@
// Stream // Stream
.discussion-posts { .discussion-posts {
margin-top: 10px; @media @tablet, @desktop, @desktop-hd {
margin-top: 10px;
}
& .item { & .item {
&:not(:last-child) { &:not(:last-child) {