From f7ae8552213722c823d136fccf5275bf0d1a1262 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Thu, 23 Mar 2023 13:26:08 +0100 Subject: [PATCH 01/54] refactor: adjust timeline sizings for mobile, cleanup component styling --- src/components/TimelineItem.vue | 41 +++++++++++++++------------------ src/components/TimelineList.vue | 2 +- src/scss/base.scss | 31 +++++++++++++++++++++---- 3 files changed, 47 insertions(+), 27 deletions(-) diff --git a/src/components/TimelineItem.vue b/src/components/TimelineItem.vue index 101fcaf..b0266a3 100644 --- a/src/components/TimelineItem.vue +++ b/src/components/TimelineItem.vue @@ -28,34 +28,21 @@ &:not(:last-child):before { content: ""; position: absolute; - top: var(--timeline-stroke-position-top); - left: var(--timeline-stroke-position-horizontal); + inset: var(--timeline-stroke-position-odd); height: var(--timeline-stroke-length); border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color); } - @media (min-width: 64em) { - &:nth-child(odd) { - margin: var(--timeline-item-margin-odd); - } + &:nth-child(odd) { + margin: var(--timeline-item-margin-odd); + } - &:nth-child(even) { - margin: var(--timeline-item-margin-even); + &:nth-child(even) { + margin: var(--timeline-item-margin-even); - &:before { - left: auto; - right: var(--timeline-stroke-position-horizontal); - } - - .timeline-item__icon { - order: 1; - } - - .timeline-item__content { - text-align: right; - margin: 0 1rem 0 0; - } + &:before { + inset: var(--timeline-stroke-position-even); } } @@ -82,9 +69,19 @@ } } + &:nth-child(even) &__icon { + order: var(--timeline-item-flex-order); + } + &__content { flex: 1 0 0; - margin: 0 0 0 1rem; + margin: 0; + padding: var(--timeline-item-content-padding-odd); + } + + &:nth-child(even) &__content { + text-align: var(--timeline-item-text-align-even); + padding: var(--timeline-item-content-padding-even); } &__headline { diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue index 4be4fac..8b21a1d 100644 --- a/src/components/TimelineList.vue +++ b/src/components/TimelineList.vue @@ -6,7 +6,7 @@ diff --git a/src/components/SiteNavigation.vue b/src/components/SiteNavigation.vue index 890ac5d..a8a894e 100644 --- a/src/components/SiteNavigation.vue +++ b/src/components/SiteNavigation.vue @@ -6,20 +6,7 @@ import { RouterLink } from "vue-router"; @@ -51,68 +38,5 @@ import { RouterLink } from "vue-router"; width: 100%; height: 100%; } - - &__link { - flex: var(--navigation-link-flex); - display: flex; - flex-flow: row nowrap; - justify-content: var(--navigation-link-justify); - align-items: center; - - height: var(--navigation-link-height); - - padding: var(--navigation-link-padding); - - color: var(--color-router-link); - box-shadow: none; - - &:hover { - box-shadow: var(--navigation-link-box-shadow); - - svg { - fill: var(--color-router-link-hover); - } - } - - &:hover &-text { - color: var(--color-router-link-hover); - } - - &:last-child { - margin: var(--navigation-link-last-child-margin); - } - - > * { - flex: 1 0 0; - } - - &.router-link-exact-active { - color: var(--color-router-link-hover); - background-color: var(--color-router-link); - - &:hover { - color: var(--color-router-link-hover); - } - - svg { - fill: var(--color-router-link-hover); - } - } - } - - &__link-icon { - width: var(--navigation-link-icon-size); - min-width: var(--navigation-link-icon-size); - max-width: var(--navigation-link-icon-size); - margin: 0 var(--navigation-link-icon-spacing); - fill: var(--color-router-link); - } - - &__link-text { - display: var(--navigation-link-display); - font-size: var(--navigation-link-text-font-size); - margin: 0 0 0 1rem; - white-space: nowrap; - } } From eefc4cc8d47294fec30662abe8b64cd7f9110b42 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Sat, 25 Mar 2023 02:09:39 +0100 Subject: [PATCH 12/54] feat: replace hard-coded content with i18n translation keys --- src/components/AttributionTable.vue | 8 +- src/components/ColorTable.vue | 8 +- src/components/DataTable.vue | 4 +- src/router/index.ts | 10 +- src/views/AnatomyView.vue | 64 +++--------- src/views/AttributionsView.vue | 26 ++--- src/views/CareerPathView.vue | 146 ++++------------------------ src/views/GeneralView.vue | 77 +++------------ src/views/HomeView.vue | 9 +- 9 files changed, 80 insertions(+), 272 deletions(-) diff --git a/src/components/AttributionTable.vue b/src/components/AttributionTable.vue index 263d94b..3b16afc 100644 --- a/src/components/AttributionTable.vue +++ b/src/components/AttributionTable.vue @@ -24,8 +24,12 @@ defineProps(); - - + + diff --git a/src/components/ColorTable.vue b/src/components/ColorTable.vue index dd91bc9..76523e6 100644 --- a/src/components/ColorTable.vue +++ b/src/components/ColorTable.vue @@ -15,14 +15,14 @@ defineProps();
ArtworkArtist + {{ $t("attributions.artwork.headings[0]") }} + + {{ $t("attributions.artwork.headings[1]") }} +
- - - + + + - + diff --git a/src/router/index.ts b/src/router/index.ts index b2e0402..bca3c83 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -18,7 +18,7 @@ const router = createRouter({ name: "home", component: HomeView, meta: { - title: "Home", + title: "nav.home", icon: HomeIcon, }, }, @@ -27,7 +27,7 @@ const router = createRouter({ name: "general", component: () => import("@/views/GeneralView.vue"), meta: { - title: "General", + title: "nav.general", icon: IdCardIcon, }, }, @@ -36,7 +36,7 @@ const router = createRouter({ name: "anatomy", component: () => import("@/views/AnatomyView.vue"), meta: { - title: "Anatomy", + title: "nav.anatomy", icon: PaletteIcon, }, }, @@ -45,7 +45,7 @@ const router = createRouter({ name: "career-path", component: () => import("@/views/CareerPathView.vue"), meta: { - title: "Career Path", + title: "nav.careerPath", icon: BriefcaseIcon, }, }, @@ -54,7 +54,7 @@ const router = createRouter({ name: "attributions", component: () => import("@/views/AttributionsView.vue"), meta: { - title: "Attributions", + title: "nav.attributions", icon: CircleInfoIcon, }, }, diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue index bea5961..142ccfb 100644 --- a/src/views/AnatomyView.vue +++ b/src/views/AnatomyView.vue @@ -3,20 +3,20 @@ import RefImage from "@/components/RefImage.vue"; import ColorTable from "@/components/ColorTable.vue"; const colors = [ - { name: "Front", value: "#e7c7b1" }, - { name: "Arms, legs", value: "#493428" }, - { name: "Back Main", value: "#422322" }, - { name: "Back Spine", value: "#341c1c" }, - { name: "Highlight scales, tissue", value: "#6bb9db" }, - { name: "Spikes, tail club", value: "#f8ebdd" }, - { name: "Eyes primary", value: "#a7eef1" }, - { name: "Eyes secondary", value: "#6dabd1" }, + { name: "data.colors.front", value: "#e7c7b1" }, + { name: "data.colors.limbs", value: "#493428" }, + { name: "data.colors.back", value: "#422322" }, + { name: "data.colors.spine", value: "#341c1c" }, + { name: "data.colors.tissue", value: "#6bb9db" }, + { name: "data.colors.spikes", value: "#f8ebdd" }, + { name: "data.colors.eyesPrimary", value: "#a7eef1" }, + { name: "data.colors.eyesSecondary", value: "#6dabd1" }, ];
-

- Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly - bicolored, with several shades of brown. -

- -

- His forehead, nose, chest, belly and crotch are of light desert sand - colors that run through the underside of his tail. -

- -

- His cheeks, shoulders, back and thighs, in contrast, stand out with a rich - walnut brown, which is also found on the sides of his tail. From the back - of his head, down his spine and across the top of his tail is a continuous - strip of deep dark cedar brown. Arms and legs are distinguished by a light - earthy brown. -

+

{{ p }}

@@ -161,36 +145,18 @@ const colors = [ (min-width: 50em) 590px, (min-width: 27em) 530px, 430px" - alt="Viktor frontal shot by sabertoofs" + :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`" loading="lazy" />
-

- His entire body is speckled with scattered aquamarine spots, which come in - pairs of one large and one small spot. The only exceptions are the spots - on his cheeks and behind his lower cheek horns, which come in threes and - his the top side of his snout, which sports a big single spot. Mouth, - tongue, nostrils and any other tissue of his body also feature this color. -

- -

His eyes shine with a mixture of light sea green and electric blue.

- -

- Horns and claws are of a typical bone white. Starting with the double pair - of horns on his head, a parallel line of horns continues down his back, - with additional horns adorning his shoulders and thighs. His tail is also - armed with horns on both sides along its entire length. At the tip of the - tail is a club-like ossification that he can use for fending off foes. -

- -

He owes his strong, stocky physique to years of hard physical labor.

+

{{ p }}

diff --git a/src/views/AttributionsView.vue b/src/views/AttributionsView.vue index 5be1299..812f146 100644 --- a/src/views/AttributionsView.vue +++ b/src/views/AttributionsView.vue @@ -26,23 +26,23 @@ const attributions = [
Body partValueColor{{ $t("data.colors.headings[0]") }}{{ $t("data.colors.headings[1]") }}{{ $t("data.colors.headings[2]") }}
{{ color.name }}{{ $t(color.name) }} {{ color.value }} (); v-for="(heading, idx) in headings" :key="idx" > - {{ heading }} + {{ $t(heading) }}
- {{ cell }} + {{ $t(cell) }}