@saooti/octopus-sdk 41.7.2 → 41.8.0

package/src/components/display/podcasts/PodcastFilterList.vue

@@ -18,7 +18,9 @@
         :label="t('Search')"
       />
     </div>
+
     <PodcastList
+      v-if="!showSeasons"
       :first="dfirst"
       :size="dsize"
       :iab-id="iabId"
@@ -34,6 +36,36 @@
       :force-update-parameters="forceUpdateParameters"
       @fetch="fetch"
     />
+    <ClassicNav
+      v-else
+      v-model:active-tab="activeSeasonTab"
+      :tab-number="seasons.length"
+    >
+      <template v-for="season in seasons" #[tabNameSlot(season)]>
+        {{ $t('Podcast - Season N', { season }) }}
+      </template>
+
+      <template v-for="season in seasons" #[tabContentSlot(season)] :key="season">
+        <PodcastList
+          class="flex-grow-1"
+          :first="dfirst"
+          :size="dsize"
+          :iab-id="iabId"
+          :query="query"
+          :participant-id="participantId"
+          :emission-id="emissionId"
+          :organisation-id="productorId"
+          :sort-criteria="sort"
+          :reload="reloadList"
+          :include-hidden="editRight"
+          :show-count="showCount"
+          :display-sort-text="false"
+          :force-update-parameters="forceUpdateParameters"
+          :seasons="[season]"
+          @fetch="fetch($event, season)"
+        />
+      </template>
+    </ClassicNav>
   </section>
 </template>
 
@@ -44,28 +76,43 @@ import { Category } from "@/stores/class/general/category";
 import { defineAsyncComponent, ref, Ref, computed, watch } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { useI18n } from "vue-i18n";
+import ClassicNav from "../../misc/ClassicNav.vue";
+import { Emission } from "@/stores/class/general/emission";
+import { useSeasonsManagement } from "../../composable/useSeasonsManagement";
+import { PodcastSort } from "../../../api/podcastApi";
 const CategoryChooser = defineAsyncComponent(
   () => import("../categories/CategoryChooser.vue"),
 );
 
 //Props 
-const props = defineProps({
-  first: { default: 0, type: Number },
-  size: { default: 30, type: Number },
-  query: { default: undefined, type: String },
-  participantId: { default: undefined, type: Number },
-  name: { default: undefined, type: String },
-  emissionId: { default: undefined, type: Number },
-  categoryFilter: { default: false, type: Boolean },
-  reload: { default: false, type: Boolean },
-  editRight: { default: false, type: Boolean },
-  productorId: { default: () => [], type: Array as () => Array<string> },
-  showCount: { default: false, type: Boolean },
-  forceUpdateParameters: { default: false, type: Boolean },
-})
+const props = withDefaults(defineProps<{
+  first?: number;
+  size?: number;
+  query?: string;
+  participantId?: number;
+  name?: string;
+  emissionId?: number;
+  categoryFilter?: boolean;
+  reload?: boolean;
+  editRight?: boolean;
+  productorId?: Array<string>;
+  showCount?: boolean;
+  forceUpdateParameters?: boolean;
+  /**
+   * Emission for which to display podcasts
+   * If set, will check for seasons
+   */
+  emission?: Emission;
+}>(), {
+  first: 0,
+  size: 30
+});
 
 //Emits
-const emit = defineEmits(["fetch", "update:query"]);
+const emit = defineEmits<{
+  (e: "fetch", podcasts: Array<Podcast>, season: number|undefined): void;
+  (e: "update:query", query: string): void;
+}>();
 
 //Data 
 const dfirst = ref(props.first);
@@ -76,6 +123,7 @@ const iabId : Ref<number | undefined>= ref(undefined);
 
 //Composables
 const { t } = useI18n();
