Skip to content

Commit 7e25f2f

Browse files
Lenni009Lenni009
committed
styling adjustments, best practices
1 parent d8d564b commit 7e25f2f

File tree

8 files changed

+68
-88
lines changed

8 files changed

+68
-88
lines changed

‎package-lock.json

Lines changed: 1 addition & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
2-
import ThemeSwitch from './components/ThemeSwitch.vue';
3-
import Nav from './components/Nav.vue';
2+
import NavBar from './components/NavBar.vue';
43
import FileUpload from './components/FileUpload.vue';
54
import FileItem from './components/FileItem.vue';
65
import { useFileDataStore } from './stores/fileData';
@@ -9,6 +8,9 @@ import type { FileObj } from './types/file';
98
import { computed, ref, watch } from 'vue';
109
import { useImageCompression } from './composables/useImageCompression';
1110
import { useZipCompression } from './composables/useZipCompression';
11+
import { useI18n } from './hooks/useI18n';
12+
13+
const { t } = useI18n();
1214
1315
const fileDataStore = useFileDataStore();
1416
const { files } = storeToRefs(fileDataStore);
@@ -60,34 +62,33 @@ watch(anyUncompressed, async (newVal) => {
6062

6163
<template>
6264
<header>
63-
<Nav />
64-
<ThemeSwitch />
65-
<h1 class="title">{{ $t('translation.header') }}</h1>
65+
<NavBar />
66+
<h1 class="title">{{ t('translation.header') }}</h1>
6667
</header>
6768

6869
<main>
6970
<div class="explanation-wrapper">
70-
<p class="explanation">{{ $t('translation.subtitle') }}</p>
71+
<p class="explanation">{{ t('translation.subtitle') }}</p>
7172
<a
7273
href="https://nomanssky.fandom.com/wiki/Special:Upload?multiple=true"
7374
role="button"
7475
target="_blank"
7576
rel="noopener noreferrer"
76-
>{{ $t('translation.buttonwiki') }}</a
77+
>{{ t('translation.buttonwiki') }}</a
7778
>
7879
</div>
79-
<h2 class="subheading">{{ $t('translation.input') }}</h2>
80+
<h2 class="subheading">{{ t('translation.input') }}</h2>
8081
<FileUpload />
8182

82-
<h2 class="subheading">{{ $t('translation.filelist') }}</h2>
83+
<h2 class="subheading">{{ t('translation.filelist') }}</h2>
8384
<div class="buttons">
8485
<button
8586
:aria-busy="isCompressing"
8687
:class="{ 'is-success': files.length && !anyUncompressed }"
8788
:disabled="!files.length || !anyUncompressed"
8889
@click="compressFiles"
8990
>
90-
{{ files.length && !anyUncompressed ? $t('translation.allcompressed') : $t('translation.compress') }}
91+
{{ files.length && !anyUncompressed ? t('translation.allcompressed') : t('translation.compress') }}
9192
</button>
9293
<a
9394
:aria-busy="isZipCompressing"
@@ -96,21 +97,21 @@ watch(anyUncompressed, async (newVal) => {
9697
role="button"
9798
download
9899
>
99-
{{ $t('translation.downloadzip') }}
100+
{{ t('translation.downloadzip') }}
100101
</a>
101102
<button
102103
:disabled="!files.length"
103104
class="secondary"
104105
@click="files = []"
105106
>
106-
{{ $t('translation.clearlist') }}
107+
{{ t('translation.clearlist') }}
107108
</button>
108109
</div>
109110
<div class="file-list">
110111
<FileItem
111112
v-for="file in files"
112-
:key="file.id"
113113
:file-obj="file"
114+
:key="file.id"
114115
@remove="removeItem(file)"
115116
/>
116117
</div>

‎src/components/FileItem.vue

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
import { computed, ref, watchEffect } from 'vue';
33
import type { FileObj } from '../types/file';
4+
import { useI18n } from '../hooks/useI18n';
5+
6+
const { t } = useI18n();
47
58
const props = defineProps<{
69
fileObj: FileObj;
@@ -33,26 +36,26 @@ const computeFileSize = (size: number) =>
3336
>
3437
<img
3538
:src="fileData"
36-
class="preview"
3739
alt="Image preview"
40+
class="preview"
3841
width="200"
3942
/>
4043
</a>
4144
<div>
4245
<div>
43-
<span class="field-title">{{ $t('translation.name') }}</span> {{ fileObj.file.name }}
46+
<span class="field-title">{{ t('translation.name') }}</span> {{ fileObj.file.name }}
4447
</div>
4548
<div>
46-
<span class="field-title">{{ $t('translation.originalsize') }}</span> {{ computeFileSize(orgSize) }}MB
49+
<span class="field-title">{{ t('translation.originalsize') }}</span> {{ computeFileSize(orgSize) }}MB
4750
</div>
4851
<div v-if="compSize">
49-
<span class="field-title">{{ $t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
52+
<span class="field-title">{{ t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
5053
</div>
5154
<div
5255
v-if="fileObj.isTooLarge"
5356
class="error"
5457
>
55-
<span class="field-title">{{ $t('translation.error') }}</span> {{ $t('translation.filetoolarge') }}
58+
<span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.filetoolarge') }}
5659
</div>
5760
</div>
5861
<a
@@ -61,7 +64,7 @@ const computeFileSize = (size: number) =>
6164
:href="fileObj.isCompressed ? fileData : undefined"
6265
role="button"
6366
download
64-
>{{ $t('translation.download') }}</a
67+
>{{ t('translation.download') }}</a
6568
>
6669
<button
6770
class="secondary delete-button"

‎src/components/FileUpload.vue

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import { ref } from 'vue';
33
import { useFileDataStore } from '../stores/fileData';
44
import { storeToRefs } from 'pinia';
55
import type { FileObj } from '../types/file';
6+
import { useI18n } from '../hooks/useI18n';
67
78
const dragActive = ref(false);
89
10+
const { t } = useI18n();
11+
912
let id = 0;
1013
1114
const fileDataStore = useFileDataStore();
@@ -39,19 +42,19 @@ function addFiles(uploadedFiles: FileList) {
3942

4043
<template>
4144
<label
42-
for="fileUpload"
43-
class="drop-container"
4445
:class="{ 'drag-active': dragActive }"
46+
class="drop-container"
47+
for="fileUpload"
4548
@dragenter="dragActive = true"
4649
@dragleave="dragActive = false"
47-
@drop.prevent="dropFile"
4850
@dragover.prevent
51+
@drop.prevent="dropFile"
4952
>
50-
<span class="drop-title">{{ $t('translation.dropfiles') }}</span>
53+
<span class="drop-title">{{ t('translation.dropfiles') }}</span>
5154
<input
52-
type="file"
5355
id="fileUpload"
5456
multiple
57+
type="file"
5558
@change="uploadFile"
5659
/>
5760
</label>

‎src/components/Nav.vue

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/components/NavBar.vue

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,43 @@
11
<script setup lang="ts">
2+
import { watch, ref } from 'vue';
3+
import { useI18n } from '../hooks/useI18n';
24
import ThemeSwitch from './ThemeSwitch.vue';
5+
6+
const { t, locale } = useI18n();
7+
8+
type Locales = typeof locale.value;
9+
10+
const selectedLocale = ref<Locales>(locale.value);
11+
12+
watch(selectedLocale, (newVal) => {
13+
locale.value = newVal;
14+
localStorage.setItem('lang', newVal);
15+
});
316
</script>
417

518
<template>
619
<nav>
720
<ul>
821
<li>
9-
<a href="..">&larr; View other pages</a>
22+
<a
23+
href=".."
24+
:title="t('translation.viewother')"
25+
>← {{ t('translation.viewother') }}</a
26+
>
1027
</li>
1128
</ul>
1229
<ul>
30+
<li>
31+
<select v-model="selectedLocale">
32+
<option
33+
v-for="locale in $i18n.availableLocales"
34+
:key="`locale-${locale}`"
35+
:value="locale"
36+
>
37+
{{ locale }}
38+
</option>
39+
</select>
40+
</li>
1341
<li>
1442
<ThemeSwitch />
1543
</li>

‎src/components/ThemeSwitch.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<script setup lang="ts">
2+
import { useI18n } from '../hooks/useI18n';
3+
4+
const { t } = useI18n();
5+
26
// determine preferred theme and update the html element with the respective tag
37
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
48
switchTheme(prefersDark ? 'dark' : 'light');
59
610
function switchTheme(theme: string | undefined = undefined) {
711
const currentTheme = document.documentElement.dataset.theme;
8-
const computedNewTheme = currentTheme == 'dark' ? 'light' : 'dark';
12+
const computedNewTheme = currentTheme === 'dark' ? 'light' : 'dark';
913
const newTheme = theme ?? computedNewTheme;
1014
document.documentElement.dataset.theme = newTheme;
1115
}
@@ -14,13 +18,12 @@ function switchTheme(theme: string | undefined = undefined) {
1418
<template>
1519
<div style="text-align: right">
1620
<button
17-
role="button"
1821
class="themeswitcher"
1922
id="themeSwitch"
20-
@click="switchTheme()"
2123
style="width: auto"
24+
@click="switchTheme()"
2225
>
23-
{{ $t('translation.switchtheme') }}
26+
{{ t('translation.switchtheme') }}
2427
</button>
2528
</div>
2629
</template>

‎tsconfig.app.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
"strict": true,
1212
"resolveJsonModule": true,
1313
"isolatedModules": true,
14-
"esModuleInterop": true,
1514
"noEmit": true,
1615
"noUnusedLocals": true,
1716
"noUnusedParameters": true,

0 commit comments

Comments
 (0)