From 618433d2e1741f64254d1107bcddf9bb9311589a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Lebleu?= Date: Wed, 2 Aug 2017 20:36:26 +0200 Subject: [PATCH] Added GridX, GridY and Cell for the new XY Grid component --- crispy_forms_foundation/layout/__init__.py | 5 +- crispy_forms_foundation/layout/grid.py | 63 +++++++++++++++++++++- 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/crispy_forms_foundation/layout/__init__.py b/crispy_forms_foundation/layout/__init__.py index c74b88d..e10d8a6 100644 --- a/crispy_forms_foundation/layout/__init__.py +++ b/crispy_forms_foundation/layout/__init__.py @@ -8,7 +8,7 @@ from __future__ import absolute_import from .base import Div, Panel, Callout, Layout, UneditableField, HTML -from .grid import Row, RowFluid, Column +from .grid import Row, RowFluid, Column, GridX, GridY, Cell from .fields import (MultiWidgetField, Field, MultiField, SplitDateTimeField, InlineField, InlineJustifiedField, SwitchField, @@ -26,11 +26,12 @@ __all__ = [ 'Div', 'Panel', 'Callout', 'Layout', 'UneditableField', 'HTML', 'Row', 'RowFluid', 'Column', + 'GridX', 'GridY', 'Cell', 'Field', 'FakeField', 'Hidden', 'MultiWidgetField', 'MultiField', 'SplitDateTimeField', - 'InlineField', 'InlineJustifiedField', 'SwitchField', 'InlineSwitchField' + 'InlineField', 'InlineJustifiedField', 'SwitchField', 'InlineSwitchField', 'ButtonHolder', 'ButtonHolderPanel', 'ButtonGroup', 'Button', 'Submit', 'Reset', diff --git a/crispy_forms_foundation/layout/grid.py b/crispy_forms_foundation/layout/grid.py index 2e70944..dc3295e 100644 --- a/crispy_forms_foundation/layout/grid.py +++ b/crispy_forms_foundation/layout/grid.py @@ -10,13 +10,14 @@ References * `Foundation 5 Grid `_; * `Foundation 6 Grid `_; + * `Foundation 6 XY Grid `_; """ # noqa: E501 from crispy_forms_foundation.layout.base import Div __all__ = [ - 'Row', 'RowFluid', 'Column', + 'Row', 'RowFluid', 'Column', 'GridX', 'GridY', 'Cell', ] @@ -132,3 +133,63 @@ def __init__(self, field, *args, **kwargs): kwargs['css_class'] = 'large-12' super(Column, self).__init__(field, *args, **kwargs) + + +class GridX(Div): + """ + Wrap fields in a div whose default class is ``grid-x``. Example: + + .. sourcecode:: python + + Row('form_field_1', 'form_field_2', 'form_field_3') + + Act as an horizontal grid, it will embed its items in a div like that: + + .. sourcecode:: html + +
Content
+ """ + css_class = 'grid-x' + + +class GridY(Div): + """ + Wrap fields in a div whose default class is ``grid-y``. Example: + + .. sourcecode:: python + + Row('form_field_1', 'form_field_2', 'form_field_3') + + Act as a vertical grid, it will embed its items in a div like that: + + .. sourcecode:: html + +
Content
+ """ + css_class = 'grid-y' + + +class Cell(Div): + """ + Wrap fields in a div. If not defined, CSS class will default to ``cell``. + It is always appended, so you don't need to specify it. + + This is the cell from the Foundation XY-Grid component, all cells should + be contained in a **GridX** or a **GridY** and you will have to define the + cell type in the ``css_class`` attribute. + + Example: + + .. sourcecode:: python + + Cell('form_field_1', 'form_field_2', css_class='large-6') + + Will render to something like that: + + .. sourcecode:: html + +
...
+ + ``cell`` class is always appended, so you don't need to specify it. + """ + css_class = 'cell'