Welcome, Guest
Username: Password: Remember me

TOPIC: The Responsive JEM

The Responsive JEM 1 year 9 months ago #23451

  • Egnarts
  • Egnarts's Avatar
  • Offline
  • Gold Boarder
  • Posts: 174
  • Thank you received: 74
  • Karma: 3
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
JEM Responsive 1.6.2 (requires JEM 2.2.3):

File Attachment:

File Name: JEM_Respon....6.2.zip
File Size:739 KB



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.
Attachments:
Take a look at the responsive version of JEM: The Responsive JEM
Last Edit: 6 months 3 weeks ago by Egnarts.
The administrator has disabled public write access.
The following user(s) said Thank You: jojo12, Mister PAul

The Responsive JEM 1 year 9 months ago #23453

  • jojo12
  • jojo12's Avatar
  • Offline
  • Moderator
  • Posts: 2945
  • Thank you received: 293
  • Karma: 45
Hi Egnarts. Really good work, you did. Looks good and gives more ideas! Thanks. This is a big progress I think.
5.5.5-10.0.30-MariaDB-0+deb8u1
PHP 7.2.9 on different sites
Apache
JEM 2.2.3+ template overrides with JEM RESPONSIVE and specials with Joomla! 3.8.13 stable on livesites
ja_simply, ja_purity_iii, multilingual DE EN IT FR
The administrator has disabled public write access.

The Responsive JEM 1 year 9 months ago #23456

  • jojo12
  • jojo12's Avatar
  • Offline
  • Moderator
  • Posts: 2945
  • Thank you received: 293
  • Karma: 45
I prefer to add to <ul><li)
the bootstrap <ul class="list-group"> and <li class="list-group-item"
5.5.5-10.0.30-MariaDB-0+deb8u1
PHP 7.2.9 on different sites
Apache
JEM 2.2.3+ template overrides with JEM RESPONSIVE and specials with Joomla! 3.8.13 stable on livesites
ja_simply, ja_purity_iii, multilingual DE EN IT FR
The administrator has disabled public write access.

The Responsive JEM 1 year 9 months ago #23457

  • Egnarts
  • Egnarts's Avatar
  • Offline
  • Gold Boarder
  • Posts: 174
  • Thank you received: 74
  • Karma: 3
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.
Take a look at the responsive version of JEM: The Responsive JEM
Last Edit: 1 year 9 months ago by Egnarts.
The administrator has disabled public write access.

The Responsive JEM 1 year 9 months ago #23458

  • jojo12
  • jojo12's Avatar
  • Offline
  • Moderator
  • Posts: 2945
  • Thank you received: 293
  • Karma: 45
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
5.5.5-10.0.30-MariaDB-0+deb8u1
PHP 7.2.9 on different sites
Apache
JEM 2.2.3+ template overrides with JEM RESPONSIVE and specials with Joomla! 3.8.13 stable on livesites
ja_simply, ja_purity_iii, multilingual DE EN IT FR
Last Edit: 1 year 9 months ago by jojo12.
The administrator has disabled public write access.

The Responsive JEM 1 year 9 months ago #23490

  • Egnarts
  • Egnarts's Avatar
  • Offline
  • Gold Boarder
  • Posts: 174
  • Thank you received: 74
  • Karma: 3
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!
Take a look at the responsive version of JEM: The Responsive JEM
Last Edit: 1 year 8 months ago by jojo12.
The administrator has disabled public write access.
The following user(s) said Thank You: ernst67, jojo12
Time to create page: 0.209 seconds

Donate

If you find JEM useful and if you use it on your site, please consider a donation to the project.

Private Messages

You are not logged in.

Follow us......