Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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

2
js/src/components/Account/ParticipantCard.vue
View File

@ -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>

2
js/src/components/Event/DateCalendarIcon.vue
View File

@ -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;
}

100
js/src/components/Event/EventCard.vue
View File

@ -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 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>
<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 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;
}
width: 15rem;
display: block;
overflow: hidden;
span:not(:last-child):after {
content: '-';
padding-left: 0.25rem;
}
flex-grow: 1;
span:last-child {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

5
js/src/components/Participation/ParticipationWithAccount.vue
View File

@ -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;

5
js/src/components/Participation/UnloggedParticipation.vue
View File

@ -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,

32
js/src/components/Utils/Subtitle.vue Normal file
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>

2
js/src/i18n/ar.json
View File

@ -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": "إلغاء التحرير",

2
js/src/i18n/be.json
View File

@ -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": "Адмяніць рэдагаванне",

2
js/src/i18n/ca.json
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.",
"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ó",

2
js/src/i18n/de.json
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.",
"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",

2
js/src/i18n/en_US.json
View File

@ -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",

2
js/src/i18n/fi.json
View File

@ -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",

2
js/src/i18n/fr_FR.json
View File

@ -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",

2
js/src/i18n/nl.json
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.",
"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",

2
js/src/i18n/oc.json
View File

@ -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",

2
js/src/i18n/pl.json
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.",
"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ę",

2
js/src/i18n/pt_BR.json
View File

@ -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",

2
js/src/i18n/sv.json
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.",
"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",

28
js/src/variables.scss
View File

@ -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;
}

12
js/src/views/Admin/Dashboard.vue
View File

@ -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>

19
js/src/views/Event/Edit.vue
View File

@ -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,

11
js/src/views/Event/Event.vue
View File

@ -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 {

27
js/src/views/Event/MyEvents.vue
View File

@ -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;
}

10
js/src/views/Group/Group.vue
View File

@ -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,
},
})

20
js/src/views/Home.vue
View File

@ -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;
}

34
js/src/views/User/Register.vue
View File

@ -10,26 +10,30 @@
<section>
<div class="columns">
<div class="column">
<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>
<subtitle>{{ $t('Features') }}</subtitle>
<div class="content">
<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>
<p>
{{ $t("Your local administrator resumed its policy:") }}
</p>
<ul>
<li>{{ $t('Enjoy discovering Mobilizon!') }}</li>
</ul>
<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