add doc for UI : macros and CSS classes

This commit is contained in:
Julien Fastré 2016-02-22 21:08:47 +01:00
parent 786c3e6184
commit 901fa399e9
7 changed files with 148 additions and 4 deletions

View File

@ -0,0 +1,46 @@
.. Copyright (C) 2014 Champs Libres Cooperative SCRLFS
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
.. _activity-bundle:
Activity bundle
###############
This bundle provides the ability to record people in the software. This bundle is required by other bundle.
.. contents:: Table of content
:local:
Entities provided
*****************
.. todo::
Describe the entities provided.
Macros
******
Activity reason sticker
=======================
Macro file
`ChillActivityBundle:ActivityReason:macro.html.twig`
Macro envelope
:code:`reason(r)`
:code:`p` is an instance of :class:`Chill\ActivityBundle\Entity\ActivityReason`
When to use this macro ?
When you want to represent an activity reason.
Example usage :
.. code-block:: html+jinja
{% import 'ChillActivityBundle:ActivityReason:macro.html.twig' as m %}
{{ m.reason(r) }}

View File

@ -18,6 +18,7 @@ You will find here documentation about bundles working with Chill.
Custom Fields bundle <custom-fields.rst>
Person bundle <person.rst>
Report bundle <report.rst>
Activity bundle <activity.rst>
Your bundle here ?
-------------------

View File

@ -110,3 +110,27 @@ person_fields *array*
.. note::
If you hide multiple fields, for a better integration you may want to override the template, for a better appeareance. See `the symfony documentation <http://symfony.com/doc/current/book/templating.html#overriding-bundle-templates>`_ about this feature.
Macros
******
Sticker for a person
=====================
Macro file
`ChillPersonBundle:Person:macro.html.twig`
Macro envelope
:code:`render(p, withLink=false)`
:code:`p` is an instance of :class:`Chill\PersonBundle\Entity\Person`
:code:`withLink` :class:`boolean`
When to use this macro ?
When you want to represent a person.
Example usage :
.. code-block:: html+jinja
{% import "ChillPersonBundle:Person:macro.html.twig" as person_ %}
{{ person_.render(person, true) }}

View File

@ -97,7 +97,7 @@ master_doc = 'index'
# General information about the project.
project = 'Chill Documentation'
copyright = '2014, Champs-Libres, published under the terms of the GNU Free Documentation License, Version 1.3'
copyright = '2014-2016, Champs-Libres, published under the terms of the GNU Free Documentation License, Version 1.3'
# The version info for the project you're documenting, acts as replacement for
# |version| and |release|, also used in various other places throughout the
@ -106,7 +106,7 @@ copyright = '2014, Champs-Libres, published under the terms of the GNU Free Docu
# The short X.Y version.
version = '1.0'
# The full version, including alpha/beta/rc tags.
release = '1.0.0ALPHA'
release = '1.0'
# The language for content autogenerated by Sphinx. Refer to documentation
# for a list of supported languages.
@ -255,6 +255,7 @@ htmlhelp_basename = 'chill-docdoc'
latex_elements = {
# The paper size ('letterpaper' or 'a4paper').
#'papersize': 'letterpaper',
'papersize': 'a4paper'
# The font size ('10pt', '11pt' or '12pt').
#'pointsize': '10pt',
@ -335,7 +336,7 @@ texinfo_documents = [
epub_title = 'Chill Documentation'
epub_author = 'Champs-Libres'
epub_publisher = 'Champs-Libres'
epub_copyright = '2014, Champs-Libres'
epub_copyright = '2014-2016, Champs-Libres'
# The basename for the epub file. It defaults to the project name.
#epub_basename = 'chill-doc'

View File

@ -18,7 +18,6 @@ As Chill rely on the `symfony <http://symfony.com>`_ framework, reading the fram
Instructions to create a new bundle <create-a-new-bundle.rst>
Routing <routing.rst>
Menus <menus.rst>
Layout / Template usage <layout-template-usage.rst>
Access control model <access_control_model.rst>
Messages to users <messages-to-users.rst>
Localisation <localisation.rst>
@ -29,6 +28,15 @@ As Chill rely on the `symfony <http://symfony.com>`_ framework, reading the fram
Testing <make-test-working.rst>
manual/index.rst
Layout and UI
**************
.. toctree::
:maxdepth: 2
Layout / Template usage <user-interface/layout-template-usage.rst>
Classes and mixins <user-interface/css-classes.rst>
Help, I am lost !
*****************

View File

@ -0,0 +1,64 @@
.. Copyright (C) 2016 Champs Libres Cooperative SCRLFS
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
CSS classes and mixins
######################
The stylesheet are based on the framework `ScratchCSS <https://github.com/Champs-Libres/ScratchCSS>`_.
We added some useful classes and mixins for the Chill usage.
CSS Classes
************
Statement "empty data"
======================
CSS Selector
:code:`.chill-no-data-statement`
In which case will you use this selector ?
When a list is empty, and a message fill the list to inform that the data is empty
Example usage
.. code-block:: html+jinja
<span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
Quotation of user text
=======================
CSS Selector
:code:`blockquote.chill-user-quote`
In which case will you use this selector ?
When you quote text that were filled by the user in a form.
Example usage
.. code-block:: html+jinja
<blockquote class="chill-user-quote">{{ entity.remark|nl2br }}</blockquote>
Mixins
******
Entity decorator
=================
Mixin
:code:`@mixin entity($background-color, $color: white)`
In which case including this mixin ?
When you create a `sticker`, a sort of label to represent a text in a way that the user can associate immediatly with a certain type of class / entity.
Example usage
.. code-block:: sass
span.entity.entity-activity.activity-reason {
@include entity($chill-pink, white);
}