(design): Give categories an optional refined design

Adds an alternative_layout flag that gives an option for a different
design of the landscape main page. This can be set as true in
settings.yml under big_picture and main.

Signed-off-by: Milan Lakhani <mlakhani14@bloomberg.net>

src/components/GuideRenderer.js

@@ -40,7 +40,7 @@ module.exports.render = function({settings, items, guide}) {
         </div> ` : '' }
 
       <div class="items">
-        ${ orderedEntries.map(entry => renderItem(entry)).join('') }
+        ${ orderedEntries.map(entry => renderItem(entry, false)).join('') }
       </div>
       `;
   };

src/components/HorizontalCategory.js

@@ -27,7 +27,7 @@ const renderDivider = (color) => {
     "></div>`;
 }
 
-module.exports.renderHorizontalCategory = function({ header, guideInfo, subcategories, width, height, top, left, color, href, fitWidth }) {
+module.exports.renderHorizontalCategory = function({ header, guideInfo, subcategories, width, height, top, left, color, href, fitWidth, alternativeLayout }) {
   const addInfoIcon = !!guideInfo;
   const subcategoriesWithCalculations = calculateHorizontalCategory({ height, width, subcategories, fitWidth, addInfoIcon })
   const totalRows = Math.max(...subcategoriesWithCalculations.map(({ rows }) => rows))
@@ -44,7 +44,7 @@ module.exports.renderHorizontalCategory = function({ header, guideInfo, subcateg
         style="
           position: absolute;
           background: ${color};
-          top: ${subcategoryTitleHeight}px;
+          top: ${alternativeLayout ? 0 : subcategoryTitleHeight+"px"};
           bottom: 0;
           left: 0;
           right: 0;
@@ -72,17 +72,20 @@ module.exports.renderHorizontalCategory = function({ header, guideInfo, subcateg
           height: 100%;
           display: flex;
           justify-content: space-evenly;
-          background: white;
+          background: ${alternativeLayout ? "rgba(100,100,100,0.6)" : "white"};
         ">
           ${subcategoriesWithCalculations.map((subcategory, index) => {
             const lastSubcategory = index !== subcategories.length - 1
             const { allItems, guideInfo, columns, width, name, href } = subcategory
             const padding = fitWidth ? 0 : `${subcategoryMargin}px 0`;
             const style = `
               display: grid;
-              height: 100%;
+              height: ${alternativeLayout ? "80%" : "100%"};
               grid-template-columns: repeat(${columns}, ${smallItemWidth}px);
               grid-auto-rows: ${smallItemHeight}px;
+              border-style: ${alternativeLayout ? "solid" : "none"};
+              background: ${alternativeLayout ? "white" : "none"};
+              margin: ${alternativeLayout ? "15px 2px 2px 2px" : 0};
             `;
             const extraStyle = fitWidth ? `justify-content: space-evenly; align-content: space-evenly;` : `grid-gap: ${itemMargin}px;`;
             return `
@@ -94,20 +97,21 @@ module.exports.renderHorizontalCategory = function({ header, guideInfo, subcateg
                 box-sizing: border-box;
               ">
                 <div style="
-                  position: absolute;
-                  top: ${-1 * categoryTitleHeight}px;
+                  position: ${alternativeLayout ? "relative" : "absolute"};
+                  top: ${alternativeLayout ? 12 : (-1*categoryTitleHeight)+"px"};
                   left: 0;
                   right: 0;
-                  height: ${categoryTitleHeight}px;
+                  height: ${alternativeLayout ? "25px" : categoryTitleHeight+"px"};
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   text-align: center;
+                  font-style: ${alternativeLayout ? "italic" : "normal"};
                 ">
                   <a data-type="internal" href="${href}" class="white-link">${h(name)}</a>
                 </div>
                 <div style="${style} ${extraStyle}">
-                  ${allItems.map(renderItem).join('')}
+                  ${allItems.map(item => renderItem(item, alternativeLayout)).join('')}
                   ${guideInfo ? renderSubcategoryInfo({label: name, anchor: guideInfo,column: columns, row:totalRows}) : ''}
                 </div>
               </div>

src/components/Item.js

@@ -5,15 +5,15 @@ const { h } = require('../utils/format');
 const { readJsonFromDist } = require('../utils/readJson');
 const settings = readJsonFromDist('settings');
 
-const largeItem = function(item) {
+const largeItem = function(item, alternativeLayout) {
   const relationInfo = fields.relation.valuesMap[item.relation]
   const color = relationInfo.big_picture_color;
   const label = (relationInfo.big_picture_label_type === "Item")
               ? item.display_name || item.name
               : relationInfo.big_picture_label;
   const label_color = relationInfo.big_picture_label_color || "white";
   const textHeight = label ? 10 : 0
-  const padding = 2
+  const padding = alternativeLayout ? 1 : 2
 
   const isMultiline = h(label).length > 20;
   const formattedLabel = isMultiline ? h(label).replace(' - ', '<br>') : h(label);
@@ -35,7 +35,7 @@ const largeItem = function(item) {
             vertical-align: middle;
             background: ${color};
             color: ${label_color};
-            font-size: 6.7px;
+            font-size: ${alternativeLayout ? "12px" : "6.7px"};
             line-height: ${isMultiline ? 9 : 13 }px;
       ">${ formattedLabel }</div>
     </div>`;
@@ -53,13 +53,13 @@ const smallItem = function(item) {
     />`
 }
 
-module.exports.renderItem =  function (item) {
+module.exports.renderItem =  function (item, alternativeLayout) {
   const {isLarge, category, oss, categoryAttrs } = item;
   const isMember = category === settings.global.membership;
   const ossClass = isMember || oss || categoryAttrs.isLarge ? 'oss' : 'nonoss';
   const isLargeClass = isLarge ? 'wrapper-large' : '';
 
   return `<div class="${isLargeClass + ' item-wrapper ' + ossClass}">
-    ${isLarge ? largeItem({isMember, ...item}) : smallItem({...item})}
+    ${isLarge ? largeItem({isMember, ...item}, alternativeLayout) : smallItem({...item})}
   </div>`;
 }

src/components/LandscapeContentRenderer.js

@@ -15,6 +15,7 @@ const extractKeys = (obj, keys) => {
 
 
 module.exports.render = function({landscapeSettings, landscapeItems}) {
+  const alternativeLayout = landscapeSettings.alternative_layout || false;
   const elements = landscapeSettings.elements.map(element => {
     if (element.type === 'LandscapeLink') {
       return renderOtherLandscapeLink(element)
@@ -30,7 +31,7 @@ module.exports.render = function({landscapeSettings, landscapeItems}) {
     })
 
     if (element.type === 'HorizontalCategory') {
-      return renderHorizontalCategory({...category, ...attributes, subcategories: subcategories});
+      return renderHorizontalCategory({...category, ...attributes, subcategories: subcategories, alternativeLayout});
     }
     if (element.type === 'VerticalCategory') {
       return renderVerticalCategory({...category, ...attributes, subcategories: subcategories});