UI update

bitcoinbonds.html

@@ -350,12 +350,12 @@
                     currentValue,
                     percentGain: percentGain.toFixed(0)
                 }
-                const timelineItem = document.createElement('li')
-                timelineItem.classList.add('timeline-item')
+                const timelineItem = create('li', {className: 'timeline-item'})
 
-                const tilelineItemHeader = document.createElement('header')
-                tilelineItemHeader.classList.add('timeline-item__header')
-                tilelineItemHeader.textContent = getFormatedTime(series.startDate, true)
+                const tilelineItemHeader = create('header', {
+                    className: 'timeline-item__header',
+                    text: getFormatedTime(series.startDate, true)
+                })
 
                 timelineItem.append(tilelineItemHeader, render.bitBondRow(obj))
                 frag.prepend(timelineItem)

bob'sfund.html

@@ -452,13 +452,12 @@
             bobFund.forEach(fund => {
                 const {release, invested, investors, href} = fund
                 console.log(release, invested, investors, href)
-                const timelineItem = document.createElement('li')
-                timelineItem.classList.add('timeline-item')
+                const timelineItem = create('li', {className: 'timeline-item'})
 
-                const tilelineItemHeader = document.createElement('header')
-                tilelineItemHeader.classList.add('timeline-item__header')
-                tilelineItemHeader.textContent = getFormatedTime(release, true)
-                console.log(new Date(release))
+                const tilelineItemHeader = create('header', {
+                    className: 'timeline-item__header',
+                    text: getFormatedTime(release, true)
+                })
 
                 if(fund.hasOwnProperty('investors')){
                     investors.forEach(investor => {
@@ -467,19 +466,22 @@
                         timeElapsed = (new Date().getFullYear() - 2017)
                         frag.append(render.bobFundRow({...investor, currentValue, gain, timeElapsed}))
                     })
-                    const fundContainer = document.createElement('div')
-                    fundContainer.classList.add('grid', 'series-container', 'series-container--bobs-fund')
+                    const fundContainer = create('div', {
+                        className: 'grid series-container series-container--bobs-fund'
+                    })
 
-                    const heading = document.createElement('h4')
-                    heading.classList.add('margin-bottom-1r', 'margin-top-1-5')
-                    heading.textContent = 'Fund investors'
+                    const heading = create('h4', {
+                        className: 'margin-bottom-1r margin-top-1-5',
+                        text: 'Fund investors'
+                    })
 
                     fundContainer.append(frag)
                     timelineItem.append(heading, fundContainer)
                 }
                 else{
-                    const fundCard = document.createElement('div')
-                    fundCard.classList.add('grid', 'card')
+                    const fundCard = create('div', {
+                        className: 'grid card'
+                    })
                     let [currentValue, gain] = calcNetValue(37488, 72.56, invested, 0)
                         currentValue = parseFloat(currentValue.toFixed(2))
                     fundCard.innerHTML = `

css/main.css

@@ -964,6 +964,10 @@ ol[type="1"] {
   color: rgba(var(--text-color), 0.9);
 }
 
+.outlet-hero-section {
+  display: grid;
+}
+
 #outlet_switcher {
   position: absolute;
   top: 0;
@@ -1390,6 +1394,10 @@ ol[type="1"] {
     width: calc(100% - 2rem);
   }
 
+  .outlet-label {
+    grid-row: 1/2;
+  }
+
   .outlet-hero-section {
     margin-top: 2rem;
   }
@@ -1570,7 +1578,6 @@ ol[type="1"] {
 
   .outlet-hero-section {
     position: relative;
-    display: grid;
     grid-template-columns: 1fr auto;
     gap: 1.5rem;
     margin-top: 4rem;

css/main.scss

@@ -861,6 +861,10 @@ ol[type="1"]{
     }
 }
 
+.outlet-hero-section{
+    display: grid;
+}
+
 #outlet_switcher{
     position: absolute;
     top: 0;
@@ -1266,6 +1270,9 @@ ol[type="1"]{
     #outlet_switcher{
         width: calc(100% - 2rem);
     }
+    .outlet-label{
+        grid-row: 1/2;
+    }
     .outlet-hero-section{
         margin-top: 2rem;
     }
@@ -1430,7 +1437,6 @@ ol[type="1"]{
     }
     .outlet-hero-section{
         position: relative;
-        display: grid;
         grid-template-columns: 1fr auto;
         gap: 1.5rem;
         margin-top: 4rem;

index.html

@@ -277,10 +277,8 @@
 
 
         function renderFloor(obj){
-            console.log(obj)
             const {floorNo, floor, brief, outlets} = obj
-            const floorSection = document.createElement('section')
-            floorSection.classList.add('floor')
+            const floorSection = create('section', {className: 'floor'})
             floorSection.id = `floor_${floorNo + 1}`
             floorSection.innerHTML = `
                 <header class="floor__header grid align-center">
@@ -306,8 +304,9 @@
 
         function renderOutletPreview(obj){
             const {outletNo, name, brief, url, buyUrl, isSold} = obj
-            const preview = document.createElement('section')
-            preview.classList.add('outlet-preview', 'carousel-container')
+            const preview = create('section', {
+                className: 'outlet-preview carousel-container'
+            })
             let composed = `
                 <div class="grid outlet-preview__info">
                     <h3 class="outlet__title">${name}</h3>

js/index.js

@@ -19,6 +19,14 @@ function getRef(elementId) {
   }
 }
 
+function create(tagName, obj) {
+  const {className, text} = obj
+  const elem = document.createElement(tagName)
+  elem.className = className
+  elem.textContent = text
+  return elem
+}
+
 //Checks for internet connection status
 if (!navigator.onLine)
   notify(