2147eae687
The commit adds a new a UI component that's enabled in development mode. This component, initially, provides a button that wen clicked, logs all the script and category names to the console. It helps revising names used throughout the application. By having this component in a conditionally rendered component, it's excluded from the production builds.
58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<div id="container">
|
|
<h1 class="child title">{{ title }}</h1>
|
|
<h2 class="child subtitle">{{ subtitle }}</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed, inject } from 'vue';
|
|
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const { info } = inject(InjectionKeys.useApplication);
|
|
|
|
const title = computed(() => info.name);
|
|
const subtitle = computed(() => info.slogan);
|
|
|
|
return {
|
|
title,
|
|
subtitle,
|
|
};
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
#container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.child {
|
|
display: flex;
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
font-family: $font-main;
|
|
font-size: 2.5em;
|
|
line-height: 1.1;
|
|
}
|
|
.subtitle {
|
|
margin: 0;
|
|
font-size: 1.5em;
|
|
color: $color-primary;
|
|
font-family: $font-artistic;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
</style>
|