Call for confirmation that the DiscussionsGrid plugin works with different themes

rbrahmson

I tested the plugin on few themes (baseline, Gopi, Material).
If you tried successfully the plugin on other themes please write a comment here to let me and the community know about it.

FBI

What is Call for confirmation use for?
The Plugin is working good on that themes list

rbrahmson

It's a request for confirmation that it work on other themes

igorneumann

I can confirm its working on both, Material2 and Bittersweet... with some small problems:

• Does Not work for Guests
• It flashes the unformatted content for a second until the page loads the CSS
• Categories with long names gets out of the grid, solved with "overflow:hidden" in CSS.
• Can't translate "Grid/List" to our local language (Spanish) so hid it from the menu using css and let just the icon.
• The Icon positioning in the middle of the menu gets very weird, I wish it could be positioned at the end of the menu or at the righ-upper corner of the grid

I also made some other CSS changes as displaying 2 columns at the mobile theme (Material2), and variable page width at the desktop theme: https://chinaudio.es

rbrahmson

Thanks for your feedback and using the plug-in. I'll check all these for the next version. Some theme CSS adjustment may be unavoidable.

@R_J - do you have any insights as to what may cause the flickering mentioned above (”It flashes the unformatted content for a second until the page loads the CSS”)?

R_J

You are asking me a frontend question?! You must have mistaken me!

Flickering content is a sign for actions taking place after page has been loaded. As far as I can see there is no CSS loaded after style script listed in the head tag

If you look at the source, you can see

<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" data-cf-nonce="c490b2101b9cf4ce6411f7f8-" defer=""></script></body>
</html>

That's where I would start first.

rbrahmson

Well, I may be as ignorant about JS as you are but I did suspect that the flickering is caused by Java (and I observed it on different themes and different plugins mix). Somehow the plugin use of jQuery is happening after some other JS displays the page (and that Java code is probably emitted by Vanilla). That's practically the extent of my Java knowledge... Is there any way I can control the order of JS on the page (am I using the wrong Vanilla hook?) I'm thinking out loud - does that help?

Also, who is a front end expert here?

R_J

@rbrahmson said:
Well, I may be as ignorant about JS as you are but I did suspect that the flickering is caused by Java

Well, I am the one eyed amongst the blind here since I know that it is not Java but JavaScript

Without knowing what the different used scripts are doing, it is hard to tell what is happening.

If there is some script which causes flickering, it might be caused because it does an AJAX load and insertion of any content or rearranges the DOM after the page is loaded for any other reason. Changing content with JavaScript doesn't need to be done with jQuery, it's only that noobs like us are too lazy to write clean and vanilla JavaScript and rely on jQuery instead.

I'm not sure how changing the script order would help. I guess it can be done, though. If you think that this will help simply add it to the default.master.tpl for testing purposes. If that changes anything we can think of how to change the order that this script will be loaded.

You should now what is happening: does your plugin make use of js and what is it doing/what is the purpose?

rbrahmson

"You should know" - very funny... I am typing all this from a tablet away from my machine and relying on faded memory on account of lapsed time and of course obligatory season fun.

I think I used jquery to manipulate css to make the discussions display in a grid. Changing the css relies on specific styles so it may not work for all themes (which explains the title of this discussion).

I could research if there is a tool that translates/expands jQuery into js so you wouldn't know that I'm a Java noob ;-)

R_J

@rbrahmson said:

"You should know" - very funny... I am typing all this from a tablet away from my machine and relying on faded memory on account of lapsed time and of course obligatory season fun.

I can understand that very well!

I see that in the source code of the rendered page:

$(document).ready(function(){
                        var width = $(".DataList.Discussions").width();
                        var cols = ~~(width / 200);
                        var pct = (~~(width/cols))-10;
                        if (pct <100) { var pct = 100};
                        $("#Grid").css("width", pct+"px");
                        $(".DiscussionsGrid").css("width", pct+"px");
                        if ( $("#GRID").length > 0) {
                            $(".DataList.Discussions").css("display", "flex").css("flex-wrap", "wrap").css("padding", "2px"); $(".Discussion.ItemContent").css("padding-left", "4px");
                       }
                        $(window).resize(function() {
                            ;
                            var width = $(".DataList.Discussions").width();
                            var cols = ~~(width / 200);
                            var pct = (~~(width/cols))-10;
                           if (pct <100) { var pct = 100};
                           $("#Grid").css("width", pct+"px");
                           $(".DiscussionsGrid").css("width", pct+"px");
});
});

