UI improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Admin/Dashboard.vue

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

js/src/views/Event/Edit.vue

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

js/src/views/Event/Event.vue

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

js/src/views/Event/MyEvents.vue

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

js/src/views/Group/Group.vue

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

js/src/views/Home.vue

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

js/src/views/User/Register.vue

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