FLUID-3837: Clean up Uploader's markup

Metadata

Source
FLUID-3837
Type
Improvement
Priority
Blocker
Status
Closed
Resolution
Fixed
Assignee
Colin Clark
Reporter
heidi valles
Created
2010-11-15T13:47:38.741-0500
Updated
2011-02-15T11:19:26.822-0500
Versions
  1. 0.3
  2. 0.4beta1
  3. 0.4
  4. 0.5beta1
  5. 0.5
  6. 0.6beta1
  7. 0.6
  8. 0.7
  9. 0.8
  10. 0.8.1
  11. 1.0
  12. 1.1
  13. 1.1.1
  14. 1.1.2
  15. 1.1.3
  16. 1.2beta1
  17. 1.2
  18. 1.2.1
  19. 1.3
Fixed Versions
  1. 1.3.1
Component
  1. Uploader

Description

Uploader's markup is more complex and less semantic than it could be. For example, right now there are 3 tables being used:

1) A 1 row, 3 cols table for the values "file name, size, space". It has the caption "File Queue"
2) A dynamic data table with no caption, 3 cols. It holds the info of the uploaded files
3) A 1 row, 2 cols table for the footer. The first col has the # files/total size data, and the second has the browse file input.

I'd like to suggest an alternative:

  • 1 data table, with both the header information and the data
  • the footer as a plain old <div> tag, styled with css

I'm guessing one reason it was done this way was to make the data scrollable but have a fixed header. We can still achieve this with CSS, and also keep the semantic connection of column headers to data.

Attachments

Comments

  • heidi valles commented 2010-11-18T14:26:56.968-0500

    <div class="flc-scroller fl-scroller" style="max-height: 180px;">

    Also, move the inline style into fl-scroller.

  • heidi valles commented 2011-01-13T11:02:42.309-0500

    First patch - needs testing on all html5 browsers. Known issue - width of progress status bar.

  • heidi valles commented 2011-01-13T11:08:48.615-0500

    Replaced scroller component with jquery scrollTo plugin. Needs to be tested on all browsers.

  • heidi valles commented 2011-01-13T16:11:15.202-0500

    known issue for markup2.patch: IE top border and scroll on tbody. hoping to fix with scrollTo

  • Colin Clark commented 2011-01-18T15:41:49.198-0500

    New patch with a refactored scrollableTable() function. Also moved the jquery.scrollTo plugin into the /lib/jquery/plugins directory.

  • Colin Clark commented 2011-01-18T16:52:42.286-0500

    Here's a new patch without the mysterious weirdness that Heidi and I were experiencing. Still doesn't scrollTo, though.

  • heidi valles commented 2011-01-20T13:52:32.208-0500

    Not too much different than the -g patch, but removes the unused container div from Uploader.html, and cleans up the styles a little.

  • heidi valles commented 2011-01-20T16:06:17.287-0500

    Detabbed.

  • Colin Clark commented 2011-01-27T18:29:34.403-0500

    I committed a modified version of Heidi's patch at r10479. Heidi and I agreed that we'd do another pass through all the markup and styling before closing this issue for 1.3.1, so I'm assigning it back to her. Thanks for the patch, Heidi!

  • heidi valles commented 2011-02-01T18:53:55.313-0500

    Major css/html clean up - tho didn't touch the browse/add more button overlay stuff. Needs testing on Win.

  • heidi valles commented 2011-02-02T09:54:15.275-0500

    Looks good on windows too. Requires the scrollable table (FLUID-4037) and the progress bar (FLUID-4029) patches.

    Colin, could you review this patch for me? cheers.

  • Michelle D'Souza commented 2011-02-11T17:49:24.038-0500

    Merged into Infusion project master at commit a5b442a5c83a7cf721d1b5c099e20e2d2c088584