Show first 2 sources inline with +N more popup, widen header bar

Author: bw2

gene.html

@@ -23,8 +23,8 @@
         background-color: #1b1c1d;
         color: white;
         text-decoration: none;
-        padding-top: 20px;
-        padding-bottom: 5px;
+        padding-top: 25px;
+        padding-bottom: 10px;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -981,17 +981,17 @@
         const match = sourcesStr.match(/^(\d+):\s*(.*)$/)
         if (!match) return sourcesStr
 
-        const count = match[1]
         const sourcesList = match[2].split(',').map(s => s.trim())
 
         const pastelColors = ['#e8d5d5', '#d5dfe8', '#d5e8db', '#e8e2d5', '#ddd5e8', '#d5e8e6', '#e8d5e0', '#e0e8d5']
 
-        const badges = sourcesList.map((src, i) => {
-            const bg = pastelColors[i % pastelColors.length]
-            return `<span class="ui mini label" style="background-color: ${bg}; color: #333; margin: 1px;">${src}</span>`
-        }).join(' ')
+        const makeBadge = (src, i) => `<span class="ui mini label" style="background-color: ${pastelColors[i % pastelColors.length]}; color: #333; margin: 1px;">${src}</span>`
+
+        const inlineBadges = sourcesList.slice(0, 2).map(makeBadge).join(' ')
+        if (sourcesList.length <= 2) return inlineBadges
 
-        return `<span class="show-popup action-link" data-html="${badges.replace(/"/g, '&quot;')}">${count} sources</span>`
+        const allBadges = sourcesList.map(makeBadge).join(' ')
+        return `${inlineBadges} <span class="show-popup action-link" data-html="${allBadges.replace(/"/g, '&quot;')}">(+${sourcesList.length - 2} more)</span>`
     }
 
     const getTruncatedText = (text, maxLen=80) => {

index.html

@@ -24,8 +24,8 @@
         background-color: #1b1c1d;
         color: white;
         text-decoration: none;
-        padding-top: 20px;
-        padding-bottom: 5px;
+        padding-top: 25px;
+        padding-bottom: 10px;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -982,17 +982,17 @@
         const match = sourcesStr.match(/^(\d+):\s*(.*)$/)
         if (!match) return sourcesStr
 
-        const count = match[1]
         const sourcesList = match[2].split(',').map(s => s.trim())
 
         const pastelColors = ['#e8d5d5', '#d5dfe8', '#d5e8db', '#e8e2d5', '#ddd5e8', '#d5e8e6', '#e8d5e0', '#e0e8d5']
 
-        const badges = sourcesList.map((src, i) => {
-            const bg = pastelColors[i % pastelColors.length]
-            return `<span class="ui mini label" style="background-color: ${bg}; color: #333; margin: 1px;">${src}</span>`
-        }).join(' ')
+        const makeBadge = (src, i) => `<span class="ui mini label" style="background-color: ${pastelColors[i % pastelColors.length]}; color: #333; margin: 1px;">${src}</span>`
+
+        const inlineBadges = sourcesList.slice(0, 2).map(makeBadge).join(' ')
+        if (sourcesList.length <= 2) return inlineBadges
 
-        return `<span class="show-popup action-link" data-html="${badges.replace(/"/g, '&quot;')}">${count} sources</span>`
+        const allBadges = sourcesList.map(makeBadge).join(' ')
+        return `${inlineBadges} <span class="show-popup action-link" data-html="${allBadges.replace(/"/g, '&quot;')}">(+${sourcesList.length - 2} more)</span>`
     }
 
     const getTruncatedText = (text, maxLen=80) => {

website/header_template.html

@@ -170,17 +170,17 @@
         const match = sourcesStr.match(/^(\d+):\s*(.*)$/)
         if (!match) return sourcesStr
 
-        const count = match[1]
         const sourcesList = match[2].split(',').map(s => s.trim())
 
         const pastelColors = ['#e8d5d5', '#d5dfe8', '#d5e8db', '#e8e2d5', '#ddd5e8', '#d5e8e6', '#e8d5e0', '#e0e8d5']
 
-        const badges = sourcesList.map((src, i) => {
-            const bg = pastelColors[i % pastelColors.length]
-            return `<span class="ui mini label" style="background-color: ${bg}; color: #333; margin: 1px;">${src}</span>`
-        }).join(' ')
+        const makeBadge = (src, i) => `<span class="ui mini label" style="background-color: ${pastelColors[i % pastelColors.length]}; color: #333; margin: 1px;">${src}</span>`
 
-        return `<span class="show-popup action-link" data-html="${badges.replace(/"/g, '&quot;')}">${count} sources</span>`
+        const inlineBadges = sourcesList.slice(0, 2).map(makeBadge).join(' ')
+        if (sourcesList.length <= 2) return inlineBadges
+
+        const allBadges = sourcesList.map(makeBadge).join(' ')
+        return `${inlineBadges} <span class="show-popup action-link" data-html="${allBadges.replace(/"/g, '&quot;')}">(+${sourcesList.length - 2} more)</span>`
     }
 
     const getTruncatedText = (text, maxLen=80) => {

website/styles_for_all_pages.html

@@ -10,8 +10,8 @@
         background-color: #1b1c1d;
         color: white;
         text-decoration: none;
-        padding-top: 20px;
-        padding-bottom: 5px;
+        padding-top: 25px;
+        padding-bottom: 10px;
         display: flex;
         justify-content: space-between;
         align-items: center;