Lesion Tracker Redesign so far

Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html

@@ -1,11 +1,38 @@
 <template name="lesionTableRow">
-    <tr id="{{lesionNumber}}" class="lesionTableRow" data-measurementid="{{_id}}">
-        <td class='lesionNumber'>{{lesionNumberAbsolute}}</td>
-        <!--<td class='location' tabindex="0">{{location}}</td>-->
-        <td class='target'>{{#if isTarget}} Y {{else}} N {{/if}}</td>
-        <!--Each time point as a column-->
-        {{# each timepoints }}
-            {{> lesionTableTimepointCell}}
-        {{/ each }}
-    </tr>
+    <div class="lesionTableRow" data-measurementid="{{_id}}">
+        <div class='lesionRowSidebar'>
+            <div class="lesionNumber">
+                {{lesionNumberAbsolute}}
+            </div>
+            <div class="lesionNumber">
+                {{ #if descriptionRequired }}
+                <div>
+                    <svg>
+                        <use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-warning></use>
+                    </svg>
+                </div>
+                {{ /if }}
+                {{ #if responseStatus }}
+                <div>
+                    CR
+                </div>
+                {{ /if }}
+            </div>
+        </div>
+        <div class="lesionDetails">
+            <div class='location'>
+                {{ #if location }}
+                    {{location}}
+                {{ else }}
+                    (No description)
+                {{ /if }}
+            </div>
+            <div class="timepointData">
+                <!--Each time point as a column-->
+                {{# each timepoints }}
+                    {{> lesionTableTimepointCell}}
+                {{/ each }}
+            </div>
+        </div>
+    </div>
 </template>

Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl

@@ -1,3 +1,39 @@
-.lesionTableRow .location
-  &:hover
-    font-weight: bold
+@import "{design}/app"
+
+.lesionTableRow
+  display: flex
+  width: 100%
+
+  .lesionRowSidebar
+    flex: 1
+    color: $textSecondaryColor
+    background: $darkUiColor
+    max-width: 20px
+    height: 60px
+
+    .lesionNumber
+      padding: 3px
+
+    &.active
+      border-left: 4px $activeColor solid
+
+  .lesionDetails
+    flex: 1
+    display: flex
+    flex-direction: column
+    align-items: stretch
+
+    .location
+      flex: 1
+      text-align: center
+      color: $textSecondaryColor
+      height: 20px
+      width: 100%
+
+    .timepointData
+      display: flex
+
+      div
+        flex: 1
+        text-align: center
+        justify-content: space-around