v0.4: Card Page

tr-0.4.01

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

In this iteration it is possible to inspect the details of a card.

Differently from the original Trello design that uses a popup modal to display the card data, I opted for a separate and dedicated fullscreen page, with a design inspired to the Dribbble shot template page.

tr-0.4-00

This is just a first basic version, so some features are missing and the CSS styling is uncomplete.

The layout is organized on two columns, with the main content and the comments on the left and some card auxiliar info and actions in the right column.

I chose to put the card cover image, if any, just under the card title and meta. After this image, it comes the card description and the comments section

In the right column/sidebar there are the number of card votes, the number of attachments and two links to get back to the parent board and to see the original Trello card.

The layout is not responsive yet.

The only card activities retrieved with the Trello API are the comments, and only the first 50 items are showed.
Pagination is coming in 0.4.1.

And other card page upcoming features in 0.4.x will be timeago, attachmnts data, voters, …

Development Notes

At the moment, returning back to the parent board makes the app spawns a new http request to Trello to fetch again the board data. This will be fixed later.

The card description and the comment text can be formatted by the user with Markdown, so the Comment React component, in its .render() method, convert it to a HTML string with Marked and inject it into the DOM with dangerouslySetInnerHTML. Later this could be done with Marked-React.

tr-0.4-02

Advertisements

Published by

mgiulio

Front End Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s