Changes after code review

Author: matthew-white

lib/components/form/list.vue

@@ -44,11 +44,14 @@ except according to the terms contained in the LICENSE file.
             <tr v-for="form of forms" :key="form.xmlFormId">
               <td>
                 <div>
-                  <router-link :to="`/forms/${form.xmlFormId}/submissions`" tag="span">
+                  <router-link :to="`/forms/${form.xmlFormId}/submissions`"
+                    class="form-list-form-name">
                     {{ form.name || form.xmlFormId }}
                   </router-link>
                 </div>
-                <div v-if="form.name != null">{{ form.xmlFormId }}</div>
+                <div v-if="form.name != null" class="form-list-form-id">
+                  {{ form.xmlFormId }}
+                </div>
                 <div>{{ submissions(form) }}</div>
               </td>
               <td>
@@ -105,8 +108,9 @@ export default {
         .catch(() => {});
     },
     submissions(form) {
+      const count = form.submissions.toLocaleString();
       const s = form.submissions !== 1 ? 's' : '';
-      return `${form.submissions} submission${s}`;
+      return `${count} submission${s}`;
     },
     updatedAt(form) {
       const updatedAt = form.updatedAt != null ? form.updatedAt : form.createdAt;
@@ -122,20 +126,17 @@ export default {
 
 <style lang="sass">
 #form-list-table {
-  td {
+  tbody td {
     vertical-align: middle;
 
-    &:first-child {
-      div:first-child {
-        span {
-          cursor: pointer;
-          font-size: 30px;
-        }
-      }
+    .form-list-form-name {
+      color: unset;
+      font-size: 30px;
+      text-decoration: unset;
+    }
 
-      div:nth-child(2):nth-last-child(2) {
-        font-size: 18px;
-      }
+    .form-list-form-id {
+      font-size: 18px;
     }
   }
 }

lib/components/form/new.vue

@@ -21,8 +21,8 @@ except according to the terms contained in the LICENSE file.
           <doc-link>tools available</doc-link> to help you design your form.
         </p>
       </div>
-      <div id="drop-zone" class="text-center" :style="dropZoneStyle"
-        @dragover.prevent="dragover" @dragleave="dragleave" @drop.prevent="drop">
+      <div id="drop-zone" :class="dropZoneClass" @dragover.prevent="dragover"
+        @dragleave="dragleave" @drop.prevent="drop">
         <div :style="pointerEvents">
           Drop a file here, or
           <input type="file" ref="input" class="hidden"
@@ -33,7 +33,7 @@ except according to the terms contained in the LICENSE file.
           </button>
           to upload.
         </div>
-        <div :style="pointerEvents">{{ filename }}</div>
+        <div id="form-new-filename" :style="pointerEvents">{{ filename }}</div>
       </div>
       <div class="modal-actions">
         <button type="button" class="btn btn-primary"
@@ -78,11 +78,12 @@ export default {
     droppable() {
       return !(this.reading || this.awaitingResponse);
     },
-    dropZoneStyle() {
-      const style = {};
-      if (this.isOverDropZone || !this.droppable) style.opacity = 0.65;
-      if (!this.droppable) style.cursor = 'not-allowed';
-      return style;
+    dropZoneClass() {
+      return {
+        'text-center': true,
+        droppable: this.droppable,
+        dragover: this.isOverDropZone
+      };
     },
     // Used to prevent child elements of #drop-zone from triggering dragleave
     // events upon hover. Does not work for IE9 or 10.
@@ -176,15 +177,24 @@ export default {
 
 #drop-zone {
   background-color: $color-input-background;
-  border: 1px dashed #dcdcdc;
+  border: 1px dashed $color-subpanel-border;
+
+  &.dragover {
+    opacity: 0.65;
+  }
+
+  &:not(.droppable) {
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
 
   div {
     margin-bottom: 5px;
     margin-top: 5px;
+  }
 
-    &:last-child {
-      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-    }
+  #form-new-filename {
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   }
 }
 </style>

lib/components/form/submissions.vue

@@ -75,9 +75,9 @@ export default {
       return `${this.form.xmlFormId}.zip`;
     },
     downloadButtonText() {
-      if (this.submissions.length === 1) return 'Download 1 record';
       const count = this.submissions.length.toLocaleString();
-      return `Download all ${count} records`;
+      const s = this.submissions.length !== 1 ? 's' : '';
+      return `Download all ${count} record${s}`;
     }
   },
   watch: {