Skip to content
GitLab
Commit e92a7895 authored by Ciarán Ainsworth's avatar Ciarán Ainsworth
Browse files

Added contact new text, icon

parent 7a6feb96
Pipeline #5903 passed with stages
in 1 minute and 14 seconds
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json 0 → 100644
View file @ e92a7895
This diff is collapsed.
package.json
View file @ e92a7895
......@@ -17,7 +17,6 @@
"vue": "^2.6.10",
"vue-gettext": "^2.1.5",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
......
public/favicon.ico
View replaced file @ 7a6feb96 View file @ e92a7895
public/favicon.ico

4.19 KB | W: | H:

public/favicon.ico

118 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/index.html
View file @ e92a7895
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>-</title>
<title>A Community Wealth Sharing Platform - Retribute</title>
</head>
<body>
<noscript>
......
src/App.vue
View file @ e92a7895
<template>
<div id="app">
<navigation/>
<navigation />
<main>
<router-view/>
<router-view />
</main>
<footer class="main-footer">
<div class="very wide wrapper">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-4">
<h5>
<translate translate-context="Content/Footer/Header">About us</translate>
<translate translate-context="Content/Footer/Header"
>About us</translate
>
</h5>
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li>
<a href="https://funkwhale.audio/en_US/collective" target="_blank">
<translate translate-context="Content/Footer/List.Item">Collective and statutes</translate>
<a
href="https://funkwhale.audio/en_US/collective"
target="_blank"
>
<translate translate-context="Content/Footer/List.Item"
>Collective and statutes</translate
>
</a>
</li>
<li>
<a href="https://funkwhale.audio/en_US/code-of-conduct" target="_blank">
<translate translate-context="Content/Footer/List.Item">Code of Conduct</translate>
<a
href="https://funkwhale.audio/en_US/code-of-conduct"
target="_blank"
>
<translate translate-context="Content/Footer/List.Item"
>Code of Conduct</translate
>
</a>
</li>
<li>
<a href="https://funkwhale.audio/en_US/support-us" target="_blank">
<translate translate-context="Content/Footer/List.Item">Support us</translate>
<a
href="https://funkwhale.audio/en_US/support-us"
target="_blank"
>
<translate translate-context="Content/Footer/List.Item"
>Support us</translate
>
</a>
</li>
<li>
<a href="https://funkwhale.audio/en_US/contact" target="_blank">
<translate translate-context="Content/Footer/List.Item">Contact</translate>
</a>
<router-link
:to="{
name: 'contact',
params: { locale: $language.current }
}"
>
<translate translate-context="Content/Footer/List.Item"
>Contact</translate
>
</router-link>
</li>
<li>
<a href="https://funkwhale.audio/en_US/logos" target="_blank">
<translate
translate-context="Content/Logos/Header"
>Logos and identity guidelines</translate>
<translate translate-context="Content/Logos/Header"
>Logos and identity guidelines</translate
>
</a>
</li>
</ul>
......@@ -45,35 +69,48 @@
</div>
<div class="pure-u-1 pure-u-md-1-4">
<h5>
<translate translate-context="Content/Footer/Header">Links</translate>
<translate translate-context="Content/Footer/Header"
>Links</translate
>
</h5>
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li>
<a rel="me" href="https://mastodon.eliotberriot.com/@eliotberriot">
<translate
translate-context="Content/Footer/List.Item"
>Retribute on the fediverse</translate>
<a
rel="me"
href="https://mastodon.eliotberriot.com/@eliotberriot"
>
<translate translate-context="Content/Footer/List.Item"
>Retribute on the fediverse</translate
>
</a>
</li>
<li class="pure-menu-item">
<a href="https://governance.funkwhale.audio">
<translate translate-context="Navigation/Link">Forum</translate>
<translate translate-context="Navigation/Link"
>Forum</translate
>
</a>
</li>
<li class="pure-menu-item">
<a href="https://docs.funkwhale.audio">
<translate translate-context="Navigation/Link">Documentation</translate>
<translate translate-context="Navigation/Link"
>Documentation</translate
>
</a>
</li>
<li class="pure-menu-item">
<a href="https://dev.funkwhale.audio/funkwhale">
<translate translate-context="Navigation/Link">Source code</translate>
<translate translate-context="Navigation/Link"
>Source code</translate
>
</a>
</li>
<li class="pure-menu-item">
<a href="https://blog.funkwhale.audio/local">
<translate translate-context="Navigation/Link">Blog</translate>
<translate translate-context="Navigation/Link"
>Blog</translate
>
</a>
</li>
</ul>
......@@ -83,12 +120,16 @@
<h5>
<label for="language" class="label">
<i class="fa fa-language"></i>&nbsp;
<translate translate-context="Label for language switcher">Language</translate>
<translate translate-context="Label for language switcher"
>Language</translate
>
</label>
</h5>
<language-switcher id="language" />
<a href="#">
<translate translate-context="Navigation/Link">Back to top</translate>
<translate translate-context="Navigation/Link"
>Back to top</translate
>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4">
......@@ -96,14 +137,14 @@
<translate translate-context="Footer/Title">Credits</translate>
</h5>
<p>
<translate
translate-context="Footer/Paragraph"
>Retribute is part of the Funkwhale community</translate>
<translate translate-context="Footer/Paragraph"
>Retribute is part of the Funkwhale community</translate
>
</p>
<p>
<translate
translate-context="Footer/Paragraph"
>The illustrations were kindly drawn by Robin.</translate>
<translate translate-context="Footer/Paragraph"
>The illustrations were kindly drawn by Robin.</translate
>
</p>
</div>
</div>
......@@ -113,7 +154,6 @@
</template>
<script>
require("typeface-noto-sans");
require("typeface-montserrat");
......@@ -130,4 +170,4 @@ export default {
<style lang="scss">
@import "./style/main";
</style>
\ No newline at end of file
</style>
src/components/Navigation.vue
View file @ e92a7895
......@@ -10,31 +10,18 @@
:to="{ name: 'home' }"
:title="labels.homeTitle"
>
Retribute
<img
alt="Retribute Logo"
src="../assets/logo_fleur.png"
@click="showMenu - !showMenu"
/>
Retribute
</router-link>
<button class="pure-button menu-button" @click="showMenu = !showMenu">
<i v-if="showMenu" class="fa fa-close"></i>
<i v-else class="fa fa-bars"></i>
</button>
<ul :class="['pure-menu-list', { hide: !showMenu }]">
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'about', params: { locale: $language.current } }"
>
<translate translate-context="Navigation/Link/Short,Noun"
>About</translate
>
</router-link>
</li>
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'community', params: { locale: $language.current } }"
>
<translate translate-context="Navigation/Link">Community</translate>
</router-link>
</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">
<translate translate-context="Navigation/Link">Resources</translate>
......@@ -43,7 +30,10 @@
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'collective', params: { locale: $language.current } }"
:to="{
name: 'collective',
params: { locale: $language.current }
}"
>
<translate translate-context="Content/Footer/List.Item"
>Collective and statutes</translate
......@@ -105,15 +95,22 @@
class="pure-menu-link"
:to="{ name: 'contact', params: { locale: $language.current } }"
>
<translate translate-context="Content/Footer/List.Item">Contact</translate>
<translate translate-context="Content/Footer/List.Item"
>Contact</translate
>
</router-link>
</li>
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'support-us', params: { locale: $language.current } }"
:to="{
name: 'support-us',
params: { locale: $language.current }
}"
>
<translate translate-context="Content/Footer/List.Item">Support us</translate>
<translate translate-context="Content/Footer/List.Item"
>Support us</translate
>
</router-link>
</li>
</ul>
......@@ -156,4 +153,4 @@ export default {
}
}
};
</script>
\ No newline at end of file
</script>
src/router.js
View file @ e92a7895
......@@ -6,7 +6,19 @@ Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
base: process.env.BASE_URL || "/",
scrollBehavior(to, from, savedPosition) {
return new Promise(resolve => {
setTimeout(() => {
if (to.path === from.path && to.hash) {
resolve({ selector: to.hash });
}
let pos = savedPosition || { x: 0, y: 0 };
resolve(pos);
}, 100);
});
},
routes: [
{
path: "/:locale?/",
......@@ -15,13 +27,14 @@ export default new Router({
component: Home
},
{
path: "/:locale?/about",
name: "about",
path: "/:locale?/contact",
props: true,
name: "contact",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// this generates a separate chunk (contact.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "./views/About.vue")
import(/* webpackChunkName: "contact" */ "./views/Contact.vue")
}
]
});
src/style/1-core/_typography.scss
View file @ e92a7895
......@@ -75,6 +75,7 @@ section {
p.big {
font-size: 1.2em;
color: $text-color;
}
button, .pure-button, a, .link {
......
src/style/3-base/_layout.scss
View file @ e92a7895
......@@ -33,7 +33,7 @@ footer.main-footer {
}
.row.strong {
background: $page-background;
background: linear-gradient(90deg, #6EEEE9 0%, #7cf0eb 100%);
background: linear-gradient(90deg, #2bac48 0%, #2db44b 100%);
@media screen and (min-width: $tablet-width) {
padding: $content-padding * 2;
}
......@@ -69,7 +69,7 @@ section.wide, .navigation-wrapper > nav {
box-shadow: 0px 0px 2px rgba(1, 1, 1, 0.15) inset;
}
footer.main-footer {
background-color: $text-color;
background-color: #383839;
color: $text-background-color;
padding: $content-padding;
a {
......
src/style/_variables.scss
View file @ e92a7895
......@@ -4,10 +4,10 @@ $very-large-content-width: 1300px;
$content-separator-width: 1em;
$content-padding: 1em;
$page-background: #6EEEE9;
$page-background: #2bac48;
$light-background-color: #F2F3F5;
$link-color: #7ABAF0;
$text-color: #383839;
$text-color: #000000;
$text-background-color: #FBFBFB;
$border-color: #FBFBFB;
$primary-color: #e9e026;
......
src/views/About.vue deleted 100644 → 0
View file @ 7a6feb96
<template>
<div class="row">
<section class="wide banner">
<h2 class="centered">
<translate translate-context="Content/About/Header">About Retribute</translate>
</h2>
<p class="big centered">
<translate
translate-context="Content/About/Paragraph"
>Retribute is a web application designed to make the job of supporting the creators you like easier.</translate>
</p>
</section>
</div>
</template>
<script>
import PageMixin from "../PageMixin";
export default {
mixins: [PageMixin]
};
src/views/Contact.vue 0 → 100644
View file @ e92a7895
<template>
<div class="row">
<section>
<h1>
<translate translate-context="Content/Contact/Header"
>Contact information</translate
>
</h1>
<p>
<translate translate-context="Content/Contact/Paragraph">
If you need to personally contact the moderator of this project, you
will find contact information below.
</translate>
</p>
<p>
<strong>
<translate translate-context="Content/Contact/Paragraph">
Please, use these channels responsibly and use the community
channels whenever possible.
</translate>
</strong>
</p>
<h2>
<i class="fa fa-shield"></i>&nbsp;
<translate translate-context="Content/Contact/Header"
>Report a Code of Conduct violation</translate
>
</h2>
<p>
<translate translate-context="Content/Contact/Paragraph">
If you witnessed abuse, a violation of our Code of Conduct, or are
yourself in a situation where you need the involvement of a moderator,
contact:
</translate>
</p>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>
<translate translate-context="Content/Contact/Table.Header"
>Moderator name</translate
>
</th>
<th>
<translate translate-context="Content/Contact/Table.Header"
>Email address</translate
>
</th>
<th>
<translate translate-context="Content/Contact/Table.Header"
>Languages</translate
>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eliot Berriot</td>
<td>
<a href="'mailto:contact@eliotberriot.com"
>contact@eliotberriot.com</a
>
</td>
<td>French, English</td>
</tr>
<tr>
<td>Ginny McQueen</td>
<td>
<a href="'mailto:email@ginny.today">email@ginny.today</a>
</td>
<td>English</td>
</tr>
</tbody>
</table>
</div>
<p>
<translate translate-context="Content/Contact/Paragraph"
>We will get back to you as soon as possible.</translate
>
</p>
<h2>
<i class="fa fa-send-o"></i>&nbsp;
<translate translate-context="Content/Contact/Header"
>Other requests and messages</translate
>
</h2>
<p>
<translate translate-context="Content/Contact/Paragraph">
If you need to get in touch with core contributors about the project,
potential partnerships, interviews or any other matter you don't want
to share publicly on our community spaces, use the contact information
below.
</translate>
</p>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>
<translate translate-context="Content/Contact/Table.Header"
>Name</translate
>
</th>
<th>
<translate translate-context="Content/Contact/Table.Header"
>Roles</translate
>
</th>
<th>
<translate translate-context="Content/Contact/Table.Header"
>Email address</translate
>
</th>
<th>
<translate translate-context="Content/Contact/Table.Header"
>Languages</translate
>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eliot Berriot</td>
<td>
<translate translate-context="Content/Contact/Table.Header"
>Project maintainer</translate
>
</td>
<td>
<a href="'mailto:contact@eliotberriot.com"
>contact@eliotberriot.com</a
>
</td>
<td>French, English</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</template>
<script>
import PageMixin from "../PageMixin";
export default {
mixins: [PageMixin],
methods: {
getInnerTitle() {
return this.$pgettext("Content/Contact/Header", "Contact");
}
}
};
</script>
src/views/Home.vue
View file @ e92a7895
......@@ -3,40 +3,114 @@
<div class="row strong">
<section class="wide banner">
<h2 class="header">
<translate translate-context="Content/Home/Header">A Community Wealth Sharing Platform</translate>
<translate translate-context="Content/Home/Header"
>A Community Wealth Sharing Platform</translate
>
</h2>
<p class="big">
Retribute is a web application designed to make the job of supporting
the creators you like easier.
</p>
<a href="#learn-more">
<translate translate-context="Content/Home/Button.Label"
>Learn more…</translate
>
</a>
<img class="strong" src="../assets/appscreen.png" />
</section>
</div>
<div class="row" id="features">
<section class="very wide">
<div class="row" id="learn-more">
<section class="wide">
<div class="feature">
<div class="content">
<h3 class="centered">
<translate translate-context="Content/Home.Feature/Header">What Does Retribute Do?</translate>
<h3>
<translate translate-context="Content/Home.Feature/Header"
>Support your favorite people on your favorite
platforms</translate
>
</h3>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<h4 class="centered">
<translate translate-context="Content/Home/Header">For Supporters</translate>
</h4>
<p class="centered">
<translate
translate-context="Content/Home/Paragraph"
>Retribute keeps track of who you engage with and provides you with their donation links</translate>
</p>
</div>
<div class="pure-u-1 pure-u-md-1-2">
<h4 class="centered">
<translate translate-context="Content/Home/Header">For Recipients</translate>
</h4>
<p class="centered">
<translate
translate-context="Content/Home/Paragraph"
>Retribute delivers the contribution links listed on your accounts online to potential supporters</translate>
</p>
</div>
</div>
<p>
<strong>
<translate translate-context="Content/Home.Feature/Paragraph"
>Retribute helps you to support your favorite people on
platforms you already know and love</translate
>
</strong>
</p>
<p>
<translate translate-context="Content/Home.Feature/Paragraph"
>Simply sign in to your Funkwhale, Mastodon, or Peertube account
and let Retribute do the rest