timonweb / django-bulma

Bulma theme for Django

django-bulma's Issues

Why `{{ form|bulma }}` ?

Why is this needed {{ form|bulma }}?

Is it possible to get this working, too? {{ form }}

This would be cool, since I could use bulma without modifying my templates.

Error running python manage.py bulma install on Windows

File "c:\python\python36-32\Lib\subprocess.py", line 997, in _execute_child
startupinfo)
FileNotFoundError: [WinError 2] The system cannot find the file specified

displaying `non_field_errors` when manually building a form

Is there a way to display the non_field_errors when when manually building a form (e.g. {{ form.field|bulma }})? Will this work?:

{% if form.non_field_errors %}
  {{ form.non_field_errors|bulma }}
{% endif %}

Thanks!

Bulma 0.8.1 and 0.8.2 released

Hi Timon,

In case you missed it...

https://github.com/jgthms/bulma/releases/tag/0.8.2

Create a new release to the improvements already done

pasword_change.html not had bulma tags

templatetags

Hey, I've noticed a few "problems" in your templatetags:

1. you should consider the templatetag |addclass to return field instead of return field.as_widget(...)
   the template will be still rendered fine and you can add more tags to modify the field.
   I did it like this:

@register.filter
def add_field_class(field, css_class):
  if len(field.errors) > 0:
    css_class += ' is-danger'

  if isinstance(field.field.widget, forms.SplitDateTimeWidget):
    for subfield in field.field.widget.widgets:
      if subfield.attrs.get('class'):
        subfield.attrs['class'] += ' {}'.format(css_class)
      else:
        subfield.attrs['class'] = css_class
    return field

  if field.field.widget.attrs.get('class'):
    field.field.widget.attrs['class'] += ' {}'.format(css_class)
  else:
    field.field.widget.attrs['class'] = css_class

  return field

2. would be cool if you could work with SplitDateTimeWidget, so to put them in columns
   I was too lazy to make my own template, so I just made a hack-tag:

@register.filter
def dt_columns(field):
  """easiest way to wrap date and time with columns"""
  r = field.as_widget()
  if isinstance(field.field.widget, forms.SplitDateTimeWidget):
    r = ''.join(['<div class="column"><{}></div>'.format(i) for i in r.strip(' ><').split('><')])
    r = '<div class="columns">{}</div>'.format(r)

  return mark_safe(r)

ofc this is a hack, but someone might find it useful :)

3. I did a small hack to change date/time/datetime input_type, cos while desktop browsers might not have the best plugins for it, the smartphones quite do, so it's prefferable (to me) to use them

@register.filter
def set_input_type(field, field_type=None):
  if field_type:
    pass
  elif isinstance(field.field.widget, forms.DateInput):
    field_type = 'date'
  elif isinstance(field.field.widget, forms.TimeInput):
    field_type = 'time'
  elif isinstance(field.field.widget, forms.SplitDateTimeWidget):
    for subfield in field.field.widget.widgets:
      if isinstance(subfield, forms.DateInput):
        subfield.input_type = 'date'
      elif isinstance(subfield, forms.TimeInput):
        subfield.input_type = 'time'
  elif isinstance(field.field.widget, forms.DateTimeInput):
    # field_type = 'datetime-local'  # can't work with passing/returning ISO format
    # field_type = 'datetime'  # is deprecated, doesn't work in many browsers
    # use widget=forms.SplitDateTimeWidget() instead
    pass

  if field_type:
    field.field.widget.input_type = field_type

  return field

And I made:

@register.filter
def is_field_type(field, field_type):
  if field_type == 'file':
    return isinstance(field.field.widget, forms.FileInput)
  elif field_type == 'radio':
    return isinstance(field.field.widget, forms.RadioSelect)
  elif field_type == 'checkbox':
    return isinstance(field.field.widget, forms.CheckboxInput)
  elif field_type == 'split_dt':
    return isinstance(field.field.widget, forms.SplitDateTimeWidget)
  elif field_type == 'input':
    return isinstance(field.field.widget, (
        forms.TextInput,
        forms.NumberInput,
        forms.EmailInput,
        forms.PasswordInput,
        forms.URLInput,
        forms.SplitDateTimeWidget,
    ))
  elif field_type == 'textarea':
    return isinstance(field.field.widget, forms.Textarea)
  elif field_type == 'select':
    return isinstance(field.field.widget, forms.Select)
  elif field_type == 'any_datetime':
    return isinstance(field.field.widget, (forms.DateInput, forms.TimeInput, forms.DateTimeInput, forms.SplitDateTimeWidget))  # ? , forms.SplitHiddenDateTimeWidget
  else:
    raise ValueError("Unsupported field_type on |is_field_type:'{}'".format(field_type))

