1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
"""
References
* `Foundation 6 Grid <https://get.foundation/sites/docs/grid.html>`_;
""" # noqa: E501
from crispy_forms_foundation.layout.base import Div
__all__ = [
'Row', 'RowFluid', 'Column',
]
class Row(Div):
"""
Wrap fields in a div whose default class is ``row``. Example:
.. code-block:: python
Row('form_field_1', 'form_field_2', 'form_field_3')
Act as a div container row, it will embed its items in a div like that:
.. code-block:: html
<div class="row">Content</div>
"""
css_class = 'row'
class RowFluid(Row):
"""
Wrap fields in a div whose default class is "row row-fluid". Example:
.. code-block:: python
RowFluid('form_field_1', 'form_field_2', 'form_field_3')
It has a same behaviour than *Row* but add a CSS class "row-fluid" that you
can use to have top level row that take all the container width. You have
to put the CSS for this class to your CSS stylesheets. It will embed its
items in a div like that:
.. code-block:: html
<div class="row row-fluid">Content</div>
The CSS to add should be something like that:
.. code-block:: scss
:force:
/*
* Fluid row takes the full width but keep normal row and columns
* behaviors
*/
@mixin row-fluid-mixin {
max-width: 100%;
// Restore the initial behavior restrained to the grid
.row{
margin: auto;
@include grid-row;
// Preserve nested fluid behavior
&.row-fluid{
max-width: 100%;
}
}
}
.row.row-fluid{
@include row-fluid-mixin;
}
@media #{$small-up} {
.row.small-row-fluid{ @include row-fluid-mixin; }
}
@media #{$medium-up} {
.row.medium-row-fluid{ @include row-fluid-mixin; }
}
@media #{$large-up} {
.row.large-row-fluid{ @include row-fluid-mixin; }
}
@media #{$xlarge-up} {
.row.xlarge-row-fluid{ @include row-fluid-mixin; }
}
@media #{$xxlarge-up} {
.row.xxlarge-row-fluid{ @include row-fluid-mixin; }
}
It must be included after Foundation grid component is imported.
"""
css_class = 'row row-fluid'
class Column(Div):
"""
Wrap fields in a div. If not defined, CSS class will default to
``large-12 columns``. ``columns`` class is always appended, so you don't
need to specify it.
This is the column from the Foundation Grid component, all columns should
be contained in a **Row** or a **RowFluid** and you will have to define the
column type in the ``css_class`` attribute.
Example:
.. code-block:: python
Column('form_field_1', 'form_field_2', css_class='small-12 large-6')
Will render to something like that:
.. code-block:: html
<div class="small-12 large-6 columns">...</div>
``columns`` class is always appended, so you don't need to specify it.
If not defined, ``css_class`` will default to ``large-12``.
"""
css_class = 'columns'
def __init__(self, field, *args, **kwargs):
self.field = field
if 'css_class' not in kwargs:
kwargs['css_class'] = 'large-12'
super(Column, self).__init__(field, *args, **kwargs)
|
