#267 CountryGallery: item => more content

Author: tobiu

examples/component/coronaGallery/CountryGallery.mjs

@@ -50,23 +50,33 @@ class CountryGallery extends Gallery {
                         }]
                     }, {
                         tag: 'table',
+                        cls: ['neo-content-table'],
                         cn : [{
                             tag: 'tr',
                             cn : [
                                 {tag: 'td', html: 'Cases'},
+                                {tag: 'td', cls: ['neo-align-right']},
+                                {tag: 'td', style: {width: '100%'}},
+                                {tag: 'td', html: 'Cases today'},
                                 {tag: 'td', cls: ['neo-align-right']}
                             ]
                         }, {
                             tag: 'tr',
                             cn : [
                                 {tag: 'td', html: 'Deaths'},
+                                {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
+                                {tag: 'td', style: {width: '100%'}},
+                                {tag: 'td', html: 'Deaths today'},
                                 {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
                             ]
                         }, {
                             tag: 'tr',
                             cn : [
                                 {tag: 'td', html: 'Recovered'},
-                                {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']}
+                                {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
+                                {tag: 'td', style: {width: '100%'}},
+                                {tag: 'td', html: 'Critical'},
+                                {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
                             ]
                         }]
                     }]
@@ -115,6 +125,10 @@ class CountryGallery extends Gallery {
         table.cn[1].cn[1].html = record.deaths;
         table.cn[2].cn[1].html = record.recovered;
 
+        table.cn[0].cn[4].html = record.todayCases;
+        table.cn[1].cn[4].html = record.todayDeaths;
+        table.cn[2].cn[4].html = record.critical;
+
         return vdomItem;
     }
 

resources/scss/src/examples/_CountryGallery.scss

@@ -5,6 +5,10 @@
         text-align: right;
     }
 
+    .neo-content-critical {
+        color: orange;
+    }
+
     .neo-content-deaths {
         color: red;
     }
@@ -13,6 +17,10 @@
         color: green;
     }
 
+    .neo-content-table {
+        white-space: nowrap;
+    }
+
     .neo-flag {
         height      : 40px;
         margin-right: 10px;