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

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.

CHANGELOG.md

@@ -8,6 +8,11 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unrealeased]
 
+### Added
+
+- Added new 'large-banner' plugin template variant `compacted-banner` that
+  is more compacted than variant `hero-intro`.
+
 ### Changed
 
 - Remove News subheader in blogpost detail page

UPGRADE.md

@@ -16,6 +16,24 @@ $ make migrate
 
 ## Unreleased
 
+## 2.29.2 to 2.29.3
+
+- Add new `compacted-banner` theme scheme
+```
+  compacted-banner: (
+    title-color: r-color('charcoal'),
+    title-alt-color: r-color('firebrick6'),
+    content-color: r-color('black'),
+    search-input-background: rgba(r-color('white'), 0.7),
+    search-btn-background: r-color('firebrick6'),
+    search-icon-fill: r-color('white'),
+    cta-variant-from: rgba(r-color('white'), 0.8),
+    cta-variant-to: rgba(r-color('white'), 0.8),
+    cta-color: r-color('firebrick6'),
+    cta-border: r-color('white'),
+  ),
+```
+
 ## 2.25-beta.0 to 2.26.0
 
 - Dropped support for postgres version < 12

src/frontend/scss/colors/_theme.scss

@@ -128,6 +128,18 @@ $r-theme: (
     cta-color: r-color('firebrick6'),
     cta-border: r-color('white'),
   ),
+  compacted-banner: (
+    title-color: r-color('charcoal'),
+    title-alt-color: r-color('firebrick6'),
+    content-color: r-color('black'),
+    search-input-background: rgba(r-color('white'), 0.7),
+    search-btn-background: r-color('firebrick6'),
+    search-icon-fill: r-color('white'),
+    cta-variant-from: rgba(r-color('white'), 0.8),
+    cta-variant-to: rgba(r-color('white'), 0.8),
+    cta-color: r-color('firebrick6'),
+    cta-border: r-color('white'),
+  ),
   section-plugin: (
     title-emphased-color: r-color('firebrick6'),
   ),

src/frontend/scss/components/_content.scss

@@ -28,6 +28,20 @@ body {
       background-size: 100% 100%;
     }
   }
+
+  // Apply the top padding behavior with topbar over mode only on the first child which
+  // is the only variant that can be exposed to issue with topbar over
+  .compacted-banner:first-child {
+    .compacted-banner__inner {
+      @include media-breakpoint-up(lg) {
+        @if $r-topbar-height {
+          padding: $r-topbar-height 0 1rem;
+        } @else {
+          padding: 1rem 0 1rem;
+        }
+      }
+    }
+  }
 }
 
 // Container relative to some modal components

src/frontend/scss/components/_index.scss

@@ -59,6 +59,7 @@
 @import './templates/courses/plugins/licence_plugin';
 @import './templates/richie/section/section';
 @import './templates/richie/large_banner/large_banner';
+@import './templates/richie/large_banner/compacted_banner';
 @import './templates/richie/nesteditem/nesteditem';
 @import './templates/richie/glimpse/glimpse';
 

src/frontend/scss/components/templates/richie/large_banner/_compacted_banner.scss

