Merge branch 'front/ui-improvements' into 'master'

UI improvements

See merge request framasoft/mobilizon!402
This commit is contained in:
Thomas Citharel 2020-02-18 09:23:36 +01:00
commit 9f6888c1fc
27 changed files with 199 additions and 135 deletions

View File

@ -22,6 +22,7 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
- Possibility to delete your account - Possibility to delete your account
### Changed ### Changed
- Improved a bit color theme
- Signature validation also now checks if `Date` header has acceptable values - Signature validation also now checks if `Date` header has acceptable values
- Actor profiles are now stale after two days and have to be refetched - Actor profiles are now stale after two days and have to be refetched
- Actor keys are rotated some time after sending a `Delete` activity - Actor keys are rotated some time after sending a `Delete` activity

View File

@ -25,7 +25,7 @@
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">
<span class="title" ref="title">{{ actorDisplayName }}</span><br> <span ref="title">{{ actorDisplayName }}</span><br>
<small class="has-text-grey" v-if="participant.actor.domain">@{{ participant.actor.preferredUsername }}@{{ participant.actor.domain }}</small> <small class="has-text-grey" v-if="participant.actor.domain">@{{ participant.actor.preferredUsername }}@{{ participant.actor.domain }}</small>
<small class="has-text-grey" v-else>@{{ participant.actor.preferredUsername }}</small> <small class="has-text-grey" v-else>@{{ participant.actor.preferredUsername }}</small>
</div> </div>

View File

