FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Create generic component for static pages

Browse source
This commit is contained in:
silverpill 2022-06-12 23:08:26 +00:00
parent 3ef8190907
commit 1e80036d04
2 changed files with 70 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/components/StaticPage.vue Normal file
View file

@ -0,0 +1,60 @@
<template>
<div class="page">
<div class="page-content">
<router-link class="back" to="/" title="Back">
<img :src="require('@/assets/feather/arrow-left.svg')">
</router-link>
<h1><slot name="heading"></slot></h1>
<div class="static-text"><slot name="text"></slot></div>
</div>
</div>
</template>
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme";
.page {
align-items: flex-start;
display: flex;
flex-direction: row;
gap: $content-gap;
margin: 0 auto;
max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
padding-top: 20vh;
}
.page-content {
max-width: $wide-content-width;
min-width: 0;
}
.back {
position: absolute;
top: $body-padding;
img {
filter: $text-colorizer;
width: 40px;
}
}
h1 {
font-size: 90px;
font-weight: bold;
margin: 0 0 20px;
text-transform: uppercase;
word-wrap: break-word;
}
.static-text {
font-size: 24px;
line-height: 1.75;
}
@media screen and (max-width: $screen-breakpoint-small) {
.page {
padding-top: $content-gap;
}
}
</style>

87
src/views/AboutPublic.vue
View file

@ -1,85 +1,18 @@
<template>
<div class="about-page">
<div class="about" v-if="instance">
<router-link class="back" to="/" title="Back">
<img :src="require('@/assets/feather/arrow-left.svg')">
</router-link>
<h1>{{ instance.title }}</h1>
<div class="description static-text" v-html="renderMarkdown(instance.description)"></div>
</div>
</div>
<static-page v-if="instance">
<template #heading>{{ instance.title }}</template>
<template #text>
<div v-html="renderMarkdown(instance.description)"></div>
</template>
</static-page>
</template>
<script lang="ts">
import { Vue, setup } from "vue-class-component"
<script setup lang="ts">
import { $ } from "vue/macros"
import { InstanceInfo } from "@/api/instance"
import StaticPage from "@/components/StaticPage.vue"
import { useInstanceInfo } from "@/store/instance"
import { renderMarkdown } from "@/utils/markdown"
export default class AboutPublicPage extends Vue {
private store = setup(() => {
const { instance } = useInstanceInfo()
return { instance }
})
get instance(): InstanceInfo | null {
return this.store.instance
}
renderMarkdown(description: string): string {
return renderMarkdown(description)
}
}
const { instance } = $(useInstanceInfo())
</script>
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme";
.about-page {
align-items: flex-start;
display: flex;
flex-direction: row;
gap: $content-gap;
margin: 0 auto;
max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
padding-top: 20vh;
}
.about {
max-width: $wide-content-width;
min-width: 0;
}
.back {
position: absolute;
top: $body-padding;
img {
filter: $text-colorizer;
width: 40px;
}
}
h1 {
font-size: 90px;
font-weight: bold;
margin: 0 0 20px;
text-transform: uppercase;
word-wrap: break-word;
}
.description {
font-size: 24px;
line-height: 1.75;
}
@media screen and (max-width: $screen-breakpoint-small) {
.about-page {
padding-top: $content-gap;
}
}
</style>