@@ -0,0 +1,149 @@
+// A compact banner without image contents
+// Opposed to 'hero-intro' this variant delegates the top padding for topbar in 'over'
+// mode in content component
+//
+.compacted-banner {
+  position: relative;
+  padding: 0;
+
+  &__inner {
+    padding: 1rem 0;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
+  }
+
+  &__body {
+    @include make-container();
+    @include make-container-max-widths();
+    padding: 1rem;
+    text-align: center;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+      padding: 2rem;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+
+  // NOTE: Force disabling of hardcoded hero title class from some already save
+  // contents. Sadly we can not disable the huge font size
+  .hero-intro__title {
+    margin-bottom: 1rem !important;
+    width: auto;
+    color: inherit;
+
+    strong {
+      color: inherit;
+      font-weight: inherit;
+    }
+  }
+
+  // NOTE: Apply the color+weight behavior with 'strong' element alike in
+  // 'hero-intro__title' but naturally on title elements without any class
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: r-theme-val(compacted-banner, title-color);
+    margin-bottom: 0.5em;
+
+    strong {
+      color: r-theme-val(compacted-banner, title-alt-color);
+      font-weight: inherit;
+    }
+  }
+
+  // NOTE: Implement again the 'hero-intro__title' equivalent behavior
+  &__title {
+    @include responsive-spacer('margin-bottom', 1);
+    @include font-size($extra-font-size);
+    color: r-theme-val(compacted-banner, title-color);
+
+    strong {
+      color: r-theme-val(compacted-banner, title-alt-color);
+      font-weight: inherit;
+    }
+  }
+
+  &__content {
+    @include font-size($h5-font-size);
+    color: r-theme-val(compacted-banner, content-color);
+  }
+
+  &__search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    .richie-react--root-search-suggest-field {
+      @include sv-flex(1, 0, 100%);
+      position: relative;
+
+      @include media-breakpoint-up(lg) {
+        @include sv-flex(1, 0, 320px);
+      }
+
+      .react-autosuggest__container {
+        margin-bottom: 0;
+      }
+
+      input {
+        background: r-theme-val(compacted-banner, search-input-background);
+      }
+
+      .search-input {
+        &__btn {
+          background: r-theme-val(compacted-banner, search-btn-background);
+          border-top-right-radius: 3rem;
+          border-bottom-right-radius: 3rem;
+
+          &__icon {
+            fill: r-theme-val(compacted-banner, search-icon-fill);
+          }
+        }
+      }
+    }
+  }
+
+  &__cta {
+    @include sv-flex(0, 0, auto);
+    @include button-size(
+      $btn-padding-y,
+      $btn-padding-x,
+      $btn-font-size,
+      $btn-line-height,
+      $btn-border-radius
+    );
+    @include button-variant(
+      r-theme-val(compacted-banner, cta-variant-from),
+      r-theme-val(compacted-banner, cta-variant-to)
+    );
+    margin: 1.2rem 0 0;
+    font-size: $font-size-base;
+    color: r-theme-val(compacted-banner, cta-color);
+    border-radius: 2rem;
+    @if r-theme-val(compacted-banner, cta-border) {
+      border: 1px solid r-theme-val(compacted-banner, cta-border);
+    }
+
+    @include media-breakpoint-up(lg) {
+      margin-top: 0;
+      @include responsive-spacer('margin-left', 0, $breakpoints: ('lg': 3));
+    }
+
+    &:after {
+      content: '→';
+      margin-left: 1rem;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

src/richie/plugins/large_banner/defaults.py

@@ -11,5 +11,6 @@
     [
         ("richie/large_banner/large_banner.html", _("Default")),
         ("richie/large_banner/hero-intro.html", _("Hero introduction")),
+        ("richie/large_banner/compacted.html", _("Compacted introduction")),
     ],
 )

src/richie/plugins/large_banner/templates/richie/large_banner/compacted.html

@@ -0,0 +1,19 @@
+{% load static i18n cms_tags rfc_5646_locale %}
+<div class="compacted-banner">
+    <div class="compacted-banner__inner">
+        <div class="compacted-banner__body">
+            <div class="compacted-banner__content">
+                {{ instance.content|safe }}
+            </div>
+
+            <div class="compacted-banner__search">
+                <div class="richie-react richie-react--root-search-suggest-field"
+                    data-props='{"courseSearchPageUrl": "{% page_url 'courses' %}"}'></div>
+
+                <a class="compacted-banner__cta" href="{% page_url 'courses' %}">
+                    {% trans "Explore our catalog" %}
+                </a>
+            </div>
+        </div>
+    </div>
+</div>