@ -56,6 +56,7 @@ export default class DateCalendarIcon extends Vue {
span { span {
display: block; display: block;
font-weight: 600;
&.month { &.month {
color: #fa3e3e; color: #fa3e3e;
@ -66,7 +67,6 @@ export default class DateCalendarIcon extends Vue {
} }
&.day { &.day {
font-weight: 300;
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
} }

View File

@ -31,24 +31,41 @@ A simple card for an event
<div class="card-image"> <div class="card-image">
<figure class="image is-16by9" :style="`background-image: url('${event.picture ? event.picture.url : '/img/mobilizon_default_card.png'}')`"> <figure class="image is-16by9" :style="`background-image: url('${event.picture ? event.picture.url : '/img/mobilizon_default_card.png'}')`">
<div class="tag-container" v-if="event.tags"> <div class="tag-container" v-if="event.tags">
<b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag> <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-light">{{ tag.title }}</b-tag>
</div> </div>
</figure> </figure>
</div> </div>
<div class="content"> <div class="card-content">
<div class="title-wrapper"> <div class="media">
<div class="date-component"> <div class="media-left">
<date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" /> <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />
</div> </div>
<h2 class="title" ref="title">{{ event.title }}</h2> <div class="media-content">
<p class="event-title">{{ event.title }}</p>
<div class="event-subtitle" v-if="event.physicalAddress">
<!-- <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
<span>
{{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}
</span>
</div>
</div>
</div> </div>
<span class="organizer-place-wrapper">
<span v-if="actorDisplayName && actorDisplayName !== '@'">{{ $t('By {name}', { name: actorDisplayName }) }}</span>
<span v-if="event.physicalAddress && (event.physicalAddress.locality || event.physicalAddress.description)">
{{ event.physicalAddress.locality || event.physicalAddress.description }}
</span>
</span>
</div> </div>
<!-- <div class="date-and-title">-->
<!-- <div class="date-component">-->
<!-- <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
<!-- </div>-->
<!-- <div class="title-wrapper">-->
<!-- <h4>{{ event.title }}</h4>-->
<!-- <div class="organizer-place-wrapper has-text-grey">-->
<!-- <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
<!-- ·-->
<!-- <span v-if="event.physicalAddress">-->
<!-- {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-if="!mergedOptions.hideDetails" class="details">--> <!-- <div v-if="!mergedOptions.hideDetails" class="details">-->
<!-- <div v-if="event.participants.length > 0 &&--> <!-- <div v-if="event.participants.length > 0 &&-->
<!-- mergedOptions.loggedPerson &&--> <!-- mergedOptions.loggedPerson &&-->
@ -76,7 +93,7 @@ A simple card for an event
import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model'; import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue'; import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
import { Person } from '@/types/actor'; import { Actor, Person } from '@/types/actor';
@Component({ @Component({
components: { components: {
@ -100,9 +117,8 @@ export default class EventCard extends Vue {
return { ...this.defaultOptions, ...this.options }; return { ...this.defaultOptions, ...this.options };
} }
get actorDisplayName(): string { get actor(): Actor {
const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor); return Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
return actor.displayName();
} }
} }
@ -145,20 +161,16 @@ export default class EventCard extends Vue {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0; right: 0;
margin-right: -5px; margin-right: -3px;
z-index: 10; z-index: 10;
max-width: 40%; max-width: 40%;
span.tag { span.tag {
margin: 5px auto; margin: 5px auto;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
/*word-break: break-all;*/
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
display: block; display: block;
/*text-align: right;*/
font-size: 1em; font-size: 1em;
/*padding: 0 1px;*/
line-height: 1.75em; line-height: 1.75em;
} }
} }
@ -172,47 +184,33 @@ export default class EventCard extends Vue {
} }
} }
div.content { .card-content {
padding: 5px; padding: 0.5rem;
background: $secondary;
div.title-wrapper { .event-title {
display: flex; font-size: 1.25rem;
line-height: 1.25rem;
div.date-component {
flex: 0;
margin-right: 16px;
}
.title {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
font-weight: 400; min-height: 2.4rem;
font-size: 1.4em;
margin-top: auto;
min-height: 3.4rem;
}
} }
span.organizer-place-wrapper {
display: flex; .event-subtitle {
padding: 0 0.5rem 0.3rem; font-size: 0.85rem;
display: inline-flex;
flex-wrap: wrap;
span { span {
padding-right: 0.25rem; width: 15rem;
} display: block;
overflow: hidden;
span:not(:last-child):after { flex-grow: 1;
content: '-';
padding-left: 0.25rem;
}
span:last-child { text-overflow: ellipsis;
flex: 1; white-space: nowrap;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }

View File

@ -8,7 +8,7 @@
</div> </div>
<vertical-divider :content="$t('Or')" /> <vertical-divider :content="$t('Or')" />
<div class="column"> <div class="column">
<h3 class="subtitle">{{ $t('I have an account on another Mobilizon instance.')}}</h3> <subtitle>{{ $t('I have an account on another Mobilizon instance.')}}</subtitle>
<p>{{ $t('Other software may also support this.') }}</p> <p>{{ $t('Other software may also support this.') }}</p>
<p>{{ $t('We will redirect you to your instance in order to interact with this event') }}</p> <p>{{ $t('We will redirect you to your instance in order to interact with this event') }}</p>
<form @submit.prevent="redirectToInstance"> <form @submit.prevent="redirectToInstance">
@ -41,9 +41,10 @@
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import VerticalDivider from '@/components/Utils/VerticalDivider.vue'; import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
import Subtitle from '@/components/Utils/Subtitle.vue';
@Component({ @Component({
components: { VerticalDivider }, components: { Subtitle, VerticalDivider },
}) })
export default class ParticipationWithAccount extends Vue { export default class ParticipationWithAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;

View File

@ -2,7 +2,7 @@
<section class="section container hero"> <section class="section container hero">
<div class="hero-body" v-if="event"> <div class="hero-body" v-if="event">
<div class="container"> <div class="container">
<h2 class="subtitle">{{ $t('You wish to participate to the following event')}}</h2> <subtitle>{{ $t('You wish to participate to the following event')}}</subtitle>
<EventListViewCard v-if="event" :event="event" /> <EventListViewCard v-if="event" :event="event" />
<div class="columns has-text-centered"> <div class="columns has-text-centered">
<div class="column"> <div class="column">
@ -58,9 +58,10 @@ import { EventModel, IEvent } from '@/types/event.model';
import VerticalDivider from '@/components/Utils/VerticalDivider.vue'; import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
import { CONFIG } from '@/graphql/config'; import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import Subtitle from '@/components/Utils/Subtitle.vue';
@Component({ @Component({
components: { VerticalDivider, EventListViewCard, EventListCard }, components: { VerticalDivider, EventListViewCard, EventListCard, Subtitle },
apollo: { apollo: {
event: { event: {
query: FETCH_EVENT, query: FETCH_EVENT,

View File

@ -0,0 +1,32 @@
<template>
<h3>
<span>
<slot />
</span>
</h3>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Subtitle extends Vue {
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
h3 {
display: block;
margin: 15px 0 30px;
span {
background: $secondary;
display: inline;
padding: 3px 8px;
color: #3A384C;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
font-weight: 400;
font-size: 32px;
}
}
</style>

View File

@ -17,7 +17,7 @@
"Approve": "قبول", "Approve": "قبول",
"Are you sure you want to cancel your participation at event \"{title}\"?": "هل أنت متأكد مِن أنك تريد الغاء مشاركتك في فعالية \"{title}\"؟", "Are you sure you want to cancel your participation at event \"{title}\"?": "هل أنت متأكد مِن أنك تريد الغاء مشاركتك في فعالية \"{title}\"؟",
"Avatar": "الصورة الرمزية", "Avatar": "الصورة الرمزية",
"By {name}": "حسب {name}", "By @{username}": "حسب @{username}",
"Cancel": "الغاء", "Cancel": "الغاء",
"Cancel creation": "إلغاء الإنشاء", "Cancel creation": "إلغاء الإنشاء",
"Cancel edition": "إلغاء التحرير", "Cancel edition": "إلغاء التحرير",

View File

@ -28,7 +28,7 @@
"Are you sure you want to delete this event? This action cannot be reverted.": "Вы сапраўды хочаце выдаліць гэту падзею? Гэта дзеянне нельга адмяніць.", "Are you sure you want to delete this event? This action cannot be reverted.": "Вы сапраўды хочаце выдаліць гэту падзею? Гэта дзеянне нельга адмяніць.",
"Avatar": "Аватар", "Avatar": "Аватар",
"Before you can login, you need to click on the link inside it to validate your account": "Каб увайсці з уліковым запісам, патрэбна спачатку перайсці па спасылцы, якая прыйшла вам у лісце", "Before you can login, you need to click on the link inside it to validate your account": "Каб увайсці з уліковым запісам, патрэбна спачатку перайсці па спасылцы, якая прыйшла вам у лісце",
"By {name}": "Ад {name}", "By @{username}": "Ад @{username}",
"Cancel": "Адмяніць", "Cancel": "Адмяніць",
"Cancel creation": "Адмяніць стварэнне", "Cancel creation": "Адмяніць стварэнне",
"Cancel edition": "Адмяніць рэдагаванне", "Cancel edition": "Адмяніць рэдагаванне",

View File

@ -28,7 +28,7 @@
"Are you sure you want to delete this event? This action cannot be reverted.": "Segur que vols esborrar aquesta activitat? Aquesta acció és irreversible.", "Are you sure you want to delete this event? This action cannot be reverted.": "Segur que vols esborrar aquesta activitat? Aquesta acció és irreversible.",
"Avatar": "Avatar", "Avatar": "Avatar",
"Before you can login, you need to click on the link inside it to validate your account": "Per a validar el compte i poder entrar, has de clicar l'enllaç que t'hem enviat en el mail", "Before you can login, you need to click on the link inside it to validate your account": "Per a validar el compte i poder entrar, has de clicar l'enllaç que t'hem enviat en el mail",
"By {name}": "De {name}", "By @{username}": "De @{username}",
"Cancel": "Canceŀla", "Cancel": "Canceŀla",
"Cancel creation": "Canceŀla la creació", "Cancel creation": "Canceŀla la creació",
"Cancel edition": "Canceŀla l'edició", "Cancel edition": "Canceŀla l'edició",

View File

@ -28,7 +28,7 @@
"Are you sure you want to delete this event? This action cannot be reverted.": "Bist Du dir sicher, dass Du diese Veranstaltung löschen möchtest? Dies kann nicht rückgängig gemacht werden.", "Are you sure you want to delete this event? This action cannot be reverted.": "Bist Du dir sicher, dass Du diese Veranstaltung löschen möchtest? Dies kann nicht rückgängig gemacht werden.",
"Avatar": "Profilbild", "Avatar": "Profilbild",
"Before you can login, you need to click on the link inside it to validate your account": "Bevor Du dich einloggen kannst, musst Du den Link anklicken, um deinen Account zu überprüfen.", "Before you can login, you need to click on the link inside it to validate your account": "Bevor Du dich einloggen kannst, musst Du den Link anklicken, um deinen Account zu überprüfen.",
"By {name}": "Nach {name}", "By @{username}": "Nach @{username}",
"Cancel": "Abbrechen", "Cancel": "Abbrechen",
"Cancel creation": "Erstellung abbrechen", "Cancel creation": "Erstellung abbrechen",
"Cancel edition": "Bearbeiten abbrechen", "Cancel edition": "Bearbeiten abbrechen",

View File

@ -37,7 +37,7 @@
"Avatar": "Avatar", "Avatar": "Avatar",
"Back to previous page": "Back to previous page", "Back to previous page": "Back to previous page",
"Before you can login, you need to click on the link inside it to validate your account": "Before you can login, you need to click on the link inside it to validate your account", "Before you can login, you need to click on the link inside it to validate your account": "Before you can login, you need to click on the link inside it to validate your account",
"By {name}": "By {name}", "By @{username}": "By @{username}",
"Cancel anonymous participation": "Cancel anonymous participation", "Cancel anonymous participation": "Cancel anonymous participation",
"Cancel creation": "Cancel creation", "Cancel creation": "Cancel creation",
"Cancel edition": "Cancel edition", "Cancel edition": "Cancel edition",

View File

@ -35,7 +35,7 @@
"Avatar": "Avatar", "Avatar": "Avatar",
"Back to previous page": "Palaa edelliselle sivulle", "Back to previous page": "Palaa edelliselle sivulle",
"Before you can login, you need to click on the link inside it to validate your account": "Sinun on ennen sisäänkirjautumista vahvistettava tilisi napsauttamalla siinä olevaa linkkiä", "Before you can login, you need to click on the link inside it to validate your account": "Sinun on ennen sisäänkirjautumista vahvistettava tilisi napsauttamalla siinä olevaa linkkiä",
"By {name}": "Tehnyt {name}", "By @{username}": "Tehnyt @{username}",
"Cancel": "Peruuta", "Cancel": "Peruuta",
"Cancel anonymous participation": "Peruuta anonyymi osallistuminen", "Cancel anonymous participation": "Peruuta anonyymi osallistuminen",
"Cancel creation": "Peruuta luonti", "Cancel creation": "Peruuta luonti",

View File

@ -37,7 +37,7 @@
"Avatar": "Avatar", "Avatar": "Avatar",
"Back to previous page": "Retour à la page précédente", "Back to previous page": "Retour à la page précédente",
"Before you can login, you need to click on the link inside it to validate your account": "Avant que vous puissiez vous enregistrer, vous devez cliquer sur le lien à l'intérieur pour valider votre compte", "Before you can login, you need to click on the link inside it to validate your account": "Avant que vous puissiez vous enregistrer, vous devez cliquer sur le lien à l'intérieur pour valider votre compte",
"By {name}": "Par {name}", "By @{username}": "Par @{username}",
"Cancel": "Annuler", "Cancel": "Annuler",
"Cancel anonymous participation": "Annuler ma participation anonyme", "Cancel anonymous participation": "Annuler ma participation anonyme",
"Cancel creation": "Annuler la création", "Cancel creation": "Annuler la création",

View File

@ -22,7 +22,7 @@
"Are you sure you want to delete this event? This action cannot be reverted.": "Bent u zeker dat u dit evenement wil verwijderen? Dit kan niet ongedaan gemaakt worden.", "Are you sure you want to delete this event? This action cannot be reverted.": "Bent u zeker dat u dit evenement wil verwijderen? Dit kan niet ongedaan gemaakt worden.",
"Avatar": "Profielfoto", "Avatar": "Profielfoto",
"Before you can login, you need to click on the link inside it to validate your account": "Voordat u zich kan aanmelden, moet u op de link erin klikken om uw account te valideren", "Before you can login, you need to click on the link inside it to validate your account": "Voordat u zich kan aanmelden, moet u op de link erin klikken om uw account te valideren",
"By {name}": "Door {name}", "By @{username}": "Door @{username}",
"Cancel": "Annuleren", "Cancel": "Annuleren",
"Cancel creation": "Aanmaken annuleren", "Cancel creation": "Aanmaken annuleren",
"Cancel edition": "Bewerken annuleren", "Cancel edition": "Bewerken annuleren",

View File

@ -38,7 +38,7 @@
"Avatar": "Avatar", "Avatar": "Avatar",
"Back to previous page": "Tornar a pas pagina precedenta", "Back to previous page": "Tornar a pas pagina precedenta",
"Before you can login, you need to click on the link inside it to validate your account": "Abans que poscatz vos marcar, devètz clicar lo ligam dedins per validar lo compte", "Before you can login, you need to click on the link inside it to validate your account": "Abans que poscatz vos marcar, devètz clicar lo ligam dedins per validar lo compte",
"By {name}": "Per {name}", "By @{username}": "Per @{username}",
"Cancel": "Anullar", "Cancel": "Anullar",
"Cancel anonymous participation": "Anullar la participacion anonima", "Cancel anonymous participation": "Anullar la participacion anonima",
"Cancel creation": "Anullar la creacion", "Cancel creation": "Anullar la creacion",

View File

@ -20,7 +20,7 @@
"Are you sure you want to delete this event? This action cannot be reverted.": "Czy na pewno chcesz usunąć to wydarzenie? To działanie nie może zostać odwrócone.", "Are you sure you want to delete this event? This action cannot be reverted.": "Czy na pewno chcesz usunąć to wydarzenie? To działanie nie może zostać odwrócone.",
"Avatar": "Awatar", "Avatar": "Awatar",
"Before you can login, you need to click on the link inside it to validate your account": "Zanim się zalogujesz, musisz odwiedzić odnośnik znajdujący się w niej, aby potwierdzić swoje konto", "Before you can login, you need to click on the link inside it to validate your account": "Zanim się zalogujesz, musisz odwiedzić odnośnik znajdujący się w niej, aby potwierdzić swoje konto",
"By {name}": "Od {name}", "By @{username}": "Od @{username}",
"Cancel": "Anuluj", "Cancel": "Anuluj",
"Cancel creation": "Anuluj tworzenie", "Cancel creation": "Anuluj tworzenie",
"Cancel edition": "Anuluj edycję", "Cancel edition": "Anuluj edycję",

View File

@ -35,7 +35,7 @@
"Avatar": "Avatar", "Avatar": "Avatar",
"Back to previous page": "Voltar à página anterior", "Back to previous page": "Voltar à página anterior",
"Before you can login, you need to click on the link inside it to validate your account": "Antes de você poder começar, você precisa clicar no link que está no interior para validar a sua conta", "Before you can login, you need to click on the link inside it to validate your account": "Antes de você poder começar, você precisa clicar no link que está no interior para validar a sua conta",
"By {name}": "Por {name}", "By @{username}": "Por @{username}",
"Cancel": "Cancelar", "Cancel": "Cancelar",
"Cancel anonymous participation": "Cancelar participação anônima", "Cancel anonymous participation": "Cancelar participação anônima",
"Cancel creation": "Cancelar a criação", "Cancel creation": "Cancelar a criação",

View File

@ -26,7 +26,7 @@
"Are you sure you want to delete this event? This action cannot be reverted.": "Är du säker på att du vill radera det här evenemanget? Den här handlingen kan inte ångras.", "Are you sure you want to delete this event? This action cannot be reverted.": "Är du säker på att du vill radera det här evenemanget? Den här handlingen kan inte ångras.",
"Avatar": "Avatar", "Avatar": "Avatar",
"Before you can login, you need to click on the link inside it to validate your account": "Innan du loggar in måste du klicka på länken inuti det för att validera ditt konto", "Before you can login, you need to click on the link inside it to validate your account": "Innan du loggar in måste du klicka på länken inuti det för att validera ditt konto",
"By {name}": "Av {name}", "By @{username}": "Av @{username}",
"Cancel": "Avbryt", "Cancel": "Avbryt",
"Cancel creation": "Avbryt skapandet", "Cancel creation": "Avbryt skapandet",
"Cancel edition": "Avbryt redigeringen", "Cancel edition": "Avbryt redigeringen",

View File

@ -2,10 +2,10 @@
$primary: #424056; $primary: #424056;
$primary-invert: findColorInvert($primary); $primary-invert: findColorInvert($primary);
$secondary: #FAB12D; $secondary: #ffcc85;
$secondary-invert: findColorInvert($secondary); $secondary-invert: findColorInvert($secondary);
$success: #78cc8a; $success: #0ECCAF;
$success-invert: findColorInvert($success); $success-invert: findColorInvert($success);
$info: #36bcd4; $info: #36bcd4;
$info-invert: findColorInvert($info); $info-invert: findColorInvert($info);
@ -40,3 +40,27 @@ $hero-body-padding-medium: 6rem 1.5rem;
main > .container { main > .container {
background: $white; background: $white;
} }
$title-color: #3C376E;
$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
$title-weight: 700;
$title-size: 40px;
$title-sub-size: 45px;
$title-sup-size: 30px;
$subtitle-color: #3A384C;
$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
$subtitle-weight: 400;
$subtitle-size: 32px;
$subtitle-sub-size: 30px;
$subtitle-sup-size: 15px;
.title {
margin: 30px auto 45px;
}
.subtitle {
background: $secondary;
display: inline;
padding: 3px 8px;
margin: 15px auto 30px;
}

View File

@ -7,22 +7,22 @@
<div class="tile is-parent is-vertical is-6"> <div class="tile is-parent is-vertical is-6">
<article class="tile is-child box"> <article class="tile is-child box">
<p class="title">{{ dashboard.numberOfEvents }}</p> <p class="title">{{ dashboard.numberOfEvents }}</p>
<p class="subtitle">{{ $t('Published events')}}</p> <p>{{ $t('Published events')}}</p>
</article> </article>
<article class="tile is-child box"> <article class="tile is-child box">
<p class="title">{{ dashboard.numberOfComments}}</p> <p class="title">{{ dashboard.numberOfComments}}</p>
<p class="subtitle">{{ $t('Comments')}}</p> <p>{{ $t('Comments')}}</p>
</article> </article>
</div> </div>
<div class="tile is-parent is-vertical"> <div class="tile is-parent is-vertical">
<article class="tile is-child box"> <article class="tile is-child box">
<p class="title">{{ dashboard.numberOfUsers }}</p> <p class="title">{{ dashboard.numberOfUsers }}</p>
<p class="subtitle">{{ $t('Users')}}</p> <p>{{ $t('Users')}}</p>
</article> </article>
<router-link :to="{ name: RouteName.REPORTS}"> <router-link :to="{ name: RouteName.REPORTS}">
<article class="tile is-child box"> <article class="tile is-child box">
<p class="title">{{ dashboard.numberOfReports }}</p> <p class="title">{{ dashboard.numberOfReports }}</p>
<p class="subtitle">{{ $t('Opened reports')}}</p> <p>{{ $t('Opened reports')}}</p>
</article> </article>
</router-link> </router-link>
</div> </div>
@ -41,14 +41,14 @@
<div class="tile is-parent"> <div class="tile is-parent">
<router-link :to="{ name: RouteName.RELAYS }"> <router-link :to="{ name: RouteName.RELAYS }">
<article class="tile is-child box"> <article class="tile is-child box">
<p class="subtitle">{{ $t('Instances') }}</p> <span>{{ $t('Instances') }}</span>
</article> </article>
</router-link> </router-link>
</div> </div>
<div class="tile is-parent"> <div class="tile is-parent">
<router-link :to="{ name: RouteName.ADMIN_SETTINGS }"> <router-link :to="{ name: RouteName.ADMIN_SETTINGS }">
<article class="tile is-child box"> <article class="tile is-child box">
<p class="subtitle">{{ $t('Settings') }}</p> <span>{{ $t('Settings') }}</span>
</article> </article>
</router-link> </router-link>
</div> </div>

View File

@ -9,9 +9,9 @@
</h1> </h1>
<form ref="form"> <form ref="form">
<h2 class="subtitle"> <subtitle>
{{ $t('General information') }} {{ $t('General information') }}
</h2> </subtitle>
<picture-upload v-model="pictureFile" :textFallback="$t('Headline picture')" /> <picture-upload v-model="pictureFile" :textFallback="$t('Headline picture')" />
<b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]"> <b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
@ -50,9 +50,9 @@
</b-select> </b-select>
</b-field>--> </b-field>-->
<h2 class="subtitle"> <subtitle>
{{ $t('Who can view this event and participate') }} {{ $t('Who can view this event and participate') }}
</h2> </subtitle>
<div class="field"> <div class="field">
<b-radio v-model="event.visibility" <b-radio v-model="event.visibility"
name="eventVisibility" name="eventVisibility"
@ -118,9 +118,9 @@
</b-field> --> </b-field> -->
</div> </div>
<h2 class="subtitle"> <subtitle>
{{ $t('Public comment moderation') }} {{ $t('Public comment moderation') }}
</h2> </subtitle>
<div class="field"> <div class="field">
<b-radio v-model="event.options.commentModeration" <b-radio v-model="event.options.commentModeration"
@ -146,9 +146,9 @@
</b-radio> </b-radio>
</div> </div>
<h2 class="subtitle"> <subtitle>
{{ $t('Status') }} {{ $t('Status') }}
</h2> </subtitle>
<b-field> <b-field>
<b-radio-button v-model="event.status" <b-radio-button v-model="event.status"
@ -302,11 +302,12 @@ import { RouteName } from '@/router';
import 'intersection-observer'; import 'intersection-observer';
import { CONFIG } from '@/graphql/config'; import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import Subtitle from '@/components/Utils/Subtitle.vue';
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10; const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
@Component({ @Component({
components: { IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent }, components: { Subtitle, IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent },
apollo: { apollo: {
currentActor: CURRENT_ACTOR_CLIENT, currentActor: CURRENT_ACTOR_CLIENT,
tags: TAGS, tags: TAGS,

View File

@ -173,7 +173,7 @@
<div class="organizer"> <div class="organizer">
<span> <span>
<span v-if="event.organizerActor"> <span v-if="event.organizerActor">
{{ $t('By {name}', {name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}) }} {{ $t('By @{username}', {username: event.organizerActor.preferredUsername}) }}
</span> </span>
<figure v-if="event.organizerActor.avatar" class="image is-48x48"> <figure v-if="event.organizerActor.avatar" class="image is-48x48">
<img <img
@ -188,9 +188,9 @@
</section> </section>
<section class="description section" :class="{ exists: event.description }"> <section class="description section" :class="{ exists: event.description }">
<div class="description-container container"> <div class="description-container container">
<h3 class="title"> <subtitle>
{{ $t('About this event') }} {{ $t('About this event') }}
</h3> </subtitle>
<p v-if="!event.description"> <p v-if="!event.description">
{{ $t("The event organizer didn't add any description.") }} {{ $t("The event organizer didn't add any description.") }}
</p> </p>
@ -202,7 +202,7 @@
</section> </section>
<section class="comments section" ref="commentsObserver"> <section class="comments section" ref="commentsObserver">
<a href="#comments"> <a href="#comments">
<h3 class="title" id="comments">{{ $t('Comments') }}</h3> <subtitle id="comments">{{ $t('Comments') }}</subtitle>
</a> </a>
<comment-tree v-if="loadComments" :event="event" /> <comment-tree v-if="loadComments" :event="event" />
</section> </section>
@ -312,9 +312,11 @@ import {
removeAnonymousParticipation, removeAnonymousParticipation,
} from '@/services/AnonymousParticipationStorage'; } from '@/services/AnonymousParticipationStorage';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import Subtitle from '@/components/Utils/Subtitle.vue';
@Component({ @Component({
components: { components: {
Subtitle,
ActorLink, ActorLink,
EventFullDate, EventFullDate,
EventCard, EventCard,
@ -848,6 +850,7 @@ export default class Event extends EventMixin {
word-break: break-word; word-break: break-word;
font-size: 1.7em; font-size: 1.7em;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0;
} }
span small { span small {

View File

@ -5,9 +5,9 @@
</h1> </h1>
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<section v-if="futureParticipations.length > 0"> <section v-if="futureParticipations.length > 0">
<h2 class="subtitle"> <subtitle>
{{ $t('Upcoming') }} {{ $t('Upcoming') }}
</h2> </subtitle>
<transition-group name="list" tag="p"> <transition-group name="list" tag="p">
<div v-for="month in monthlyFutureParticipations" :key="month[0]"> <div v-for="month in monthlyFutureParticipations" :key="month[0]">
<h3 class="upcoming-month">{{ month[0] }}</h3> <h3 class="upcoming-month">{{ month[0] }}</h3>
@ -27,9 +27,9 @@
</div> </div>
</section> </section>
<section v-if="drafts.length > 0"> <section v-if="drafts.length > 0">
<h2 class="subtitle"> <subtitle>
{{ $t('Drafts') }} {{ $t('Drafts') }}
</h2> </subtitle>
<div class="columns is-multiline"> <div class="columns is-multiline">
<EventCard <EventCard
v-for="draft in drafts" v-for="draft in drafts"
@ -40,9 +40,9 @@
</div> </div>
</section> </section>
<section v-if="pastParticipations.length > 0"> <section v-if="pastParticipations.length > 0">
<h2 class="subtitle"> <subtitle>
{{ $t('Past events') }} {{ $t('Past events') }}
</h2> </subtitle>
<transition-group name="list" tag="p"> <transition-group name="list" tag="p">
<div v-for="month in monthlyPastParticipations" :key="month[0]"> <div v-for="month in monthlyPastParticipations" :key="month[0]">
<h3>{{ month[0] }}</h3> <h3>{{ month[0] }}</h3>
@ -73,10 +73,12 @@ import { LOGGED_USER_PARTICIPATIONS, LOGGED_USER_DRAFTS } from '@/graphql/actor'
import { EventModel, IEvent, IParticipant, Participant, ParticipantRole } from '@/types/event.model'; import { EventModel, IEvent, IParticipant, Participant, ParticipantRole } from '@/types/event.model';
import EventListCard from '@/components/Event/EventListCard.vue'; import EventListCard from '@/components/Event/EventListCard.vue';
import EventCard from '@/components/Event/EventCard.vue'; import EventCard from '@/components/Event/EventCard.vue';
import Subtitle from '@/components/Utils/Subtitle.vue';
@Component({ @Component({
components: { components: {
Subtitle,
EventCard, EventCard,
EventListCard, EventListCard,
}, },
@ -221,19 +223,6 @@ export default class MyEvents extends Vue {
} }
section { section {
& > h2 {
display: block;
color: $primary;
font-size: 2.5rem;
text-decoration: underline;
text-decoration-color: $secondary;
}
h3 {
margin-top: 2rem;
font-weight: bold;
}
.upcoming-month { .upcoming-month {
text-transform: capitalize; text-transform: capitalize;
} }

View File

@ -24,9 +24,9 @@
</div> </div>
</div> </div>
<section class="box" v-if="group.organizedEvents.length > 0"> <section class="box" v-if="group.organizedEvents.length > 0">
<h2 class="subtitle"> <subtitle>
{{ $t('Organized') }} {{ $t('Organized') }}
</h2> </subtitle>
<div class="columns"> <div class="columns">
<EventCard <EventCard
v-for="event in group.organizedEvents" v-for="event in group.organizedEvents"
@ -38,9 +38,9 @@
</div> </div>
</section> </section>
<section v-if="group.members.length > 0"> <section v-if="group.members.length > 0">
<h2 class="subtitle"> <subtitle>
{{ $t('Members') }} {{ $t('Members') }}
</h2> </subtitle>
<div class="columns"> <div class="columns">
<span <span
v-for="member in group.members" v-for="member in group.members"
@ -60,6 +60,7 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue'; import EventCard from '@/components/Event/EventCard.vue';
import { FETCH_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; import { FETCH_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IGroup } from '@/types/actor'; import { IGroup } from '@/types/actor';
import Subtitle from '@/components/Utils/Subtitle.vue';
@Component({ @Component({
apollo: { apollo: {
@ -76,6 +77,7 @@ import { IGroup } from '@/types/actor';
}, },
}, },
components: { components: {
Subtitle,
EventCard, EventCard,
}, },
}) })

View File

@ -4,7 +4,7 @@
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1> <h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1>
<p class="subtitle">{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }} <p>{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }}</p>
<p class="instance-description">{{ config.description }}</p> <p class="instance-description">{{ config.description }}</p>
<!-- We don't invite to find other instances yet --> <!-- We don't invite to find other instances yet -->
<!-- <p v-if="!config.registrationsOpen"> <!-- <p v-if="!config.registrationsOpen">
@ -41,18 +41,18 @@
<div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]"> <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
<span class="date-component-container" v-if="isInLessThanSevenDays(row[0])"> <span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
<date-component :date="row[0]" /> <date-component :date="row[0]" />
<h3 class="subtitle" <subtitle
v-if="isToday(row[0])"> v-if="isToday(row[0])">
{{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }} {{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
</h3> </subtitle>
<h3 class="subtitle" <subtitle
v-else-if="isTomorrow(row[0])"> v-else-if="isTomorrow(row[0])">
{{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }} {{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
</h3> </subtitle>
<h3 class="subtitle" <subtitle
v-else-if="isInLessThanSevenDays(row[0])"> v-else-if="isInLessThanSevenDays(row[0])">
{{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }} {{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
</h3> </subtitle>
</span> </span>
<div> <div>
<EventListCard <EventListCard
@ -114,6 +114,7 @@ import { EventModel, IEvent, IParticipant, Participant, ParticipantRole } from '
import DateComponent from '@/components/Event/DateCalendarIcon.vue'; import DateComponent from '@/components/Event/DateCalendarIcon.vue';
import { CONFIG } from '@/graphql/config'; import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import Subtitle from '@/components/Utils/Subtitle.vue';
@Component({ @Component({
apollo: { apollo: {
@ -149,6 +150,7 @@ import { IConfig } from '@/types/config.model';
}, },
}, },
components: { components: {
Subtitle,
DateComponent, DateComponent,
EventListCard, EventListCard,
EventCard, EventCard,
@ -367,6 +369,10 @@ export default class Home extends Vue {
margin-top: -3px; margin-top: -3px;
background: lighten($secondary, 20%); background: lighten($secondary, 20%);
.title {
color: $primary;
}
.column figure.image img { .column figure.image img {
max-width: 400px; max-width: 400px;
} }

View File

@ -10,26 +10,30 @@
<section> <section>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div>
<h2 class="title">{{ $t('Features') }}</h2> <subtitle>{{ $t('Features') }}</subtitle>
<ul> <div class="content">
<li>{{ $t('Create and manage several identities from the same account') }}</li> <ul>
<li>{{ $t('Create, edit or delete events') }}</li> <li>{{ $t('Create and manage several identities from the same account') }}</li>
<li>{{ $t('Register for an event by choosing one of your identities') }}</li> <li>{{ $t('Create, edit or delete events') }}</li>
</ul> <li>{{ $t('Register for an event by choosing one of your identities') }}</li>
</ul>
</div>
</div> </div>
<router-link :to="{ name: RouteName.ABOUT }"> <router-link :to="{ name: RouteName.ABOUT }">
{{ $t('Learn more') }} {{ $t('Learn more') }}
</router-link> </router-link>
<hr> <hr>
<div class="content"> <div class="content">
<h2 class="title">{{ $t('About this instance') }}</h2> <subtitle>{{ $t('About this instance') }}</subtitle>
<p> <div class="content">
{{ $t("Your local administrator resumed its policy:") }} <p>
</p> {{ $t("Your local administrator resumed its policy:") }}
<ul> </p>
<li>{{ $t('Enjoy discovering Mobilizon!') }}</li> <ul>
</ul> <li>{{ $t('Enjoy discovering Mobilizon!') }}</li>
</ul>
</div>
<!-- <p>--> <!-- <p>-->
<!-- {{ $t('Please read the full rules') }}--> <!-- {{ $t('Please read the full rules') }}-->
<!-- </p>--> <!-- </p>-->
@ -107,8 +111,10 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import { CONFIG } from '@/graphql/config'; import { CONFIG } from '@/graphql/config';
import Subtitle from '@/components/Utils/Subtitle.vue';
@Component({ @Component({
components: { Subtitle },
metaInfo() { metaInfo() {
return { return {
// if no subcomponents specify a metaInfo.title, this title will be used // if no subcomponents specify a metaInfo.title, this title will be used