Skip to content
Permalink
Browse files

Merge pull request #50 from merefield/tiles_improvements

Tiles improvements:  adds mobile support, improves layout, adds gutter and transition time settings
  • Loading branch information...
merefield committed Feb 13, 2019
2 parents 091711b + 10e4db5 commit 7558bbee126cdcb51dcaf29a27bd7ac58923888a
@@ -30,6 +30,10 @@ export default {
const category = this.get('parentView.parentView.parentView.topic.category');
this.set('category', category);
};
},

@on('didRender')
completeRender(){
if (this.get('tilesStyle')){
Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
};
@@ -46,11 +50,13 @@ export default {
setupListStyle() {
if (!this.$()) {return;}
this.$().parents('#list-area').toggleClass('social-style', this.get('socialStyle'));
this.$().parents('#list-area').toggleClass('tiles-style', this.get('tilesStyle'));
this.$("tbody").toggleClass('grid', this.get('tilesStyle'));
if ( !this.$( ".grid-sizer" ).length && this.get('tilesStyle')){
this.$(".grid").prepend("<div class='grid-sizer'></div>");
};
if (this.get('tilesStyle')){
this.$().parents('#list-area').toggleClass('tiles-style', true);
this.$("tbody").toggleClass('grid', true);
if ( !this.$( ".grid-sizer" ).length) {
this.$(".grid").prepend("<div class='grid-sizer'></div><div class='gutter-sizer'></div>");
};
}
},

@on('willDestroyElement')
@@ -174,12 +180,14 @@ export default {
msnry.options.transitionDuration = transitionDuration;
} else {
// init masonry
// transition set to zero on mobile due to undesirable behaviour on mobile safari if > 0
const transDuration = this.get('site.mobileView') ? 0 : Discourse.SiteSettings.topic_list_tiles_transition_time;
this.$('.grid').masonry({
itemSelector: '.grid-item',
transitionDuration: '0.7s',
transitionDuration: `${transDuration}s`,
percentPosition: true,
Width: '.grid-sizer',
gutter: 6
gutter: '.gutter-sizer'
});

msnry = this.$('.grid').data('masonry');
@@ -245,10 +253,10 @@ export default {
if (topic.get('thumbnails') && this.get('thumbnailFirstXRows') && (this.$().index() > this.get('thumbnailFirstXRows'))) {
this.set('showThumbnail', false);
}

this._afterRender();
},

@on('didRender')
@observes('thumbnails')
_afterRender() {
Ember.run.scheduleOnce('afterRender', this, () => {
@@ -262,6 +270,19 @@ export default {
if (this.get('showActions')) {
this._setupActions();
}
if (this.get('tilesStyle')) {
var myid = this.$().attr('id');
$(`#${myid} > .topic-title`).wrap("<div class='topic-header-grid'></div>");
$(`#${myid} .topic-users`).appendTo(`#${myid} .topic-header-grid`);
$(`#${myid} .topic-category`).appendTo(`#${myid} .topic-header-grid`);
$(`#${myid} .topic-category`).removeClass('inline').removeClass('sub');
$(`#${myid} .topic-actions`).unwrap(`#${myid} .main-link-footer`);
$(`#${myid} .discourse-tags`).insertAfter(`#${myid} .topic-details`);
$(`#${myid} .discourse-tags`).wrap("<div class='topic-tags'></div>");
$(`#${myid} .topic-meta`).insertAfter(`#${myid} .topic-tags`);
$(`#${myid} .topic-views`).prevAll().remove();
$(`#${myid} .topic-actions`).appendTo(`#${myid}`);
}
});
},

@@ -27,15 +27,17 @@ var renderUnboundPreview = function(thumbnails, params) {

if (!url) return '';

if (Discourse.Site.currentProp('mobileView')) {
const opts = params.opts || {};

if (!opts.tilesStyle && Discourse.Site.currentProp('mobileView')) {
return `<img class="thumbnail" src="${url}"/>`;
};

const opts = params.opts || {};
const settings = Discourse.SiteSettings;
const attrPrefix = opts.socialStyle ? 'max-' : '';
const attrWidthSuffix = opts.tilesStyle ? '%' : 'px';
const attrHeightSuffix = opts.tilesStyle ? '' : 'px';
const css_classes = opts.tilesStyle? 'thumbnail tiles-thumbnail' : 'thumbnail';

const category_width = params.category ? params.category.topic_list_thumbnail_width : false;
const category_height = params.category ? params.category.topic_list_thumbnail_height : false;
@@ -50,7 +52,7 @@ var renderUnboundPreview = function(thumbnails, params) {
const width = custom_width || tiles_width || featured_width || category_width || settings.topic_list_thumbnail_width;
const style = `${attrPrefix}height:${height}${attrHeightSuffix};${attrPrefix}width:${width}${attrWidthSuffix}`;

return `<img class="thumbnail" src="${url}" style="${style}" />`;
return `<img class="${css_classes}" src="${url}" style="${style}" />`;
};

var testImageUrl = function(thumbnails, callback) {
@@ -1,6 +1,15 @@
<td>
{{#if socialStyle}}
{{#if tilesOrSocial}}
{{#if tilesStyle}}
<div class="topic-header-grid">
{{/if}}
{{raw "list/topic-list-title" topic=topic tilesOrSocial=tilesOrSocial tilesStyle=tilesStyle socialStyle=socialStyle mobileView=site.mobileView}}
{{#if tilesStyle}}
<div class="topic-category">
{{category-link topic.category}}
</div>
</div>
{{/if}}
{{#if showThumbnail}}
{{raw "list/topic-thumbnail" topic=topic thumbnails=thumbnails category=category opts=thumbnailOpts}}
{{/if}}
@@ -15,7 +24,7 @@
{{/if}}

<div class='topic-details'>
{{#unless socialStyle}}
{{#unless tilesOrSocial}}
<div class='main-link'>
{{raw "list/topic-list-title"
topic=topic
@@ -33,12 +42,13 @@
{{raw "list/topic-excerpt" topic=topic}}
{{/if}}

{{#unless socialStyle}}
{{#unless tilesOrSocial}}
{{#if showCategoryBadge}}
<div class='topic-category'>
{{category-link topic.category}}
</div>
{{/if}}

{{#if topic.tags}}
<div class='discourse-tags'>
{{#each topic.visibleListTags as |tag|}}
@@ -57,13 +67,20 @@
{{/unless}}
</div>

{{#if socialStyle}}
<div class='main-link-footer'>
{{raw "list/topic-meta" title=view.title likesHeat=view.likesHeat topic=topic}}
{{#if tilesOrSocial}}
{{#unless tilesStyle}}
<div class="main-link-footer">
{{raw-plugin-outlet name="topic-list-main-link-footer"}}
{{/unless}}
{{raw 'list/topic-meta' tilesStyle=tilesStyle likesHeat=likesHeat title=view.title topic=topic}}
{{#if showActions}}
{{#if tilesStyle}}
</div>
{{/if}}
{{raw "list/topic-actions" likeCount=likeCount topicActions=topicActions}}
{{/if}}
{{raw-plugin-outlet name="topic-list-after-title"}}
{{#unless tilesStyle}}
</div>
{{/unless}}
{{/if}}
</td>

0 comments on commit 7558bbe

Please sign in to comment.
You can’t perform that action at this time.