introduced theming.headingCustomStyles allowing to specify custom styles in event heading

Author: fcamblor

cloud/functions/src/crawlers/crawler-parsers.ts

@@ -54,7 +54,12 @@ export const EVENT_THEME_PARSER = z.object({
         secondaryContrastHex: HEX_COLOR_PARSER,
         tertiaryHex: HEX_COLOR_PARSER,
         tertiaryContrastHex: HEX_COLOR_PARSER
-    })
+    }),
+    headingCustomStyles: z.object({
+      title: z.string().nullable(),
+      subTitle: z.string().nullable(),
+      banner: z.string().nullable(),
+    }).optional().nullable().default(null),
 })
 
 export const SOCIAL_MEDIA_TYPE = z.union([

mobile/src/components/events/CurrentEventHeader.vue

@@ -5,16 +5,12 @@
         <ion-button class="viewsHeader-back" @click="backButtonClicked" shape="round" :aria-label="LL.Back_List_Events()" data-testid="back-to-events-list">
           <ion-icon src="/assets/icons/solid/checkbox-list.svg"></ion-icon>
         </ion-button>
-        <!-- TODO Connect variables custom title -->
         <!-- NOTE (!) See how to manage the dynamic import of font familly via a URL. --> 
         <div class="viewsHeader-title">
-          <span class="viewsHeader-name" 
-          :style="{
-                '--voxxrin-event-theme-head-title-font-familly': 'Poppins, sans-serif',
-                '--voxxrin-event-theme-head-title-font-weight': '700'
-              }"
-          >{{ confDescriptor.headingTitle }}</span>
-          <span v-if="confDescriptor.headingSubTitle" class="viewsHeader-subTitle">{{ confDescriptor.headingSubTitle }}</span>
+          <span class="viewsHeader-name" :style="confDescriptor.theming.headingCustomStyles?.title || ''">{{ confDescriptor.headingTitle }}</span>
+          <span v-if="confDescriptor.headingSubTitle"
+                :style="confDescriptor.theming.headingCustomStyles?.subTitle || ''" class="viewsHeader-subTitle"
+          >{{ confDescriptor.headingSubTitle }}</span>
         </div>
       </div>
 
@@ -24,9 +20,11 @@
         </div>
       </div>
     </ion-toolbar>
-    <!-- TODO Connect variables custom title -->
-    <img :src="confDescriptor.backgroundUrl" :alt="LL.Banner_Event()"
-    :style="{ '--voxxrin-event-theme-head-background-justify': 'right'}">
+    <img
+      :src="confDescriptor.backgroundUrl"
+      :alt="LL.Banner_Event()"
+      :style="confDescriptor.theming.headingCustomStyles?.banner || ''"
+    />
   </ion-header>
 </template>
 
@@ -70,7 +68,6 @@ const headingBackground = computed(() => {
       width: 100%;
       z-index: -1;
       object-fit: cover;
-      object-position: var(--voxxrin-event-theme-head-background-justify);
     }
 
     .btnUser {
@@ -108,8 +105,6 @@ const headingBackground = computed(() => {
       padding-top: 16px;
       font-weight: bold;
       color: var(--voxxrin-event-theme-colors-primary-contrast-hex);
-      font-family: var(--voxxrin-event-theme-head-title-font-familly), sans-serif;
-      font-weight: var(--voxxrin-event-theme-head-title-font-weight);
 
        &-title {
         position: relative;
@@ -119,7 +114,6 @@ const headingBackground = computed(() => {
         align-content: center;
         justify-content: center;
         line-height: 1;
-        color: white;
 
         @media (min-width:768px) {
           position: absolute;
@@ -142,7 +136,7 @@ const headingBackground = computed(() => {
         .viewsHeader-name {
           line-height: 1;
           font-size: calc(26px + 16 * (100vw - 320px) / 1024);
-          font-weight: 800;
+          font-weight: 700;
         }
 
         .viewsHeader-subTitle {

mobile/src/models/VoxxrinEvent.ts

@@ -117,5 +117,6 @@ export function toVoxxrinEventTheme(firestoreTheme: EventTheme): VoxxrinEventThe
             tertiaryRGB: hexToRGB(firestoreTheme.colors.tertiaryHex),
             tertiaryContrastRGB: hexToRGB(firestoreTheme.colors.tertiaryContrastHex),
         },
+        headingCustomStyles: firestoreTheme.headingCustomStyles,
     }
 }

shared/event-list.firestore.d.ts

@@ -8,7 +8,12 @@ export type EventTheme = {
         secondaryContrastHex: HexColor,
         tertiaryHex: HexColor,
         tertiaryContrastHex: HexColor
-    }
+    },
+    headingCustomStyles: {
+      title: string|null,
+      subTitle: string|null,
+      banner: string|null,
+    }|null,
 }
 
 export type Day = {