The Responsive JEM

ATTENTION: The template override is not updated anymore!
Please take a look at The Responsive JEM - Included to JEM , where the override is integrated to JEM!


The responsive version of JEM is created by Egnarts. This version just uses template overrides for extending JEM. The folder "intoTemplate" hast to be installed per template.
The responsive override has three goals:
a) Work only with overrides, so the responsive jem is update safe.
b) Integrate as much as possible to templates' design.
c) And finally: Work responsive as possible.


Download
not availabe.


How to install?
1. Go to your sites FTP.
2. Got to path: /JoomlaRoot/media/
3. Insert the content of the folder "intoMedia" to the media folder.
4. Go to path: /JoomlaRoot/templates/<yourTemplateName>/
5. Copy the content of the folder "intoTemplate" to the template. Eventually folders with the same name already exists, then the overrides should be integrated into the existing folder.


Special Functionality
JEM Core:
-Empty the input field in Backend -> JEM -> Settings -> Layout -> "Table Width in %" completely (Inputbox = Empty), then the list will change to the modern view.
If the "Table Width in %" field is filled and the old list layout is shown. You can change the columnwidth via fields below.
Give the menu item a page suffix "jem-onlyfeatured", and the list views of Day, Eventslist, Category and Venue will show only featured events. But the pagination will not be correct.
Give the menue item the page suffix "jem-imagewidth<width>px" and/or "jem-imageheight<height>px" to resize the images in list views of Categories, Category, Venue, Search, Eventlist, Day. With just jem-imagewidth<width> the image has automatic height. Example for page suffix: "jem-imagewidth200px" remains in 200px width images. Or you use percentage values: "jem-imagewidth100%".
Add "jem-filterbelow", "jem-hidefilter", "jem-showfilter" to page suffix of Category, Venue, Eventlist, Day to force hiding/showing filter and to set the filter below the eventlist.

JEM Teaser Module:
Replace the helper.php in /JoomlaRoot/modules/mod_jem_teaser with the one in intoTemplate/html/mod_jem_teaser, then set in module settings the maximum description length to 1208. As result, the complete description will be shown without skipping any html tags.
Module suffix "jem-imagewidth<width>px" etc. works like in JEM Core.

JEM Wide Module:
The module uses similar views as the JEM Simplelist plus additional configuration of the module via the module class suffix in the backend to change the view
Add "jem-tablestyle" to module class suffix to get the jem-table view
Add the following tags to module class suffix to hide the related item: jem-notitle, jem-novenue, jem-nocity, jem-nostate, jem-nocats, jem-noimageevent, jem-noimagevenue - not all tags work on both views
Module suffix "jem-imagewidth<width>px" etc works like in JEM Core.

JEM Banner Module:
This module has two layouts. The default layout is the vertical layout, to get the horizontal layout (similar to teaser module) use module suffix "jem-horizontal".
Module suffix "jem-imagewidth<width>px" etc. works like in JEM Core.
You can move the image at the top of the module (if no calendar is shown, otherwhise its below calendar) via module suffix "jem-imagetop".

Supportet Views
The following frontend views of the core JEM are supported currently:
- Attendees
- Calendar
- Categories
- Category
- Day
- Event
- Eventslist
- MyAttendances
- MyEvents
- MyVenues
- Search
- Venue
- Venues
- Weekcal
- Editevent
- Editvenue
The following modules are supported:
- mod_jem - JEM Basic Module
- mod_jem_teaser - JEM Teaser Module
- mod_jem_wide - JEM Wide Module
- mod_jem_banner - JEM Banner Module


The default jem.css is completely overridden with the given file from here. So all old CSS from jem.css and calendar.css are ignored and only the new one are used. The same applies to the module css files.

Known Problems:
Editevent and Editvenue have some problems in responsiveness because some input fields are styled by the controller so I can't override them. I gave my best, but creating/editing events on mobile devices is not the best idea in this case.


A live demo can be seen at JEM Responsive Demo .

Hi Egnarts. Really good work, you did. Looks good and gives more ideas! Thanks. This is a big progress I think.

I prefer to add to <ul><li)
the bootstrap <ul class="list-group"> and <li class="list-group-item"

yea, that would be nice, but then I had to manually include bootstrap. Joomla does not integrate bootstrap by default. And then I don't know what happends if the template uses bootstrap and I integrate with jem another bootstrap. Eventually it would get version differences and problems.

I thought the protostar template has bootstrap
EDIT:
yes, you're right it's only responsive not with bootstrap
For my sites I use templates with bootstrap like ja_purity_iii or ja_simply

EDIT2:
I just red joomla uses bootstrap 2.x

Changelog JEM-Responsive 1.1:

• Add override for Basic Module
• Add override for Teaser Module
• Includes now only font awesome if not found in existing includes -> JEM includes FA just once
• Small visual improvements

-> You can find the actualized zip in the first post of this thread!