diff --git a/package.json b/package.json index d5c0ec5..b3a3479 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,6 @@ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" }, "dependencies": { - "@fortawesome/fontawesome-svg-core": "^6.4.0", - "@fortawesome/free-solid-svg-icons": "^6.4.0", - "@fortawesome/vue-fontawesome": "^3.0.3", "ansi-to-html": "^0.7.2", "axios": "^1.4.0", "lodash": "^4.17.21", diff --git a/src/App.vue b/src/App.vue index 41c506f..7a8fc4c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,7 @@ <template> <h1>QMK API Keyboard Status</h1> <div v-if="loading" id="loading"> - <font-awesome-icon icon="atom" spin size="6x" fixed-width /> - <h2>Loading Data… {{ loadProgress }}%</h2> + <ProgressBar :progress="loadProgress" /> </div> <div v-else> <input v-model="filter" id="filter" placeholder="filter keyboards" /> @@ -16,7 +15,12 @@ <BuildList :list="passingKeyboards" :filter="filter" @show-error-pane="showErrors"> Builds Passing </BuildList> - <ErrorPane :visible="showErrorPane" :error-log="errorLog" :loading="errorLogLoading" @backdrop-clicked="hideErrors" /> + <ErrorPane + :visible="showErrorPane" + :error-log="errorLog" + :loading="errorLogLoading" + @backdrop-clicked="hideErrors" + /> </div> </template> @@ -28,6 +32,7 @@ import reduce from 'lodash/reduce' import BuildList from '@/components/BuildList.vue' import ErrorPane from '@/components/ErrorPane.vue' +import ProgressBar from '@/components/ProgressBar.vue' let buildLog = {} @@ -89,7 +94,7 @@ async function loadBuildLog(keyboard) { buildLog[keyboard].message = `ERROR: ${e.message}` } - errorLogLoading.value = false; + errorLogLoading.value = false errorLog.value = buildLog[keyboard].message } @@ -176,6 +181,10 @@ body { #loading { margin-top: 1em; + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; } @media (max-width: 640px) { diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue new file mode 100644 index 0000000..8be1d35 --- /dev/null +++ b/src/components/ProgressBar.vue @@ -0,0 +1,48 @@ +<template> + <div class="progress-bar"> + <div class="filled" :style="style"></div> + </div> +</template> + +<script setup> +import { computed } from 'vue' + +const props = defineProps({ + progress: { + type: Number, + required: true + } +}) + +const style = computed(() => { + return { + width: `${props.progress}%` + } +}) +</script> + +<style scoped> +.progress-bar { + height: 8px; + width: 400px; + border: 2px solid #2c3e50; + padding: 2px; + border-radius: 16px; +} + +.progress-bar .filled { + height: 8px; + background-color: #2c3e50; + transition: width 0.2s; + border-radius: 4px; +} + +@media (prefers-color-scheme: dark) { + .progress-bar { + border-color: #ced9e4; + } + .progress-bar .filled { + background-color: #ced9e4; + } +} +</style> diff --git a/src/main.js b/src/main.js index 063d8ba..43d27f6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,12 +1,5 @@ import { createApp } from 'vue' import App from './App.vue' -import { library } from '@fortawesome/fontawesome-svg-core' -import { faAtom } from '@fortawesome/free-solid-svg-icons' -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' - -library.add(faAtom) - const app = createApp(App) -app.component('font-awesome-icon', FontAwesomeIcon) app.mount('#app') diff --git a/yarn.lock b/yarn.lock index 0c51d25..5000e4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -149,30 +149,6 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b" integrity sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng== -"@fortawesome/fontawesome-common-types@6.4.0": - version "6.4.0" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b" - integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ== - -"@fortawesome/fontawesome-svg-core@^6.4.0": - version "6.4.0" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21" - integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw== - dependencies: - "@fortawesome/fontawesome-common-types" "6.4.0" - -"@fortawesome/free-solid-svg-icons@^6.4.0": - version "6.4.0" - resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119" - integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ== - dependencies: - "@fortawesome/fontawesome-common-types" "6.4.0" - -"@fortawesome/vue-fontawesome@^3.0.3": - version "3.0.3" - resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz#633e2998d11f7d4ed41f0d5ea461a22ec9b9d034" - integrity sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA== - "@humanwhocodes/config-array@^0.11.8": version "0.11.8" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"