SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: run formatter

Browse source
This commit is contained in:
Sebin Nyshkim 2023-09-04 20:06:56 +02:00
parent b5eae39f89
commit 35f5343149
20 changed files with 207 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/AttributionTable.vue
View file

@ -1,23 +1,23 @@
<script setup lang="ts">
import FAIcon from "@/assets/icons/FurAffinityIcon.vue";
import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
import FAIcon from '@/assets/icons/FurAffinityIcon.vue'
import TwitterIcon from '@/assets/icons/TwitterIcon.vue'
interface ArtistLink {
furaffinity?: string;
twitter?: string;
furaffinity?: string
twitter?: string
}
interface Attribution {
artwork: string;
artist: string;
links: ArtistLink;
artwork: string
artist: string
links: ArtistLink
}
interface Props {
attributions: Attribution[];
attributions: Attribution[]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
@ -25,19 +25,15 @@ defineProps<Props>();
<thead class="attribution-table__head">
<tr class="attribution-table__row">
<th class="attribution-table__heading artwork">
{{ $t("attributions.artwork.headings[0]") }}
{{ $t('attributions.artwork.headings[0]') }}
</th>
<th class="attribution-table__heading artist">
{{ $t("attributions.artwork.headings[1]") }}
{{ $t('attributions.artwork.headings[1]') }}
</th>
</tr>
</thead>
<tbody class="attribution-table__body">
<tr
class="attribution-table__row"
v-for="(attrib, idx) in attributions"
:key="idx"
>
<tr class="attribution-table__row" v-for="(attrib, idx) in attributions" :key="idx">
<td class="attribution-table__cell artwork">
<img :src="attrib.artwork" alt="Image attribution" />
</td>

31
src/components/ColorTable.vue
View file

@ -1,33 +1,30 @@
<script setup lang="ts">
interface ColorDict {
name: string;
value: string;
name: string
value: string
}
interface Props {
colors: ColorDict[];
colors: ColorDict[]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<table class="color-table">
<thead class="color-table__head">
<tr class="color-table__row">
<th class="color-table__heading name">{{ $t("data.colors.headings[0]") }}</th>
<th class="color-table__heading value">{{ $t("data.colors.headings[1]") }}</th>
<th class="color-table__heading color">{{ $t("data.colors.headings[2]") }}</th>
<th class="color-table__heading name">{{ $t('data.colors.headings[0]') }}</th>
<th class="color-table__heading value">{{ $t('data.colors.headings[1]') }}</th>
<th class="color-table__heading color">{{ $t('data.colors.headings[2]') }}</th>
</tr>
</thead>
<tbody class="color-table__body">
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
<td class="color-table__cell name">{{ $t(color.name) }}</td>
<td class="color-table__cell value">{{ color.value }}</td>
<td
class="color-table__cell color"
:style="{ 'background-color': color.value }"
></td>
<td class="color-table__cell color" :style="{ 'background-color': color.value }"></td>
</tr>
</tbody>
</table>
@ -47,8 +44,16 @@ defineProps<Props>();
}
&.value {
font-family: Menlo, JetBrains Mono, Source Code Pro, Monaco, Ubuntu Mono,
Roboto Mono, Cascadia Code, Consolas, monospace;
font-family:
Menlo,
JetBrains Mono,
Source Code Pro,
Monaco,
Ubuntu Mono,
Roboto Mono,
Cascadia Code,
Consolas,
monospace;
text-align: center;
}
}

12
src/components/DataTable.vue
View file

@ -1,21 +1,17 @@
<script setup lang="ts">
interface Props {
headings: string[];
data: string[][];
headings: string[]
data: string[][]
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<table class="data-table">
<thead class="data-table__head">
<tr class="data-table__row">
<th
class="data-table__heading"
v-for="(heading, idx) in headings"
:key="idx"
>
<th class="data-table__heading" v-for="(heading, idx) in headings" :key="idx">
{{ $t(heading) }}
</th>
</tr>

2
src/components/LanguageButton.vue
View file

@ -15,7 +15,7 @@
&:before {
position: absolute;
inset: 0.325rem 0 0.7rem 0;
content: "";
content: '';
background-color: var(--color-background);
border-radius: 0.3rem;
}

6
src/components/LinkButton.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts">
interface Props {
href?: string;
download?: boolean | any;
href?: string
download?: boolean | any
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>

26
src/components/ModalDialog.vue
View file

@ -1,27 +1,27 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref } from 'vue'
interface Props {
id: string;
id: string
}
defineProps<Props>();
defineProps<Props>()
const modal = ref<HTMLDialogElement>();
const modal = ref<HTMLDialogElement>()
const showModal = () => {
modal.value?.showModal();
document.body.inert = true;
document.body.classList.add("scroll-lock");
};
modal.value?.showModal()
document.body.inert = true
document.body.classList.add('scroll-lock')
}
const close = () => {
modal.value?.close();
document.body.inert = false;
document.body.classList.remove("scroll-lock");
};
modal.value?.close()
document.body.inert = false
document.body.classList.remove('scroll-lock')
}
defineExpose({ showModal, close });
defineExpose({ showModal, close })
</script>
<template>

8
src/components/NavigationItem.vue
View file

@ -1,12 +1,12 @@
<script setup lang="ts">
import { RouterLink } from "vue-router";
import { RouterLink } from 'vue-router'
interface Props {
icon: unknown | object;
href: string;
icon: unknown | object
href: string
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>

9
src/components/RefImage.vue
View file

@ -1,17 +1,14 @@
<script setup lang="ts">
interface Props {
dropshadow?: boolean;
dropshadow?: boolean
}
defineProps<Props>();
defineProps<Props>()
</script>
<template>
<figure class="figure">
<picture
class="figure__image"
:class="{ 'figure__image--dropshadow': dropshadow }"
>
<picture class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
<slot></slot>
</picture>

8
src/components/TimelineItem.vue
View file

@ -26,12 +26,11 @@
position: relative;
&:not(:last-child):before {
content: "";
content: '';
position: absolute;
inset: var(--timeline-stroke-position-odd);
height: var(--timeline-stroke-length);
border-left: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
}
&:nth-child(odd) {
@ -58,8 +57,7 @@
background-color: var(--timeline-circle-background);
margin: 0;
border: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%;
padding: var(--timeline-circle-padding);

3
src/components/TimelineList.vue
View file

@ -10,8 +10,7 @@
position: relative;
margin: 0 auto;
padding: 0 var(--container-spacing-right-safe) 0
var(--container-spacing-left-safe);
padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
list-style: none;

8
src/components/WelcomeHeader.vue
View file

@ -2,12 +2,8 @@
<header class="welcome">
<div class="welcome__image">
<picture>
<source
srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset"
/>
<source
srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset"
/>
<source srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset" />
<source srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset" />
<img src="@/assets/viktor-avatar.png?w=400&format=png" alt="Viktor Avatar" />
</picture>
</div>