UI improvements

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

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