On mobile, the dismiss/collapse buttons hide underneath the navigation bar (android, Chrome) so that only a smidge of the bottom of each button is visible. Mostly default installation so I haven’t tweaked any css.
(Ignore the crappy styling - testing a bg image)
Thanks for reporting that @Heather_Dudley! I should have a fix in place now. Let me know if there are any lingering issues after updating.
Looks great, thanks for the quick fix!
hello, I am wondering if there is any way to add alternative descriptions to the icons in each column to improve accessibility? Any support or advice would be awesome - thanks
I’ll definitely see if I can improve the overall accessibility of the banner in future updates, but you should be able to override things as needed in the mean time using the same idea as the last example I shared.
I’m not sure what you are using for icons (i.e. font awesome icons or custom images). If you are using images, for example, you should be able to do something like this:
<script type="text/discourse-plugin" version="0.8.42">
api.reopenWidget("banner-column-icon", {
html(attrs) {
const altText = {
0:"First Column Icon",
1:"Second Column Icon",
2:"Third Column Icon",
3:"Fourth Column Icon"
};
let icon = this._super(attrs);
if(icon.tagName === "IMG") {
icon.properties.alt = altText[attrs.column];
}
return icon;
}
});
</script>
Hopefully that gives you a starting point.
thank you Taylor I really appreciate your response!
thank you for a fantastic component…
I am having difficulty with it not expanding when the default state is set to collapse. I change this to expanded it collapses fine . Any ideas? Check out …
No problem - I appear to have a new issue now. Ive found your component is interacting with Discourse Category Headers theme component @Rhidian
I have changes in mind that I hope will improve the Versatile Banner’s compatibility with other components in the the future, but for now, you will need to make your own tweaks to get the two theme components to play nicely. From a quick look, this is the problem CSS rule:
.category-title-header {
margin-bottom: -65px !important;
}
Try creating a new theme component with the following and add it to your theme:
.category-title-header {
margin-bottom: 0 !important;
}
thank you will take a look …