Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💄(plugins) added 'large-banner' plugin template variant 'compacted-banner' #2499

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

sveetch
Copy link
Collaborator

@sveetch sveetch commented Sep 20, 2024

Purpose

It was required to have a compacted block available for page contents and that allowed to insert a title with the search bar and some buttons.

Mockup for expected display was this:

Screenshot_20240920_161346

Proposal

Since expected block contents was nearly identical to the ones from plugin 'large-banner', we just implemented this compacted block with existing a new template variant (and related CSS) for this plugin.

This new feature includes:

  • New template variant 'Compact' for plugin 'large-banner';
  • New CSS part in Sass source to implement variant layout;

Notices

Backgrounds

As required, plugin image and logo are ignored from this template because the compacted form is expected to be simple.

Content title

The variant 'hero-intro' was styling a specific class hero-intro__title that was required to append in HTML content to work, so existing content may have this and since of BEM scope it would still work inside compacted variant but this is unwanted since it is not very compact.

So the CSS class .compacted-banner include a rule .hero-intro__title to disable it, but this can not work with the text font-size. I recommend we assume that writers will be made aware about it for migrating existing banner to the compacted variant and will just remove it and so we can just remove it from the CSS. For compatibility there is also a rule .compacter-banner__title that is identical to .hero-intro__title, we may probably remove it also.

Buttons

Mockup includes two CTA buttons but there is only one in the default Richie template, this is something to change from sites templates overriding.

Sample screenshot

Screenshot_20240920_180806

On mobile, the search bar and buttons just stack vertically.

This has been taken on bare Richie Sass settings (opposed to the mockup that has been done from funmooc settings).

@sveetch sveetch force-pushed the large_banner_compact_variant branch 2 times, most recently from 918ab38 to 264ec6b Compare September 20, 2024 19:12
It was required to have a compacted block available for page
contents and that allowed to insert a title with the search bar
and some buttons.

We just implemented this compacted block with existing a new
template variant (and related CSS) for this plugin.
@@ -16,6 +16,24 @@ $ make migrate

## Unreleased

## 2.29.2 to 2.29.3
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## 2.29.2 to 2.29.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants