@saooti/octopus-sdk 38.3.7 → 39.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "38.3.7",
+  "version": "39.0.0",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -15,53 +15,53 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@saooti/octopus-api": "^0.36.0",
-    "@tiptap/extension-link": "^2.1.16",
-    "@tiptap/extension-underline": "^2.1.16",
-    "@tiptap/pm": "^2.1.16",
-    "@tiptap/starter-kit": "^2.1.16",
-    "@tiptap/vue-3": "^2.1.16",
+    "@saooti/octopus-api": "^0.38.0",
+    "@tiptap/extension-link": "^2.2.4",
+    "@tiptap/extension-underline": "^2.2.4",
+    "@tiptap/pm": "^2.2.4",
+    "@tiptap/starter-kit": "^2.2.4",
+    "@tiptap/vue-3": "^2.2.4",
     "@vue/cli": "^5.0.8",
-    "@vue/compat": "^3.4.15",
-    "@vuepic/vue-datepicker": "^7.4.1",
-    "@vueuse/core": "^10.7.2",
-    "autoprefixer": "^10.4.17",
-    "axios": "^1.6.5",
+    "@vue/compat": "^3.4.21",
+    "@vuepic/vue-datepicker": "^8.2.0",
+    "@vueuse/core": "^10.9.0",
+    "autoprefixer": "^10.4.18",
+    "axios": "^1.6.7",
     "dayjs": "^1.11.10",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "express": "^4.18.2",
-    "hls.js": "^1.5.1",
+    "express": "^4.18.3",
+    "hls.js": "^1.5.7",
     "humanize-duration": "^3.31.0",
     "jest": "^29.7.0",
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.1",
-    "sass": "^1.70.0",
+    "sass": "^1.71.1",
     "sonarqube-scanner": "^3.3.0",
-    "swiper": "^11.0.5",
-    "video.js": "^8.9.0",
+    "swiper": "^11.0.7",
+    "video.js": "^8.10.0",
     "videojs-contrib-quality-levels": "^4.0.0",
     "videojs-hls-quality-selector": "^1.1.4",
-    "vite": "^4.5.1",
-    "vue": "^3.4.15",
-    "vue-i18n": "^9.9.0",
+    "vite": "^5.1.5",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.10.1",
     "vue-recaptcha": "^2.0.3",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.3.0",
     "vue-select": "^4.0.0-beta.6",
     "vue3-lazyload": "^0.3.8",
-    "vue3-swatches": "^1.2.3"
+    "vue3-swatches": "^1.2.4"
   },
   "devDependencies": {
     "@types/videojs-contrib-quality-levels": "^2.0.4",
     "@types/videojs-hls-quality-selector": "^1.1.3",
     "@types/vue-select": "^3.16.8",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/compiler-sfc": "^3.4.15",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.21",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.22.0",
     "typescript": "^5.3.3"
   },
   "eslintConfig": {

package/sonarqube-scanner.js

@@ -1,18 +1,10 @@
 const scanner = require('sonarqube-scanner'); 
 scanner({ 
     options:{
-        "sonar.exclusions":"**/*.test.tsx", 
-     "sonar.tests":"./src", 
-     "sonar.test.inclusions":"**/*.test.tsx,**/*.test.ts", 
-     "sonar.typescript.lcov.reportPaths": "coverage/lcov.info", 
-   "sonar.testExecutionReportPaths": "coverage/test-report.xml" 
+        "sonar.sources":"./src" 
     },
-serverUrl:"http://localhost:9000", 
-login:"admin", 
-password:"saooti", 
-options:{ 
-    "sonar.sources":"./src" 
-}, 
+    serverUrl:"http://localhost:9000",
 }, 
 ()=>process.exit() 
-);
+);
+//Login/password not working with last version sonar so give the permission with admin and then run

package/src/App.vue

@@ -84,8 +84,8 @@ export default defineComponent({
       this.reload = !this.reload;
     },
   },
