FR: in frontend eventslist: make a break each month for better orientation

[jojo12]

[For frontend eventslist there is an other feature request: is it possible to show borders between the different months: e.g. between the last event in february and the first event in march, there is a line where's a text "March". This would help for quicker orientation in event list. But this feature request does not belong to the feature request here, in my eyes. I will put this in a separate issue!]

I take this separate from #1715

[jojo12]

example:

[mckillo]

How solution, I created a new filter by month in the eventlist view

Do you like it? (see next commit)

[mckillo]

Also you can set the new option "Show row with month name", this option is only applied in responsive layout, because in legacy layout break the order of table.

By defauld the list in this view is not limited, but the admin can set the limit of days (before and after today):

You can see the eventlist view with this options active:

[Heklaterriol]

Thank you @mckillo, I will test it. One thing I noticed is, that in my JEM, the pop-up mini calendar in the search field is not there:

An if I insert something like "July 2024" I get an error Call to a member function format() on bool on JROOT/components/com_jem/models/eventslist.php:452

I don't know how the pop-up mini calendar works but it should be the way, that you only can insert the date in the correct format.

[Heklaterriol]

And I suggest an additional css class in the month title for styling

[mckillo]

@hekla this input is an input of type="month" and included in HTML5 (https://www.w3.org/TR/2011/WD-html5-20110525/the-input-element.html). Sorry, I didn't check the navigator support and this type isn't supported in Firefox and Safari, but in Chrome and Egde work.

You can try these pages to check this input type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_month

Proposal solution: Add a placeholder to input with the format: YYYY-MM, so in Firefox and Safari show the format in this field.

In this case, the line 117 in _\components\com_jem\common\views\tmpl\responsive\default_jemeventslist.php, change to:

<input type="month" name="filter_month" id="filter_month" placeholder="YYYY-MM" value="<?php echo $this->lists['month'];?>" min="<?php echo $monthNow; ?>" max="<?php echo $monthEnd; ?>">
        </div>

Change too the line 42 in _\components\com_jem\common\views\tmpl\default_eventstable.php:

<input type="month" name="filter_month" id="filter_month" placeholder="YYYY-MM" value="<?php echo $this->lists['month'];?>" min="<?php echo $monthNow; ?>" max="<?php echo $monthEnd; ?>">

Is the solution good until these browsers implement the month type in input ?

[mckillo]

Applied style to title of month (last commit) and use the format in the Month filter (use YYY-MM in Firefox), the view show so:

[jojo12]

1) very good the modern responsive view! (the line between on top of a new month). Does the tablelike responsive view (with empty field) not work? (default_jem_eventslist_small.php)

[jojo12]

2) does it need a placeholder (for new people) to know how to insert the month?

[jojo12]

When there is set 0 before and 0 after today, I get a deprecated: ` Deprecated: strtotime(): Passing null to parameter #1 ($datetime) of type string is deprecated in C:\xampp\htdocs\joomla\components\com_jem\common\views\tmpl\responsive\default_jem_eventslist.php on line 182

Deprecated: strtotime(): Passing null to parameter #1 ($datetime) of type string is deprecated in C:\xampp\htdocs\joomla\components\com_jem\common\views\tmpl\responsive\default_jem_eventslist.php on line 183

Deprecated: strtotime(): Passing null to parameter #1 ($datetime) of type string is deprecated in C:\xampp\htdocs\joomla\components\com_jem\common\views\tmpl\responsive\default_jem_eventslist.php on line 184

Deprecated: strtotime(): Passing null to parameter #1 ($datetime) of type string is deprecated in C:\xampp\htdocs\joomla\components\com_jem\common\views\tmpl\responsive\default_jem_eventslist.php on line 185`

[jojo12]

when I have an event with opendate, then the month is "January 1970". Not tragic, but good to know.

[mckillo]

The placeholder was added, you should see 'YYYY-MM'. In the last commit, the deprecated error of strtotime go way, ok? Send me capture with month "January 1970" or seeting of events to simulate it.

[jojo12]

with menu: show open dates also!

[jojo12]

the default_jem_eventslist_small is now ok too but at least here the deprecated is present. EDIT: in the default_jem_eventslist is it still present

[jojo12]

the month breaks are all english, There are no language keys, are they hardcoded? for opendates it's "January 1970". EDIT: thanks this is solved now

[mckillo]

See the #1764 or this commit b14c625d7f59a69412078eb588b4b9bac70d15cf

[mckillo]

The event with open date are shown in the top without Month row.

[jojo12]

works fine with opendate and language files for month filter with placeholder is fine too, this can be closed

[jojo12]

Placeholder is hardcoded, would be better as key: COM_JEM_DATEPLACEHOLDER="YYYY-MM" . Then we can localize!

[mckillo]

In this case, the format is fix 'YYYY-MM' by definition of type. See https://www.w3schools.com/tags/att_input_type_month.asp Don't need any key. This is only showing with Safari y Firefox, with Chrome and Edge this input type shows a calendar table.

[jojo12]

with edge (chrome) I can't choose earlier month!

[Heklaterriol]

This is becaus of the set limits in the html: <input type="month" name="filter_month" id="filter_month" placeholder="YYYY-MM" value="" min="2024-07" max="2026-07">

or in the code: <input type="month" name="filter_month" id="filter_month" placeholder="YYYY-MM" value="<?php echo $this->lists['month'];?>" min="<?php echo $monthNow; ?>" max="<?php echo $monthEnd; ?>">

I think it does not make sense to limit min an max. I mean, when the given month is set in value, it should be enough orientation

[mckillo]

I added min and max attributes with future events in mind. However, they don't make sense for archived events. I change it.

[jojo12]

there's a typo

the rest is good

[mckillo]

Thanks. Fix typo and set padding button filter to avoid 2 lines of filters. See next commit.

[jojo12]

BE filter attendees not nice (date and title broken)

[jojo12]

col-md-3 would be better for the first line!