@icvdeveloper/common-module 1.4.14 → 2.1.0

package/dist/runtime/components/affiliates/AffiliatePage.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import { toRefs } from "vue";
+import { ref, toRefs, computed, onMounted } from "vue";
 import { get } from "lodash-es";
 import { useApi } from "../../composables/useApi";
 import type { Affiliate } from "../../models/conference";
 import type { affiliatePageClassObj } from "../../@types/components";
 import { useClassBinding } from "../../composables/useClassBinding";
 
-
 type Props = {
-  affiliateId: string;
+  affiliateId: number;
   classObject?: affiliatePageClassObj;
 };
 
@@ -24,7 +23,8 @@ const props = withDefaults(defineProps<Props>(), {
       htmlHeaderContainer: "",
       biographyContainer: "",
       contentContainer: "",
-      affiliateContentBox: "flex flex-col w-full h-full overflow-y-auto p-4 border border-slate-300",
+      affiliateContentBox:
+        "flex flex-col w-full h-full overflow-y-auto p-4 border border-slate-300",
     };
   },
 });
@@ -32,40 +32,43 @@ const props = withDefaults(defineProps<Props>(), {
 // data
 const { affiliateId } = toRefs(props);
 const { classBinding } = useClassBinding();
-const affiliate = ref<Affiliate>({documents:[],links:[],videos:[]});
+const affiliate = ref<Affiliate>({ documents: [], links: [], videos: [] });
 const showVideoModal = ref<boolean>(false);
 const modalVideoTitle = ref<string>("");
 const modalVideoUrl = ref<string>("");
 
 // computed
 const contentCount = computed((): number => {
-      let hasDocuments = (affiliate.value.documents.length > 0) ? 1 : 0;
-      let hasVideos = (affiliate.value.videos.length > 0) ? 1 : 0;
-      let hasLinks = (affiliate.value.links.length > 0) ? 1 : 0;
-      return hasDocuments + hasVideos + hasLinks;
+  const hasDocuments = affiliate.value.documents.length > 0 ? 1 : 0;
+  const hasVideos = affiliate.value.videos.length > 0 ? 1 : 0;
+  const hasLinks = affiliate.value.links.length > 0 ? 1 : 0;
+  return hasDocuments + hasVideos + hasLinks;
 });
 const hasContactInfo = computed((): boolean => {
-      return (
-        affiliate.value.contact_photo ||
-        affiliate.value.contact_name ||
-        affiliate.value.contact_title ||
-        affiliate.value.contact_phone ||
-        affiliate.value.contact_email
-      );
+  return (
+    affiliate.value.contact_photo ||
+    affiliate.value.contact_name ||
+    affiliate.value.contact_title ||
+    affiliate.value.contact_phone ||
+    affiliate.value.contact_email
+  );
 });
 const showLeftBottomBox = computed((): boolean => {
-      return (hasContactInfo.value || getAffiliateContentItem('custom_box_1'));
+  return hasContactInfo.value || getAffiliateContentItem("custom_box_1");
 });
 
 // methods
+// TODO - migrate analyticsPlugin if needed
 const fireAnalytics = (type: string) => {
-  let event = 'affiliate-' + affiliate.value.name + '-' + type;
-  this.$analyticsPlugin.click(event, event);
+  const event = "affiliate-" + affiliate.value.name + "-" + type;
+  // this.$analyticsPlugin.click(event, event);
 };
 
 const getAffiliateContentItem = (_item: string) => {
-  let itemVal = get(affiliate.value, 'affiliate_content.'+_item);
-  if (itemVal == undefined || itemVal == '') { return null; }
+  const itemVal = get(affiliate.value, "affiliate_content." + _item);
+  if (itemVal == undefined || itemVal == "") {
+    return null;
+  }
   return itemVal;
 };
 
@@ -73,7 +76,7 @@ const getAffiliateContent = () => {
   return new Promise((resolve, reject) => {
     const request = useApi();
     request(
-      `/affiliates/${affiliateId.value}?with=affiliate_content,documents,videos,links`
+      `/affiliates/${affiliateId.value.toString()}?with=affiliate_content,documents,videos,links`
     )
       .then((response) => {
         affiliate.value = response.data;
@@ -85,15 +88,16 @@ const getAffiliateContent = () => {
 };
 
 const getStreamingVideoUrl = (_videoUrl: string): string => {
-  let tmpUrl = 'https://cdn.v3mediaportal.com/streaming-player/iframe-player.htm?';
-  tmpUrl += 'cs=' + encodeURIComponent(_videoUrl);
-  tmpUrl += '&ar=16:9&f=video&as=false';
+  let tmpUrl =
+    "https://cdn.v3mediaportal.com/streaming-player/iframe-player.htm?";
+  tmpUrl += "cs=" + encodeURIComponent(_videoUrl);
+  tmpUrl += "&ar=16:9&f=video&as=false";
   return tmpUrl;
 };
 
 const openVideoModal = (_title: string, _videoUrl: string) => {
-  fireAnalytics('video-' + _title);
-  let tmpUrl = getStreamingVideoUrl(_videoUrl);
+  fireAnalytics("video-" + _title);
+  const tmpUrl = getStreamingVideoUrl(_videoUrl);
   modalVideoUrl.value = tmpUrl;
   modalVideoTitle.value = _title;
   showVideoModal.value = true;
@@ -103,64 +107,121 @@ const openVideoModal = (_title: string, _videoUrl: string) => {
 onMounted(() => {
   getAffiliateContent();
 });
-
 </script>
 
 <template>
-  <div
-  :class="
-      classBinding(
-        classObject,
-        'container',
-        'flex w-full flex-col'
-      )
-    "
-  >
-
-    <div v-if="getAffiliateContentItem('html_vanity_page')" v-html="getAffiliateContentItem('html_vanity_page')">
-    </div>
+  <div :class="classBinding(classObject, 'container', 'flex w-full flex-col')">
+    <div
+      v-if="getAffiliateContentItem('html_vanity_page')"
+      v-html="getAffiliateContentItem('html_vanity_page')"
+    />
 
     <div v-else>
-
-      <div :class="classBinding(
-          classObject,
-          'headerContainer',
-          'flex flex-col md:flex-row w-full pb-6 border-b border-solid border-grey-light'
-        )">
-        <div v-if="affiliate.photo" class="mb-6 md:mb-0">
-          <img :src="affiliate.photo" />
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'headerContainer',
+            'flex flex-col md:flex-row w-full pb-6 border-b border-solid border-gray-400'
+          )
+        "
+      >
+        <div
+          v-if="affiliate.photo"
+          class="mb-6 md:mb-0"
+        >
+          <img :src="affiliate.photo">
         </div>
         <div
           v-if="!affiliate.photo"
-          :class="classBinding(
-            classObject,
-            'headerNameContainer',
-            'flex w-full justify-center md:justify-start'
-          )"
+          :class="
+            classBinding(
+              classObject,
+              'headerNameContainer',
+              'flex w-full justify-center md:justify-start'
+            )
+          "
         >
-          <h1 :class="classBinding(classObject, 'headerNameElement', 'font-light mb-0 body-color-4 self-end')">{{affiliate.name}}</h1>
+          <h1
+            :class="
+              classBinding(
+                classObject,
+                'headerNameElement',
+                'font-light mb-0 body-color-4 self-end'
+              )
+            "
+          >
+            {{ affiliate.name }}
+          </h1>
         </div>
         <div
           v-if="getAffiliateContentItem('contact_in_header') == 1"
-          :class="classBinding(classObject, 'headerContactContainer', 'w-full text-center md:text-right')"
+          :class="
+            classBinding(
+              classObject,
+              'headerContactContainer',
+              'w-full text-center md:text-right'
+            )
+          "
         >
           <p>
-            <span v-if="affiliate.contact_address">{{affiliate.contact_address}}<br/></span>
-            <span v-if="affiliate.contact_location">{{affiliate.contact_location}}<br/></span>
-            <span v-if="affiliate.website"><a @click="fireAnalytics('website')" class="affiliate-website" :href="affiliate.website" target="_blank">{{affiliate.website}}</a><br/></span>
+            <span v-if="affiliate.contact_address">{{ affiliate.contact_address }}<br></span>
+            <span v-if="affiliate.contact_location">{{ affiliate.contact_location }}<br></span>
+            <span v-if="affiliate.website"><a
+              class="affiliate-website"
+              :href="affiliate.website"
+              target="_blank"
+              @click="fireAnalytics('website')"
+            >{{ affiliate.website }}</a><br></span>
           </p>
-          <span :class="classBinding(classObject, 'headerSocialContainer', 'flex justify-center md:justify-end')">
-            <a @click="fireAnalytics('twitter')" v-if="affiliate.twitter_url" :href="affiliate.twitter_url" target="_blank" class="affiliate-twitter" :aria-label="affiliate.name + ` Twitter Page`">
-                <span class="presenter-icon"><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
+          <span
+            :class="
+              classBinding(
+                classObject,
+                'headerSocialContainer',
+                'flex justify-center md:justify-end'
+              )
+            "
+          >
+            <a
+              v-if="affiliate.twitter_url"
+              :href="affiliate.twitter_url"
+              target="_blank"
+              class="affiliate-twitter"
+              :aria-label="affiliate.name + ` Twitter Page`"
+              @click="fireAnalytics('twitter')"
+            >
+              <span class="presenter-icon"><CommonSvgIcon icon="twitter" /></span>
             </a>
-            <a @click="fireAnalytics('facebook')" v-if="affiliate.facebook_url" :href="affiliate.facebook_url" target="_blank" class="affiliate-facebook" :aria-label="affiliate.name + ` Facebook Page`">
-                <span class="presenter-icon "><CommonSvgIcon icon="facebook"></CommonSvgIcon></span>
+            <a
+              v-if="affiliate.facebook_url"
+              :href="affiliate.facebook_url"
+              target="_blank"
+              class="affiliate-facebook"
+              :aria-label="affiliate.name + ` Facebook Page`"
+              @click="fireAnalytics('facebook')"
+            >
+              <span class="presenter-icon"><CommonSvgIcon icon="facebook" /></span>
             </a>
-            <a @click="fireAnalytics('linked_in')" v-if="affiliate.linkedin_url" :href="affiliate.linkedin_url" target="_blank" class="affiliate-linkedin" :aria-label="affiliate.name + ` LinkedIn Page`">
-                <span class="presenter-icon"><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
+            <a
+              v-if="affiliate.linkedin_url"
+              :href="affiliate.linkedin_url"
+              target="_blank"
+              class="affiliate-linkedin"
+              :aria-label="affiliate.name + ` LinkedIn Page`"
+              @click="fireAnalytics('linked_in')"
+            >
+              <span class="presenter-icon"><CommonSvgIcon icon="linkedin" /></span>
             </a>
-            <a @click="fireAnalytics('youtube')" v-if="affiliate.youtube_url" :href="affiliate.youtube_url" target="_blank" class="affiliate-youtube" :aria-label="affiliate.name + ` YouTube Page`">
-                <span class="presenter-icon"><CommonSvgIcon icon="youtube"></CommonSvgIcon></span>
+            <a
+              v-if="affiliate.youtube_url"
+              :href="affiliate.youtube_url"
+              target="_blank"
+              class="affiliate-youtube"
+              :aria-label="affiliate.name + ` YouTube Page`"
+              @click="fireAnalytics('youtube')"
+            >
+              <span class="presenter-icon"><CommonSvgIcon icon="youtube" /></span>
             </a>
           </span>
         </div>
@@ -168,79 +229,150 @@ onMounted(() => {
 
       <div
         v-if="getAffiliateContentItem('html_header')"
+        :class="
+          classBinding(
+            classObject,
+            'htmlHeaderContainer',
+            'w-full mt-5 text-center md:text-left'
+          )
+        "
         v-html="getAffiliateContentItem('html_header')"
-        :class="classBinding(classObject, 'htmlHeaderContainer', 'w-full mt-5 text-center md:text-left')"
-      ></div>
+      />
       <div
         v-if="affiliate.biography"
+        :class="
+          classBinding(
+            classObject,
+            'biographyContainer',
+            'w-full mt-5 text-center md:text-left'
+          )
+        "
         v-html="affiliate.biography"
-        :class="classBinding(classObject, 'biographyContainer', 'w-full mt-5 text-center md:text-left')"
-      ></div>
+      />
       <div
-        v-if="contentCount>0"
+        v-if="contentCount > 0"
         class="grid-container-responsive"
-        :class="classBinding(classObject, 'contentContainer', 'w-full mt-5 md:max-h-300')"
+        :class="
+          classBinding(
+            classObject,
+            'contentContainer',
+            'w-full mt-5 md:max-h-300'
+          )
+        "
       >
-
-        <div v-if="affiliate.documents.length>0">
+        <div v-if="affiliate.documents.length > 0">
           <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-            <h3 class="mb-3">Documents</h3>
-            <span v-for="document in affiliate.documents" :key="document.id">
-              <div class="mb-2"><a @click="fireAnalytics('document-' + document.name)" class="affiliate-document" :href="document.url" target="_blank">{{ document.name }}</a></div>
+            <h3 class="mb-3">
+              Documents
+            </h3>
+            <span
+              v-for="document in affiliate.documents"
+              :key="document.id"
+            >
+              <div class="mb-2">
+                <a
+                  class="affiliate-document"
+                  :href="document.url"
+                  target="_blank"
+                  @click="fireAnalytics('document-' + document.name)"
+                >{{ document.name }}</a>
+              </div>
             </span>
           </div>
         </div>
-        <div v-if="affiliate.videos.length>0">
+        <div v-if="affiliate.videos.length > 0">
           <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-            <div v-if="affiliate.videos.length == 1 && getAffiliateContentItem('embed_video') == 1">
+            <div
+              v-if="
+                affiliate.videos.length == 1 &&
+                  getAffiliateContentItem('embed_video') == 1
+              "
+            >
               <iframe
-                  :src="getStreamingVideoUrl(affiliate.videos[0].url)"
-                  width="100%"
-                  style="max-width: 300px; margin:auto;"
-                  scrolling="no"
-                  frameborder="0"
-                  marginheight="0"
-                  marginwidth="0"
-                  allowfullscreen="">
-              </iframe>
+                :src="getStreamingVideoUrl(affiliate.videos[0].url)"
+                width="100%"
+                style="max-width: 300px; margin: auto"
+                allowfullscreen=""
+              />
             </div>
             <div v-else>
-              <h3 class="mb-3">Videos</h3>
-              <input name="affiliateName" type="hidden" id="affiliateName" :value="affiliate.name">
-              <span v-for="video in affiliate.videos" :key="video.id">
-                <div class="mb-2"><a href="javascript:null" class="affiliate-video-trigger" @click="openVideoModal(video.name, video.url)">{{ video.name }}</a></div>
+              <h3 class="mb-3">
+                Videos
+              </h3>
+              <input
+                id="affiliateName"
+                name="affiliateName"
+                type="hidden"
+                :value="affiliate.name"
+              >
+              <span
+                v-for="video in affiliate.videos"
+                :key="video.id"
+              >
+                <div class="mb-2">
+                  <a
+                    class="affiliate-video-trigger hover:cursor-pointer"
+                    @click="openVideoModal(video.name, video.url)"
+                  >{{ video.name }}</a>
+                </div>
               </span>
             </div>
           </div>
         </div>
-        <div v-if="affiliate.links.length>0">
+        <div v-if="affiliate.links.length > 0">
           <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-            <h3 class="mb-3">Links</h3>
-            <span v-for="link in affiliate.links" :key="link.id">
-              <div class="mb-2"><a @click="fireAnalytics('external_link-' + link.name)" :href="link.url" class="affiliate-link" target="_blank">{{ link.name }}</a></div>
+            <h3 class="mb-3">
+              Links
+            </h3>
+            <span
+              v-for="link in affiliate.links"
+              :key="link.id"
+            >
+              <div class="mb-2">
+                <a
+                  :href="link.url"
+                  class="affiliate-link"
+                  target="_blank"
+                  @click="fireAnalytics('external_link-' + link.name)"
+                >{{ link.name }}</a>
+              </div>
             </span>
           </div>
         </div>
-
       </div>
       <div class="grid-container-responsive mt-5">
-        <div v-if="showLeftBottomBox" :class="classBinding(classObject, 'affiliateContentBox', '')">
-          <div v-if="getAffiliateContentItem('custom_box_1')"  v-html="getAffiliateContentItem('custom_box_1')"></div>
+        <div
+          v-if="showLeftBottomBox"
+          :class="classBinding(classObject, 'affiliateContentBox', '')"
+        >
+          <div
+            v-if="getAffiliateContentItem('custom_box_1')"
+            v-html="getAffiliateContentItem('custom_box_1')"
+          />
           <div v-else-if="hasContactInfo">
             <div class="flex flex-col md:flex-row">
-              <div v-if="affiliate.contact_photo" class="mr-4 w-1/3 mb-3 md:mb-0 self-center md:self-start">
-                  <img :src="affiliate.contact_photo" class="w-full" />
+              <div
+                v-if="affiliate.contact_photo"
+                class="mr-4 w-1/3 mb-3 md:mb-0 self-center md:self-start"
+              >
+                <img
+                  :src="affiliate.contact_photo"
+                  class="w-full"
+                >
               </div>
               <div class="text-center md:text-left">
                 <p>Contact:</p>
                 <p>
-                  <span v-if="affiliate.contact_name">{{affiliate.contact_name}}<br/></span>
-                  <span v-if="affiliate.contact_title">{{affiliate.contact_title}}<br/></span>
-                  <span v-if="affiliate.contact_phone">Phone: {{affiliate.contact_phone}}<br/></span>
+                  <span v-if="affiliate.contact_name">{{ affiliate.contact_name }}<br></span>
+                  <span v-if="affiliate.contact_title">{{ affiliate.contact_title }}<br></span>
+                  <span v-if="affiliate.contact_phone">Phone: {{ affiliate.contact_phone }}<br></span>
                   <span v-if="affiliate.contact_email">
-                    <a @click="fireAnalytics('contact_email')" class="affiliate-email" :href="'mailto:' + affiliate.contact_email">
-                      {{affiliate.contact_email}}
-                    </a><br />
+                    <a
+                      class="affiliate-email"
+                      :href="'mailto:' + affiliate.contact_email"
+                      @click="fireAnalytics('contact_email')"
+                    >
+                      {{ affiliate.contact_email }} </a><br>
                   </span>
                 </p>
               </div>
@@ -249,25 +381,86 @@ onMounted(() => {
         </div>
 
         <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-          <div v-if="getAffiliateContentItem('custom_box_2')" v-html="getAffiliateContentItem('custom_box_2')"></div>
-          <div v-else class="text-center md:text-right">
+          <div
+            v-if="getAffiliateContentItem('custom_box_2')"
+            v-html="getAffiliateContentItem('custom_box_2')"
+          />
+          <div
+            v-else
+            class="text-center md:text-right"
+          >
             <p>
-              <span v-if="affiliate.contact_address">{{affiliate.contact_address}}<br/></span>
-              <span v-if="affiliate.contact_location">{{affiliate.contact_location}}<br/></span>
-              <span v-if="affiliate.website"><a @click="fireAnalytics('website')" class="affiliate-website" :href="affiliate.website" target="_blank">{{affiliate.website}}</a><br/></span>
+              <span v-if="affiliate.contact_address">
+                {{ affiliate.contact_address }}
+                <br>
+              </span>
+              <span v-if="affiliate.contact_location">
+                {{ affiliate.contact_location }}
+                <br>
+              </span>
+              <span v-if="affiliate.website">
+                <a
+                  class="affiliate-website"
+                  :href="affiliate.website"
+                  target="_blank"
+                  @click="fireAnalytics('website')"
+                >
+                  {{ affiliate.website }}
+                </a>
+                <br>
+              </span>
             </p>
-            <span class="flex justify-center" :class="{'md:justify-end':hasContactInfo}">
-              <a @click="fireAnalytics('twitter')" v-if="affiliate.twitter_url" :href="affiliate.twitter_url" target="_blank" class="affiliate-twitter" :aria-label="affiliate.name + ` Twitter Page`">
-                  <span class="presenter-icon"><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
+            <span
+              class="flex justify-center"
+              :class="{ 'md:justify-end': hasContactInfo }"
+            >
+              <a
+                v-if="affiliate.twitter_url"
+                :href="affiliate.twitter_url"
+                target="_blank"
+                class="affiliate-twitter"
+                :aria-label="affiliate.name + ` Twitter Page`"
+                @click="fireAnalytics('twitter')"
+              >
+                <span class="presenter-icon">
+                  <CommonSvgIcon icon="twitter" />
+                </span>
               </a>
-              <a @click="fireAnalytics('facebook')" v-if="affiliate.facebook_url" :href="affiliate.facebook_url" target="_blank" class="affiliate-facebook" :aria-label="affiliate.name + ` Facebook Page`">
-                  <span class="presenter-icon "><CommonSvgIcon icon="facebook"></CommonSvgIcon></span>
+              <a
+                v-if="affiliate.facebook_url"
+                :href="affiliate.facebook_url"
+                target="_blank"
+                class="affiliate-facebook"
+                :aria-label="affiliate.name + ` Facebook Page`"
+                @click="fireAnalytics('facebook')"
+              >
+                <span class="presenter-icon">
+                  <CommonSvgIcon icon="facebook" />
+                </span>
               </a>
-              <a @click="fireAnalytics('linked_in')" v-if="affiliate.linkedin_url" :href="affiliate.linkedin_url" target="_blank" class="affiliate-linkedin" :aria-label="affiliate.name + ` LinkedIn Page`">
-                  <span class="presenter-icon"><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
+              <a
+                v-if="affiliate.linkedin_url"
+                :href="affiliate.linkedin_url"
+                target="_blank"
+                class="affiliate-linkedin"
+                :aria-label="affiliate.name + ` LinkedIn Page`"
+                @click="fireAnalytics('linked_in')"
+              >
+                <span class="presenter-icon">
+                  <CommonSvgIcon icon="linkedin" />
+                </span>
               </a>
-              <a @click="fireAnalytics('youtube')" v-if="affiliate.youtube_url" :href="affiliate.youtube_url" target="_blank" class="affiliate-youtube" :aria-label="affiliate.name + ` YouTube Page`">
-                  <span class="presenter-icon"><CommonSvgIcon icon="youtube"></CommonSvgIcon></span>
+              <a
+                v-if="affiliate.youtube_url"
+                :href="affiliate.youtube_url"
+                target="_blank"
+                class="affiliate-youtube"
+                :aria-label="affiliate.name + ` YouTube Page`"
+                @click="fireAnalytics('youtube')"
+              >
+                <span class="presenter-icon">
+                  <CommonSvgIcon icon="youtube" />
+                </span>
               </a>
             </span>
           </div>
@@ -275,7 +468,12 @@ onMounted(() => {
       </div>
     </div>
 
-    <CommonModal :visible="showVideoModal" modal-size="lg" @clicked="showVideoModal = false" class="video-dialog">
+    <CommonModal
+      :visible="showVideoModal"
+      modal-size="lg"
+      class="video-dialog"
+      @clicked="showVideoModal = false"
+    >
       <template #modal-title>
         <div class="p-1 pb-2">
           {{ modalVideoTitle }}
@@ -284,46 +482,18 @@ onMounted(() => {
       <template #modal-body>
         <div class="video-modal-body">
           <iframe
-              class='video-frame'
-              :src="modalVideoUrl"
-              width="640"
-              height="360"
-              scrolling="no"
-              frameborder="0"
-              marginheight="0"
-              marginwidth="0"
-              allowfullscreen="">
-          </iframe>
+            class="video-frame"
+            :src="modalVideoUrl"
+            width="640"
+            height="360"
+            allowfullscreen=""
+          />
         </div>
       </template>
     </CommonModal>
-
-</div>
-
+  </div>
 </template>
 
 <style scoped>
-.grid-container-responsive {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-}
-@media (min-width: 768px) {
-  .grid-container-responsive {
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  }
-}
-.video-dialog >>> .modal-box {
-    width: 704px;
-}
-.video-frame {
-    display: block;
-    width: 640px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: auto;
-    padding-right: auto;
-}
+.grid-container-responsive{display:grid;grid-template-columns:1fr;grid-column-gap:20px;grid-row-gap:20px}@media (min-width:768px){.grid-container-responsive{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}.video-dialog>>>.modal-box{width:704px}.video-frame{display:block;margin-left:auto;margin-right:auto;width:640px}
 </style>
-