Cleanup desktop-table & mobile-table

[stephengroat]

The current format creates huge amounts of bloat (~1MB of duplicated DOM objects)

Figure out a method (possibly jquery based) of adjusting desktop table for mobile viewing

[kenman345]

lol, I was actually digging into that recently and working on a refactor for acceptbitcoincash/acceptbitcoincash to do this exact thing.

I do not think its worth changing up the libraries. Instead, leveraging Semantics UI better should be able to do the trick.

Right now, both our projects use two tables, one embedded into the other. Semantics offers a way of defining how many columns a table row has by using certain syntax.

Note the following that appears here:

      <th class="single line four wide"><h3>{{ section_title }}</h3></th>
      <th class="two wide">Docs</th>
      <th class="two wide">SMS</th>
      <th class="two wide">Phone Call</th>
      <th class="two wide">Email</th>
      <th class="two wide">Hardware Token</th>
      <th class="two wide">Software Token</th>

Semantics UI documentation indicates that if you use the word desktop after those class definitions, you can then add similar classes but ending in mobile or tablet to make those secondary classes affect those device types only.

I'm currently reviewing that documentation here to figure out which table structure I would like to move towards.

I can keep you in the feedback loop as we go through this process ourselves and assist in bringing these efficiencies to your site as well, if you'd like

[kenman345]

Side note, these are my general thoughts on how to handle this refactor:

1. create secondary page that will mimic the original main page but import just Semantics UI and minimal customized CSS.
2. Copy over the JS that is used currently and strip out the mobile-table and desktop-table ui specific JS and make them work off the desktop table.
3. Revise desktop table UI to add in classes meant for mobile viewing capabilities.
4. Run the current pages and the revised one side by side to confirm new functionality after adding back in all CSS and JS references still relevant to revised UI.
5. After 4, run the sites on a GH-page repository that will allow us to regression from multiple browsers for a bit.
6. replace the old page with the new page, the CSS and JS that needs to change with that as well.

Generally speaking, the work done already is quite a great start. The UI has been figured out and the groundwork put in place. Unfortunately we are not leveraging the tools we are using to the best of their ability and custom JS has been added in place of built in Semantics functionality. I've given a lot of thought to the steps above as the way that acceptbitcoincash project is going to proceed in these efforts. Let me know if you think I missed something so I can be effective at assisting you with your refactor of the grids once I am done.