Rework attachments list to look great everywhere

src/components/tasks/partials/attachments.vue

@@ -5,14 +5,6 @@
 				<icon icon="paperclip"/>
 			</span>
 			Attachments
-			<a
-				:disabled="attachmentService.loading"
-				@click="$refs.files.click()"
-				class="button is-primary is-outlined is-small noshadow"
-				v-if="editEnabled">
-				<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
-				Upload attachment
-			</a>
 		</h3>
 
 		<input
@@ -31,47 +23,47 @@
 			{{ attachmentService.uploadProgress }}%
 		</progress>
 
-		<table v-if="attachments.length > 0">
+		<div class="files" v-if="attachments.length > 0">
-			<tr>
+			<div :key="a.id" class="attachment" v-for="a in attachments">
-				<th>Name</th>
+				<div class="filename">{{ a.file.name }}</div>
-				<th>Size</th>
+				<div class="info">
-				<th>Type</th>
+					<p class="collapses">
-				<th>Date</th>
+						<span>
-				<th>Created&nbsp;By</th>
+							created <span v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</span> by
-				<th>Action</th>
+							<user :avatar-size="24" :user="a.createdBy" :is-inline="true"/>
-			</tr>
+						</span>
-			<tr :key="a.id" class="attachment" v-for="a in attachments">
+						<span>
-				<td>
+							{{ a.file.getHumanSize() }}
-					{{ a.file.name }}
+						</span>
-				</td>
+						<span v-if="a.file.mime">
-				<td>{{ a.file.getHumanSize() }}</td>
+							{{ a.file.mime }}
-				<td>{{ a.file.mime }}</td>
+						</span>
-				<td v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</td>
+					</p>
-				<td class="has-text-centered">
+					<p>
-					<user :avatar-size="30" :user="a.createdBy" :show-username="false" :is-inline="true"/>
-				</td>
-				<td>
-					<div class="buttons has-addons">
 						<a
 							@click="downloadAttachment(a)"
-							class="button is-primary noshadow"
 							v-tooltip="'Download this attachment'">
-							<span class="icon">
+							Download
-								<icon icon="cloud-download-alt"/>
-							</span>
 						</a>
 						<a
 							@click="() => {attachmentToDelete = a; showDeleteModal = true}"
-							class="button is-danger noshadow" v-if="editEnabled"
+							v-if="editEnabled"
 							v-tooltip="'Delete this attachment'">
-							<span class="icon">
+							Delete
-								<icon icon="trash-alt"/>
-							</span>
 						</a>
-					</div>
+					</p>
-				</td>
+				</div>
-			</tr>
+			</div>
-		</table>
+		</div>
+
+		<a
+			:disabled="attachmentService.loading"
+			@click="$refs.files.click()"
+			class="button is-primary mb-4"
+			v-if="editEnabled">
+			<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
+			Upload attachment
+		</a>
 
 		<!-- Dropzone -->
 		<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">

src/styles/components/attachments.scss

@@ -3,6 +3,56 @@
     display: none;
   }
 
+  .files {
+    margin-bottom: 1rem;
+
+    .attachment {
+      margin-bottom: .75rem;
+
+      .filename {
+        font-weight: bold;
+        margin-bottom: .25rem;
+      }
+
+      .info {
+        color: $grey;
+        font-size: .9rem;
+
+        p {
+          margin-bottom: 0;
+          display: flex;
+
+          > span:not(:last-child):after,
+          > a:not(:last-child):after {
+            content: '·';
+            padding: 0 .25rem;
+          }
+
+          @media screen and (max-width: $mobile) {
+            &.collapses {
+              flex-direction: column;
+
+              > span:not(:last-child):after,
+              > a:not(:last-child):after {
+                display: none;
+              }
+
+              .user .username {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: $tablet) {
+    .button {
+      width: 100%;
+    }
+  }
+
   .dropzone {
     position: fixed;
     background: rgba(250, 250, 250, 0.8);