Making Model Patterns

Patterns should 'scale' up so I want to explore how you can scale up a pattern.

At the bottom of this page is a sample of the pattern being used, the Content Management System (CMS) builds the components and then lets the user add or remove content on the component, in this case I've chosen text as the thing to render in the chevrons.

Placing Patterns

We need a 'model' of the data

#models.py

from django.utils.translation import gettext_lazy as _ 
from djangocms_frontend.models import FrontendUIItem class 

ChevronPluginModel(FrontendUIItem): class Meta: proxy = True verbose_name = _("Chevron") def short_description(self): return self.config.get("top_content", "")

We also need a 'form'

from djangocms_frontend.models import FrontendUIItem 
from entangled.forms import EntangledModelForm 
from django.utils.translation import gettext_lazy as _ 
from djangocms_text.fields import HTMLFormField

class ChevronPluginForm(EntangledModelForm): class Meta: model = FrontendUIItem entangled_fields = { "config": [ "top_content", "bottom_content", ] } top_content = HTMLFormField( label=_("Top Section Content"), ) bottom_content = HTMLFormField( label=_("Bottom Section Content"), )

Templates and plugins

from djangocms_frontend.cms_plugins import CMSUIPlugin 
from cms.plugin_pool import plugin_pool from django.utils.translation import gettext_lazy as from . import models, forms @pluginpool.register_plugin class ChevronPlugin(CMSUIPlugin): model = models.ChevronPluginModel form = forms.ChevronPluginForm name = ("Chevron") rendertemplate = "cms/chevron.html" fieldsets = [ (_("Top Section"), { "fields": ["top_content"] }), (_("Bottom Section"), { "fields": ["bottom_content"] }), ] def render(self, context, instance, placeholder): context.update({"instance": instance}) return context

<!-- templates/cms/chevron.html -->

{% load cms_tags %}

<div class="chevron-top">

{{ instance.config.top_content | safe }}

</div>

<div class="chevron-bottom">

{{ instance.config.bottom_content | safe }}

</div>

Now our Chevron Style

Comes together

Cascading Style Sheets


.chevron-top {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    50% calc(100% - 50px),
    0 100%
  );
  background: var(--brand-primary-base);
  color: var(--brand-primary-inverse);
  padding: 2rem 2rem calc(2rem + 50px);
  width: 100%;
}

.chevron-bottom {
  clip-path: polygon(
    0 50px,
    50% 0,
    100% 50px,
    100% 100%,
    0 100%
  );
  background: var(--brand-primary-strong);
  color: var(--brand-primary-inverse);
  margin-top: -22px;
  padding: calc(2rem + 50px) 2rem 2rem;
  width: 100%;
}