It makes me feel uneasy... Are you sure you cannot reach your goal with pure CSS? Look at this Code Pen and replace the article tag with ul and the section tags with lis.

---

I just tested the following code based on the code pen above with the mighty CSSEdit:

body.Category-diskussionen ul.DataList.Discussions *, body.Category-diskussionen ul.DataList.Discussions *:before, *:after
{box-sizing:  border-box !important;}


body.Category-diskussionen ul.DataList.Discussions
{
 -moz-column-width: 13em;
 -webkit-column-width: 13em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 

}

body.Category-diskussionen ul.DataList.Discussions > li
{
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}

The CSS selector only works on the category "Diskussionen" so that should be adjusted if you want to try it yourself.

The columns are quite small, not sure how to improve that: I'm no front end guy...

rbrahmson

Thanks! Still away from home. The link is a good source.

You may have not realized that the plugin gives the user the ability to toggle between grid and the traditional list views. Thus, I think that some JS is unavoidable, and if so I still need to understand the cause of the flicker rather than work around it.

Hope I make sense while I'm still on vacation...

R_J

Yes and no: your JavaScript changes the DOM which is a good suspect why there is a flickering. If the DOM is not changed and the js snippet only changes CSS, there really would be no reason for any flickering.

I'm not convinced you really need JS: https://codepen.io/anon/pen/eQxvOq

rbrahmson

OK, now it reached the point where I need to research the source (there's so much I can remember while vacationing...).
Thanks for the references.
Happy holidays!

igorneumann

@rbrahmson said:
OK, now it reached the point where I need to research the source (there's so much I can remember while vacationing...).
Thanks for the references.
Happy holidays!

@R_J said:
You are asking me a frontend question?! You must have mistaken me!

Flickering content is a sign for actions taking place after page has been loaded. As far as I can see there is no CSS loaded after style script listed in the head tag

If you look at the source, you can see

<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" data-cf-nonce="c490b2101b9cf4ce6411f7f8-" defer=""></script></body>
</html>

That's where I would start first.

Hello all, FYI, I was able to fix almost all the problems mentioned:

• Does Not work for Guests

Fixed changing these config in config.php to "0":
$Configuration['Plugins']['DiscussionsGrid']['PermissionToggle'] = '0';
$Configuration['Plugins']['DiscussionsGrid']['PermissionGrid'] = '0';

• It flashes the unformatted content for a second until the page loads the CSS

Thanks to @R_J I found Cloudflare's rocket loader deferring its Javascript... disabled Rocket loader on Cloudflare and problem solved... for guests, not it just flashes the unformatted content if you aren't logged in.

• Categories with long names gets out of the grid, solved with "overflow:hidden" in CSS.

This one made the menu under gears get cut... this CSS worked fine:

GRID div.Meta.Meta-Discussion {

overflow: hidden;

}

• Can't translate "Grid/List" to our local language (Spanish) so hid it from the menu using css and let just the icon.

Found it at config.php!
$Configuration['Plugins']['DiscussionsGrid']['List'] = 'Listado';
$Configuration['Plugins']['DiscussionsGrid']['Grid'] = 'Fotos';

Wonder why it isnt at the config menu.

• The Icon positioning in the middle of the menu gets very weird, I wish it could be positioned at the end of the menu or at the righ-upper corner of the grid

Still couldn't find a way to reorder the menu but that isn't worrying me.

Also, InfiniteScroll isnt working with it... (check image below)

You can check a version of the page bypassing cloudflare, here: http://chinaudio.tempsite.ws

igorneumann

Well, looks like the version bypassing cloudflare doesn't flash unformatted content for signed in users at all, so lets file that under "cloudflare's bug".

The infinitescroll incompatibility doesnt change, though.

igorneumann

Looks like DiscussionGrid can't detect images embedded using the Vanilla 2.8 editor anymore.

rbrahmson

once again I'm away from source - I need to research it... As far as I can remember it is all done via css (directly or JS manipulating styles) so this is probably an indication that the 2.8 editor is using different css styles that are embedded in the resulting saved discussion. Just speculating;-)