So I could use something like this in the template:

{% if field|is_field_type:'split_dt' %}
  {{ field|set_input_type|add_field_class:'input'|dt_columns }}
{% elif field|is_field_type:'any_datetime' %}
  {{ field|set_input_type|add_field_class:'input' }}
{% else %}
  {{ field|add_field_class:'input' }}
{% endif %}

I am new to django, and I hope you don't mind but I didn't really install your plugin, I just checked the codes as an inspiration to create my own easier way to render forms. But I think you might take something from the problems I ran into.

Thanks for you work, much appreciated
Cheers

Error running python manage.py bulma install on rasp pi

Hi all,
I'm trying to install django-bulma in my django project.

After I executed "python manage.py copy_bulma_static_into_project" on my rasp pi, I had this issue:

FileNotFoundError [Errno 2] no such file or directory 'npm'

Could anyone try to help me?

setuptools dependency missing

Hello,
thanks for providing this very handy lib. Just FYI, the dependency on setuptools is not specified, which leads to this kind of errors on environments where setuptools is not installed:

 File "/home/sapristi/dev/alife/django/.venv/lib/python3.11/site-packages/bulma/__init__.py", line 1, in <module>
    from pkg_resources import get_distribution, DistributionNotFound
ModuleNotFoundError: No module named 'pkg_resources'

This happens for example when installing with pdm.

(For django-bulma v0.8.3)

Use CDN instead serving css from server

bulma is served from locally stored css file.

Will be nice if we can switch between CDN provided CSS or locally provided CSS.

Thanks.

screenshots

Some screenshots will be nice

Bulma 0.7.2 released

There is a new Bulma release a few weeks ago. https://github.com/jgthms/bulma/releases/tag/0.7.2

Support for Django 4.0

Hello, django-bulma does not seem to be fully compatible with Django 4.0 (e.g. The id attribute is missing on rendered fields).

Also, Template based form rendering should help with forms customization.

newbie question : how to use it ?

Yeah full newbie question sorry....

got the project in my django installed apps but....

I can write some docs and PR it if needed,

thanks !

Font Awesome JS tag?

I understand that the vision for this project doesn't include supporting javascript.
But since there is a {% font_awesome %} tag for css, and many of us use the corresponding all.js library from Font Awesome, what do you think of including a similar tag for a CDN link to the same-versioned javascript file?
Maybe: {% font_awesome_js %}?

How to best add icons to form fields?

Cool library, it probably saves me a lot of time! 😊

What's the suggested way of creating forms with icons in its fields as supported by bulma (https://bulma.io/documentation/form/general/#with-icons)?

can this provide support for django admin

i like bulma very much

but how can i change the django admin template default css to bulma?

Navbar-burger can't work in django's render return.

I use bulma in django, why Navbar-burger doesn't work, shows on the mobile side, can't come dropdown the menu, thank you!

Error when executing "bulma start"

Hi there:

in a fresh installation over windows 11 I cannot execute "python manage.py bulma install"

