mobilizon/js/src/views/About.vue

157 lines
4 KiB
Vue
Raw Normal View History

<template>
<div>
<div class="hero intro is-small is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">{{ $t("About Mobilizon") }}</h1>
<p>
{{
$t(
"A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
)
}}
</p>
<b-button
icon-left="open-in-new"
size="is-large"
type="is-secondary"
tag="a"
href="https://joinmobilizon.org"
>{{ $t("Learn more") }}</b-button
>
</div>
</div>
</div>
<main class="container">
<div class="columns">
<div class="column is-one-quarter-desktop">
<aside class="menu">
<p class="menu-label">
{{ $t("About") }}
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: RouteName.ABOUT_INSTANCE }">{{
$t("About this instance")
}}</router-link>
</li>
<li>
<router-link :to="{ name: RouteName.ABOUT_MOBILIZON }">{{
$t("About Mobilizon")
}}</router-link>
</li>
</ul>
<p class="menu-label">
{{ $t("Legal") }}
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: RouteName.TERMS }">{{
$t("Terms of service")
}}</router-link>
</li>
<li>
<router-link :to="{ name: RouteName.PRIVACY }">{{
$t("Privacy policy")
}}</router-link>
</li>
<li>
<router-link :to="{ name: RouteName.RULES }">{{
$t("Instance rules")
}}</router-link>
</li>
<li>
<router-link :to="{ name: RouteName.GLOSSARY }">{{ $t("Glossary") }}</router-link>
</li>
</ul>
</aside>
</div>
<div class="column router">
<router-view />
</div>
</div>
</main>
<!-- We hide the "Find an instance button until https://joinmobilizon.org gets a instance picker -->
<div class="hero register is-primary is-medium" v-if="config && config.registrationsOpen">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns">
<div class="column">
<h2 class="title">{{ $t("Register on this instance") }}</h2>
<b-button
type="is-secondary"
size="is-large"
tag="router-link"
:to="{ name: RouteName.REGISTER }"
>{{ $t("Register") }}</b-button
>
</div>
<!-- <div class="column">
<h2 class="title">Find an instance</h2>
<b-button type="is-secondary" size="is-large" tag="a" href="https://joinmobilizon.org">{{ $t('Register') }}</b-button>
</div>-->
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model";
import RouteName from "../router/name";
@Component({
apollo: {
config: {
query: CONFIG,
},
},
})
export default class About extends Vue {
config!: IConfig;
RouteName = RouteName;
}
</script>
<style lang="scss" scoped>
@import "../variables.scss";
.hero.is-primary {
background: $background-color;
.title {
margin: 30px auto 1rem auto;
}
p {
margin-bottom: 1rem;
}
}
.hero.register {
.title {
color: $violet-1;
}
background: $purple-2;
}
aside.menu {
position: sticky;
top: 2rem;
margin-top: 2rem;
}
.router.column {
background: $white;
}
ul.menu-list > li > a {
text-decoration: none;
}
</style>