v0.20.38

New design for tabular data

bitcoinbonds.html

@@ -101,7 +101,7 @@
                         </g>
                     </svg>
                     <span class="button__label">
-                        Returns
+                        Series
                     </span>
                 </button>
                 <button class="room-button">
@@ -118,7 +118,10 @@
             </scroll-tab-header>
         </div>
         <scroll-tab-panels id="bit_bond_page_group">
-            <div id="bit_bond_series__container" class="grid series-container"></div>
+            <section class="grid">
+                <h3 class="h3 margin-bottom-1-5r">Bitcoin bonds series</h3>
+                <div id="bit_bond_series__container" class="grid series-container"></div>
+            </section>
             <p id="bit_bond_info">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt,
                 doloremque pariatur expedita distinctio itaque.

bob'sfund.html

@@ -92,10 +92,10 @@
             </scroll-tab-header>
         </div>
         <scroll-tab-panels id="bob_fund_page_group">
-            <div>
+            <section class="grid">
-                <!-- <sm-carousel id="bob_fund_page__carousel" indicator autoplay></sm-carousel> -->
+                <h3 class="h3 margin-bottom-1-5r">Investors</h3>
-                <h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
+                <div id="bob_fund_investors__container" class="grid series-container"></div>
-            </div>
+            </section>
             <div>
                 <p id="bob_fund_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere officiis eius iusto quibusdam tenetur illo blanditiis asperiores et corporis!</p>
             </div>
@@ -105,5 +105,16 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
     <script src="js/components.js"></script>
     <script src="js/index.js"></script>
+    <script>
+        function renderAllFundInvestors(){
+            const frag = document.createDocumentFragment()
+            getRef('bob_fund_investors__container').innerHTML = ''
+            bobFund.forEach(investor => {
+                frag.append(render.bobFundRow(investor))
+            })
+            getRef('bob_fund_investors__container').append(frag)
+        }
+        renderAllFundInvestors()
+    </script>
 </body>
 </html>

css/main.css

