Cool Table/List of data with effect
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Id like to get a page in bootstrap 3 with this layout and effect on hover http://screencast.com/t/YxpDQUoUH

Ideally the page can be derived from json. for the purpose of this bounty lets assume some static json file that can act like our stub and it will be several rows of data. Id like the sectioning by date to happen all client side while parsing the json.

Maybe the dates and times can be built with moment.js

The yellow area lets assume is a progress visualization, with sections in 25% increments.

Ideally the hover slide effect can be controlled by CSS3

This isn't really the kind of a problem you solve by building a general-purpose component... it's more of a specific view that you'd build into whatever application you want to use this. Unless you're just wondering how they did it... then I'd be happy to explain. But otherwise, is there a specific dataset or data-format that you want to visualize with this?
slang800 over 4 years ago
I don't have a data structure defined. what we end up with from this POF we will either tweak or use as is and generate it from the server.
Qdev over 4 years ago
Ok, what is the data that you have? We should start by defining some type of a schema for it that will be fed into the application.
slang800 over 4 years ago
We actually will be using this to track completion of a workflow task in our admin. My specific data is here Date/time,Name,Zip,Percent Complete,Session,Event (session and event are the hidden attributes in my specific case)
Qdev over 4 years ago
If speakerstack is who you work for, better get them to use spell check on the pages, as there is no such word as 'maded'
elwood over 4 years ago
Yep looks like last push overwrote some changes. Thx!
Qdev over 4 years ago
awarded to alixaxel

Crowdsource coding tasks.

1 Solution

Winning solution

Check this out. Implemented with Handlebars templates and moment.js.

The expected JSON structure is the following:

[
    ...
    {
        "user": {
            "name": "Alix Axel",
            "location": "Porto, Portugal",
        },
        "event": "event 3",
        "session": "session 3",
        "progress": 42,
        "datetime": "2014-04-09T19:30:26",
    },
    ...
]

Let me know if you need any changes to the code.

Alix, awesome job. Only change I need is click on the bar to make it slide (to cover tablet people). Rest is perfect! P
Qdev over 4 years ago
@Qdev: Just added that feature.
alixaxel over 4 years ago