+const { areSeasonsEnabled } = useSeasonsManagement();
 
 //Computed
 const titleFilter = computed(() => {
@@ -84,7 +132,32 @@ const titleFilter = computed(() => {
     : t("All podcast emission button");
 });
 const query = computed(() => searchPattern.value.length > 3 ? searchPattern.value : "");
-const sort = computed(() =>  !query.value.length ? "DATE" : "SCORE");
+
+const showSeasons = computed(() => {
+  return props.emission !== undefined && areSeasonsEnabled(props.emission) && props.emission.seasonCount > 0;
+});
+
+const activeSeasonTab = ref(showSeasons.value ? (props.emission?.seasonCount ?? 1) - 1 : 0);
+
+const sort = computed((): PodcastSort => {
+  if(showSeasons.value === true) {
+    return PodcastSort.SEASONAL;
+  } else if(!query.value.length) {
+    return PodcastSort.DATE;
+  } else {
+    return PodcastSort.SCORE;
+  }
+});
+
+const seasons = computed((): Array<number> => {
+  const ary: Array<number> = [];
+  if (showSeasons.value === true) {
+    for (let i = 1; i <= props.emission.seasonCount; i++) {
+      ary.push(i);
+    }
+  }
+  return ary;
+});
 
 //Watch
 watch(()=>props.reload, () => {
@@ -98,7 +171,16 @@ watch(searchPattern, () => {
 function onCategorySelected(category: Category | undefined): void {
   iabId.value = category?.id ? category.id : undefined;
 }
-function fetch(podcasts: Array<Podcast>): void {
-  emit("fetch", podcasts);
+function fetch(podcasts: Array<Podcast>, season?: number): void {
+  emit("fetch", podcasts, season);
+}
+
+/** Name of the slot for the tab's title */
+function tabNameSlot(season: number): string {
+  return `${season - 1}`;
+}
+/** Name of the slot for the tab's content */
+function tabContentSlot(season: number): string {
+  return `tab${season - 1}`;
 }
 </script>

package/src/components/display/podcasts/PodcastInlineListTemplate.vue

@@ -5,8 +5,9 @@
         {{ title }}
       </component>
     </div>
+
     <div v-if="!podcastId" class="d-flex justify-content-between">
-      <div class="d-flex">
+      <div v-if="!noSort" class="d-flex">
         <button
           class="btn btn-underline"
           :class="{ active: !popularSort }"
@@ -82,6 +83,8 @@ const props = defineProps({
   noRubriquageId: { default: () => [], type: Array as () => Array<number> },
   podcastId: { default: undefined, type: Number },
   titleTag: { default: "h2", type: String },
+  /** Hide sort options */
+  noSort: { default: false, type: Boolean }
 })
 
 //Emits

package/src/components/display/podcasts/PodcastList.vue

@@ -83,6 +83,7 @@ const props = withDefaults(defineProps<{
   includeHidden?: boolean;
   showCount?: boolean;
   displaySortText?: boolean;
+  /** Criteria to sort on */
   sortCriteria?: PodcastSort;
   validity?: 'true'|'false'|''|boolean; // TODO improve this
   rubriqueId?: Array<number>;
@@ -96,6 +97,8 @@ const props = withDefaults(defineProps<{
   beneficiaries?: Array<string>;
   /** The emission groups to filter on */
   emissionGroups?: Array<EmissionGroup>;
+  /** The seasons to filter on */
+  seasons?: Array<number>;
 }>(), {
   first: 0,
   size: 30,
@@ -223,7 +226,8 @@ async function fetchContent(reset: boolean): Promise<void> {
     processingStatus: [PodcastProcessingStatus.Ready, PodcastProcessingStatus.Processing],
     withVideo: props.withVideo,
     tags: props.includeTag?.length ? props.includeTag : undefined,
-    beneficiaries: props.beneficiaries ?? undefined
+    beneficiaries: props.beneficiaries ?? undefined,
+    season: props.seasons
   };
 
   try {

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -88,6 +88,12 @@
             {{ podcast.organisation.name }}
           </router-link>
         </div>
+        <div v-if="showSeasonNumber" class="mb-1">
+          {{ `${t('Podcast - Season')} : ${podcast.seasonNumber}` }}
+        </div>
+        <div v-if="showSeasonEpisodeNumber" class="mb-1">
+          {{ `${t('Podcast - Episode number')} : ${podcast.seasonEpisodeNumber}` }}
+        </div>
         <div v-if="'' !== photoCredit" class="mb-1">
           {{ t("Photo credits") + " : " + photoCredit }}
         </div>
@@ -161,8 +167,12 @@ import { state } from "../../../stores/ParamSdkStore";
 import { useAuthStore } from "../../../stores/AuthStore";
 import displayHelper from "../../../helper/displayHelper";
 import {usePodcastView} from "../../composable/podcasts/usePodcastView";
-import { Podcast } from "@/stores/class/general/podcast";
-import { Conference } from "@/stores/class/conference/conference";
+import { Podcast } from "../../../stores/class/general/podcast";
+import { Conference } from "../../../stores/class/conference/conference";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useSeasonsManagement } from "../../composable/useSeasonsManagement";
+import { SeasonMode } from "../../../stores/class/general/emission";
 
 import { defineAsyncComponent, toRefs, computed } from "vue";
 const ErrorMessage = defineAsyncComponent(
@@ -193,8 +203,6 @@ const Countdown = defineAsyncComponent(() => import("../live/CountDown.vue"));
 const TagList = defineAsyncComponent(() => import("./TagList.vue"));
 const ShareAnonymous = defineAsyncComponent(() => import("../sharing/ShareAnonymous.vue"));
 const PodcastRubriqueList = defineAsyncComponent(() => import("./PodcastRubriqueList.vue"));
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
 
 //Props 
 const props = defineProps<{
@@ -222,6 +230,7 @@ const {
 } = usePodcastView(propsRef.podcast, propsRef.podcastConference);
 const authStore = useAuthStore();
 const router = useRouter();
+const { areSeasonsEnabled } = useSeasonsManagement();
 
 //Computed
 const podcastRubriques = computed(() => {
@@ -279,6 +288,14 @@ const tags = computed(() => {
   return tags;
 });
 
+const showSeasonNumber = computed((): boolean => {
+  return areSeasonsEnabled(props.podcast.emission) && props.podcast.seasonNumber !== undefined;
+});
+
+const showSeasonEpisodeNumber = computed((): boolean => {
+  return props.podcast.emission.seasonMode === SeasonMode.SEASON_WITH_PODCAST_NUMBERING && props.podcast.seasonEpisodeNumber !== undefined;
+});
+
 //Methods
 function formatCredits(credits: string|undefined): string {
   if (credits === undefined) {

package/src/components/display/podcasts/PodcastSwiperList.vue

@@ -11,6 +11,7 @@
     :rubrique-id="rubriqueId"
     :no-rubriquage-id="noRubriquageId"
     :title-tag="titleTag"
+    :no-sort="noSort"
     @sort-chrono="sortChrono"
     @sort-popular="sortPopular"
   >
@@ -59,10 +60,14 @@ const props = defineProps({
   rubriquageId: { default: () => [], type: Array as () => Array<number> },
   noRubriquageId: { default: () => [], type: Array as () => Array<number> },
   query: { default: undefined, type: String },
+  /** Filter on season */
+  season: { default: undefined, type: Number },
   lastThreeMonths: { default: false, type: Boolean },
   titleTag: { default: "h2", type: String },
   /** The podcast from which suggestions are made */
-  podcastId: { type: Number }
+  podcastId: { type: Number },
+  /** Hide sort options */
+  noSort: { default: false, type: Boolean }
 })
 
 //Emits
@@ -104,6 +109,7 @@ onBeforeMount(()=>{
 
 //Methods
 async function fetchNext(): Promise<void> {
+  // TODO use podcastApi
   const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
     api: 0,
     path: "podcast/search",
@@ -123,10 +129,10 @@ async function fetchNext(): Promise<void> {
       sort: popularSort.value ? "POPULARITY" : "DATE",
       query: props.query,
       includeStatus: ["READY", "PROCESSING"],
-      after:
-      popularSort.value && props.lastThreeMonths
+      after: popularSort.value && props.lastThreeMonths
           ? dayjs().subtract(3, "months").toISOString()
           : undefined,
+      season: props.season
     },
     specialTreatement: true,
   });

package/src/components/form/ClassicRadio.vue

@@ -10,12 +10,12 @@
                                      `selected` : true if the option is selected
 -->
 <template>
-  <div role="radiogroup" class="d-flex" :class="isColumn ? 'flex-column' : ''">
+  <div role="radiogroup" class="d-flex" :class="isColumn !== false ? 'flex-column' : ''">
     <div
       v-for="option in options"
       :key="option.title"
       class="octopus-form-item"
-      :class="isColumn ? 'd-flex flex-nowrap align-items-center' : 'me-2'"
+      :class="isColumn !== false ? 'd-flex flex-nowrap align-items-center' : 'me-2'"
     >
       <input
         :id="idRadio + option.value"
@@ -37,22 +37,21 @@
 
 <script setup generic="T extends { title: string; value: string|undefined; }" lang="ts">
 //Props 
-const { textInit } = defineProps({
-  idRadio: { default: "", type: String },
-  isDisabled: { default: false, type: Boolean },
-  options: {
-    default: () => [],
-    type: Array as () => Array<T>,
-  },
-  textInit: { default: undefined, type: String },
-  isColumn: { default: true, type: Boolean },
-})
+const { textInit, isColumn = true } = defineProps<{
+  options: Array<T>;
+  textInit?: string;
+  idRadio?: string;
+  isDisabled?: boolean;
+  isColumn?: boolean;
+}>();
 
 //Emits
-const emit = defineEmits(["update:textInit"]);
+const emit = defineEmits<{
+  (e: 'update:textInit', value: string): void;
+}>();
 
 //Methods
-function onChange(value:string){
+function onChange(value: string){
   emit('update:textInit', value)
 }
 

package/src/components/misc/TopBar.vue

@@ -14,7 +14,13 @@
       :options="options?.topBarMainContent"
     />
   </header>
-  <div v-if="generalStore.contentToDisplay" class="header-content-bg" :style="headerBackgroundImage" :class="{ scrolled: scrolled, 'header-force-blur':needToBlur }" >
+
+  <div
+    v-if="generalStore.contentToDisplay"
+    class="header-content-bg"
+    :style="headerBackgroundImage"
+    :class="{ scrolled: scrolled, 'header-force-blur':needToBlur }"
+  >
     <div class="header-additional-content header-content">
       <h1 v-if="!scrolled" class="text-truncate">
         {{ titleToDisplay }}

package/src/components/pages/EmissionPage.vue

@@ -54,7 +54,7 @@
                 :just-buttons="true"
               />
               <div class="ms-2 fw-bold">
-                {{ t("Listen to the latest episode") }}
+                {{ messageListenEpisode }}
               </div>
             </div>
 
@@ -99,6 +99,7 @@
             :size="ps"
             :show-count="true"
             :emission-id="emissionId"
+            :emission="emission"
             :category-filter="false"
             :edit-right="editRight"
             :productor-id="[emission.orga.id]"
@@ -138,6 +139,7 @@ import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 import ErrorMessage from "../misc/ErrorMessage.vue";
 import ClassicHelpButton from "../misc/ClassicHelpButton.vue";
 import { emissionApi } from "../../api/emissionApi";
+import { useSeasonsManagement } from "../composable/useSeasonsManagement";
 
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
 const PodcastFilterList = defineAsyncComponent(
@@ -193,15 +195,16 @@ const { t } = useI18n();
 const { useProxyImageUrl } = useImageProxy();
 const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
 const { updatePathParams } = useSeoTitleUrl();
-const {handle403} = useErrorHandler();
+const { handle403 } = useErrorHandler();
 const filterStore = useFilterStore();
-const generalStore= useGeneralStore();
-const route= useRoute();
+const generalStore = useGeneralStore();
+const route = useRoute();
 const {
   searchPattern,
   paginateFirst,
   isInit
 } = useSimplePageParam(props, true);
+const { areSeasonsEnabled, formatSeason } = useSeasonsManagement();
 
 
 //Computed
@@ -209,9 +212,17 @@ const name = computed(() => emission.value?.name ?? "");
 const description = computed(() => emission.value?.description ?? "");
 const editRight = computed(() => isEditRights(emission.value?.orga.id));
 
+const messageListenEpisode = computed((): string => {
+  const base = t("Listen to the latest episode");
+  if (lastPodcast.value !== undefined && areSeasonsEnabled(emission.value)) {
+    return base + ` (${formatSeason(lastPodcast.value)})`;
+  } else {
+    return base;
+  }
+});
 
 //Watch
-watch(()=>props.emissionId, () => {getEmissionDetails()}, {immediate: true});
+watch(() => props.emissionId, getEmissionDetails, { immediate: true });
 
 
 onBeforeUnmount(() => {
@@ -248,12 +259,13 @@ async function getEmissionDetails(): Promise<void> {
     initError();
   }
 }
-function podcastsFetched(podcasts: Array<Podcast>) {
+function podcastsFetched(podcasts: Array<Podcast>, season: number|undefined) {
+  if (season !== undefined && season !== emission.value?.seasonCount) {
+    return;
+  }
+
   for (const podcast of podcasts) {
-    if (
-      "READY" === podcast.processingStatus &&
-      podcast.availability.visibility
-    ) {
+    if ("READY" === podcast.processingStatus && podcast.availability.visibility) {
       lastPodcast.value = podcast;
       return;
     }

package/src/locale/de.json

@@ -417,5 +417,11 @@
   "Podcast": "Folge",
   "Player - Transcription - AI Warning": "Die Transkription basiert auf KI und kann Fehler enthalten, bitte teilen Sie uns dies mit.",
   "All organisations": "Alle Organisationen",
-  "Emission subtitle": "Untertitel der Sendung"
+  "Emission subtitle": "Untertitel der Sendung",
+  "Podcast type - Full": "Standard",
+  "Podcast type - Trailer": "Anhänger",
+  "Podcast type - Bonus": "Boni",
+  "Podcast - Season N": "Saison {season}",
+  "Podcast - Season": "Jahreszeit",
+  "Podcast - Episode number": "Episodennummer"
 }

package/src/locale/en.json

@@ -417,5 +417,11 @@
   "Podcast": "Episode",
   "Player - Transcription - AI Warning": "The transcription is based on AI and may contain errors, please let us know.",
   "All organisations": "All organizations",
-  "Emission subtitle": "Subtitle of the show"
+  "Emission subtitle": "Subtitle of the show",
+  "Podcast type - Full": "Standard",
+  "Podcast type - Trailer": "Trailer",
+  "Podcast type - Bonus": "Bonuses",
+  "Podcast - Season N": "Saison {season}",
+  "Podcast - Season": "Season",
+  "Podcast - Episode number": "Episode number"
 }

package/src/locale/es.json

@@ -417,5 +417,11 @@
   "Podcast": "Episodio",
   "Player - Transcription - AI Warning": "La transcripción se basa en IA y puede contener errores, háganoslo saber.",
   "All organisations": "Todas las organizaciones",
-  "Emission subtitle": "Subtítulo del programa"
+  "Emission subtitle": "Subtítulo del programa",
+  "Podcast type - Full": "Estándar",
+  "Podcast type - Trailer": "Tráiler",
+  "Podcast type - Bonus": "Bonificaciones",
+  "Podcast - Season N": "Temporada {season}",
+  "Podcast - Season": "Estación",
+  "Podcast - Episode number": "Número de episodio"
 }

package/src/locale/fr.json

@@ -440,5 +440,11 @@
   "SmartLink - To emission on podcastmaker": "Page officielle de l'émission - {organisation}",
   "SmartLink - To playlist on podcastmaker": "Page officielle de la playlist - {organisation}",
   "Miniplayer - Parameters - Auto height": "Hauteur automatique",
-  "Player - Transcription - AI Warning": "La transcription est basée sur une IA et peut comporter des erreurs, n’hésitez pas à nous en informer."
+  "Player - Transcription - AI Warning": "La transcription est basée sur une IA et peut comporter des erreurs, n’hésitez pas à nous en informer.",
+  "Podcast type - Full": "Standard",
+  "Podcast type - Trailer": "Trailer",
+  "Podcast type - Bonus": "Bonus",
+  "Podcast - Season N": "Saison {season}",
+  "Podcast - Season": "Saison",
+  "Podcast - Episode number": "Numéro d'épisode"
 }

package/src/locale/it.json

@@ -418,5 +418,11 @@
     "Podcast": "Episodio",
     "Player - Transcription - AI Warning": "La trascrizione si basa sull'intelligenza artificiale e potrebbe contenere errori, faccelo sapere.",
     "All organisations": "Tutte le organizzazioni",
-    "Emission subtitle": "Sottotitolo dello spettacolo"
+    "Emission subtitle": "Sottotitolo dello spettacolo",
+    "Podcast type - Full": "Standard",
+    "Podcast type - Trailer": "Rimorchio",
+    "Podcast type - Bonus": "Bonus",
+    "Podcast - Season N": "Stagione {season}",
+    "Podcast - Season": "Stagione",
+    "Podcast - Episode number": "Numero dell'episodio"
 }

package/src/locale/sl.json

@@ -416,5 +416,11 @@
   "Podcast": "Epizoda",
   "Player - Transcription - AI Warning": "Transkripcija temelji na umetni inteligenci in lahko vsebuje napake, zato nas obvestite.",
   "All organisations": "Vse organizacije",
-  "Emission subtitle": "Podnaslov oddaje"
+  "Emission subtitle": "Podnaslov oddaje",
+  "Podcast type - Full": "Standardno",
+  "Podcast type - Trailer": "Napovednik",
+  "Podcast type - Bonus": "Bonusi",
+  "Podcast - Season N": "Sezona {season}",
+  "Podcast - Season": "Sezona",
+  "Podcast - Episode number": "Številka epizode"
 }

package/src/stores/class/general/emission.ts

@@ -4,6 +4,18 @@ import { Person } from "../user/person";
 import { ItuneCategory } from "./ituneCategory";
 import { Annotations } from ".";
 
+/**
+ * Season settings for emissions
+ */
+export enum SeasonMode {
+  /** This emission doesn't have seasons */
+  NO_SEASON = 'NO_SEASON',
+  /** This emission has seasons and episodes are ordered by date */
+  SEASON_WITHOUT_PODCAST_NUMBERING = 'SEASON_WITHOUT_PODCAST_NUMBERING',
+  /** This emission has seasons and episodes are ordered manually */
+  SEASON_WITH_PODCAST_NUMBERING = 'SEASON_WITH_PODCAST_NUMBERING'
+}
+
 /**
  * An emission
  */
@@ -40,6 +52,12 @@ export interface Emission {
   tags?: string[];
   /** The ids of groups this emission belongs to */
   groupIds?: Array<number>
+  /** Seasons configuration */
+  seasonMode: SeasonMode;
+  /** Number of seasons on this emission */
+  seasonCount: number;
+  /** Indicates that the emission has explicit content */
+  explicit?: boolean;
 }
 
 export function emptyEmissionData(orga?: Organisation): Emission {
@@ -54,5 +72,7 @@ export function emptyEmissionData(orga?: Organisation): Emission {
     rubriqueIds: [],
     monetisable: "UNDEFINED",
     limits: {},
+    seasonMode: SeasonMode.NO_SEASON,
+    seasonCount: 0
   };
 }

package/src/stores/class/general/podcast.ts

@@ -17,6 +17,13 @@ export enum PodcastProcessingStatus {
   All = "ALL"
 }
 
+/** Type of episode */
+export enum PodcastType {
+  FULL = 'full',
+  TRAILER = 'trailer',
+  BONUS = 'bonus'
+}
+
 /** Describe the availability of the podcast */
 export interface PodcastAvailability {
   date?: number | null;
@@ -46,6 +53,8 @@ export interface Podcast {
   availability: PodcastAvailability;
   /** Description of the podcast */
   description?: string;
+  /** Optional summary of the podcast */
+  summary?: string;
   /** Publishing date */
   pubDate?: string;
   /** The status of the processing of the audio file */
@@ -56,6 +65,14 @@ export interface Podcast {
   ofTags?: Array<string>;
   /** List of beneficiaries/rights holders */
   beneficiaries: Array<string>;
+  /** Indicates that the episode has explicit content */
+  explicit?: boolean;
+  /** Type of episode */
+  seasonEpisodeType: PodcastType;
+  /** Number of season in which podcast belongs */
+  seasonNumber?: number;
+  /** Order of the episode in the season */
+  seasonEpisodeNumber?: number;
 
   createdAt?: string;
   createdByUserId?: string;

package/src/style/general.scss

@@ -47,6 +47,13 @@ main, #app{
     font-family: var(--octopus-font-family);
   }
 
+  // Display an asterisk for required fields
+  label.required:after {
+    content: "*";
+    font-weight: bold;
+    margin-left: 3px;
+  }
+
   /** Link style */
   a{
     word-break: break-word;