@@ -18,7 +18,7 @@ body {
   --foreground-color: 255, 255, 255;
   --background-color: #F6f6f6;
   --error-color: red;
-  --green: #1DC838;
+  --green: #007936;
   color: rgba(var(--text-color), 1);
   height: calc(100%);
   background: var(--background-color);
@@ -763,10 +763,12 @@ ul {
 }
 
 .series-container {
-  gap: 2rem 1.5rem;
+  gap: 1.5rem;
+  padding-bottom: 1.5rem;
   grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 }
-.series-container .bit-bond-series__row {
+.series-container .bit-bond-series__row,
+.series-container .bob-fund__row {
   padding: 1.5rem;
 }
 
@@ -804,11 +806,20 @@ sm-carousel {
   min-width: 100%;
 }
 
+.bit-bond-series__row {
+  grid-auto-flow: column;
+}
+
+.bob-fund__row .grid {
+  align-content: flex-start;
+}
+
+.bob-fund__row,
 .bit-bond-series__row {
   gap: 1rem;
   border-radius: 0.5rem;
-  grid-auto-flow: column;
   align-items: flex-start;
+  background-color: rgba(var(--foreground-color), 1);
   box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
 }
 
@@ -820,13 +831,13 @@ sm-carousel {
 }
 
 .percent-gain {
+  font-weight: 500;
   color: var(--green);
   margin-right: 0.5em;
 }
 
 .percent-gain,
 .time-elapsed {
-  font-weight: 400;
   font-size: 0.8rem;
 }
 
@@ -1055,6 +1066,10 @@ scroll-tab-panels > [active] {
   .outlet-hero-section {
     margin-top: 2rem;
   }
+
+  .series-container {
+    gap: 1rem;
+  }
 }
 @media only screen and (min-width: 640px) {
   .page {

css/main.scss

@@ -16,7 +16,7 @@ body {
     --foreground-color: 255, 255, 255;
     --background-color: #F6f6f6;
     --error-color: red;
-    --green: #1DC838;
+    --green: #007936;
     color: rgba(var(--text-color), 1);
     height: calc(100%);
     background: var(--background-color);
@@ -678,9 +678,11 @@ ul{
 }
 
 .series-container{
-    gap: 2rem 1.5rem;
+    gap: 1.5rem;
+    padding-bottom: 1.5rem;
     grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-    .bit-bond-series__row{
+    .bit-bond-series__row,
+    .bob-fund__row{
         padding: 1.5rem;
     }
 }
@@ -718,11 +720,22 @@ sm-carousel{
 .investor-card{
     min-width: 100%;
 }
+.bit-bond-series__row{
+    grid-auto-flow: column;
+}
+
+.bob-fund__row{
+    .grid{
+        align-content: flex-start;
+    }
+}
+
+.bob-fund__row,
 .bit-bond-series__row{
     gap: 1rem;
     border-radius: 0.5rem;
-    grid-auto-flow: column;
     align-items: flex-start;
+    background-color: rgba(var(--foreground-color), 1);
     box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
 }
 
@@ -733,12 +746,12 @@ sm-carousel{
     margin-right: 0.1em;
 }
 .percent-gain{
+    font-weight: 500;
     color: var(--green);
     margin-right: 0.5em;
 }
 .percent-gain,
 .time-elapsed{
-    font-weight: 400;
     font-size: 0.8rem;
 }
 .time-elapsed{
@@ -955,6 +968,9 @@ scroll-tab-panels{
     .outlet-hero-section{
         margin-top: 2rem;
     }
+    .series-container{
+        gap: 1rem;
+    }
 }
 @media only screen and (min-width: 640px) {
     .page{

index.html

@@ -15,29 +15,6 @@
     <sm-notifications id="notification_drawer"></sm-notifications>
     <!-- Component templates -->
 
-    <template id="bob_fund_row">
-        <div class="bob-fund__row grid gap-2">
-            <div class="grid">
-                <h5 class="label color-0-8 weight-500">Investor</h5>
-                <h3 class="value investor__name"></h3>
-            </div>
-            <div class="grid grid-3 gap-1">
-                <div class="grid">
-                    <h5 class="label color-0-8 weight-500">Invested</h5>
-                    <h3 class="value original-value"></h3>
-                </div>
-                <div class="grid">
-                    <h4 class="label color-0-8 weight-500">Current value</h4>
-                    <h3 class="value current-value"></h3>
-                </div>
-                <div class="grid">
-                    <h4 class="label color-0-8 weight-500">Time Elapsed</h4>
-                    <h3 class="value time-elapsed"></h3>
-                </div>
-            </div>
-        </div>
-    </template>
-
     <template id="ico_investor_row">
         <div class="investor-card grid gap-1-5">
             <img class="investor__image" src="" alt="" loading="lazy">
@@ -407,27 +384,6 @@
 
     <script>
 
-        const bobFund = [
-            {
-                investorName: 'John Doe',
-                invested: '₹20000',
-                currentValue: '$XXXXX',
-                timeElapsed: '2years'
-            },
-            {
-                investorName: 'Jane Doe',
-                invested: '₹10000',
-                currentValue: '$XXXXX',
-                timeElapsed: '2years'
-            },
-            {
-                investorName: 'james Doe',
-                invested: '₹15000',
-                currentValue: '$XXXXX',
-                timeElapsed: '2years'
-            },
-        ]
-
         const icoInvestors = [
             {
                 extension: 'jpg',

js/index.js

@@ -368,6 +368,27 @@ const bitBondSerieses = [
   },
 ]
 
+const bobFund = [
+  {
+      investorName: 'John Doe',
+      invested: '₹20000',
+      currentValue: '$XXXXX',
+      timeElapsed: '2years'
+  },
+  {
+      investorName: 'Jane Doe',
+      invested: '₹10000',
+      currentValue: '$XXXXX',
+      timeElapsed: '2years'
+  },
+  {
+      investorName: 'james Doe',
+      invested: '₹15000',
+      currentValue: '$XXXXX',
+      timeElapsed: '2years'
+  },
+]
+
 // templates
 
 const bitBondRowTemplate = document.createElement('template')
@@ -389,6 +410,31 @@ bitBondRowTemplate.innerHTML = `
 </div>
 `
 
+const bobsFundRowTemplate = document.createElement('template')
+bobsFundRowTemplate.innerHTML = `
+<div class="bob-fund__row grid">
+    <div class="grid">
+        <h5 class="label color-0-8 weight-500">Investor</h5>
+        <h3 class="value investor__name"></h3>
+    </div>
+    <div class="flex">
+        <div class="grid">
+            <h5 class="label color-0-8 weight-500">Invested</h5>
+            <h3 class="value original-value"></h3>
+        </div>
+        <div class="grid justify-right text-align-right">
+            <h4 class="label color-0-8 weight-500">Current value</h4>
+            <h3 class="value current-value"></h3>
+            <div class="flex align-center">
+              <svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
+              <span class="percent-gain">2000%</span>
+              <span class="time-elapsed"></span>
+          </div>
+        </div>
+    </div>
+</div>
+`
+
 
 const floorListitemTemplate = document.createElement('template')
 floorListitemTemplate.innerHTML = `
@@ -425,11 +471,11 @@ const render = {
   },
   bobFundRow(obj) {
     const { investorName, invested, currentValue, timeElapsed } = obj;
-    const row = getRef("bob_fund_row").content.cloneNode(true);
+    const row = bobsFundRowTemplate.content.cloneNode(true);
     row.querySelector(".investor__name").textContent = investorName;
     row.querySelector(".original-value").textContent = invested;
     row.querySelector(".current-value").textContent = currentValue;
-    row.querySelector(".time-elapsed").textContent = timeElapsed;
+    row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed}`;
     return row;
   },
   icoInvestorRow(obj, options) {