Skip to content

Commit

Permalink
(design): Give categories an optional refined design
Browse files Browse the repository at this point in the history 
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 <[email protected]>
  • Loading branch information
@milanlakhani
milanlakhani authored and Milan Lakhani committed Dec 1, 2022
1 parent 7f2f723 commit 087a32c
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 15 deletions.
2 changes: 1 addition & 1 deletion src/components/GuideRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
};
Expand Down
20 changes: 12 additions & 8 deletions src/components/HorizontalCategory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand All @@ -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;
Expand Down Expand Up @@ -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 `
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.toLowerCase() === "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);
Expand All @@ -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>`;
Expand All @@ -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>`;
}
3 changes: 2 additions & 1 deletion src/components/LandscapeContentRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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});
Expand Down

0 comments on commit 087a32c

Please sign in to comment.