-  async created() {
-    await this.initApp();
+  created() {
+    this.initApp();
     setTimeout(() => {
       this.pageFullyLoad = true;
     }, 2000);

package/src/assets/bootstrap.scss

@@ -95,6 +95,12 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		&:hover{
 			background: $primaryColorMoreTransparent;
 		}
+		&:not(.btn-underline, .btn-primary, .btn-more, .btn-on-dark, .btn-transparent, .admin-button, .share-btn):disabled
+		{
+			background-color: #dddddd;
+			cursor: default;
+			color: #616161 !important;
+		}
 		//Button disable halo after click
 		&.btn-underline{
 				background: none;

package/src/assets/progressbar.scss

@@ -60,4 +60,13 @@
       right: 0;
     }
   }
+  .ambiance-progress {
+    background-color: #d1d1d1;
+    .octopus-progress-bar {
+      background-color: #747474;
+    }
+    .no-transition {
+      transition: none !important;
+    }
+  }
 }

package/src/assets/share.scss

@@ -1,4 +1,25 @@
 .octopus-app{
+  .sticker-empty-ressource{
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    align-self: center;
+    background: $blue-octopus;
+    padding: 0.5rem;
+    transition: all 0.5s ease;
+    color: white;
+    font-size: 0.6rem;
+    font-weight: bold;
+    letter-spacing: 1px;
+    box-shadow: 10px 10px 34px -15px hsla(0, 0%, 0%, 0.4);
+    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+    border: solid 2px #41403e;
+    cursor: auto;
+    &:hover {
+      box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
+      background: $octopus-primary-color;
+    }
+  }
   .category-filter-no-filter {
     position: absolute;
     top: 0;
@@ -146,6 +167,7 @@
   }
     
   .emission-item-container{
+    position: relative;
     list-style: none;
     background: #fff;
     border-radius: $octopus-borderradius;

package/src/components/display/comments/CommentParentInfo.vue

@@ -36,14 +36,19 @@ export default defineComponent({
       comment: undefined as CommentPodcast | undefined,
     };
   },
-  async created() {
-    if (this.comId) {
-      this.comment = await octopusApi.fetchData<CommentPodcast>(
-        2,
-        `comment/${this.comId}`,
-      );
-    }
-    this.loading = false;
+  created() {
+   this.fetchComment();
   },
+  methods:{
+    async fetchComment():Promise<void>{
+      if (this.comId) {
+        this.comment = await octopusApi.fetchData<CommentPodcast>(
+          2,
+          `comment/${this.comId}`,
+        );
+      }
+      this.loading = false;
+    }
+  }
 });
 </script>

package/src/components/display/filter/ProductorSearch.vue

@@ -97,7 +97,7 @@ export default defineComponent({
       }
     },
   },
