FLUID-1113: Create springboard markup for Uploader

Metadata

Source
FLUID-1113
Type
New Feature
Priority
Blocker
Status
Closed
Resolution
Fixed
Assignee
Jacob Farber
Reporter
Anastasia Cheetham
Created
2008-08-07T14:09:31.000-0400
Updated
2011-01-14T09:53:22.807-0500
Versions
N/A
Fixed Versions
  1. 0.6
Component
  1. Demos
  2. Uploader

Description

dev-iteration47

Attachments

Comments

  • Jacob Farber commented 2008-11-18T13:16:49.000-0500

    First pass is complete, further refinements on the way

  • Valerie commented 2009-03-30T11:08:40.000-0400

    === ROUND 1 ===
    What I did:

    • Commented out <link href="../css/fluid.components.uploader.css" rel="stylesheet" type="text/css">
    • Deleted all table attributes that are supposed to be settled with CSS (ie. cellpadding, cellspacing, etc.)
    • Uploaded 7 files

    What I found:

    • There's no flexibilty with the existing template markup
    • Template markup for the file queue rows uses table rows <tr id="queue-row-tmplt" class="row fluid-templates">, but jQuery code for showing/hiding adds an extra [style="display: block;"], which isn't something that should be applied to tables as it messes up the layout (causes uneven row widths)
    • Scrollable area not working as it should (no scroller--content spills into the foot of queue and the upload buttons); the CSS code [max-height: 180px] that JavaScript automatically inserts into <div class="fl-scroller"> does not include [overflow: auto]
      ==> Question: Can the max-height be user-specified?
    • While uploading, there's no clear indication of which files have been uploaded in the file queue rows themselves--the foot of queue only indicates how many files have been uploaded, not which (not that it's supposed to)

  • Valerie commented 2009-03-30T11:31:21.000-0400

    === ROUND 2 ===
    What I did:

    • Added [class="fl-fix"] to <div class="fl-scroller">
    • Added <link href="../../../framework/fss/css/fss.theme.mist.css" rel="stylesheet" type="text/css" />
    • Applied fl-theme-mist to the body tag
    • Added FSS Layout classes to queue tables and cells *
      • [fl-container-flex50] to tables and fileName
      • [fl-container-flex25] to tables and fileSize
      • [fl-container-flex75] to first cell in foot of queue table

    What I found:

    • Applying FSS Layout classes helps aesthetically with the table layout problem
    • Same with [class="fl-fix"], but scroller sticks to the right of the screen
    • FSS Mist doesn't have an icon to replace the "Remove file from queue" button (but I guess its not supposed to?)

    Question: Just noticed "File Upload Queue:" at the top of Uploader--It's not supposed to be there, is it?

  • Valerie commented 2009-03-30T11:49:52.000-0400

    === ROUND 3 ===
    What I did:

    • Moved [fl-container-flex50] from file queue table to <div class="fl-scroller"> and added [fl-container-flex] to file queue table
    • Added [style="display: none;"] to <caption>File Upload Queue:</caption>
    • Added <style type="text/css"> table, th, td { border: none !important; padding: 0; margin: 0; } </style> to document <head>
    • Applied different themes

    What I found:

    • [fl-container-flex50] in <div class="fl-scroller"> helps with moving scroller to where it should be
    • [style="display: none;"] effectively hid "File Upload Queue:"
    • <style type="text/css"> table, th, td { border: none !important; padding: 0; margin: 0; } </style> takes out all padding and margins for tables and cells, BUT TD tags still have borders
    • FSS Coal and Slate doesn't have a background-colour specified for TH tags
    • FSS HCI isn't exactly the inverted version of HC; it's actually black text and borders on white, when it should really be white on black, right?

  • Valerie commented 2009-03-30T12:34:11.000-0400

    March 30, 2009

    • Stripped Uploader.html of component-specific CSS file and applied FSS classes
    • Tweaked and added a few things
    • All details of what I did and what was found are in the previous three comments (ROUND 1 to 3)