Skip to content

Commit c333c35

Browse files
kalwalkdenkalwalkden
authored
Merge pull request #17 from kalwalkden/materializecss-1.0.0-rc.1
Form element updates for Materializecss 1.0.0 rc.1
2 parents 8be8588 + 546ea89 commit c333c35

File tree

6 files changed

+191
-81
lines changed

6 files changed

+191
-81
lines changed

‎README.md‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,80 @@ A simple Django template tag to work with [Materializecss](http://materializecss
99

1010
## Install
1111

12+
This is forked version. If you find this useful send me and email at [email protected] or make a pull request.
13+
1214
```
13-
pip install django-materializecss-form
15+
pip git+https://github.com/kalwalkden/django-materializecss-form.git
16+
1417
```
1518

19+
20+
1621
[on pypi](https://pypi.python.org/pypi/django-materializecss-form)
22+
[on GitHub](https://github.com/kalwalkden/django-materializecss-form)
1723

1824
Add to INSTALLED_APPS:
1925

20-
```
26+
```
2127
INSTALLED_APPS = (
2228
'materializecssform',
2329
...
2430
)
2531
```
2632

33+
Add Materializecss to your project:
34+
35+
In your base.html:
36+
37+
```
38+
<head>
39+
40+
{% block css %}
41+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
42+
{% endblock css %}
43+
44+
</head>
45+
```
46+
47+
```
48+
49+
<body >
50+
51+
{% block javascript %}
52+
<script
53+
src="https://code.jquery.com/jquery-3.3.1.min.js"
54+
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
55+
crossorigin="anonymous"></script>
56+
57+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
58+
59+
<script>
60+
$(document).ready(function(){
61+
62+
// Initialize materialize data picker
63+
$('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
64+
$('select').formSelect();
65+
66+
});
67+
68+
</script>
69+
70+
{% endblock javascript %}
71+
72+
73+
74+
...
75+
76+
</body>
77+
```
78+
2779
## Usage
2880

2981
Use it like this, simple.
3082

3183
{% load materializecss %}
3284

33-
### All the form
85+
### All the form
3486

3587
{{ form|materializecss }}
3688

@@ -58,7 +110,7 @@ Use it like this, simple.
58110

59111
- TextInput
60112
- Textarea
61-
- Select
113+
- Select
62114
- Filefield
63115
- DateField
64116

‎README.rst‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,19 @@ Install
1010

1111
::
1212

13-
pip install django-materializecss-form
13+
pip git+https://github.com/kalwalkden/django-materializecss-form.git
14+
15+
1416

1517
`on pypi`_
1618

19+
20+
::
21+
22+
https://github.com/kalwalkden/django-materializecss-form
23+
24+
`on Github`_
25+
1726
Add to INSTALLED\_APPS:
1827

1928
::
@@ -23,6 +32,47 @@ Add to INSTALLED\_APPS:
2332
...
2433
)
2534

35+
36+
Add Materializecss to your project:
37+
38+
In your base.html:
39+
40+
::
41+
<head>
42+
43+
{% block css %}
44+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
45+
{% endblock css %}
46+
47+
</head>
48+
49+
::
50+
51+
<body >
52+
53+
{% block javascript %}
54+
<script
55+
src="https://code.jquery.com/jquery-3.3.1.min.js"
56+
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
57+
crossorigin="anonymous"></script>
58+
59+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
60+
61+
<script>
62+
$(document).ready(function(){
63+
64+
// Initialize materialize data picker
65+
$('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
66+
$('select').formSelect();
67+
});
68+
</script>
69+
70+
{% endblock javascript %}
71+
72+
...
73+
74+
</body>
75+
2676
Usage
2777
-----
2878

@@ -82,5 +132,6 @@ Inspired by
82132

83133
.. _Materializecss: http://materializecss.com/
84134
.. _on pypi: https://pypi.python.org/pypi/django-materializecss-form
135+
.. _on GitHub: https://github.com/kalwalkden/django-materializecss-form
85136
.. _django-bootstrap-form: https://github.com/tzangms/django-bootstrap-form
86137

‎materializecssform/meta.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
from distutils.version import StrictVersion
22

33

4-
VERSION = StrictVersion('1.0.02')
4+
VERSION = StrictVersion('1.1.0')

‎materializecssform/templates/materializecssform/field.html‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,48 @@
33

44
{% if field|is_checkbox %}
55
<div class="col {{ classes.label }}">
6-
<div class="{{ classes.single_value }}">
7-
<div class="checkbox">
8-
{% if field.auto_id %}
9-
{{ field }}
10-
<label for="{{ field.id_for_label }}" {% if field.field.required and form.required_css_class %}class="{{ form.required_css_class }}"{% endif %}>
6+
<div class="{{ classes.single_value }} {% if field.field.required and form.required_css_class %}{{ form.required_css_class }}{% endif %}">
7+
<label>
8+
{% if field.auto_id %}
9+
{{ field }}
10+
1111
<span>{{ field.label }}</span>
12-
</label>
13-
{% endif %}
14-
{% for error in field.errors %}
15-
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
16-
{% endfor %}
12+
{% endif %}
13+
{% for error in field.errors %}
14+
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
15+
{% endfor %}
1716

18-
{% if field.help_text %}
19-
<p class="help-block">
20-
{{ field.help_text|safe }}
21-
</p>
22-
{% endif %}
23-
</div>
17+
</div>
18+
</label>
19+
{% if field.help_text %}
20+
<p class="help-block">
21+
{{ field.help_text|safe }}
22+
</p>
23+
{% endif %}
2424
</div>
2525
</div>
2626
{% elif field|is_radio %}
2727
<div class="col {{ classes.label }}">
28+
<div class="{{ classes.single_value }} {% if field.field.required and form.required_css_class %}{{ form.required_css_class }}{% endif %}">
29+
<label>
30+
{% if field.auto_id %}
31+
{{ field }}
32+
<span>{{ field.label }}</span>
33+
{% endif %}
34+
{% for error in field.errors %}
35+
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
36+
{% endfor %}
2837

29-
{% if field.auto_id %}
30-
<label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}">{{ field.label }}</label>
31-
{% endif %}
32-
<div class="{{ classes.value }}">
33-
{% for choice in field %}
34-
<p>
35-
{{ choice.tag }}
36-
<label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
37-
</p>
38-
{% endfor %}
39-
40-
{% for error in field.errors %}
41-
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
42-
{% endfor %}
43-
38+
</div>
39+
</label>
4440
{% if field.help_text %}
45-
<p class="help-block">
46-
{{ field.help_text|safe }}
47-
</p>
41+
<p class="help-block">
42+
{{ field.help_text|safe }}
43+
</p>
4844
{% endif %}
4945
</div>
5046
</div>
51-
{% elif field|is_date_input %}
47+
{% elif field|is_date_input or field|is_datetime_input %}
5248
<div class="col {{ classes.label }}">
5349

5450
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
@@ -65,18 +61,17 @@
6561
{% endif %}
6662
</div>
6763
{% elif field|is_select %}
68-
<div class="col {{ classes.label }}">
64+
<div class="col input-field {{ classes.label }} {{ classes.value }}">
6965
{% if field|is_checkbox_select_multiple %}
70-
{% if field.auto_id %}
71-
<label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}">{{ field.label }}</label>
72-
{% endif %}
73-
<div class="{{ classes.value }}">
74-
{% for choice in field %}
75-
<p>
76-
{{ choice.tag }}
77-
<label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
78-
</p>
79-
{% endfor %}
66+
<div class="input-field {{ classes.value }}">
67+
<select multiple>
68+
{% for choice in field %}
69+
<option value="{{ choice.tag }}">{{ choice.choice_label }}</option>
70+
{% endfor %}
71+
</select>
72+
{% if field.auto_id %}
73+
<label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}">{{ field.label }}</label>
74+
{% endif %}
8075

8176
{% for error in field.errors %}
8277
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
@@ -90,19 +85,26 @@
9085
</div>
9186

9287
{% else %}
93-
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
94-
{{field}}
95-
{% for error in field.errors %}
96-
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
97-
{% endfor %}
88+
<select>
89+
{% for choice in field %}
90+
<option value="{{ choice.tag }}">{{ choice.choice_label }}</option>
91+
{% endfor %}
92+
</select>
93+
{% if field.auto_id %}
94+
<label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}">{{ field.label }}</label>
95+
{% endif %}
9896

99-
{% if field.help_text %}
100-
<p class="help-block">
101-
{{ field.help_text|safe }}
102-
</p>
103-
{% endif %}
97+
{% for error in field.errors %}
98+
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
99+
{% endfor %}
104100

105-
{% endif %}
101+
{% if field.help_text %}
102+
<p class="help-block">
103+
{{ field.help_text|safe }}
104+
</p>
105+
{% endif %}
106+
107+
{% endif %}
106108

107109
</div>
108110

‎materializecssform/templatetags/materializecss.py‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
from django import forms
22
from django.template.loader import get_template
33
from django import template
4+
from django.forms.fields import DateTimeField, DateField
45

56
from materializecssform import config
67

@@ -73,7 +74,11 @@ def is_radio(field):
7374

7475
@register.filter
7576
def is_date_input(field):
76-
return isinstance(field.field.widget, forms.DateInput)
77+
return isinstance(field.field, DateField)
78+
79+
@register.filter
80+
def is_datetime_input(field):
81+
return isinstance(field.field, DateTimeField)
7782

7883

7984
@register.filter

0 commit comments

Comments
 (0)