Who to Follow

Desktop/UI/WebApp.js

@@ -103,7 +103,7 @@ function newWebApp() {
             queryType: SA.projects.socialTrading.globals.queryTypes.USER_PROFILES,
             emitterUserProfileId: undefined,
             initialIndex: 'Last',
-            amountRequested: 10,
+            amountRequested: 3,
             direction: 'Past'
         }
 
@@ -122,7 +122,7 @@ function newWebApp() {
             console.log(profiles)
             document.getElementById('context-cell')
 
-            fillWhoToFollowTable(profiles)
+            addWhoToFollowTable(profiles)
         }
 
         /*
@@ -133,9 +133,9 @@ function newWebApp() {
         }
     }
 
-    function fillWhoToFollowTable(profiles) {
+    function addWhoToFollowTable(profiles) {
 
-        let contextCell = document.getElementById('context-cell')
+        let contextCell = document.getElementById('who-to-follow-cell')
         let table = document.createElement("table")
         let tblBody = document.createElement("tbody")
 
@@ -144,8 +144,7 @@ function newWebApp() {
             let row = document.createElement("tr")
 
             let cell = document.createElement("td")
-            let cellText = document.createTextNode(profile.userProfileHandle)
-            cell.appendChild(cellText)
+            addProfileToFollowTable(cell, profile)
             row.appendChild(cell)
 
             tblBody.appendChild(row)
@@ -155,4 +154,39 @@ function newWebApp() {
         contextCell.appendChild(table)
         table.setAttribute("class", "who-to-follow-table")
     }
+
+    function addProfileToFollowTable(htmlElement, profile) {
+        let table = document.createElement("table")
+        let tblBody = document.createElement("tbody")
+
+
+
+        let row = document.createElement("tr")
+
+        {
+            let cell = document.createElement("td")
+            let cellText = document.createTextNode('Profile Picture')
+            cell.appendChild(cellText)
+            row.appendChild(cell)
+        }
+        {
+            let cell = document.createElement("td")
+            let cellText = document.createTextNode(profile.userProfileHandle)
+            cell.appendChild(cellText)
+            row.appendChild(cell)
+        }
+        {
+            let cell = document.createElement("td")
+            let cellText = document.createTextNode('Follow Button')
+            cell.appendChild(cellText)
+            row.appendChild(cell)
+        }
+
+        tblBody.appendChild(row)
+
+
+        table.appendChild(tblBody)
+        htmlElement.appendChild(table)
+        table.setAttribute("class", "profile-to-follow-table")
+    }
 }

Desktop/WebServer/css/main.css

@@ -241,4 +241,15 @@
     color: #000;
     border-width: 0px;
     border-collapse: collapse;
+  }
+
+  .profile-to-follow-table {
+    position:relative; 
+    width: 100%;
+    height: 30%;
+    padding: 0; 
+    margin: 0;
+    color: #000;
+    border-width: 0px;
+    border-collapse: collapse;
   }

Desktop/WebServer/index.html

@@ -122,7 +122,19 @@
                         <td class="search-cell">SEARCH</td>
                     </tr>
                     <tr>
-                        <td id="context-cell" class="context-cell">
+                        <td class="context-cell">
+                            <table class="context-table">
+                                <tr>
+                                    <td>Who to follow</td>
+                                </tr>
+                                <tr>
+                                    <td id="who-to-follow-cell">
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Show more</td>
+                                </tr>
+                            </table>
                         </td>
                     </tr>
                 </table>