Include the labels on the tables when the mobile page is shown

opentech/apply/funds/templates/funds/tables/table.html

@@ -2,7 +2,14 @@
 {% load django_tables2 table_tags review_tags %}
 
 {% block table.tbody.row %}
-    {{ block.super }}
+    <tr {{ row.attrs.as_html }}>
+        {% for column, cell in row.items %}
+            <td {{ column.attrs.td.as_html }}>
+                <span class="mobile-label {{ column.attrs.td.class }}">{{ column.header }}: </span>
+                {% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}
+            </td>
+        {% endfor %}
+    </tr>
 
     {% with submission=row.record %}
         <tr class="all-submissions__child" data-parent-id="{{ row.record.id }}">

opentech/static_src/src/sass/apply/components/_all-submissions.scss

@@ -164,6 +164,14 @@ $table-breakpoint: 'tablet-landscape';
                 }
             }
 
+            &.reviews_stats {
+                display: none;
+
+                @include media-query($table-breakpoint) {
+                    display: table-cell;
+                }
+            }
+
             // arrow to toggle project info - added via js
             @include media-query($table-breakpoint) {
                 .arrow {
@@ -179,6 +187,19 @@ $table-breakpoint: 'tablet-landscape';
                     }
                 }
             }
+
+            > span.mobile-label {
+                width: 90px;
+                display: inline-block;
+
+                &.phase, &.title {
+                    display: none;
+                }
+
+                @include media-query($table-breakpoint) {
+                    display: none;
+                }
+            }
         }
     }
 

opentech/static_src/src/sass/apply/components/_table.scss

@@ -20,7 +20,7 @@ table {
         }
     }
 
-    // tale rows
+    // table rows
     tr {
         border: 1px solid $color--light-mid-grey;
         transition: box-shadow 0.15s ease;
@@ -62,20 +62,21 @@ table {
 
             &.lead {
                 span {
-                    position: relative;
-                    z-index: 1;
-                    display: block;
-                    padding-right: 5px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    background: $color--white;
-
-                    &:hover {
-                        display: inline-block;
-                        overflow: visible;
+                    @include media-query($table-breakpoint) {
+                        position: relative;
+                        z-index: 1;
+                        display: block;
+                        padding-right: 5px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        background: $color--white;
+
+                        &:hover {
+                            display: inline-block;
+                            overflow: visible;
+                        }
                     }
                 }
-
             }
         }
     }