Cut of attachment details, dates, etc., on small mobile devices

[bsylwek]

Is there a solution for the (e.g., when using the Cassiopeia template)? Is there a universal fix for this issue?

[JLTRY]

A short solution should be to hide some columns
/administrator/index.php?option=com_attachments&task=params.edit

[bsylwek]

I know you can turn off the dates to make it fit, but what if more information is needed? Couldn't the remaining part—the bit that doesn't fit—be set to wrap to the next line? And what happens if an attachment has a very long name? Won't that fail to fit as well?
Polish language configuration.

[parapente]

@bsylwek there is no universal solution that would fit every site. As it is right now, the information is presented in an html table that uses word wrap (the filenames in the image you attached have their filenames already wrapped). The issue that exists with very small displays is that there is not enough space to present all columns. This could be fixed by adding some css to you site's template to hide columns that you think is not that intersting or are irrelevant for you site when viewed by a small display. You can use something like the following:

@media (width < 800px) {
   .attachmentsList tr:nth-child(3) {
      display: none;
   }
}

For the columns to wrap around you would need a different structure for the data and proper css for displaying everything, but it would still not be "universal".

[bsylwek]

I think I’ve found a solution, even for very wide attachment tables with many columns.
/* =========================================================
ATTACHMENTS – table scrolling on small screens
========================================================= */

.attachmentsContainer,
.attachmentsList,
div[id^="attachmentsList"] {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

.attachmentsContainer table,
.attachmentsList table,
div[id^="attachmentsList"] table {
width: 100%;
min-width: 720px;
margin: 0;
border-collapse: collapse;
}

/* Prevents headers and data from being compressed */
.attachmentsList th,
.attachmentsList td,
div[id^="attachmentsList"] th,
div[id^="attachmentsList"] td {
white-space: normal;
vertical-align: middle;
}

[parapente]

@bsylwek hmmm now I see what you mean. No scrollbars are showing up when the table doesn't fit the page. I will look into that.

[JLTRY]

@parapente tested OK on my site with a small screen https://joomla.jltryoen.fr/pieces-jointes/263-plugin-attachments-pour-contenu

[parapente]

@JLTRY is this with the changes @bsylwek suggested or without?

[bsylwek]

It works very well for me, and mobile device users are currently very satisfied.

[JLTRY]

@JLTRY is this with the changes @bsylwek suggested or without?

@parapente Hello yes with the changes. I can create the PR if you want

[parapente]

@JLTRY thanks for creating the PR. I would like to propose some changes as I think that some parts are not necessary. The snippet below doesn't seem to make any difference on my tests. "vertical-align" is already set in line 67 of the css file anyway and "white-space: normal" is the default value used anyway.

/* Prevents headers and data from being compressed */
.attachmentsList th,
.attachmentsList td,
div[id^="attachmentsList"] th,
div[id^="attachmentsList"] td {
white-space: normal;
vertical-align: middle;
}

Also I would suggest removing "overflow-y: hidden;" as if anything goes wrong with the layout, part of the attachments list could end up hidden. Is it really needed anyway? The rest of the changes look good @bsylwek. I could be wrong so feel free to test and comment.

[JLTRY]

@JLTRY thanks for creating the PR. I would like to propose some changes as I think that some parts are not necessary. The snippet below doesn't seem to make any difference on my tests. "vertical-align" is already set in line 67 of the css file anyway and "white-space: normal" is the default value used anyway.

/* Prevents headers and data from being compressed */
.attachmentsList th,
.attachmentsList td,
div[id^="attachmentsList"] th,
div[id^="attachmentsList"] td {
white-space: normal;
vertical-align: middle;
}

Also I would suggest removing "overflow-y: hidden;" as if anything goes wrong with the layout, part of the attachments list could end up hidden. Is it really needed anyway? The rest of the changes look good @bsylwek. I could be wrong so feel free to test and comment.

done in PR following your remarks @parapente
@bsylwek could you please check
last part of the file is
`
/* =========================================================
ATTACHMENTS – table scrolling on small screens
========================================================= */

.attachmentsContainer,
.attachmentsList,
div[id^="attachmentsList"] {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.attachmentsContainer table,
.attachmentsList table,
div[id^="attachmentsList"] table {
width: 100%;
min-width: 720px;
margin: 0;
border-collapse: collapse;
}`

Full new code is here https://raw.githubusercontent.com/JLTRY/attachments/refs/heads/master/attachments_component/media/css/attachments_list.css