mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-09 07:26:01 -04:00
(design) fix mounted error due to <Page> being a fragment
convert to composition API with TypeScript
This commit is contained in:
Valentyne Stigloher
parent
8317692e68
commit
9570b6e01b
19
components/PropertyDisplay.vue
Normal file
19
components/PropertyDisplay.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
property: string;
|
||||
format: (value: string) => string;
|
||||
}>();
|
||||
|
||||
const text = useTemplateRef<HTMLSpanElement>('text');
|
||||
|
||||
onMounted(() => {
|
||||
if (!text.value) {
|
||||
return;
|
||||
}
|
||||
text.value.innerHTML = props.format(getComputedStyle(text.value.parentElement!).getPropertyValue(props.property));
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span ref="text">…</span>
|
||||
</template>
|
||||
241
pages/design.vue
241
pages/design.vue
@ -1,3 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import { useNuxtApp } from 'nuxt/app';
|
||||
import PropertyDisplay from '~/components/PropertyDisplay.vue';
|
||||
import useSimpleHead from '../composables/useSimpleHead.ts';
|
||||
|
||||
const fonts = [
|
||||
{
|
||||
label: 'Headings',
|
||||
class: 'h5',
|
||||
},
|
||||
{
|
||||
label: 'Text',
|
||||
class: '',
|
||||
},
|
||||
];
|
||||
|
||||
const formatFont = (value: string): string => value.split(',')[0].replaceAll('"', '');
|
||||
|
||||
const graphColours = ['#c71585', '#8b0f7a', '#15c79c'];
|
||||
const accentColours = [
|
||||
{
|
||||
name: 'primary',
|
||||
colour: '#c71585',
|
||||
},
|
||||
{
|
||||
name: 'secondary',
|
||||
colour: '#6c757d',
|
||||
// darkText: true
|
||||
},
|
||||
{
|
||||
name: 'success',
|
||||
colour: '#198754',
|
||||
},
|
||||
{
|
||||
name: 'info',
|
||||
colour: '#0dcaf0',
|
||||
darkText: true,
|
||||
},
|
||||
{
|
||||
name: 'warning',
|
||||
colour: '#ffc107',
|
||||
darkText: true,
|
||||
},
|
||||
{
|
||||
name: 'danger',
|
||||
colour: '#dc3545',
|
||||
// darkText: true
|
||||
},
|
||||
{
|
||||
name: 'dark',
|
||||
colour: '#212529',
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
colour: '#f8f9fa',
|
||||
darkText: true,
|
||||
},
|
||||
];
|
||||
|
||||
interface Image {
|
||||
label: string;
|
||||
links: string | Record<string, string>;
|
||||
warning?: string;
|
||||
}
|
||||
|
||||
const images: Image[] = [
|
||||
{
|
||||
label: 'Project logo',
|
||||
links: {
|
||||
'/logo/logo-primary.svg': 'Magenta',
|
||||
'/logo/logo.svg': 'Black',
|
||||
'/logo/logo-light.svg': 'White',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Team logo',
|
||||
links: {
|
||||
'/img-local/logo/logo-full-path.svg': 'SVG',
|
||||
'/img-local/logo/logo-full.png': 'PNG',
|
||||
},
|
||||
warning: 'This logo might be different in other language versions.',
|
||||
},
|
||||
{
|
||||
label: 'Background',
|
||||
links: '/bg.png',
|
||||
},
|
||||
];
|
||||
|
||||
const { $translator: translator } = useNuxtApp();
|
||||
useSimpleHead({
|
||||
title: translator.translate('contact.contribute.design.header'),
|
||||
}, translator);
|
||||
|
||||
const getLinks = (rawLinks: string | Record<string, string>) => {
|
||||
if (typeof rawLinks === 'string') {
|
||||
return Object.fromEntries([[rawLinks, translator.translate('crud.download')]]);
|
||||
}
|
||||
return rawLinks;
|
||||
};
|
||||
|
||||
const getPrimaryUri = (links: string | Record<string, string>) => {
|
||||
links = getLinks(links);
|
||||
return Object.entries(links)[0][0];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<h2>
|
||||
@ -6,18 +112,15 @@
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
If you're a contributor creating some kind of visual content for the project, here's a bunch of information and assets that you might find useful:
|
||||
If you're a contributor creating some kind of visual content for the project,
|
||||
here's a bunch of information and assets that you might find useful:
|
||||
</p>
|
||||
|
||||
<h3>Fonts</h3>
|
||||
<ul>
|
||||
<li class="h5">
|
||||
<strong>Headings:</strong>
|
||||
<span class="font"></span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Text:</strong>
|
||||
<span class="font"></span>
|
||||
<li v-for="font in fonts" :key="font.label" :class="font.class">
|
||||
<strong>{{ font.label }}:</strong>
|
||||
<PropertyDisplay property="font-family" :format="formatFont" />
|
||||
</li>
|
||||
<li class="small">
|
||||
⚠️
|
||||
@ -46,7 +149,8 @@
|
||||
<div class="d-flex border rounded mb-3">
|
||||
<div
|
||||
v-for="colour in graphColours"
|
||||
:class="['text-center', 'p-2', 'flex-grow-1', 'text-white']"
|
||||
:key="colour"
|
||||
class="text-center p-2 flex-grow-1 text-white"
|
||||
:style="`background-color: ${colour}`"
|
||||
>
|
||||
{{ colour }}
|
||||
@ -55,7 +159,8 @@
|
||||
<div class="d-flex border rounded mb-3">
|
||||
<div
|
||||
v-for="colour in accentColours"
|
||||
:class="['text-center', 'p-2', 'flex-grow-1']"
|
||||
:key="colour.name"
|
||||
class="text-center p-2 flex-grow-1"
|
||||
:style="`background-color: ${colour.colour}; color: ${colour.darkText ? '#212529' : '#f8f9fa'}`"
|
||||
>
|
||||
<strong>{{ colour.name }}</strong>
|
||||
@ -66,15 +171,21 @@
|
||||
|
||||
<h3>Images</h3>
|
||||
<div class="row">
|
||||
<div v-for="{ label, links, warning } in images" class="col-6 col-lg-4 mb-3">
|
||||
<div v-for="{ label, links, warning } in images" :key="label" class="col-6 col-lg-4 mb-3">
|
||||
<div class="card">
|
||||
<img :src="getPrimaryUri(links)" class="w-100 card-img-top" style="background-color: #f8f9fa;" :alt="label">
|
||||
<img
|
||||
:src="getPrimaryUri(links)"
|
||||
class="w-100 card-img-top"
|
||||
style="background-color: #f8f9fa;"
|
||||
:alt="label"
|
||||
>
|
||||
<div class="card-body">
|
||||
<p class="h5">
|
||||
{{ label }}
|
||||
</p>
|
||||
<a
|
||||
v-for="(linkLabel, uri) in getLinks(links)"
|
||||
:key="linkLabel"
|
||||
:href="uri"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
@ -93,109 +204,3 @@
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useNuxtApp } from 'nuxt/app';
|
||||
import useSimpleHead from '../composables/useSimpleHead.ts';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const { $translator: translator } = useNuxtApp();
|
||||
useSimpleHead({
|
||||
title: translator.translate('contact.contribute.design.header'),
|
||||
}, translator);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
graphColours: ['#c71585', '#8b0f7a', '#15c79c'],
|
||||
// {'primary': null, 'secondary': null, 'success': null, 'info': null, 'warning': null, 'danger': null, 'light': 'background', 'dark': 'text'}
|
||||
accentColours: [
|
||||
{
|
||||
name: 'primary',
|
||||
colour: '#c71585',
|
||||
},
|
||||
{
|
||||
name: 'secondary',
|
||||
colour: '#6c757d',
|
||||
// darkText: true
|
||||
},
|
||||
{
|
||||
name: 'success',
|
||||
colour: '#198754',
|
||||
},
|
||||
{
|
||||
name: 'info',
|
||||
colour: '#0dcaf0',
|
||||
darkText: true,
|
||||
},
|
||||
{
|
||||
name: 'warning',
|
||||
colour: '#ffc107',
|
||||
darkText: true,
|
||||
},
|
||||
{
|
||||
name: 'danger',
|
||||
colour: '#dc3545',
|
||||
// darkText: true
|
||||
},
|
||||
{
|
||||
name: 'dark',
|
||||
colour: '#212529',
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
colour: '#f8f9fa',
|
||||
darkText: true,
|
||||
},
|
||||
],
|
||||
images: [
|
||||
{
|
||||
label: 'Project logo',
|
||||
links: {
|
||||
'/logo/logo-primary.svg': 'Magenta',
|
||||
'/logo/logo.svg': 'Black',
|
||||
'/logo/logo-light.svg': 'White',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Team logo',
|
||||
links: {
|
||||
'/img-local/logo/logo-full-path.svg': 'SVG',
|
||||
'/img-local/logo/logo-full.png': 'PNG',
|
||||
},
|
||||
warning: 'This logo might be different in other language versions.',
|
||||
},
|
||||
{
|
||||
label: 'Background',
|
||||
links: '/bg.png',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (!process.client) {
|
||||
return;
|
||||
}
|
||||
/* this.$el.querySelectorAll('.colour').forEach(el => {
|
||||
el.innerHTML = rgbToHex(getComputedStyle(el.parentElement).getPropertyValue('background-color'));
|
||||
});*/
|
||||
this.$el.querySelectorAll('.font').forEach((el) => {
|
||||
el.innerHTML = getComputedStyle(el.parentElement).getPropertyValue('font-family')
|
||||
.split(',')[0].replaceAll('"', '');
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getLinks(rawLinks) {
|
||||
if (typeof rawLinks === 'string') {
|
||||
return Object.fromEntries([[rawLinks, this.$t('crud.download')]]);
|
||||
}
|
||||
return rawLinks;
|
||||
},
|
||||
getPrimaryUri(links) {
|
||||
links = this.getLinks(links);
|
||||
|
||||
return Object.entries(links)[0][0];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user