JEM-Project
JEM-Project copied to clipboard
jemproject
FR: in frontend eventslist: make a break each month for better orientation
[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
How solution, I created a new filter by month in the eventlist view
Do you like it? (see next commit)
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:
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.
@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_jem_eventslist.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_events_table.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 ?
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:
- 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)
- does it need a placeholder (for new people) to know how to insert the month?
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`
when I have an event with opendate, then the month is "January 1970". Not tragic, but good to know.
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.
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
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
works fine with opendate and language files for month filter with placeholder is fine too, this can be closed
Placeholder is hardcoded, would be better as key: COM_JEM_DATEPLACEHOLDER="YYYY-MM" . Then we can localize!
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.
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
I added min and max attributes with future events in mind. However, they don't make sense for archived events. I change it.
Thanks. Fix typo and set padding button filter to avoid 2 lines of filters. See next commit.