Responsive plugin
Rodrigo Souto
rodrigo at colivre.coop.br
Mon Nov 10 15:43:02 BRST 2014
Nice work, guys!
This is one of the features I consider most important for Noosfero.
I think we're on the verge of a mobile web navigation takeover and the
sooner we prepare for that the better. Many of the problems there aren't
already solved might get a lot easier with the interface refactoring to
use a css framework.
Bráulio Bhavamitra escreveu isso ai:
> 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
> _______________________________________________
> Noosfero-dev mailing list
> Noosfero-dev at listas.softwarelivre.org
> http://listas.softwarelivre.org/cgi-bin/mailman/listinfo/noosfero-dev
--
Rodrigo Souto <rodrigo at colivre.coop.br> :: 55 71 8131-7714
Colivre - Cooperativa de Tecnologias Livres
http://www.colivre.coop.br/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 473 bytes
Desc: Digital signature
URL: <http://listas.softwarelivre.org/pipermail/noosfero-dev/attachments/20141110/059d3a1e/attachment.pgp>
More information about the Noosfero-dev
mailing list