UI improvements
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
7bbd42cec1
commit
d5a44eee9a
|
@ -22,6 +22,7 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
|
|||
- Possibility to delete your account
|
||||
|
||||
### Changed
|
||||
- Improved a bit color theme
|
||||
- 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 keys are rotated some time after sending a `Delete` activity
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
</figure>
|
||||
</div>
|
||||
<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-else>@{{ participant.actor.preferredUsername }}</small>
|
||||
</div>
|
||||
|
|
|
@ -56,6 +56,7 @@ export default class DateCalendarIcon extends Vue {
|
|||
|
||||
span {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
|
||||
&.month {
|
||||
color: #fa3e3e;
|
||||
|
@ -66,7 +67,6 @@ export default class DateCalendarIcon extends Vue {
|
|||
}
|
||||
|
||||
&.day {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
|
|
@ -31,24 +31,41 @@ A simple card for an event
|
|||
<div class="card-image">
|
||||
<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">
|
||||
<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>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title-wrapper">
|
||||
<div class="date-component">
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />
|
||||
</div>
|
||||
<h2 class="title" ref="title">{{ event.title }}</h2>
|
||||
</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>
|
||||
<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>
|
||||
<!-- <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="event.participants.length > 0 &&-->
|
||||
<!-- mergedOptions.loggedPerson &&-->
|
||||
|
@ -76,7 +93,7 @@ A simple card for an event
|
|||
import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
|
||||
import { Person } from '@/types/actor';
|
||||
import { Actor, Person } from '@/types/actor';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
|
@ -100,9 +117,8 @@ export default class EventCard extends Vue {
|
|||
return { ...this.defaultOptions, ...this.options };
|
||||
}
|
||||
|
||||
get actorDisplayName(): string {
|
||||
const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
|
||||
return actor.displayName();
|
||||
get actor(): Actor {
|
||||
return Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -145,20 +161,16 @@ export default class EventCard extends Vue {
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
margin-right: -5px;
|
||||
margin-right: -3px;
|
||||
z-index: 10;
|
||||
max-width: 40%;
|
||||
|
||||
span.tag {
|
||||
margin: 5px auto;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
|
||||
/*word-break: break-all;*/
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
/*text-align: right;*/
|
||||
font-size: 1em;
|
||||
/*padding: 0 1px;*/
|
||||
line-height: 1.75em;
|
||||
}
|
||||
}
|
||||
|
@ -172,47 +184,33 @@ export default class EventCard extends Vue {
|
|||
}
|
||||
}
|
||||
|
||||
div.content {
|
||||
padding: 5px;
|
||||
background: $secondary;
|
||||
.card-content {
|
||||
padding: 0.5rem;
|
||||
|
||||
div.title-wrapper {
|
||||
display: flex;
|
||||
|
||||
div.date-component {
|
||||
flex: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
.event-title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
font-size: 1.4em;
|
||||
margin-top: auto;
|
||||
min-height: 3.4rem;
|
||||
min-height: 2.4rem;
|
||||
}
|
||||
}
|
||||
span.organizer-place-wrapper {
|
||||
display: flex;
|
||||
padding: 0 0.5rem 0.3rem;
|
||||
|
||||
.event-subtitle {
|
||||
font-size: 0.85rem;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
span:not(:last-child):after {
|
||||
content: '-';
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
width: 15rem;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<vertical-divider :content="$t('Or')" />
|
||||
<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('We will redirect you to your instance in order to interact with this event') }}</p>
|
||||
<form @submit.prevent="redirectToInstance">
|
||||
|
@ -41,9 +41,10 @@
|
|||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { RouteName } from '@/router';
|
||||
import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
@Component({
|
||||
components: { VerticalDivider },
|
||||
components: { Subtitle, VerticalDivider },
|
||||
})
|
||||
export default class ParticipationWithAccount extends Vue {
|
||||
@Prop({ type: String, required: true }) uuid!: string;
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<section class="section container hero">
|
||||
<div class="hero-body" v-if="event">
|
||||
<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" />
|
||||
<div class="columns has-text-centered">
|
||||
<div class="column">
|
||||
|
@ -58,9 +58,10 @@ import { EventModel, IEvent } from '@/types/event.model';
|
|||
import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
|
||||
import { CONFIG } from '@/graphql/config';
|
||||
import { IConfig } from '@/types/config.model';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
@Component({
|
||||
components: { VerticalDivider, EventListViewCard, EventListCard },
|
||||
components: { VerticalDivider, EventListViewCard, EventListCard, Subtitle },
|
||||
apollo: {
|
||||
event: {
|
||||
query: FETCH_EVENT,
|
||||
|
|
|
@ -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>
|
|
@ -17,7 +17,7 @@
|
|||
"Approve": "قبول",
|
||||
"Are you sure you want to cancel your participation at event \"{title}\"?": "هل أنت متأكد مِن أنك تريد الغاء مشاركتك في فعالية \"{title}\"؟",
|
||||
"Avatar": "الصورة الرمزية",
|
||||
"By {name}": "حسب {name}",
|
||||
"By @{username}": "حسب @{username}",
|
||||
"Cancel": "الغاء",
|
||||
"Cancel creation": "إلغاء الإنشاء",
|
||||
"Cancel edition": "إلغاء التحرير",
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
"Are you sure you want to delete this event? This action cannot be reverted.": "Вы сапраўды хочаце выдаліць гэту падзею? Гэта дзеянне нельга адмяніць.",
|
||||
"Avatar": "Аватар",
|
||||
"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 creation": "Адмяніць стварэнне",
|
||||
"Cancel edition": "Адмяніць рэдагаванне",
|
||||
|
|
|
@ -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.",
|
||||
"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",
|
||||
"By {name}": "De {name}",
|
||||
"By @{username}": "De @{username}",
|
||||
"Cancel": "Canceŀla",
|
||||
"Cancel creation": "Canceŀla la creació",
|
||||
"Cancel edition": "Canceŀla l'edició",
|
||||
|
|
|
@ -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.",
|
||||
"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.",
|
||||
"By {name}": "Nach {name}",
|
||||
"By @{username}": "Nach @{username}",
|
||||
"Cancel": "Abbrechen",
|
||||
"Cancel creation": "Erstellung abbrechen",
|
||||
"Cancel edition": "Bearbeiten abbrechen",
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
"Avatar": "Avatar",
|
||||
"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",
|
||||
"By {name}": "By {name}",
|
||||
"By @{username}": "By @{username}",
|
||||
"Cancel anonymous participation": "Cancel anonymous participation",
|
||||
"Cancel creation": "Cancel creation",
|
||||
"Cancel edition": "Cancel edition",
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
"Avatar": "Avatar",
|
||||
"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ä",
|
||||
"By {name}": "Tehnyt {name}",
|
||||
"By @{username}": "Tehnyt @{username}",
|
||||
"Cancel": "Peruuta",
|
||||
"Cancel anonymous participation": "Peruuta anonyymi osallistuminen",
|
||||
"Cancel creation": "Peruuta luonti",
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
"Avatar": "Avatar",
|
||||
"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",
|
||||
"By {name}": "Par {name}",
|
||||
"By @{username}": "Par @{username}",
|
||||
"Cancel": "Annuler",
|
||||
"Cancel anonymous participation": "Annuler ma participation anonyme",
|
||||
"Cancel creation": "Annuler la création",
|
||||
|
|
|
@ -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.",
|
||||
"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",
|
||||
"By {name}": "Door {name}",
|
||||
"By @{username}": "Door @{username}",
|
||||
"Cancel": "Annuleren",
|
||||
"Cancel creation": "Aanmaken annuleren",
|
||||
"Cancel edition": "Bewerken annuleren",
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
"Avatar": "Avatar",
|
||||
"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",
|
||||
"By {name}": "Per {name}",
|
||||
"By @{username}": "Per @{username}",
|
||||
"Cancel": "Anullar",
|
||||
"Cancel anonymous participation": "Anullar la participacion anonima",
|
||||
"Cancel creation": "Anullar la creacion",
|
||||
|
|
|
@ -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.",
|
||||
"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",
|
||||
"By {name}": "Od {name}",
|
||||
"By @{username}": "Od @{username}",
|
||||
"Cancel": "Anuluj",
|
||||
"Cancel creation": "Anuluj tworzenie",
|
||||
"Cancel edition": "Anuluj edycję",
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
"Avatar": "Avatar",
|
||||
"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",
|
||||
"By {name}": "Por {name}",
|
||||
"By @{username}": "Por @{username}",
|
||||
"Cancel": "Cancelar",
|
||||
"Cancel anonymous participation": "Cancelar participação anônima",
|
||||
"Cancel creation": "Cancelar a criação",
|
||||
|
|
|
@ -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.",
|
||||
"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",
|
||||
"By {name}": "Av {name}",
|
||||
"By @{username}": "Av @{username}",
|
||||
"Cancel": "Avbryt",
|
||||
"Cancel creation": "Avbryt skapandet",
|
||||
"Cancel edition": "Avbryt redigeringen",
|
||||
|
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
$primary: #424056;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
$secondary: #FAB12D;
|
||||
$secondary: #ffcc85;
|
||||
$secondary-invert: findColorInvert($secondary);
|
||||
|
||||
$success: #78cc8a;
|
||||
$success: #0ECCAF;
|
||||
$success-invert: findColorInvert($success);
|
||||
$info: #36bcd4;
|
||||
$info-invert: findColorInvert($info);
|
||||
|
@ -40,3 +40,27 @@ $hero-body-padding-medium: 6rem 1.5rem;
|
|||
main > .container {
|
||||
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;
|
||||
}
|
|
@ -7,22 +7,22 @@
|
|||
<div class="tile is-parent is-vertical is-6">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">{{ dashboard.numberOfEvents }}</p>
|
||||
<p class="subtitle">{{ $t('Published events')}}</p>
|
||||
<p>{{ $t('Published events')}}</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="title">{{ dashboard.numberOfComments}}</p>
|
||||
<p class="subtitle">{{ $t('Comments')}}</p>
|
||||
<p>{{ $t('Comments')}}</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">{{ dashboard.numberOfUsers }}</p>
|
||||
<p class="subtitle">{{ $t('Users')}}</p>
|
||||
<p>{{ $t('Users')}}</p>
|
||||
</article>
|
||||
<router-link :to="{ name: RouteName.REPORTS}">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">{{ dashboard.numberOfReports }}</p>
|
||||
<p class="subtitle">{{ $t('Opened reports')}}</p>
|
||||
<p>{{ $t('Opened reports')}}</p>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
|
@ -41,14 +41,14 @@
|
|||
<div class="tile is-parent">
|
||||
<router-link :to="{ name: RouteName.RELAYS }">
|
||||
<article class="tile is-child box">
|
||||
<p class="subtitle">{{ $t('Instances') }}</p>
|
||||
<span>{{ $t('Instances') }}</span>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<router-link :to="{ name: RouteName.ADMIN_SETTINGS }">
|
||||
<article class="tile is-child box">
|
||||
<p class="subtitle">{{ $t('Settings') }}</p>
|
||||
<span>{{ $t('Settings') }}</span>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
|
@ -9,9 +9,9 @@
|
|||
</h1>
|
||||
|
||||
<form ref="form">
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('General information') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
<picture-upload v-model="pictureFile" :textFallback="$t('Headline picture')" />
|
||||
|
||||
<b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
|
||||
|
@ -50,9 +50,9 @@
|
|||
</b-select>
|
||||
</b-field>-->
|
||||
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Who can view this event and participate') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
<div class="field">
|
||||
<b-radio v-model="event.visibility"
|
||||
name="eventVisibility"
|
||||
|
@ -118,9 +118,9 @@
|
|||
</b-field> -->
|
||||
</div>
|
||||
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Public comment moderation') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
|
||||
<div class="field">
|
||||
<b-radio v-model="event.options.commentModeration"
|
||||
|
@ -146,9 +146,9 @@
|
|||
</b-radio>
|
||||
</div>
|
||||
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Status') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
|
||||
<b-field>
|
||||
<b-radio-button v-model="event.status"
|
||||
|
@ -302,11 +302,12 @@ import { RouteName } from '@/router';
|
|||
import 'intersection-observer';
|
||||
import { CONFIG } from '@/graphql/config';
|
||||
import { IConfig } from '@/types/config.model';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
|
||||
|
||||
@Component({
|
||||
components: { IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent },
|
||||
components: { Subtitle, IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent },
|
||||
apollo: {
|
||||
currentActor: CURRENT_ACTOR_CLIENT,
|
||||
tags: TAGS,
|
||||
|
|
|
@ -173,7 +173,7 @@
|
|||
<div class="organizer">
|
||||
<span>
|
||||
<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>
|
||||
<figure v-if="event.organizerActor.avatar" class="image is-48x48">
|
||||
<img
|
||||
|
@ -188,9 +188,9 @@
|
|||
</section>
|
||||
<section class="description section" :class="{ exists: event.description }">
|
||||
<div class="description-container container">
|
||||
<h3 class="title">
|
||||
<subtitle>
|
||||
{{ $t('About this event') }}
|
||||
</h3>
|
||||
</subtitle>
|
||||
<p v-if="!event.description">
|
||||
{{ $t("The event organizer didn't add any description.") }}
|
||||
</p>
|
||||
|
@ -202,7 +202,7 @@
|
|||
</section>
|
||||
<section class="comments section" ref="commentsObserver">
|
||||
<a href="#comments">
|
||||
<h3 class="title" id="comments">{{ $t('Comments') }}</h3>
|
||||
<subtitle id="comments">{{ $t('Comments') }}</subtitle>
|
||||
</a>
|
||||
<comment-tree v-if="loadComments" :event="event" />
|
||||
</section>
|
||||
|
@ -312,9 +312,11 @@ import {
|
|||
removeAnonymousParticipation,
|
||||
} from '@/services/AnonymousParticipationStorage';
|
||||
import { IConfig } from '@/types/config.model';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Subtitle,
|
||||
ActorLink,
|
||||
EventFullDate,
|
||||
EventCard,
|
||||
|
@ -848,6 +850,7 @@ export default class Event extends EventMixin {
|
|||
word-break: break-word;
|
||||
font-size: 1.7em;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
span small {
|
||||
|
|
|
@ -5,9 +5,9 @@
|
|||
</h1>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<section v-if="futureParticipations.length > 0">
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Upcoming') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
<transition-group name="list" tag="p">
|
||||
<div v-for="month in monthlyFutureParticipations" :key="month[0]">
|
||||
<h3 class="upcoming-month">{{ month[0] }}</h3>
|
||||
|
@ -27,9 +27,9 @@
|
|||
</div>
|
||||
</section>
|
||||
<section v-if="drafts.length > 0">
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Drafts') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
<div class="columns is-multiline">
|
||||
<EventCard
|
||||
v-for="draft in drafts"
|
||||
|
@ -40,9 +40,9 @@
|
|||
</div>
|
||||
</section>
|
||||
<section v-if="pastParticipations.length > 0">
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Past events') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
<transition-group name="list" tag="p">
|
||||
<div v-for="month in monthlyPastParticipations" :key="month[0]">
|
||||
<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 EventListCard from '@/components/Event/EventListCard.vue';
|
||||
import EventCard from '@/components/Event/EventCard.vue';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Subtitle,
|
||||
EventCard,
|
||||
EventListCard,
|
||||
},
|
||||
|
@ -221,19 +223,6 @@ export default class MyEvents extends Vue {
|
|||
}
|
||||
|
||||
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 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
|
@ -24,9 +24,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<section class="box" v-if="group.organizedEvents.length > 0">
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Organized') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
<div class="columns">
|
||||
<EventCard
|
||||
v-for="event in group.organizedEvents"
|
||||
|
@ -38,9 +38,9 @@
|
|||
</div>
|
||||
</section>
|
||||
<section v-if="group.members.length > 0">
|
||||
<h2 class="subtitle">
|
||||
<subtitle>
|
||||
{{ $t('Members') }}
|
||||
</h2>
|
||||
</subtitle>
|
||||
<div class="columns">
|
||||
<span
|
||||
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 { FETCH_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
|
||||
import { IGroup } from '@/types/actor';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
|
@ -76,6 +77,7 @@ import { IGroup } from '@/types/actor';
|
|||
},
|
||||
},
|
||||
components: {
|
||||
Subtitle,
|
||||
EventCard,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<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>
|
||||
<!-- We don't invite to find other instances yet -->
|
||||
<!-- <p v-if="!config.registrationsOpen">
|
||||
|
@ -41,18 +41,18 @@
|
|||
<div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
|
||||
<span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
|
||||
<date-component :date="row[0]" />
|
||||
<h3 class="subtitle"
|
||||
<subtitle
|
||||
v-if="isToday(row[0])">
|
||||
{{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
|
||||
</h3>
|
||||
<h3 class="subtitle"
|
||||
</subtitle>
|
||||
<subtitle
|
||||
v-else-if="isTomorrow(row[0])">
|
||||
{{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
|
||||
</h3>
|
||||
<h3 class="subtitle"
|
||||
</subtitle>
|
||||
<subtitle
|
||||
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])}) }}
|
||||
</h3>
|
||||
</subtitle>
|
||||
</span>
|
||||
<div>
|
||||
<EventListCard
|
||||
|
@ -114,6 +114,7 @@ import { EventModel, IEvent, IParticipant, Participant, ParticipantRole } from '
|
|||
import DateComponent from '@/components/Event/DateCalendarIcon.vue';
|
||||
import { CONFIG } from '@/graphql/config';
|
||||
import { IConfig } from '@/types/config.model';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
|
@ -149,6 +150,7 @@ import { IConfig } from '@/types/config.model';
|
|||
},
|
||||
},
|
||||
components: {
|
||||
Subtitle,
|
||||
DateComponent,
|
||||
EventListCard,
|
||||
EventCard,
|
||||
|
@ -367,6 +369,10 @@ export default class Home extends Vue {
|
|||
margin-top: -3px;
|
||||
background: lighten($secondary, 20%);
|
||||
|
||||
.title {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.column figure.image img {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
|
|
@ -10,26 +10,30 @@
|
|||
<section>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div>
|
||||
<subtitle>{{ $t('Features') }}</subtitle>
|
||||
<div class="content">
|
||||
<h2 class="title">{{ $t('Features') }}</h2>
|
||||
<ul>
|
||||
<li>{{ $t('Create and manage several identities from the same account') }}</li>
|
||||
<li>{{ $t('Create, edit or delete events') }}</li>
|
||||
<li>{{ $t('Register for an event by choosing one of your identities') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<router-link :to="{ name: RouteName.ABOUT }">
|
||||
{{ $t('Learn more') }}
|
||||
</router-link>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<h2 class="title">{{ $t('About this instance') }}</h2>
|
||||
<subtitle>{{ $t('About this instance') }}</subtitle>
|
||||
<div class="content">
|
||||
<p>
|
||||
{{ $t("Your local administrator resumed its policy:") }}
|
||||
</p>
|
||||
<ul>
|
||||
<li>{{ $t('Enjoy discovering Mobilizon!') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <p>-->
|
||||
<!-- {{ $t('Please read the full rules') }}-->
|
||||
<!-- </p>-->
|
||||
|
@ -107,8 +111,10 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
|
|||
import { RouteName } from '@/router';
|
||||
import { IConfig } from '@/types/config.model';
|
||||
import { CONFIG } from '@/graphql/config';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
@Component({
|
||||
components: { Subtitle },
|
||||
metaInfo() {
|
||||
return {
|
||||
// if no subcomponents specify a metaInfo.title, this title will be used
|
||||
|
|
Loading…
Reference in New Issue