-  async created() {
+  created() {
     if (!this.organisationId) return;
     if (this.filterOrgaId === this.organisationId) {
       this.keepOrganisation = true;

package/src/components/display/live/LiveItem.vue

@@ -36,7 +36,7 @@ export default defineComponent({
     };
   },
 
-  async created() {
+  created() {
     this.fetchPodcastData();
     this.watchStatus();
   },

package/src/components/display/playlist/PlaylistItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="editRight || activePlaylist" class="emission-item-container">
+  <div class="emission-item-container">
     <router-link
       :to="{
         name: 'playlist',
@@ -10,12 +10,13 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <div class="emission-item-text">
+        <div
+          v-if="!activePlaylist"
+          class="sticker-empty-ressource"
+        >
+          {{ $t('Empty playlist') }}
+        </div>
         <div class="d-flex align-items-center emission-name">
-          <span
-            v-if="!activePlaylist && !isPodcastmaker"
-            :title="$t('Playlist have not podcasts')"
-            class="saooti-warning text-danger me-1"
-          />
           {{ name }}
         </div>
         <div
@@ -84,13 +85,6 @@ export default defineComponent({
     organisationId(): string | undefined {
       return state.generalParameters.organisationId;
     },
-    editRight(): boolean {
-      return (
-        (true === state.generalParameters.isPlaylist &&
-          this.organisationId === this.playlist.organisation?.id) ||
-        (state.generalParameters.isAdmin as boolean)
-      );
-    },
     activePlaylist(): boolean {
       return 0 !== Object.keys(this.playlist.samplingViews ?? []).length;
     },

package/src/components/display/podcastmaker/PodcastmakerHeader.vue

@@ -33,9 +33,6 @@ export default defineComponent({
 <style lang="scss">
 @import "@scss/_variables.scss";
 .octopus-app {
-  /* .page-box {
-    position: relative;
-  } */
   .page-element.page-element-podcastmaker {
     margin-top: 11rem;
   }

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

@@ -167,8 +167,8 @@ export default defineComponent({
       }
     },
   },
-  async created() {
-    await this.fetchContent(true);
+  created() {
+    this.fetchContent(true);
   },
   methods: {
     reloadList() {

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

@@ -62,7 +62,7 @@ export default defineComponent({
   computed: {
     ouestFranceMainTag(): string | undefined {
       if (this.podcastAnnotations?.["mainOfTag"]) {
-        for (var key in this.podcastAnnotations) {
+        for (let key in this.podcastAnnotations) {
           if (
             this.podcastAnnotations[key] ===
               this.podcastAnnotations["mainOfTag"] &&

package/src/components/display/sharing/ShareButtons.vue

@@ -193,8 +193,7 @@ export default defineComponent({
         this.isProduction &&
         ((this.authOrganisation.attributes?.["openAi.active"] as
           | string
-          | undefined) === "true" ??
-          false)
+          | undefined) === "true")
       );
     },
     titleRssButton(): string {
@@ -268,24 +267,27 @@ export default defineComponent({
       return "";
     },
   },
-  async created() {
-    if (undefined !== this.participantId) {
-      this.displayRss = await octopusApi.fetchDataPublic<boolean>(
-        0,
-        `rss/participants/allowed/${this.organisationId}`,
-      );
-    } else {
-      this.displayRss = true;
-    }
-    if (!this.organisationId) {
-      return;
-    }
-    const attributes = await this.getOrgaAttributes(this.organisationId);
-    this.noSharing = "true" === attributes.noSharing;
-    this.isLoading = false;
+  created() {
+    this.initShareButtons();
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initShareButtons(){
+      if (undefined !== this.participantId) {
+        this.displayRss = await octopusApi.fetchDataPublic<boolean>(
+          0,
+          `rss/participants/allowed/${this.organisationId}`,
+        );
+      } else {
+        this.displayRss = true;
+      }
+      if (!this.organisationId) {
+        return;
+      }
+      const attributes = await this.getOrgaAttributes(this.organisationId);
+      this.noSharing = "true" === attributes.noSharing;
+      this.isLoading = false;
+    },
     getClass(className = "btn-rss"): string {
       return `btn ${className} share-btn mb-2 text-dark`;
     },

package/src/components/display/sharing/SharePlayer.vue

@@ -293,22 +293,25 @@ export default defineComponent({
       return 0;
     },
   },
-  async created() {
-    const orgaId =
-      "" !== this.authOrganisation.id
-        ? this.authOrganisation.id
-        : state.generalParameters.organisationId;
-    this.orgaAttributes = await this.getOrgaAttributes(orgaId ?? "");
-    this.initColor();
-    if (this.isLiveReadyToRecord) {
-      this.iFrameModel = "large";
-    }
-    if("true"===this.podcast?.annotations?.["fromTTS"]){
-      this.displayTranscript = false;
-    }
+  created() {
+    this.initSharePlayer();
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initSharePlayer(){
+      const orgaId =
+      "" !== this.authOrganisation.id
+        ? this.authOrganisation.id
+        : state.generalParameters.organisationId;
+      this.orgaAttributes = await this.getOrgaAttributes(orgaId ?? "");
+      this.initColor();
+      if (this.isLiveReadyToRecord) {
+        this.iFrameModel = "large";
+      }
+      if ("true" === this.podcast?.annotations?.["fromTTS"]) {
+        this.displayTranscript = false;
+      }
+    },
     getIframeNumber(): string {
       return this.displayChoiceAllEpisodes && "all" === this.episodeNumbers
         ? "/0"

package/src/components/display/sharing/SharePlayerRadio.vue

@@ -80,16 +80,19 @@ export default defineComponent({
       return `<iframe src="${this.iFrameSrc}" width="100%" height="140px" scrolling="no" allow="clipboard-read; clipboard-write; autoplay" frameborder="0"></iframe>`;
     },
   },
-  async created() {
-    const orgaId =
-      "" !== this.authOrganisation.id
-        ? this.authOrganisation.id
-        : state.generalParameters.organisationId;
-    this.orgaAttributes = await this.getOrgaAttributes(orgaId ?? "");
-    this.initColor();
+  created() {
+    this.initSharePlayer();
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initSharePlayer(){
+      const orgaId =
+        "" !== this.authOrganisation.id
+          ? this.authOrganisation.id
+          : state.generalParameters.organisationId;
+      this.orgaAttributes = await this.getOrgaAttributes(orgaId ?? "");
+      this.initColor();
+    },
     initColor(): void {
       if (!this.orgaAttributes) {
         return;

package/src/components/display/sharing/SharePlayerTypes.vue

@@ -110,14 +110,14 @@ export default defineComponent({
       });
     },
   },
-  async created() {
+  created() {
     if (this.isVideoPodcast) {
       this.$emit("update:iFrameModel", "video");
     }
     if (this.isLive) {
       return;
     }
-    await this.initCustomPlayers();
+    this.initCustomPlayers();
   },
   methods: {
     async fetchCustomPlayers(

package/src/components/display/sharing/SubscribeButtons.vue

@@ -195,7 +195,6 @@ export default defineComponent({
         this.lastWindowWidth = this.windowWidth;
         return;
       }
-
       const subscribeList = this.$refs.subscribeButtonsContainer as HTMLElement;
       if (
         null === subscribeList ||
@@ -255,9 +254,7 @@ export default defineComponent({
       display: inline-flex;
       justify-content: flex-start;
       overflow: hidden;
-      //flex-grow: 1;
       width: fit-content;
-      //width: 0;
     }
   }
 }

package/src/components/misc/SnackBar.vue

@@ -20,7 +20,7 @@ const getStyle = (
     wrap: {
       position: "fixed",
       left: 0,
-      pos: pos ? pos : c(0.05),
+      pos: pos ?? c(0.05),
       zIndex: 9999,
       width: "100%",
       padding: `0 ${c(0.2)}`,

package/src/components/misc/modal/NewsletterModal.vue

@@ -12,7 +12,7 @@
             <h4 class="mb-3">
               {{ $t("Configure your Newsletter tile") }}
             </h4>
-            <div 
+            <div
               v-for="colors in arrayColors"
               :key="colors.mainText"
               class="d-flex align-items-center mb-3"
@@ -28,11 +28,13 @@
               />
               <div class="d-flex flex-column">
                 <div class="fw-bold">{{ colors.mainText }}</div>
-                <div v-if="colors.secondText" class="descriptionText">{{ colors.secondText }}</div>
+                <div v-if="colors.secondText" class="descriptionText">
+                  {{ colors.secondText }}
+                </div>
               </div>
             </div>
           </div>
-        <!-- eslint-disable vue/no-v-html -->
+          <!-- eslint-disable vue/no-v-html -->
           <div v-html="newsletterHtml" />
           <!-- eslint-enable -->
         </div>
@@ -40,7 +42,7 @@
           class="btn flex-grow-1 mt-3 fw-bold"
           @click="onCopyCode(newsletterHtml, afterCopy)"
         >
-          <span class="saooti-copy me-2"/>
+          <span class="saooti-copy me-2" />
           {{ $t("Copy and embed the HTML code into your email tool") }}
         </button>
         <SnackBar ref="snackbar" position="bottom-left" />
@@ -91,9 +93,14 @@ export default defineComponent({
   data() {
     return {
       arrayColors: [
-        {color:"#40a372", mainText: this.$t('Choose main color'),secondText: this.$t('Newsletter elements') },
-        {color:"#000000", mainText: this.$t('Choose text color') },
-        {color:"#FFFFFF", mainText: this.$t('Choose background color') }],
+        {
+          color: "#40a372",
+          mainText: this.$t("Choose main color"),
+          secondText: this.$t("Newsletter elements"),
+        },
+        { color: "#000000", mainText: this.$t("Choose text color") },
+        { color: "#FFFFFF", mainText: this.$t("Choose background color") },
+      ],
       shareUrl: window.location.href,
     };
   },
@@ -106,17 +113,19 @@ export default defineComponent({
           imageUrl: `${this.podcast.imageUrl}" alt="${this.$t(
             "Podcast image",
           )}`,
-          title:this.podcast.title,
+          title: this.podcast.title,
           description: this.podcast.description ?? "",
           shareText: this.$t("Listen this episode"),
           emissionHtml: `<tr><td style="padding:5px 0;">
           <div style="display:flex; margin-top:5px;">
-          <div style="font-size:20px; color:${this.arrayColors[1].color}; margin-right:5px;text-wrap: nowrap;">${this.$t(
-            "Emission",
-          )} :</div>
+          <div style="font-size:20px; color:${
+            this.arrayColors[1].color
+          }; margin-right:5px;text-wrap: nowrap;">${this.$t("Emission")} :</div>
           <a href="${this.shareUrl}" style="font-size: 18px;color: ${
             this.arrayColors[0].color
-          };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${this.podcast.emission.name}</a>
+          };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${
+            this.podcast.emission.name
+          }</a>
           </div></td></tr>`,
           articleHtml:
             !this.podcast?.article || 0 === this.podcast.article?.length
@@ -124,11 +133,9 @@ export default defineComponent({
               : `<tr><td style="padding:5px 0;">
           <div style="display:flex;">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z"/></svg>
-          <a href="${
-            this.podcast.article
-          }" style="color: ${this.arrayColors[1].color};margin-top:2px">${this.$t(
-            "See associated article",
-          )}</a>
+          <a href="${this.podcast.article}" style="color: ${
+            this.arrayColors[1].color
+          };margin-top:2px">${this.$t("See associated article")}</a>
           </div></td></tr>
           `,
           colorTitle: `color:${this.arrayColors[1].color};`,
@@ -162,7 +169,9 @@ export default defineComponent({
       };
     },
     newsletterHtml(): string {
-      return `<table style="background:${this.arrayColors[2].color};color:${this.arrayColors[1].color};table-layout: fixed;width:100%;font-size: 14px;">
+      return `<table style="background:${this.arrayColors[2].color};color:${
+        this.arrayColors[1].color
+      };table-layout: fixed;width:100%;font-size: 14px;">
 <tr>
 <td valign="top" width="30%" rowspan="7" style="padding-right:5px;"><img width="100%" src="${
         this.newsletterInfo.imageUrl
@@ -174,15 +183,19 @@ export default defineComponent({
 <tr><td style="padding:5px 0;"><div style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;">${
         this.newsletterInfo.description
       }</div></td></tr>
-<tr><td valign="top" style="padding:5px 0;"><a href="${this.shareUrl}" style="color: ${
-        this.arrayColors[0].color
-      };">${this.$t("See more")}</a></td></tr>
+<tr><td valign="top" style="padding:5px 0;"><a href="${
+        this.shareUrl
+      }" style="color: ${this.arrayColors[0].color};">${this.$t(
+        "See more",
+      )}</a></td></tr>
 <tr>${this.newsletterInfo.articleHtml}
-<td width="1" style="padding:5px 0;"><a href="${this.shareUrl}" style="font-size: 18px;color: ${
+<td width="1" style="padding:5px 0;"><a href="${
+        this.shareUrl
+      }" style="font-size: 18px;color: ${
         this.arrayColors[0].color
-      };text-decoration: none; display:flex;"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"/></svg><div style="margin-top: 15px; color:${this.arrayColors[1].color};">${
-        this.newsletterInfo.shareText
-      }</div></a></td>
+      };text-decoration: none; display:flex;"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"/></svg><div style="margin-top: 15px; color:${
+        this.arrayColors[1].color
+      };">${this.newsletterInfo.shareText}</div></a></td>
 </tr>
 </table>
 `;
@@ -206,11 +219,14 @@ export default defineComponent({
         "" !== this.authOrganisation.id
           ? this.authOrganisation.id
           : state.generalParameters.organisationId;
-      if(!orgaId ||orgaId?.length){
+      if (!orgaId || orgaId?.length) {
         return;
       }
       const attributes = await this.getOrgaAttributes(orgaId ?? "");
-      if (Object.hasOwn(attributes, "podcastmakerUrl") && (attributes.podcastmakerUrl as string|undefined|null)?.length) {
+      if (
+        Object.hasOwn(attributes, "podcastmakerUrl") &&
+        (attributes.podcastmakerUrl as string | undefined | null)?.length
+      ) {
         this.shareUrl =
           attributes.podcastmakerUrl +
           window.location.pathname +
@@ -234,9 +250,9 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app {
   #newsletter-modal {
-    .octopus-modal-body{
+    .octopus-modal-body {
       overflow-x: inherit;
-      @media (max-width: 500px){
+      @media (max-width: 500px) {
         overflow-x: auto;
       }
     }