[#32912] - [4] Content fighting for space. We need a global solution to grid layouts.
- Closed
- 6 Mar 2022
- Medium
- Build: staging
- # 32912
Steps to reproduce the issue
Lets remember that the primary use for Joomla is CONTENT/ARTICLES
Just one example = Enable Workflow. Visit articles.
Any suggestions on how we resolve this globally? maybe allow the user to hide/show columns important to them?
This is how wordpress does it as an example:
Thoughts?
Expected result
That the ARTICLE title is more than 15 chars wide.
Actual result
System information (as much as possible)
Half a 27 inch wide iMac monitor!
Additional comments
Other examples in discussions #31915
joomla-cms-bot
- | Labels |
Added:
?
|
||
I simply cannot imagine anyone wanting to release Joomla 4 - the new shiny flagship product, with content being this squashed :(
I had a solution but it was rejected
easy to implement using https://github.com/fiduswriter/Simple-DataTables
A lot of these JS based data tables are no good in real life, for example this demo, loads ALL the data in the page, and then does the pagination in JS - that's ok with a handful of articles, not scaleable for 1000000000 articles in a db :)
https://fiduswriter.github.io/Simple-DataTables/1-simple/
I dont see this one allowing the hide/show of columns dynamically either :)
Look again
I found the one demo with it now, thanks.
However, You don't need a whole data-table library to hide/show columns in a table.
For someone with Joomla 4 level of JS knowledge this would be less than 50-100 lines of code to be implemented and totally reusable.
Unfortunately my JS is not any where near Joomla 4 standard else I would have proposed something.
Hey @dgrammatiko any interest in this?
I was just sharing it to show that there are many ways to skin a cat. Just needs an open mind
Here you go:
const table = document.querySelector('table.itemList');
const headers = [].slice.call(table.querySelector('thead tr').children);
const columns = [].slice.call(table.querySelectorAll('tbody tr'));
headers.forEach(el => {
el.classList.remove('d-none', 'd-md-table-cell', 'd-lg-table-cell');
});
columns.forEach(col => {
[].slice.call(col.children).forEach(cc => {
cc.classList.remove('d-none', 'd-md-table-cell', 'd-lg-table-cell');
});
});
function toggleHidden(index) {
if (headers[index].classList.contains('d-md-table-cell')) {
headers[index].classList.remove('d-md-table-cell');
}
headers[index].classList.toggle('d-none');
columns.forEach((col) => {
if (col.children[index].classList.contains('d-md-table-cell')) {
col.children[index].classList.remove('d-md-table-cell');
}
col.children[index].classList.toggle('d-none');
});
}
const detailElement = document.createElement('details');
const summary = document.createElement('summary');
summary.innerText = 'Table options';
detailElement.appendChild(summary);
const ul = document.createElement('ul');
const lis = headers.forEach((el, index) => {
if (index === 0 || index === headers.length - 1) return;
const li = document.createElement('li');
const label = document.createElement('label');
const input = document.createElement('input');
input.type = 'checkbox';
input.setAttribute('checked', '');
input.addEventListener('input', () => toggleHidden(index));
label.innerText = el.querySelector('span').innerText || el.innerText;
label.appendChild(input);
li.appendChild(label);
ul.appendChild(li);
});
detailElement.appendChild(ul);
table.insertAdjacentElement('beforebegin', detailElement);FYI some Bootstrap classes are really fighting the code here due to the fact that all the utility classes in Bootstrap 5 HAVE !important embeded: https://twitter.com/dgrammatiko/status/1370717251918311428 Bootstrap has its own merits...
Copy pasting this code in the console (in any list view) should create automatically the table options, so can be tested as is
56 lines... impressive... I was right :)
56 lines...
I could have used jQuery for even fewer lines
now you have gone and done it... I was trying SO HARD not to mention the Jword!
Even I could have done it with jQuery ;-)
all we need now is to persist the state in a cookie ;-) and set some reasonable defaults
all we need now is to persist the state in a cookie
Also, you need some logic for the mobiles/tablets/restricted viewports
Here's an updated version that will reveal the options only for screens > 1024px
if (window.innerWidth > 1024) {
const table = document.querySelector('table.itemList');
const headers = [].slice.call(table.querySelector('thead tr').children);
const columns = [].slice.call(table.querySelectorAll('tbody tr'));
headers.forEach(el => {
el.classList.remove('d-none', 'd-md-table-cell', 'd-lg-table-cell');
});
columns.forEach(col => {
[].slice.call(col.children).forEach(cc => {
cc.classList.remove('d-none', 'd-md-table-cell', 'd-lg-table-cell');
});
});
function toggleHidden(index) {
if (headers[index].classList.contains('d-md-table-cell')) {
headers[index].classList.remove('d-md-table-cell');
}
headers[index].classList.toggle('d-none');
columns.forEach((col) => {
if (col.children[index].classList.contains('d-md-table-cell')) {
col.children[index].classList.remove('d-md-table-cell');
}
col.children[index].classList.toggle('d-none');
});
}
const detailElement = document.createElement('details');
const summary = document.createElement('summary');
summary.innerText = 'Table options';
detailElement.appendChild(summary);
const ul = document.createElement('ul');
const lis = headers.forEach((el, index) => {
if (index === 0 || index === headers.length - 1) return;
const li = document.createElement('li');
const label = document.createElement('label');
const input = document.createElement('input');
input.type = 'checkbox';
input.setAttribute('checked', '');
input.addEventListener('input', () => toggleHidden(index));
label.innerText = el.querySelector('span').innerText || el.innerText;
label.appendChild(input);
li.appendChild(label);
ul.appendChild(li);
});
detailElement.appendChild(ul);
table.insertAdjacentElement('beforebegin', detailElement);
}This is not reactive, meaning will not adjust in realtime if you resize the window, either you are on tablet/mobile or on desktop (tracking the resize will be way more code to get it right)
Im happy to leave it with you if you think you can put together a first look PR for this? It can always be improved once the framework is actually in place and I think this kind of thing, if we can for together to get it right, would be hugely beneficial.
would be hugely beneficial.
Not just for articles list screens, but for all list table screens
Im happy to leave it with you if you think you can put together a first look PR for this
@PhilETaylor please take over, I could help you with any JS anytime
ok it will be the end of the week now, the day job needs me this week :)
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-03-06 23:31:51 |
| Closed_By | ⇒ | PhilETaylor | |
| Labels |
Added:
No Code Attached Yet
Removed: ? |
||
It is a know issue, since long time. It depends also on the length of names in the headlines and is worse in other languages. "Zugriffszahlen" for "Hits" for example make big columns.
'Configuring colums" is planned for future Versions, as much as I know.