Skip to content

Missing bootstrap tag: Card #132

Open
@nerdoc

Description

@nerdoc

I before issued this to django-crispy-forms itself, while it is a crispy-bootstrap5 issue:

  • Package version: crispy-bootstrap5==0.6, django-crispy-forms==1.14.0
  • Django version: 4.1
  • Python version:3.10
  • Template pack: bootstrap5 - but should also work with bootsrtap4

Description:

I am missing a Card template, modal and others exist.

I wrote my own, but I don't have time to make a PR ATM, maybe anyone else could?

The code is mostly borrowed from modal.html and the Modal() class

class Card(LayoutObject):
    """
    Layout object. It wraps fields in a Card.

    Example:
        Card(
            'form_field_1',
            'form_field_2',
            title="Sample card"
            subtitle="Always play nice."
        )
    """

    template = "%s/layout/card.html"

    def __init__(
        self,
        *fields,
        template=None,
        css_id="modal_id",
        title="Card Title",
        title_id="card_title_id",
        title_class="",
        subtitle="",
        css_class="",

        **kwargs,
    ):

        self.fields = list(fields)
        self.template = template or self.template
        self.css_id = css_id
        self.css_class = css_class
        self.title = title
        self.title_id = title_id
        self.title_class = title_class
        self.subtitle = subtitle

        kwargs = {
            **kwargs,
            "tabindex": "-1",
            "role": "dialog",
            "aria-labelledby": "%s-label" % self.title_id,
        }

        self.flat_attrs = flatatt(kwargs)

    def render(self, form, form_style, context, template_pack=TEMPLATE_PACK, **kwargs):
        fields = self.get_rendered_fields(
            form, form_style, context, template_pack, **kwargs
        )
        template = self.get_template_name(template_pack)

        return render_to_string(template, {"div": self, "fields": fields})

%s/layout/card.html:

<div {% if div.css_id %}id="{{ div.css_id }}"{% endif %}
    class="card mb-3{% if div.css_class %} {{ div.css_class }}{% endif %}"
    {{ div.flat_attrs }}>
  <div class="card-header">
    <h3 class="card-title{% if div.title_class %} {{ div.title_class }}{% endif %}" id="div.title_id">
      {{ div.title }}
      {% if div.subtitle %} <span class="card-subtitle">{{ div.subtitle }}</span>{% endif %}
    </h3>
  </div>
  <div class="card-body">
    {{ fields|safe }}
  </div>
</div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions