allow x large

src/components/GuideRenderer.js

@@ -1,6 +1,6 @@
 const _ = require('lodash');
 
-const { isLargeFn } = require('../utils/landscapeCalculations');
+const { sizeFn } = require('../utils/landscapeCalculations');
 const { renderItem } = require('./Item.js');
 const { h } = require('../utils/format');
 const { assetPath } = require('../utils/assetPath');
@@ -17,7 +17,7 @@ module.exports.render = function({settings, items, guide}) {
 
   const title = `<h1 className="title" style="margin-top: -5px;">${h(settings.global.short_name)} Landscape Guide</h1>`;
   const renderSubcategoryMetadata = ({ node, entries }) => {
-    const orderedEntries = _.orderBy(entries,  (x) => !x.isLarge);
+    const orderedEntries = _.orderBy(entries,  (x) => -x.size);
     const projectEntries = entries.filter(entry => entry.project)
     return `
       ${ (node.buzzwords.length > 0 || projectEntries.length > 0) ? `<div class="metadata">
@@ -110,7 +110,7 @@ module.exports.render = function({settings, items, guide}) {
       return null;
     }
     const enhanced = { ...entry, categoryAttrs }
-    return { ...enhanced, isLarge: isLargeFn(enhanced) }
+    return { ...enhanced, size: sizeFn(enhanced) }
   }).filter( (x) => !!x);
 
   return `

src/components/Item.js

@@ -21,7 +21,7 @@ const largeItem = function(item) {
 
   if (isMember) {
     return `
-    <div data-id="${item.id}" class="large-item item">
+    <div data-id="${item.id}" class="large-item large-item-${item.size} item">
       <img loading="lazy" src="${assetPath(item.href)}" alt="${item.name}" style="
             width: calc(100% - ${2 * padding}px);
             height: calc(100% - ${2 * padding + textHeight}px);
@@ -32,7 +32,7 @@ const largeItem = function(item) {
   }
 
   return `
-    <div data-id="${item.id}" class="large-item item" style="background: ${color}">
+    <div data-id="${item.id}" class="large-item large-item-${item.size} item" style="background: ${color}">
       <img loading="lazy" src="${assetPath(item.href)}" alt="${item.name}" style="
             width: calc(100% - ${2 * padding}px);
             height: calc(100% - ${2 * padding + textHeight}px);
@@ -67,12 +67,12 @@ const smallItem = function(item) {
 }
 
 module.exports.renderItem =  function (item) {
-  const {isLarge, category, oss, categoryAttrs } = item;
+  const {size, category, oss, categoryAttrs } = item;
   const isMember = category === settings.global.membership;
   const ossClass = isMember || oss || (categoryAttrs.isLarge && !settings.global.flags?.gray_large_items) ? 'oss' : 'nonoss';
-  const isLargeClass = isLarge ? 'wrapper-large' : '';
+  const isLargeClass = size > 1 ? `wrapper-large-${size}` : '';
 
   return `<div class="${isLargeClass + ' item-wrapper ' + ossClass}">
-    ${isLarge ? largeItem({isMember, ...item}) : smallItem({...item})}
+    ${size > 1 ? largeItem({isMember, ...item}) : smallItem({...item})}
   </div>`;
 }

src/style.css

@@ -1463,6 +1463,13 @@ html.ios.has-selected-item, html.ios.has-selected-item body {
   height: 63px;
 }
 
+.inner-landscape .large-item.large-item-16, .items .large-item.large-item-16 {
+  cursor: pointer;
+  position: relative;
+  width: 145px;
+  height: 128px;
+}
+
 .inner-landscape .small-item, .items .small-item {
   cursor: pointer;
   position: relative;
@@ -1481,11 +1488,16 @@ html.ios.has-selected-item, html.ios.has-selected-item body {
   grid-row-end: span 1;
 }
 
-.inner-landscape .item-wrapper.wrapper-large, .items .item-wrapper.wrapper-large {
+.inner-landscape .item-wrapper.wrapper-large-4, .items .item-wrapper.wrapper-large-4 {
   grid-column-end: span 2;
   grid-row-end: span 2;
 }
 
+.inner-landscape .item-wrapper.wrapper-large-16, .items .item-wrapper.wrapper-large-16 {
+  grid-column-end: span 4;
+  grid-row-end: span 4;
+}
+
 
 
 @media (max-width: var(--sm-screen)) {

src/utils/landscapeCalculations.js

@@ -17,19 +17,19 @@ const headerHeight = module.exports.headerHeight = 40;
 /* eslint-enable */
 
 // Check if item is large
-const isLargeFn = module.exports.isLargeFn = ({ relation, category, member, categoryAttrs }) => {
-  if (settings.global.flags?.only_large_items) {
-    return true;
-  }
+const sizeFn = module.exports.sizeFn = ({ relation, category, member, categoryAttrs }) => {
   const relationInfo = fields.relation.valuesMap[relation]
   if (!relationInfo) {
     console.error(`No relation with name ${relation}`);
   }
+  if (relationInfo.x4) {
+    return 16;
+  }
   if (category === settings.global.membership) {
     const membershipInfo = settings.membership[member];
-    return membershipInfo && !!membershipInfo.is_large;
+    return (membershipInfo && !!membershipInfo.is_large) ? 4 : 1;
   }
-  return !!categoryAttrs.isLarge || !!relationInfo.big_picture_order;
+  return (!!categoryAttrs.isLarge || !!relationInfo.big_picture_order) ? 4 : 1;
 }
 
 // Compute if items are large and/or visible.
@@ -38,10 +38,9 @@ const isLargeFn = module.exports.isLargeFn = ({ relation, category, member, cate
 const computeItems = (subcategories, addInfoIcon = false) => {
   return subcategories.map(subcategory => {
     const filteredItems = subcategory.items.reduce((acc, { id }) => ({ ...acc, [id]: true }), {})
-    const allItems = subcategory.allItems.map(item => ({ ...item, isLarge: isLargeFn(item), isVisible: filteredItems[item.id]  }))
-    const itemsCount = allItems.reduce((count, item) => count + (item.isLarge ? 4 : 1), 0) + (addInfoIcon ? 1 : 0)
-    const largeItemsCount = allItems.reduce((count, item) => count + (item.isLarge ? 1 : 0), 0)
-
+    const allItems = subcategory.allItems.map(item => ({ ...item, size: sizeFn(item), isVisible: filteredItems[item.id]  }))
+    const itemsCount = allItems.reduce((count, item) => count + item.size, 0) + (addInfoIcon ? 1 : 0)
+    const largeItemsCount = allItems.reduce((count, item) => count + (item.size === 16 ? 4 : item.size === 4 ? 1 : 0), 0)
     return { ...subcategory, allItems, itemsCount, largeItemsCount }
   })
 }