Restyle user list

Author: michaelstalker

assets/js/users.js

@@ -15,20 +15,20 @@ const updateUsers = presence => {
 const userData = (userId, { metas: [{ points }, ..._rest]}) => ({ userId, points })
 
 const showPoints = usersElem => ({userId, points}) => {
-  const userElem = document.querySelector(`.${userId} .user-estimate`)
+  const userElem = document.querySelector(`.${userId}.user-estimate`)
   userElem.innerHTML = points
 }
 
 const addUser = usersElem => ({userId, points}) => {
-  const userElem = document.createElement('li')
-  userElem.setAttribute('class', userId)
+  const userElem = document.createElement('dt')
   userElem.appendChild(document.createTextNode(userId))
+  userElem.setAttribute('class', 'col-8')
 
-  const estimateElem = document.createElement('span')
-  estimateElem.setAttribute('class', 'user-estimate')
-  userElem.appendChild(estimateElem)
+  const estimateElem = document.createElement('dd')
+  estimateElem.setAttribute('class', `${userId} user-estimate col-4`)
 
   usersElem.appendChild(userElem)
+  usersElem.appendChild(estimateElem)
 }
 
 const allHaveEstimated = users => {

lib/pointing_party_web/templates/card/index.html.eex

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-10">
+  <div class="col-10">
     <div class="card text-left">
       <div class="card-header">
         <h2><%= @card.title %></h2>
@@ -27,9 +27,9 @@
     </div>
   </div>
 
-  <div class="col-md-2">
+  <div class="col-2">
     <h2>Users</h2>
-    <ul class="users">
-    </ul>
+    <dl class="row users">
+    </dl>
   </div>
 </div>