Grid View Proposal

Grid View Proposal

• Proposal
• Interaction
• Comments Suggestions

Current Look

<span id

"proposal"> Proposal </span>====

• Pagination Integrated (Top, Bottom) + Chosing how many items to be displayed
• Live Filtering
  • Filter can be text input, select box or no filter at all

• Visual separation between what fields have links or editable text inside
• Highlight hovered row (providing contrast)
• Aligning methods (for better readability):
  • Characters - Left
  • Numbers - Right
  • Date - Right
  • Actions - Center
  • Images - Center
  • Status - Right

<span id

"interaction"> Interaction <span>==

Editing a field

• Hovering a field makes an "Edit" icon appears + associated title

• Selecting the field to be edit - a popup Dialog appears
• The dialog separates the primary action (Save) from the secondary action (Cancel) 
• Alternative: In place edit

Bigger Results and Column Filters

• The values that don't fit in a field will wrap to second row (vertical-align:top)
• The empty fields will stay blank (without "-, -- , emptyvalue" values)
• The column current sorted will be displayed apropiate 

• Date entries could be edited with a calendar popup selector

<span id

"suggestions"> Comments suggestions <span>==

Darker item text

The idea was to make user browse the results using hover:

• concentration on a specific item was done by providing contrast with the rest of the items (font-color + background-color)
• hovering the entries makes "editing" function easy to discover (the appearence of the edit icon)
• links were better visible (separation between what is editable and what takes you to other pages)

as