styling

Author: Lenni009

package-lock.json

@@ -16,7 +16,7 @@
     "jszip": "^3.10.1",
     "pinia": "^2.1.6",
     "sass": "^1.64.1",
-    "simple-image-compressor": "^1.0.3",
+    "simple-image-compressor": "^1.2.0",
     "vue": "^3.4.19",
     "vue-i18n": "^9.8.0"
   },

package.json

@@ -35,13 +35,9 @@ async function editFileObj(fileObj: FileObj) {
 async function compressFiles() {
   isCompressing.value = true;
 
-  const promises = [];
-
   const uncompressedFiles = files.value.filter((fileObj: FileObj) => !fileObj.isCompressed);
 
-  for (const fileObj of uncompressedFiles) {
-    promises.push(editFileObj(fileObj));
-  }
+  const promises = uncompressedFiles.map(editFileObj);
 
   await Promise.all(promises);
   isCompressing.value = false;

src/App.vue

@@ -29,49 +29,53 @@ const computeFileSize = (size: number) =>
 
 <template>
   <div class="file-item">
-    <a
-      :href="fileData"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <img
-        :src="fileData"
-        alt="Image preview"
-        class="preview"
-        width="200"
-      />
-    </a>
-    <div>
-      <div>
-        <span class="field-title">{{ t('translation.name') }}</span> {{ fileObj.file.name }}
-      </div>
+    <div class="item-set">
+      <a
+        :href="fileData"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          :src="fileData"
+          alt="Image preview"
+          class="preview"
+          width="200"
+        />
+      </a>
       <div>
-        <span class="field-title">{{ t('translation.originalsize') }}</span> {{ computeFileSize(orgSize) }}MB
+        <div>
+          <span class="field-title">{{ t('translation.name') }}</span> {{ fileObj.file.name }}
+        </div>
+        <div>
+          <span class="field-title">{{ t('translation.originalsize') }}</span> {{ computeFileSize(orgSize) }}MB
+        </div>
+        <div v-if="compSize">
+          <span class="field-title">{{ t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
+        </div>
+        <div
+          v-if="fileObj.isTooLarge"
+          class="error"
+        >
+          <span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.filetoolarge') }}
+        </div>
       </div>
-      <div v-if="compSize">
-        <span class="field-title">{{ t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
-      </div>
-      <div
-        v-if="fileObj.isTooLarge"
-        class="error"
+    </div>
+    <div class="item-set">
+      <a
+        :class="{ secondary: !fileObj.isCompressed }"
+        :disabled="!fileObj.isCompressed || undefined"
+        :href="fileObj.isCompressed ? fileData : undefined"
+        role="button"
+        download
+        >{{ t('translation.download') }}</a
       >
-        <span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.filetoolarge') }}
-      </div>
+      <button
+        class="secondary delete-button"
+        @click="$emit('remove')"
+      >
+        ❌
+      </button>
     </div>
-    <a
-      :class="{ secondary: !fileObj.isCompressed }"
-      :disabled="!fileObj.isCompressed || undefined"
-      :href="fileObj.isCompressed ? fileData : undefined"
-      role="button"
-      download
-      >{{ t('translation.download') }}</a
-    >
-    <button
-      class="secondary delete-button"
-      @click="$emit('remove')"
-    >
-      ❌
-    </button>
   </div>
 </template>
 
@@ -85,9 +89,15 @@ const computeFileSize = (size: number) =>
   padding-inline: 1rem;
   align-items: center;
   width: 100%;
-  justify-content: center;
+  justify-content: space-between;
   flex-wrap: wrap;
 
+  .item-set {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
   .field-title {
     font-weight: bold;
   }

src/components/FileItem.vue

@@ -11,10 +11,11 @@ type Join<FirstType, SecondType> = FirstType extends string | number
 /**
  * Helper type that transforms an object tree into a union type of all possibles leaves.
  */
-type Leaves<ObjectType> = ObjectType extends Record<string, unknown>
-  ? // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    { [Key in keyof ObjectType]-?: Join<Key, Leaves<ObjectType[Key]>> }[keyof ObjectType]
-  : '';
+type Leaves<ObjectType> =
+  ObjectType extends Record<string, unknown>
+    ? // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      { [Key in keyof ObjectType]-?: Join<Key, Leaves<ObjectType[Key]>> }[keyof ObjectType]
+    : '';
 
 export type I18NLeaves = Leaves<(typeof messages)['Español']>;