A brand new Cards view!

Post date: Jul 21, 2015 2:35:9 PM

What changed?

With the last addition to Awesome Table and the vision we have for this tool, the previous Cards view had less and less legitimaticy in Awesome Table. It was using some dirty HTML tables imbrication and behaved really poorly on mobile display. We now use the awesome capability of the flex-box.

To clearly explain the changes, nothing works better than a side-by-side comparison:

• • Here is the old cards view, while being somewhat correct for large width, when resized, the display quality dramatically decreases:

• • Then the new cards view adjusts the number of cards displayed to better match the current width of the view:

Settings and CSS

The settings have also changed. Here are the new ones explained:

• Number of columns: numeric or "none"

  • numeric (1 - 100): define the preferred number of column to use. This number is adjusted according to the other settings

  • "none": the cards view will not try to display the same number of cards on each line, allowing to less aligned design

• Number of rows: numeric or "none"

  • numeric: maximum number of rows in the cards display

  • "none": all items will be shown regardless of their number

• Minimum card width: define the minimum card width

  • it can be in percent: "0%" (for example, it will not restrain the minimum width of a card)

    • it can be in pixel or any other CSS unit: "160px" (for example the cards will not be narrower than 160px. Do not use high value here)

• Maximum card width:

  • it can be in percent: "100%" (for example, it will not restrain the maximum width of a card)

    • it can be in pixel or any other CSS unit: "400px" (for example the cards will not be wider than 400px.)

That's it for parameters to set in the configuration panel. The new cards view also has a keyword to use in the second row of the spreadsheet:

• CardsColor: write it in a column containing CSS color names or color codes (like: "#12A2B4") to specify each card's background color

The first column visible (with no "Hidden" tag) is used as the content of the cards.

You can now easily select the cards. The basic HTML structure for each card is like this:

<div class="card"> <div class="card-content"> <!-- Your content --> </div></div>

The default CSS is following some rules of material design with the aim to modernize the view. Some other effects can be achieved by slightly editing the CSS applied on the ".card-content" class:

.awesomeTable-visualization-cards .card-content { margin: 0 -1px -1px 0!important; padding: 0!important; box-shadow: rgba(0, 0, 0, 0.4) 0 0; border: solid 1px rgba(189, 189, 189, 0.4)!important; }

The pagination structure is shown below. Be careful not to hide the navigation buttons as they are bound to appear on mobile devices.

<div class="cards-page"> <div class="cards-pageNumber">1 - 3 / 3</div> <div class="cards-page-button"> <img alt="previous" class="cards-page-button-disabled"> <img alt="next" class> </div></div>

Note: CSS written specifically for the old cards view will not fully work with the new one if you used selectors based on the Google Visualization names (like .viewCards .google-visualization-table-table)

Example

• • Portfolio: Showcase designed by +Camille Lapeyronie and myself, featuring our work:

• Suggestion Box: kindly shared by +Baptiste Quin, adapted to the new Cards view: