twreporter-react-index-page/lib/constants/mobile-mockup-specification.js

twreporter index page version 2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
// 320 is iPhone5 width and also the mockup max-width,
// 238 is the item width in device.
// 26 is the padding between each item

var itemWidth = 238;
var itemPaddingRight = 26;
var mockupWidth = 320;
var firstItemMarginLeft = 42;

// item width pct of mobiel device
var itemWidthPct = "" + itemWidth / mockupWidth * 100;

// item + padding width pct
var itemPlusPaddingWidthPct = "" + (itemWidth + itemPaddingRight) / mockupWidth * 100;

// First item has 42px margin-left in mockup.
var firstItemMarginLeftPct = "" + firstItemMarginLeft / mockupWidth * 100;

// Each item has the padding-right:26px in mockup.
var itemPaddingRightPct = "" + itemPaddingRight / mockupWidth * 100;

exports.itemWidthPct = itemWidthPct;
exports.itemPlusPaddingWidthPct = itemPlusPaddingWidthPct;
exports.firstItemMarginLeftPct = firstItemMarginLeftPct;
exports.itemPaddingRightPct = itemPaddingRightPct;