feat(templates): Profile tables are now responsive with accordion in smaller screens

[elisa-a-v]

This PR makes profile tables responsive by adding an accordion feature that hides columns in smaller screens. To do this a script and some CSS was implemented that allows to easily make any table responsive.

To make tables responsive, include a script with src="{% static "js/responsive-table.js" %}", add the class .responsive-table-wrapper to the <table> element, and add an attribute data-label to each <th> element to be labelled in the mobile version with stacked columns.

Docket alerts:

Docket notes:

Opinion notes:

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ elisa-a-v
❌ elisa-av
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[elisa-a-v]

@mlissner I'd say this is almost ready, but I just noticed that the notes tables have a button in the last header to search notes, which isn't shown in the mobile version. I guess I could add it somewhere else and display it in mobile only, like above the table? or I could move the button entirely. let me know what you think

[mlissner]

let me know what you think

I think it's fine that the search isn't there in mobile. Thus is the way with mobile....

[ERosendo]

@elisa-a-v The code looks great! I have a few suggestions to improve the responsive design:

1. I think we could enhance the animation of the up/down arrow. Currently, it seems to rotate around one of its vertices. A more common approach is to rotate the arrow around its center point. Here's a GIF demonstrating the desired behavior:

   • Current implementation:

   

   • Desired behaviour

   

2. I noticed that the fa-list icon is a bit too close to the text in the accordion header. I think adding a non-breaking space between the icon and the text would improve the visual spacing. Here's a screenshot:

   

3. While reviewing the notes table, I noticed that the modal window for updating a note isn't centered correctly on smaller screens. Here's a screenshot:

   

   While this issue might be out of scope for this specific PR, I'm flagging it here as it's related to our overall responsive design efforts.

[mlissner]

Thanks Eduardo. It's probably worth fixing #2, but I don't think it's worth bothering on 1 or 3, since we'll be revamping the details and switching to tailwind fairly soon. A little funkiness temporarily is fine, I think.

[elisa-a-v]

@ERosendo I only fixed # 2 as @mlissner suggested, should I open issues for the other 2 points?

[mlissner]

Normally I'd say yes, Elisa, I love filing bugs, but I think these will just get fixed no matter what in our design overhaul.

Eduardo, merge if you're ready!

Thank you both!