mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-24 00:36:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(lint): linter auto fix

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-22 23:31:40 +02:00
parent 8e29a97404
commit 086d31eab5
No known key found for this signature in database
GPG key ID: DBD997E935996158
54 changed files with 1122 additions and 1503 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/tools/device-information/device-information.vue
View file

@ -1,24 +1,8 @@
<template>
<n-card
v-for="{name, information} in sections"
:key="name"
:title="name"
style="margin-bottom: 15px;"
>
<n-grid
cols="1 400:2"
x-gap="12"
y-gap="12"
>
<n-gi
v-for="{label, value} in information"
:key="label"
class="information"
>
<n-card
:bordered="false"
embedded
>
<n-card v-for="{ name, information } in sections" :key="name" :title="name" style="margin-bottom: 15px">
<n-grid cols="1 400:2" x-gap="12" y-gap="12">
<n-gi v-for="{ label, value } in information" :key="label" class="information">
<n-card :bordered="false" embedded>
<div class="label">
{{ label }}
</div>
@ -35,10 +19,10 @@
</template>
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import { useWindowSize } from '@vueuse/core';
import { computed } from 'vue';
const { width, height } = useWindowSize()
const { width, height } = useWindowSize();
const sections = [
{
@ -46,60 +30,57 @@ const sections = [
information: [
{
label: 'Screen size',
value: computed(() => `${window.screen.availWidth} x ${window.screen.availHeight}`)
value: computed(() => `${window.screen.availWidth} x ${window.screen.availHeight}`),
},
{
label: 'Orientation',
value: computed(() => window.screen.orientation.type)
value: computed(() => window.screen.orientation.type),
},
{
label: 'Orientation angle',
value: computed(() => `${window.screen.orientation.angle}°`)
value: computed(() => `${window.screen.orientation.angle}°`),
},
{
label: 'Color depth',
value: computed(() => `${window.screen.colorDepth} bits`)
value: computed(() => `${window.screen.colorDepth} bits`),
},
{
label: 'Pixel ratio',
value: computed(() => `${window.devicePixelRatio} dppx`)
value: computed(() => `${window.devicePixelRatio} dppx`),
},
{
label: 'Window size',
value: computed(() => `${width.value} x ${height.value}`)
}
]
value: computed(() => `${width.value} x ${height.value}`),
},
],
},
{
name: 'Device',
information: [
{
label: 'Browser vendor',
value: computed(() => navigator.vendor)
value: computed(() => navigator.vendor),
},
{
{
label: 'Languages',
value: computed(() => navigator.languages.join(', '))
value: computed(() => navigator.languages.join(', ')),
},
{
{
label: 'Plateform',
value: computed(() => navigator.platform)
value: computed(() => navigator.platform),
},
{
label: 'User agent',
value: computed(() => navigator.userAgent)
}
]
}
]
value: computed(() => navigator.userAgent),
},
],
},
];
</script>
<style lang="less" scoped>
.information {
.label {
.label {
font-size: 14px;
opacity: 0.8;
line-height: 1;
@ -111,4 +92,4 @@ const sections = [
line-height: 1;
}
}
</style>
</style>