Use a table for sample component

CentreForDigitalHumanities · Dec 10, 2024 · c0a22c4 · c0a22c4
1 parent 34ad8b1
commit c0a22c4
Showing 1 changed file with 42 additions and 34 deletions.
diff --git a/frontend/src/app/corpus-definitions/form/upload-sample/upload-sample.component.html b/frontend/src/app/corpus-definitions/form/upload-sample/upload-sample.component.html
@@ -2,12 +2,21 @@ <h1 class="title">Upload a sample of your data</h1>
 <p class="subtitle">Determines sensible default values for the fields of your corpus</p>
 
 <div *ngIf="fileInfo$|async as fileInfo" class="block">
-    Found the following columns in your sample file:
-    <ul>
-        <li *ngFor="let field of fileInfo|keyvalue">
-            <strong>{{field.key}}</strong> {{field.value}}
-        </li>
-    </ul>
+    <table class="table is-fullwidth">
+        <caption style="text-align: left">Found the following columns in your sample file:</caption>
+        <thead>
+            <tr>
+                <th>Column</th>
+                <th>Data type</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let field of fileInfo|keyvalue">
+                <td>{{field.key}}</td>
+                <td>{{field.value}}</td>
+            </tr>
+        </tbody>
+    </table>
 </div>
 
 <ng-template #resetMenu>
@@ -44,37 +53,36 @@ <h1 class="title">Upload a sample of your data</h1>
 
     <div class="field">
         <div class="file has-name">
-    <label class="file-label">
-        <input class="file-input" type="file" name="definition-upload"
-            accept=".csv,.tsv,text/csv,text/tab-separated-values " (input)="onUpload($event)" />
-        <span class="file-cta">
-            <span class="file-icon" aria-hidden="true">
-                <fa-icon [icon]="actionIcons.upload"></fa-icon>
-            </span>
-            <span class="file-label">Upload CSV file...</span>
-        </span>
-        <span class="file-name" *ngIf="file$ | async as file">
-            {{file.name}}
-        </span>
-    </label>
-</div>
-</div>
-
-<div *ngIf="fileInfo$|async" class="field">
-    <p class="control">
-        <button class="button is-primary">Next</button>
-    </p>
-</div>
+            <label class="file-label">
+                <input class="file-input" type="file" name="definition-upload"
+                    accept=".csv,.tsv,text/csv,text/tab-separated-values " (input)="onUpload($event)" />
+                <span class="file-cta">
+                    <span class="file-icon" aria-hidden="true">
+                        <fa-icon [icon]="actionIcons.upload"></fa-icon>
+                    </span>
+                    <span class="file-label">Upload CSV file...</span>
+                </span>
+                <span class="file-name" *ngIf="file$ | async as file">
+                    {{file.name}}
+                </span>
+            </label>
+            </div>
+            </div>
 
-<div class="message is-danger" *ngIf="error$ | async as error">
-    <div class="message-header">
-        Invalid file
+    <div *ngIf="fileInfo$|async" class="field">
+        <p class="control">
+            <button class="button is-primary">Next</button>
+        </p>
     </div>
-    <div class="message-body">
-        An error occurred when reading the file: {{error.message}}
+
+    <div class="message is-danger" *ngIf="error$ | async as error">
+        <div class="message-header">
+            Invalid file
+        </div>
+        <div class="message-body">
+            An error occurred when reading the file: {{error.message}}
+        </div>
     </div>
-</div>
 
 
 </form>
-