Topic List Previews

#282

This is only affecting YouTube video thumbnails and no other? Are you able to switch hotlinking on til the issue can be identified?

0 Likes

(Per Torstensson) #283

Aha, I see… but couldn’t one solution be to add setting for maximum number of allowed columns (i.e. 3, 2 or 1) – a setting which could decide which CSS for media queries is valid, and would be honored regardless of screen size/device?

Anyhow, I am definitely interested in a solution to this and would highly appreciate any help I can get and I have no issues with “maintaining” my own fork in order to achieve a solution :slight_smile:

1 Like

#284

Of course I’d rather you didn’t have to. It’s an issue that’s been bugging me. I’ll have a play around and see whether I can improve the out of the box flexibility.

1 Like

(Mittineague) #285

Maybe you could use getComputedStyle() somehow?

It looks to have good browser support (except for Opera Mini on psuedo-elements)
https://caniuse.com/#feat=getcomputedstyle

0 Likes

(Luka Renko) #286

Yes, it is only for YouTube videos - regular images never disappear.
Currently I just do Regenerate HTML on problematic topic, to get preview back - this is fine for me as we only have couple YT topics and forum is still small.

0 Likes

#287

I’ve just spent some time integrating a javascript library which simulates element queries and have an experimental build you can try which is on a branch of my fork.

It is more responsive and now takes into account sidebars, even when they themselves appear and disappear. It is not configurable, but with normal browser width will produce a more sensible 2 columns with a largish sidebar, instead of having 3 crammed together. Shrink the available width, by increasing the size of the sidebar(s) or narrowing the browser, and this will drop to 1 column.

If you would like to test this, you could replace the normal plugin clone command in app.yml with this:

git clone https://github.com/merefield/discourse-topic-previews -b "element_queries"

It is otherwise identical to the master build. You may find it a bit less robust though as there are so many tricks going on here. It doesn’t seem to cope very well when the sidebar just appears or just disappears (workaround: just manually resize the browser a tiny bit more).

If you are interested, here’s the library:

0 Likes

#288

Not sure how that would help, can you elaborate?

0 Likes

#289

That is very odd! I’ll discuss with @angus who knows that part of the code better than I. Thanks for your patience.

0 Likes

(Mittineague) #290

Ideally, different CSS for different breakpoints would be preferred. But if for some reason that might not work (eg. another theme changing the layout) I was thinking JavaScript might provide a solution. eg. (in pseudocode)

mycontainer = querySelector('mycontainer'); 
myleftcolumn = querySelector('myleftcolumn'); 
myrightcolumn = querySelector('myrightcolumn'); 
mycontainerwidth = getComputedStyle(mycontainer); 
if (mycontainerwidth < OKwidth) { 
// example only, likely not what would be needed
  myleftcolumn.style.display = block; 
  myrightcolumn.style.display = block; 
1 Like

#291

Yeah, we have the benefit of jQuery though.

My existing ‘hack’ is javascript which switches class based on width when window is resized, but I prefer the elegance of an ‘element query’. Looking forward to the day that becomes native, because almost all these tack-on solutions are a little ‘glitchy’ :cloud_with_lightning: :smiley:

Javascript & CSS
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
        var primaryDiv = $(".tiles-grid");
        primaryDiv.find(".tiles-grid-item").removeClass("widthforone").addClass("widthfortwo");
        primaryDiv.masonry();
});
$(window).on({
    resize:function() {
       var primaryDiv = $(".tiles-grid");
       var primaryWidth = primaryDiv.width();

       if(primaryWidth < 500){
           primaryDiv.find(".tiles-grid-item").removeClass("widthfortwo").addClass("widthforone");
       } else {
           primaryDiv.find(".tiles-grid-item").removeClass("widthforone").addClass("widthfortwo");
       }
    }
}) ;
</script>

with CSS:

.widthfortwo {
    width: calc((100% - 6px)/2);
}

.widthforone {
    width: 100%;
}

NB this is the hack prior to adding the element query library … it’s not used in the new branch.

NB#2 this won’t work with the current build as you have to remove the media queries. You need to fork the plugin to use the above.

1 Like

(Luka Renko) #292

On my forum Pojalabanda.com, latest view on tablet (Huawei Mediapad M5 8.4") is broken, as it puts category sometimes on right and sometimes correctly on left under topic name.

I tried with default Light theme as well as Materialize theme - same result. No problem on desktop or mobile phone (Pixel 2 XL).
meta.discourse.org looks OK on same device.

Any idea what could cause this?

0 Likes

(Kris) #293

Which browser (and version) is being used on the Huawei Mediapad M5 7"?

1 Like

(Luka Renko) #294

0 Likes

(Luka Renko) #295

Also, it is 8.4" and not 7" as I wrote initially.

0 Likes

(Kris) #296

Ah ok, I just looked at your site and I see the problem — there’s a plugin (discourse-topic-previews) doing this:

.mobile-view .topic-list .topic-category {
  display: inline-block;
}

If you remove that rule, or set it to display: block the layout is as expected.

4 Likes

(Luka Renko) #297

OK, this may be Topic List Preview plugin, however I do not have it enabled on mobile views, only on desktop.

0 Likes

#298

The CSS rules would apply in any case. Needs to be managed with a class I suspect.

Yeah looks only the long Category names are being pushed to next line on wider screens.

Luka, in short term suggest you just override in a Theme Component along with any other overrides you maintain as Kris suggests.

FYI just repro-ed on an iPhone in landscape :slight_smile:

1 Like

(Bank Live) #299

I’m not sure Why is the image not as sharp as the original?

0 Likes

#300

Pushed a tweak. Thanks for reporting. Thanks @awesomerobot for speeding that up.

https://github.com/angusmcleod/discourse-topic-previews/commit/6344d46b1f8f7f62c0a02196710a032ee5144e96

1 Like

#301

Thats the point of thumbnails, they are meant to be created in a lower resolution to reduce load and storage hit. You can increase their resolution with the height and width settings.

You can disable them completely by setting this to hotlink, which will force it to use the original. This has the added benefit of maintaining aspect ratio.

1 Like