Easy-digital-downloads: Remove clearing divs from [downloads] shortcode

[amdrew]

Following on from https://github.com/easydigitaldownloads/easy-digital-downloads/issues/3489, I'd like to propose that we remove the clearing divs from the [downloads] shortcode.

<div style="clear:both;"></div>

These were added to "clear" the floated edd_download div's, based on the number of columns shown. The only way they can be currently removed is using the downloads_shortcode filter, but that requires duplicating a lot of code. They are also not needed for themes using flexbox so just clutter the HTML.

According to http://caniuse.com/#feat=css-sel3, IE9 and up support the :nth-child() selector (click "show all" for more detailed stats).

Therefore, we could use something like the below instead, and keep the HTML clear-free:

.edd_download_columns_2 .edd_download:nth-child(2n+1),
.edd_download_columns_3 .edd_download:nth-child(3n+1),
.edd_download_columns_4 .edd_download:nth-child(4n+1),
.edd_download_columns_5 .edd_download:nth-child(5n+1),
.edd_download_columns_6 .edd_download:nth-child(6n+1) {
    clear: left;
}

The only downside I can see is someone not getting the latest CSS file since they might have copied it over into their edd_templates folder. We could however, and like https://github.com/easydigitaldownloads/easy-digital-downloads/issues/3489, inject the required CSS into the page so everyone gets it. Theme's who don't want the clearing divs can easily unhook it. After x many versions of EDD we can place it inside the CSS file.

[amdrew]

I have created a branch here if anyone would like to test (especially in IE browsers). Note, you'll need SCRIPT_DEBUG set to true:
https://github.com/easydigitaldownloads/easy-digital-downloads/tree/issue/5847

[SDavisMedia]

I just ran into these over the weekend and had to filter downloads_shortcode so I could start converting Vendd's [downloads] shortcode output to Flexbox . I'd love to see them gone. Will test during the week.

[samikeijonen]

+100

[pippinsplugins]

Let's get rid of them!

[SDavisMedia]

With this change, the edd_downloads_list element now needs a clear class.

Otherwise, this is working great. I checked it out in several themes, forcing one download element to be much taller than all others. It all checks out with the :nth-child() CSS in place. Very nice. :+1:

[amdrew]

Good point. As @SDavisMedia has pointed out we still need to clear the downloads list. Rather than adding a class to the HTML I've just added a new CSS rule to edd_downloads_list (see commit above) to keep the HTML clutter free:

.edd_downloads_list:after {
    content: "";
    display: table;
    clear: both;
}

I'm aware that we already have a edd_clearfix selector which we _could_ apply (currently used on the checkout form apparently) though I think it's unnecessary to add a class to the HTML since we only clear floats in 2 places.

/* =Checkout Form
-------------------------------------------------------------- */
.edd_clearfix:after {
    display: block;
    visibility: hidden;
    float: none;
    clear: both;
    text-indent: -9999px;
    content: ".";
}

Then we can remove the old clearfix above, and then group the other selector into the new clearfix. One more step towards cleaner HTML.

[cklosowski]

@SDavisMedia could you work up a PR for me on this?

[SDavisMedia]

That should be all that's needed for now. I added clearing to pagination... didn't catch that last time. Besides that, I just rearranged the CSS. Looks perfect in all the themes I checked.

[amdrew]

Nice, thanks for getting this one to the finish line @SDavisMedia