Welcome, Guest
Username: Password: Remember me

TOPIC: The Responsive JEM

The Responsive JEM 2 years 3 weeks ago #23451

  • Egnarts
  • Egnarts's Avatar Topic Author
  • Away
  • Gold Boarder
  • Gold Boarder
  • Posts: 229
  • Karma: -3
  • Thank you received: 100
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 .
Take a look at the responsive version of JEM: The Responsive JEM
The following user(s) said Thank You: jojo12, Mister PAul

Please Log in or Create an account to join the conversation.

Last edit: by Egnarts.

The Responsive JEM 2 years 3 weeks ago #23453

  • jojo12
  • jojo12's Avatar
  • Offline
  • Moderator
  • Moderator
  • Posts: 3008
  • Karma: 45
  • Thank you received: 303
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.3.0dev 2.0M and specials with Joomla! 3.9.3 stable on livesites
ja_simply, ja_purity_iii, multilingual DE EN IT FR

Please Log in or Create an account to join the conversation.

The Responsive JEM 2 years 3 weeks ago #23456

  • jojo12
  • jojo12's Avatar
  • Offline
  • Moderator
  • Moderator
  • Posts: 3008
  • Karma: 45
  • Thank you received: 303
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.3.0dev 2.0M and specials with Joomla! 3.9.3 stable on livesites
ja_simply, ja_purity_iii, multilingual DE EN IT FR

Please Log in or Create an account to join the conversation.

The Responsive JEM 2 years 3 weeks ago #23457

  • Egnarts
  • Egnarts's Avatar Topic Author
  • Away
  • Gold Boarder
  • Gold Boarder
  • Posts: 229
  • Karma: -3
  • Thank you received: 100
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

Please Log in or Create an account to join the conversation.

Last edit: by Egnarts.

The Responsive JEM 2 years 3 weeks ago #23458

  • jojo12
  • jojo12's Avatar
  • Offline
  • Moderator
  • Moderator
  • Posts: 3008
  • Karma: 45
  • Thank you received: 303
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.3.0dev 2.0M and specials with Joomla! 3.9.3 stable on livesites
ja_simply, ja_purity_iii, multilingual DE EN IT FR

Please Log in or Create an account to join the conversation.

Last edit: by jojo12.

The Responsive JEM 2 years 1 week ago #23490

  • Egnarts
  • Egnarts's Avatar Topic Author
  • Away
  • Gold Boarder
  • Gold Boarder
  • Posts: 229
  • Karma: -3
  • Thank you received: 100
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
The following user(s) said Thank You: ernst67, jojo12

Please Log in or Create an account to join the conversation.

Last edit: by jojo12.
Time to create page: 0.232 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......