Skip to content

Missing bootstrap tag: Card #132

Open
@nerdoc

Description

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

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