(venv) PS C:\sites\testbulma> py manage.py bulma install
Traceback (most recent call last):
  File "C:\sites\testbulma\manage.py", line 22, in <module>
    main()
  File "C:\sites\testbulma\manage.py", line 18, in main
    execute_from_command_line(sys.argv)
  File "C:\sites\testbulma\venv\Lib\site-packages\django\core\management\__init__.py", line 446, in execute_from_command_line
    utility.execute()
  File "C:\sites\testbulma\venv\Lib\site-packages\django\core\management\__init__.py", line 440, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "C:\sites\testbulma\venv\Lib\site-packages\django\core\management\base.py", line 402, in run_from_argv
    self.execute(*args, **cmd_options)
  File "C:\sites\testbulma\venv\Lib\site-packages\django\core\management\base.py", line 448, in execute
    output = self.handle(*args, **options)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\sites\testbulma\venv\Lib\site-packages\django\core\management\base.py", line 666, in handle
    label_output = self.handle_label(label, **options)
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\sites\testbulma\venv\Lib\site-packages\bulma\management\commands\bulma.py", line 31, in handle_label
    getattr(self, 'handle_' + label)(**options)
    self.npm_run(['install'])
  File "C:\sites\testbulma\venv\Lib\site-packages\bulma\management\commands\bulma.py", line 66, in npm_run
    subprocess.run(['npm'] + commands, cwd=self.bulma_dir)
  File "C:\Users\Enrique\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 548, in run
    with Popen(*popenargs, **kwargs) as process:
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\Enrique\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 1024, in __init__
    self._execute_child(args, executable, preexec_fn, close_fds,
  File "C:\Users\Enrique\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 1493, in _execute_child
    hp, ht, pid, tid = _winapi.CreateProcess(executable, args,
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
FileNotFoundError: [WinError 2] El sistema no puede encontrar el archivo especificado

Enviroment:

OS Windows 11
Python 3.11
Django 4.1.7
npm 8.8.0
node 16.0

Thanks

Bulma v0.9.3 released

Hi Timon,

First of all... thank you for creating this Django extension. Much appreciated.

Bulma v0.9.3 was released a few months ago. Perhaps you missed it.

Not sure if you intend to keep this extension updated. Hopefully you do.

Thanks again for spending your time, skills, and knowledge on this.

https://github.com/jgthms/bulma/releases/tag/0.9.3

customise bulma/base.html

Hey, I'm new to Django/Bulma, so sorry if this question is stupid.
I'd like to customise the bulma/base.html if it is possible, any ideas on how to approach this problem?

Thank you

Example App

It would be a great idea if an example app could be included in the repository (like in django-bootstrap) due to the lack of information about how to setup and use it, without die in the try. Sorry but documentation is terrible. It is unusable.
regards

Add basic js functions

Bulma does not come with the required javascript for some things, unlike Bootstrap. It is necessary to write it to get modals, menu toggle, tabs to work ...

I've seen a Bulmajs lib on github but all the examples are in ES6 and I dislike the api. It should not be difficult to write a few simple functions to do the job.

Would you be open to integrate basic js functions in this module so that we get an all in one ready to use Bulma engine for Django? I can contribute: I need some of these now and I am going to start writing them.

python manage.py bulma start

Don't overwrite user-defined widget classes in addclass filter

The current addclass templatetag used for rendering form fields will overwrite any existing classes on the widget. The addclass should append to the existing classes instead of overwriting them.

Compatible with Django 2.x

I made a fork of the project and I am beginning to adapt the templates tag and templates to be "completely" compatible with the Django 2.x version based on the Django source. I can make a PR of my repo if you like the idea @timonweb

lib folder not being copied

After running

python manage.py copy_bulma_static_into_project

the folders sass and css are copied but lib isn't.

Doubts with Django class form and class attributes

Hello Tim,

First of all, congratulations for the great job and apologies if my English is not so good.

I have a question about how django-bulma works with the customization of a form's classes. I have a class form. I want to give styles by assigning the widgets to the attributes as I do using Bootstrap, for example, and even if the placeholder attributes I accept, I do not add class ones (in the html, then I see that it does not add me the class attributes that I want to add). What can be?

I am using Django 2.0. I have tried the demo that you have here in the repo with the same requirements that I have been using myself (Django 2.x and others and it works perfectly) Although you do not use a model class form in the demo example but you are creating a form only.

The template_tag raises it well and in fact I draw well all the Form with the fields mapped correctly, but if I want to add the class "is-primary" for example to the input of the Form doing

class PageForm(forms.ModelForm):
    class Meta:
        model = Page
        fields = ['title', 'content']
        widgets = {
            'title': forms.TextInput(attrs={
                'class': 'is-primary',
                'placeholder': 'Título',
            }),
            'content': forms.Textarea(attrs={
                'placeholder': 'Contenido',
            }),
        }

Then, in the template, although I add the placeholder, I do not add the class 'is-primary' in the input of the first field. What am I doing wrong? How should I do it?

Possible conflict with AllAuth?

I'm setting up a Django project using AllAuth for user authentication, and django-bulma to provide styling on forms.

The Signup and Login pages work well, however, when I include "{{form**|bulma**}}" in the Logout form, an error message is generated (pls see attached).

If I remove the "|bulma" the Logout page functions

The code on my form is

{% extends '_base.html' %}
{% load bulma_tags %}
{% block content %}

Log Out

Are you sure you want to Log Out?

{% csrf_token %} {{form|bulma}}

Log Out

{% endblock content %}

Using bulma horizontal forms

Bulma comes with support for horizontal forms. django-bulma has a bulma_horizontal tag that seems to do something different (but does not work for me).

I wonder which approach is the preferred one.

Bulma 0.7.0 released

Thanks for creating this extension. Just would like to notify that Bulma 0.7.0 was just released two days ago. https://github.com/jgthms/bulma/releases/tag/0.7.0

Broken translation in allauth templates

I have noticed that some translations in allauth/account are broken after overriding them with bulma/account.

See for instance If you have not created an account yet, then please sign up first. in bulma/account/login.html.

From what I can tell it's because templates in bulma/account have slightly different line breaks and whitespaces, making the string different enough that the i18n machinery is not able to match them.

shell=True in subprocess.run

Please add shell=True argument in subrocess.run for it to be running without any issue of finding the path of npm on cross platform.
Otherwise it cannot find npm.

What about Jinja2?

hey Timon, i'm currently considering to port this package for use with Jinja2. do you have any thoughts on that?

login template is not working

I am using django 1.11.5 with python 3.5.3

When going on the /login url that is using the registration/login.html I have the following error:

'dict' object has no attribute 'flatten'

It seems to be linked to context = context.flatten() in bulma_tags.py

My context seems ok ?

Variable	Value
context	{'classes': {'label': '', 'single_value': '', 'value': ''}, 'form': <AuthenticationForm bound=False, valid=False, fields=(username;password)>}

Django 3 not support ?

Hi, is Django 3 supported?.

Why does this error give me

Image upload button doesn't work.

Hi! I really like how forms look with the "bulma" tag. Only problem is, that I can't upload images, which works fine in django's admin panel.
form_base.html:

{% load bulma_tags %}

<form method="post">
  {% csrf_token %}
  {{ form|bulma }}

  <div class="field is-grouped">
    <div class="control">
      <input class="button is-link" type="submit" value="Zatwiedź">
    </div>
    <div class="control">
      <a href="{{ request.META.HTTP_REFERER }}" class="button is-danger">Anuluj</a>
    </div>
  </div>
</form>

article_update_form.html:

{% extends "adminpanel/base.html" %}

{% block content %}

{% include 'adminpanel/forms/form_base.html' %}

{% endblock %}

base.html :

{% load pwa %}
{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
  {% progressive_web_app_meta %}
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  {% block meta_description %}{% endblock %}
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'bulma/css/style.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/website.css' %}">
  <title>{% block title %}Panel administratora{% endblock %}</title>
</head>

<body>
  {% include "adminpanel/includes/header.html" %}
  
  <section class="section">
    <div class="container">
      <div class="columns">

        <!-- Sidebar -->
        <div class="column is-3">
          {% include "adminpanel/includes/admin-sidebar.html" %}
        </div>

        <!-- Content -->
        <div class="column is-9">
          {% block content %}{% endblock %}
        </div>
      </div>
    </div>
  </section>

  {% include "adminpanel/includes/footer.html" %}

  <!-- Javascript -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="{% static 'jquery/js/jquery-3.4.0.min.js' %}"></script>
</body>

</html>

Email and file upload field not formatting – class name

Hi,

Thank you for this plugin! It looks great, except a couple problems I ran in to.

I have an email field (through Django) that wasn't being formatted, save with an avatar image upload field. Through trial and error, I found out that if I change the class names in Chrome Dev Tools from "emailinput" and "clearablefieldinput" to simply "input", they were styled correctly (except the "Choose File" button).

Instructions for using Bulma components

Thanks for a cool library. Is there a standard method to install Bulma components from https://wikiki.github.io/, e.g. the Calendar or Carousel (which also require javascript)?

• https://wikiki.github.io/components/carousel/

Update Bulma to 1.0.0

Hello @timonweb ,

Bulma 1.0.0 has been published in March. Can you please update this package?

PS: I see that this package has not been updated in quite some time, and PRs were left pending. Do you want to add another maintainer, or even transfer ownership of the package?

field.html label for

also I see you're missing attr for in labels in field.html
for="{{ field.id_for_label }}"

Customize input class using Bulma template rendering

First, thank you for this amazing library!!! Noobs like me enjoy this kind of shortcut. I came across some difficulties with one of my forms. How to tweak a form in order to class some inputs as input is-primary?

<div class="field">
    <label class="label ">First name</label>
    <div class="control ">
      <input type="text" name="first_name" class="input is-primary" required id="id_first_name">
    </div>
</div>

Based on my short experience with Django, I went with:

class AddClientForm(forms.ModelForm):
    class Meta: 
        model = Client
        fields = ["first_name", "last_name"]
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["first_name"] = forms.CharField(widget=forms.TextInput(attrs={'class': 'input is-primary'}))
        self.fields["last_name"] = forms.CharField()

But with the resulting html, <input class= remains input and not input is-primary. I guess I could disentangle {{form | bulma}} to achieve the expected result but I would like to know if I could be consistent with how I would do things normally.

django-bulma= "==0.6.0"

Issue with help text in Signup page template

Hi @timonweb, firstly really really great job on the Django Bulma integration. Really love the work you've put into this.

I am however getting a formatting issue when I am trying to render the Signup page:

I am attaching the screenshot of what I mean.

The help text below the Password field is not getting rendered properly. I think the issue is because of this template file