Card Glossary


The library is a glossary of the react components used in the Issimo platform.

The decision to use react is due to:

Cards will be designed and coded in this repository (src/cards.js), and when ready for release compiled and minified (using jsx and uglify) into dist/cards.js, which will be included in the issimo platform. From there the issimo platform will delegate design responsibility to the cards, focusing on backend logic.

Angular is used by the issimo editor to update article data. This repository is responsible for displaying the data as cards and rending articles, while the issimo platform will retain responsibility for the angular editor.

Images

Property Description
url The URL to the image.
caption The caption to put below the image.
link A hyperlink, making the image clickable.
title A large word overlayed on top of the image.
precede A longer sentence overlayed on top of the image.
ratio *
The ratio of the original image, width / height.
For example a ratio of 2 would be twice as wide as it is high, while 0.5 would be twice as high as it is wide.
displayRatio The desired display ratio. Once the original image ratio is known, a user can set the ratio it will display as to be something completely different. A landscape image can be instructed to display as portrait. This is done by cropping the image with CSS.
parallax The image will scroll at a different speed to the page, creating a 3 dimensional effect. This will only occur if there there spare pixels vertically, ie by using a higher displayRatio than the image's natural ratio (ie cropping it more landscape). FocusY will be ignored, as the y axis adjustment is moved according to parallax.
coverParallax The image will scroll at half the rate of the page scroll when the page is scrolled up (no effect when scrolled down). This parallax effect is intended only for images at the top of the page, ie cover pages. FocusY will be taken into consideration in the position of the image.
focusX The horizontal focal point used when cropping an image, measured as a % from the left. For example 25 is 25% from the left, while 100 is full right. If an image would leave white space after cropping due to being moved too far, it will only move the maximum distance capable to completely fill the display ratio.
focusY The vertical focual point used when cropping an image, measured as a % from the top.
rounded True/False. Sets the corners to be round.
circle True/False. Sets the image to be a sphere.
resizable True/False. Will add a final folder at the end with a file size of 320px/ 640px/ 1200px/ or 2400px/, depending on the screen width and maxWidth property.
For example http://localhost/images/test.jpg will first load http://localhost/images/320px/test.jpg. Once the page has rendered, it will get the actual width of the space the image is taking, then load a higher resolution image on top of the old one.
urlMaxWidth The maximum width the image url will resize to. Values are: 320, 640, 1200 or 2400.
width Lock the image width, in pixels. Height will default to the ratio or displayRatio, if defined.
* = required.

Image Aligner

Property Description
images An array of the images to be aligned.

Top Menu

Property Description
name The name of the site.
topBarColor A CSS color for the highest bar on the menu.
itemHighlightColor A CSS color that shows when a menu item is moused over.
logoUrl The full URL for the logo to display.
items
An array of items.
The JSON format is {name:"", link:"", subItems:[]}
Subitems are another row of items again, which will be shown when the item is highlighted.

Text Editor

Article Editor

Layouts

Generic Card

When a card lacks a type, only the most generic, universal information can be shown.

Property Type Description
id int A unique identifier for this card within the Issimo domain.
@id string A unique identifier for this card in the form of URL. This will be universally unique since it includes a domain. This is used by different knowledge bases to refer to each others cards, particularly when indicating that a card on this system is identical to a card on another system, so need not be downloaded.
name string The name or 'title' of the card. The most prominent place it's described.
image Image
The primary image for this card.
This must include a url, but it also recommended that it include a ratio. All other image properties are valid.

Headers

Covers

Search

Contents

Feeds

Property Type Description
name string The name of the feed.
cards array of cards An array containing the cards to be displayed. If this is not provided the component will fetch the cards from /feeds/name.json
maxCards int The maximum number of cards to display.
maxWidth int (%) The percentage width the card area will use relative to the space provided.

Backend Image List

Backend Article List