Responsive plugin

Bráulio Bhavamitra braulio at eita.org.br
Sun Nov 9 02:24:26 BRST 2014 

Dear friends from the noosfero community,

     First of all, sorry for taking so long to share news about our
initiative of creating a responsive design for noosfero. It was great
challenge, that brought with it several "clean-ups" in the core, making
lots of things more consistent and logic.

   -

     Our principle from the beginning can be synthesized by a sentence from
Terceiro: "The responsive plugin can not break the actual layout". That's
what we have done. The fixed-width layout, used today, is not broken with
all our core changes.

   -

     We are therefore happy to announce to you that we have finished a
first proposal of the noosfero-responsive plugin. We hope that you will
enjoy it and that it will be integrated as soon as possible to the noosfero
main branch. In our case (CIRANDAS), we will at the same time change the
layout to responsive and make the upgrade to rails3, so that this upgrade
will be more meaningful for the final users as a major change.

   -

     We left a testing environment where you can see the responsive layout
in action: http://noosfero-responsive.eita.org.br

   -

      The code is available at:
https://gitlab.com/eita/noosfero/commits/responsive-plugin

*How to make your theme responsive:*

   1. Load the plugin 'responsive' (with script/noosfero-plugins)


   1. Enable the plugin 'responsive' (administration settings)


   1. Use the theme 'noosfero-responsive' for your environment or profile,
   or adapt your themes using the 'base-responsive' instead of 'base' and add
   the 'responsive: true' flag to the theme.yml . We expect to provide some
   documentation on how to migrate your themes to noosfero-responsive.


*Note:* Even if you enable the plugin, the themes that don't have the
"responsive:true" flag in theme.yml should still work falwlessly! We spent
quite a lot of work on it to allow the systems to have a transition between
responsive and non-responsive layout!

There must be still several problems that have to be addressed. We list
here two cases that we didn't solve:

    1. Article edition with tinyMCE and the "insert media panel" on the
right becomes quite ugly in small screens, since the insert media panel is
displaced to below the text edition area. Our opinion is that the best
solution would be to have this panel hidden and that it appears as a modal
when called by a button "insert media". It will be clean.
    2. Gallery slideshows are still non-responsive. The javascript is so
old that we thought it would be better to refactor it completely to some
existing responsive image slideshow such as .

We'll be happy to know about other problems as well!

*"Clean-ups": our contributions to Noosfero for better code consistency:*

   -

     As a byproduct of the noosfero-responsive plugin, we made bug fixes
and enhancements to the code of noosfero to better separate model from
views and those from controllers (the old and friendly MVC paradigm), and
also aligning some legacy snippets such as the different modals to a single
one (colorbox, and fancybox for images).

   -

     We would like to describe below these changes, since they are core and
are needed for the noosfero-responsive plugin to work:

   -


   - *"Protect against nil"*


   - Code: http://e.eita.org.br/1v56


   - Description: Bug fix in rails3


   - *"Fallback to en in i18n"*


   - Code: http://e.eita.org.br/1v5o


   - Description: Set en as fallback language when a translation is missing


   - *"Rename from rhtml to html.erb"*


   - Code: http://e.eita.org.br/1v5p


   - Description:


   - *"Use tables for LinkListBlock"*


   - Code: http://e.eita.org.br/1v5q


   - Description: Layout bug fix in rails3: we used a more compact layout
   using tables like in rails2, saving scrolbars...


   - *"Fix passenger class load to not depend on memcache gem"*


   - Code: http://e.eita.org.br/1v5r


   - Description: Bug fix in rails3


   - *"Use absolute URLs on fancybox"*


   - Code: *http://e.eita.org.br/1v5s* <http://e.eita.org.br/1v5s>


   - Description: Needed to make asset_pipeline work


   - *"Fix product edition"*


   - Code: http://e.eita.org.br/1v5t


   - Description: Bug fix in rails3


   - *"Fix firefox problem with empty titles"*


   - Code: http://e.eita.org.br/1v5u


   - Description: Firefox don't ignore empty title attribute and then the
   parent title is not used.


   - *"Cache theme_options for multiple calls"*


   - Code: *http://e.eita.org.br/1v5v* <http://e.eita.org.br/1v5v>


   - Description: Needed to make better performance allowing plugins to
   check for responsive flag in theme.yml in multiple helpers


   - *"Add options to output_field"*


   - Code: *http://e.eita.org.br/1v5w* <http://e.eita.org.br/1v5w>


   - Description: define "horizontal" or "vertical" forms, which is needed
   for responsive forms.


   - *"Replace prototype calls/callbacks to jquery/jrails"*


   - Code: *http://e.eita.org.br/1v5x* <http://e.eita.org.br/1v5x>


   - Description: This was a major enhancement to noosfero: bye-bye
   prototype!


   - *"asset-pipeline: Move load to application.{js,css} and add plugins
   and themes paths"*


   - Code: http://e.eita.org.br/1v5y


   - Description: Now asset-pipelines work!


   - *"Abstract core to use standard and replaceable helpers"*


   - Code: http://e.eita.org.br/1v5z


   - Description: This is a major commit: Clean-up bad code in views so
   that they start to only use helpers instead of classes directly. For
   example: buttons.


   - *"Move non-responsive styles from application.css to base theme"*


   - Code: http://e.eita.org.br/1v5-


   - Description: Some styles in application.css had to be changed by the
   plugin, so we moved them to the base theme


   - *"modals: Replace thickbox with colorbox"*


   - Code: *http://e.eita.org.br/1v60* <http://e.eita.org.br/1v60>


   - Description: bye-bye thickbox!


   - *"modals: Replace lightbox with colorbox"*


   - Code: *http://e.eita.org.br/1v61* <http://e.eita.org.br/1v61>


   - Description: bye-bye lightbox!


   - *"Move to modal api"*


   - Code: *http://e.eita.org.br/1v62* <http://e.eita.org.br/1v62>


   - Description: Now all modals must be called in the following way, in
   ruby and in javascript:


   - Ruby: modal_* helpers


   - where '*' stands for: [*modal_inline_link_to, modal_inline_icon,
   modal_link_to, modal_close_link, modal_close_button, modal_button,
   modal_icon_button*]


   - Javascript: noosfero.modal.*


   - where '*' stands for: [*inline, html, close*]


   - *"Provide JSON responses for the responsive plugin view"*


   - Code: *http://e.eita.org.br/1v63* <http://e.eita.org.br/1v63>


   - Description: Allow the signup form to become responsive with the plugin


   - *"Add awesome icon set"*


   - Code: http://e.eita.org.br/1v64


   - Description: Now even non-responsive layouts can choose to use awesome
   icons in theme.yml changing "icon_theme: [default,pidgin]" to
   "icon_theme:[awesome,pidgin]". The mapping between Tango and Awesome is
   available at: http://dtygel.eita.org.br/noosfero-responsive/icones.html


   - *"Add responsive theme and plugin"*


   - Code: *http://e.eita.org.br/1v65* <http://e.eita.org.br/1v65>


   - Description: Le grand finale! Besides adding the plugin, there is the
   need to add two themes: noosfero-responsive and base-responsive.



   -


   - Best,


   -


   -       Bráulio, Vinicius and Daniel
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listas.softwarelivre.org/pipermail/noosfero-dev/attachments/20141109/0b7b83b7/attachment-0001.html>

More information about the Noosfero-dev mailing list