New unlogged homepage

With fancy illustrations 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-10-21 17:49:18 +02:00
parent 3864d6306a
commit fa7cd7e0e3
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
16 changed files with 185 additions and 9 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

View File

@ -133,6 +133,7 @@ export const ADMIN_SETTINGS_FRAGMENT = gql`
instanceName
instanceDescription
instanceLongDescription
instanceSlogan
contact
instanceTerms
instanceTermsType
@ -160,6 +161,7 @@ export const SAVE_ADMIN_SETTINGS = gql`
$instanceName: String
$instanceDescription: String
$instanceLongDescription: String
$instanceSlogan: String
$contact: String
$instanceTerms: String
$instanceTermsType: InstanceTermsType
@ -175,6 +177,7 @@ export const SAVE_ADMIN_SETTINGS = gql`
instanceName: $instanceName
instanceDescription: $instanceDescription
instanceLongDescription: $instanceLongDescription
instanceSlogan: $instanceSlogan
contact: $contact
instanceTerms: $instanceTerms
instanceTermsType: $instanceTermsType

View File

@ -5,6 +5,7 @@ export const CONFIG = gql`
config {
name
description
slogan
registrationsOpen
registrationsAllowlist
demoMode

View File

@ -11,6 +11,7 @@ export const GET_TODO = gql`
actor {
id
preferredUsername
domain
name
}
title

View File

@ -386,7 +386,6 @@
"Welcome back!": "Welcome back!",
"Welcome to Mobilizon, {username}!": "Welcome to Mobilizon, {username}!",
"Who can view this event and participate": "Who can view this event and participate",
"World map": "World map",
"Write something…": "Write something…",
"You are participating in this event anonymously but didn't confirm participation": "You are participating in this event anonymously but didn't confirm participation",
"You are participating in this event anonymously": "You are participating in this event anonymously",
@ -806,5 +805,15 @@
"{username} was invited to {group}": "{username} was invited to {group}",
"The member was removed from the group {group}": "The member was removed from the group {group}",
"The organiser has chosen to close comments.": "The organiser has chosen to close comments.",
"Comments are closed for everybody else.": "Comments are closed for everybody else."
"Comments are closed for everybody else.": "Comments are closed for everybody else.",
"Instance Slogan": "Instance Slogan",
"A short tagline for your instance homepage. Defaults to \"Gather ⋅ Organize ⋅ Mobilize\"": "A short tagline for your instance homepage. Defaults to \"Gather ⋅ Organize ⋅ Mobilize\"",
"Learn more about {instance}": "Learn more about {instance}",
"Unable to detect timezone.": "Unable to detect timezone.",
"A practical tool": "A practical tool",
"Mobilizon is a tool that helps you <b>find, create and organise events</b>.": "Mobilizon is a tool that helps you <b>find, create and organise events</b>.",
"An ethical alternative": "An ethical alternative",
"Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.": "Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.",
"A federated software": "A federated software",
"Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.": "Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>."
}

View File

@ -857,5 +857,15 @@
"{username} was invited to {group}": "{username} a été invité à {group}",
"The member was removed from the group {group}": "Le ou la membre a été supprimé·e du groupe {group}",
"The organiser has chosen to close comments.": "L'organisateur·ice a choisi de fermer les commentaires.",
"Comments are closed for everybody else.": "Les commentaires sont fermés pour tous·tes les autres."
"Comments are closed for everybody else.": "Les commentaires sont fermés pour tous·tes les autres.",
"Instance Slogan": "Slogan de l'instance",
"A short tagline for your instance homepage. Defaults to \"Gather ⋅ Organize ⋅ Mobilize\"": "Un court slogan pour la page d'accueil de votre instance. La valeur par défaut est « Rassembler ⋅ Organiser ⋅ Mobiliser »",
"Learn more about {instance}": "En savoir plus sur {instance}",
"Unable to detect timezone.": "Impossible de détecter le fuseau horaire.",
"A practical tool": "Un outil pratique",
"Mobilizon is a tool that helps you <b>find, create and organise events</b>.": "Mobilizon est un outil qui vous permet de <b>trouver, créer et organiser des événements</b>.",
"An ethical alternative": "Une alternative éthique",
"Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.": "Alternative éthique aux événements, groupes et pages Facebook, Mobilizon est <b>un outil conçu pour vous servir</b>. Point.",
"A federated software": "Un logiciel fédéré",
"Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.": "Mobilizon nest pas une plateforme géante, mais une <b>multitude de sites web Mobilizon interconnectés</b>."
}

View File

@ -34,6 +34,7 @@ export interface ILanguage {
export interface IAdminSettings {
instanceName: string;
instanceDescription: string;
instanceSlogan: string;
instanceLongDescription: string;
contact: string;
instanceTerms: string;

View File

@ -6,6 +6,7 @@ export interface IConfig {
description: string;
longDescription: string;
contact: string;
slogan: string;
registrationsOpen: boolean;
registrationsAllowlist: boolean;

View File

@ -28,6 +28,20 @@
</small>
<b-input type="textarea" v-model="adminSettings.instanceDescription" rows="2" />
</div>
<div class="field">
<label class="label has-help">{{ $t("Instance Slogan") }}</label>
<small>
{{
$t(
'A short tagline for your instance homepage. Defaults to "Gather ⋅ Organize ⋅ Mobilize"'
)
}}
</small>
<b-input
v-model="adminSettings.instanceSlogan"
:placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
/>
</div>
<div class="field">
<label class="label has-help">{{ $t("Contact") }}</label>
<small>

View File

@ -1,9 +1,9 @@
<template>
<div>
<section class="hero is-light is-bold" v-if="config && (!currentUser.id || !currentActor.id)">
<div id="homepage">
<section class="hero" v-if="config && (!currentUser.id || !currentActor.id)">
<div class="hero-body">
<div class="container">
<h1 class="title">{{ $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
<h1 class="title">{{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
<p
v-html="$t('Join <b>{instance}</b>, a Mobilizon instance', { instance: config.name })"
/>
@ -26,13 +26,17 @@
<!-- We don't invite to find other instances yet -->
<!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
<b-button type="is-text" tag="router-link" :to="{ name: RouteName.ABOUT }">
{{ $t("Learn more about Mobilizon") }}
{{ $t("Learn more about {instance}", { instance: config.name }) }}
</b-button>
</div>
</div>
</div>
</section>
<div class="container section" v-if="config && (!currentUser.id || !currentActor.id)">
<div
id="featured_events"
class="container section"
v-if="config && (!currentUser.id || !currentActor.id)"
>
<section class="events-featured">
<h2 class="title">{{ $t("Featured events") }}</h2>
<b-loading :active.sync="$apollo.loading" />
@ -48,6 +52,48 @@
<b-message v-else type="is-danger">{{ $t("No events found") }}</b-message>
</section>
</div>
<div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
<div class="picture-container">
<img src="/img/pics/2020-10-06-mobilizon-illustration-A_homepage.jpg" alt="" />
</div>
<div class="container section">
<div class="columns">
<div class="column">
<h3 class="title">{{ $t("A practical tool") }}</h3>
<p
v-html="
$t('Mobilizon is a tool that helps you <b>find, create and organise events</b>.')
"
/>
</div>
<div class="column">
<h3 class="title">{{ $t("An ethical alternative") }}</h3>
<p
v-html="
$t(
'Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.'
)
"
/>
</div>
<div class="column">
<h3 class="title">{{ $t("A federated software") }}</h3>
<p
v-html="
$t(
'Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.'
)
"
/>
</div>
</div>
<div class="buttons">
<a class="button is-primary is-large" href="https://joinmobilizon.org">{{
$t("Learn more about Mobilizon")
}}</a>
</div>
</div>
</div>
<div class="container section" v-if="config && loggedUser && loggedUser.settings">
<section v-if="currentActor.id">
<b-message type="is-info" v-if="welcomeBack">{{
@ -343,6 +389,8 @@ export default class Home extends Vue {
</script>
<style lang="scss" scoped>
@import "~bulma/sass/utilities/mixins.sass";
main > div > .container {
background: $white;
padding: 1rem 1.5rem 3rem;
@ -388,7 +436,20 @@ span.view-all {
}
section.hero {
background: lighten($secondary, 20%);
position: relative;
z-index: 1;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
z-index: -1;
background: url("/img/pics/homepage_background.png");
}
& > .hero-body {
padding: 1rem 1.5rem 3rem;
@ -406,4 +467,71 @@ section.hero {
margin-bottom: 1rem;
}
}
#featured_events {
padding: 1rem 0;
min-height: calc(100vh - 400px);
z-index: 10;
.title {
margin: 20px auto 0;
}
.columns {
margin: 0rem auto 3rem;
}
}
#picture {
.picture-container {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
0deg,
$white 0,
rgba(0, 0, 0, 0) 5%,
rgba(0, 0, 0, 0) 90%,
$white 100%
);
z-index: 1;
}
& > img {
object-fit: cover;
max-height: 80vh;
display: block;
margin: auto;
width: 100%;
}
}
.container.section {
background: $white;
@include tablet {
margin-top: -4rem;
}
z-index: 10;
.title {
margin: 0 0 10px;
font-size: 30px;
}
.buttons {
justify-content: center;
margin-top: 2rem;
}
}
}
#homepage {
background: $white;
}
</style>

View File

@ -75,6 +75,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
demo_mode: Config.instance_demo_mode?(),
description: Config.instance_description(),
long_description: Config.instance_long_description(),
slogan: Config.instance_slogan(),
languages: Config.instance_languages(),
anonymous: %{
participation: %{

View File

@ -89,6 +89,7 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
field(:instance_name, :string)
field(:instance_description, :string)
field(:instance_long_description, :string)
field(:instance_slogan, :string)
field(:contact, :string)
field(:instance_terms, :string)
field(:instance_terms_type, :instance_terms_type)
@ -181,6 +182,7 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
arg(:instance_name, :string)
arg(:instance_description, :string)
arg(:instance_long_description, :string)
arg(:instance_slogan, :string)
arg(:contact, :string)
arg(:instance_terms, :string)
arg(:instance_terms_type, :instance_terms_type)

View File

@ -12,6 +12,7 @@ defmodule Mobilizon.GraphQL.Schema.ConfigType do
field(:name, :string)
field(:description, :string)
field(:long_description, :string)
field(:slogan, :string)
field(:contact, :string)
field(:languages, list_of(:string))

View File

@ -36,6 +36,9 @@ defmodule Mobilizon.Config do
"instance_long_description"
)
@spec instance_slogan :: String.t()
def instance_slogan, do: Mobilizon.Admin.get_admin_setting_value("instance", "instance_slogan")
@spec contact :: String.t()
def contact do
Mobilizon.Admin.get_admin_setting_value("instance", "contact")
@ -320,6 +323,7 @@ defmodule Mobilizon.Config do
instance_description: instance_description(),
instance_long_description: instance_long_description(),
instance_name: instance_name(),
instance_slogan: instance_slogan(),
registrations_open: instance_registrations_open?(),
contact: contact(),
instance_terms: instance_terms(),