Merge branch 'development'

FarhannDev · Dec 28, 2023 · ae75ee0 · ae75ee0
2 parents 31385d1 + 721ff71
commit ae75ee0
Show file tree

Hide file tree

Showing 12 changed files with 313 additions and 27 deletions.
diff --git a/components/advertising/AdsHorizontalCardItem.vue b/components/advertising/AdsHorizontalCardItem.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+defineProps({ title: { type: String, required: true } })
+</script>
+
+
+<template>
+  <div class="advertising-container">
+    <div class="advertising-heading-content">{{ title }}</div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.advertising-container {
+  display: flex;
+  padding: 22.755px 0px 23.245px 0px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  background: var(--Primary-200, #FFCAD4);
+}
+
+.advertising-container .advertising-heading-content {
+  color: var(--Font-400, #888);
+  font-family: Inter;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+</style>
diff --git a/components/advertising/AdsPopupModal.vue b/components/advertising/AdsPopupModal.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+
+
+onMounted(() => {
+  window.addEventListener("scroll", modalPopupShow);
+
+});
+
+onBeforeMount(() => {
+  window.removeEventListener("scroll", modalPopupShow);
+
+});
+
+
+const modalPopupShow = () => {
+  const scrollY = window.scrollY;
+  if (scrollY >= 650) {
+    return document.querySelector('.advertising-container-modal')
+      ?.classList.add('show')
+  }
+
+  return
+
+}
+
+
+const closePopupModal = () => {
+  return document.querySelector('.advertising-container-modal')
+    ?.classList.remove('show');
+}
+
+</script>
+
+
+<template>
+  <div>
+    <div class="advertising-container-modal" data-aos="fade-up" data-aos-duration="1000">
+      <div class="advertising-icon-close-container" @click="closePopupModal">
+        <svg class="advertising-icon-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none">
+          <g clip-path="url(#clip0_3548_13491)">
+            <path
+              d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z"
+              fill="#323232" />
+          </g>
+          <defs>
+            <clipPath id="clip0_3548_13491">
+              <rect width="24" height="24" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+      <div class="advertising-modal-title">Ads</div>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.advertising-container-modal {
+  width: 100%;
+  height: 486px;
+  margin: 0 auto;
+  flex-shrink: 0;
+  background: var(--Primary-200, #FFCAD4);
+  display: none;
+}
+
+.advertising-container-modal.show {
+  widows: 100%;
+  height: 486px;
+  flex-shrink: 0;
+  background: var(--Primary-200, #FFCAD4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  position: absolute;
+  top: 50px;
+  right: 0;
+  z-index: 10000;
+
+}
+
+
+.advertising-container-modal .advertising-modal-title {
+  color: var(--Font-400, #888);
+  font-family: Inter;
+  font-size: 70.037px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.advertising-container-modal .advertising-icon-close-container {
+  position: absolute;
+  right: 20px;
+  top: 15px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.advertising-container-modal .advertising-icon-close-container .advertising-icon-close {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+@media (min-width: 1200px) {
+  .advertising-container-modal.show {
+    width: 796px;
+    height: 486px;
+    position: absolute;
+    top: 55px;
+    left: 25%;
+    right: 25%;
+  }
+
+}
+</style>
diff --git a/components/advertising/AdsVerticalCardItem.vue b/components/advertising/AdsVerticalCardItem.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+defineProps({ title: { type: String, required: true } })
+</script>
+
+
+<template>
+  <div class="advertising-container">
+    <div class="advertising-heading-content">{{ title }}</div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.advertising-container {
+  display: flex;
+  padding: 22.755px 0px 23.245px 0px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  background: var(--Primary-200, #FFCAD4);
+  /* width: 300px; */
+  min-width: 100%;
+  height: 600px;
+}
+
+.advertising-container .advertising-heading-content {
+  color: var(--Font-400, #888);
+  font-family: Inter;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+</style>
diff --git a/components/advertising/AdsVerticalMiniCardItem.vue b/components/advertising/AdsVerticalMiniCardItem.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+defineProps({ title: { type: String, required: true } })
+</script>
+
+
+<template>
+  <div class="advertising-container">
+    <div class="advertising-heading-content">{{ title }}</div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.advertising-container {
+  display: flex;
+  padding: 22.755px 0px 23.245px 0px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  background: var(--Primary-200, #FFCAD4);
+  /* width: 300px; */
+  min-width: 100%;
+  height: 280px;
+}
+
+.advertising-container .advertising-heading-content {
+  color: var(--Font-400, #888);
+  font-family: Inter;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+</style>
diff --git a/components/navigation/NavigationMenuDefault.vue b/components/navigation/NavigationMenuDefault.vue
@@ -255,7 +255,7 @@ const filterdKategoriInternasional = categories.filter(category => {
 
           <li class="nav-item">
             <NuxtLink @click="toggleMenu" :class="`nav-link mx-md-1  ${route.path === '/media' || route.path === `/media/${route.params.id}` ? 'active' : ''
-              }`" to="/media">Media
+              }`" to="/media">Stream
             </NuxtLink>
           </li>
           <li class="nav-item">

diff --git a/components/navigation/NavigationMenuSticky.vue b/components/navigation/NavigationMenuSticky.vue
@@ -276,7 +276,7 @@ const filterdKategoriInternasional = categories.filter(category => {
           </li>
           <li class="nav-item">
             <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/media' || route.path === `/media/${route.params.id}` ? 'active' : ''
-              }`" to="/media">Media
+              }`" to="/media">Stream
             </NuxtLink>
           </li>
           <li class="nav-item">

diff --git a/pages/article/[id].vue b/pages/article/[id].vue
@@ -78,6 +78,13 @@ const colorMode: ColorModeInstance = useColorMode()
                   </div>
                 </div>
 
+                <div class="article-details__content" v-html="post.content.rendered"></div>
+                <div class="row justify-content-start g-3 py-3">
+                  <div class="col">
+                    <AdvertisingAdsHorizontalCardItem title="Ads" />
+                  </div>
+                </div>
+
                 <div class="article-details__content" v-html="post.content.rendered"></div>
 
                 <div class="article-details__content__share pt-3">
@@ -101,22 +108,27 @@ const colorMode: ColorModeInstance = useColorMode()
             <!-- Komentar form -->
             <div class="d-grid gap-3 py-3">
               <ContentDetailsCommentsForm title="Komentar"
-                description="Alamat Email Anda Tidak Akan Dipublikasikan. Bidang yang Wajib Ditandai" />
+                description="Alamat Email Anda Tidak Akan Dipublikasikan. Bidang yang Wajib Ditandai" class="mb-5" />
               <!-- Komentar user -->
               <ContentDetailsCommentsCardItem user="Farhan" text="Di komentar oleh Farhan" />
               <ContentDetailsCommentsCardItem user="Bella" text="Di komentar oleh Bella" />
               <ContentDetailsCommentsCardItem user="Reza" text="Di komentar oleh Reza" />
               <ContentDetailsCommentsCardItem user="Abdul" text="Di komentar oleh Abdul" />
 
-              <ButtonLoadContent />
+              <!-- <ButtonLoadContent /> -->
             </div>
           </section>
 
         </div>
         <div class="col-lg-auto col-xl-4 col-md-auto">
           <div class="px-md-3 mx-md-2">
-            <LazyHeadingContentHeadingTitle title="Berita Terpopuler" />
 
+            <div class="row justify-content-start g-3 mb-5">
+              <div class="col">
+                <AdvertisingAdsVerticalMiniCardItem title="Ads" />
+              </div>
+            </div>
+            <LazyHeadingContentHeadingTitle title="Berita Terpopuler" />
             <div class="row justify-content-start g-3 pt-3">
               <div
                 v-for="post in posts.sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString())).slice(0, 3)"
@@ -125,6 +137,12 @@ const colorMode: ColorModeInstance = useColorMode()
               </div>
             </div>
 
+            <div class="row justify-content-start g-3 py-3">
+              <div class="col">
+                <AdvertisingAdsVerticalCardItem title="Ads" />
+              </div>
+            </div>
+
           </div>
 
         </div>

diff --git a/pages/article/category/[id].vue b/pages/article/category/[id].vue
@@ -71,6 +71,11 @@ const relatedPostsData = posts
             <article>
               <LazyHeadingContentHeadingTitle title="Terpopuler" class="text-decoration-underline" />
               <LazyContentRelatedArticle :posts="relatedPostsData" />
+              <div class="row justify-content-start g-3 pt-3">
+                <div class="col">
+                  <AdvertisingAdsVerticalMiniCardItem title="Ads" />
+                </div>
+              </div>
             </article>
           </div>
         </div>

diff --git a/pages/article/index.vue b/pages/article/index.vue
@@ -42,14 +42,29 @@ useSeoMeta({
             </article>
             <article class="article-section position-relative mb-3">
               <LazyHeadingContentHeadingTitleSecondary title="Berita Terpopuler" />
-              <div class="row justify-content-arround g-3 py-3">
+              <div class="row justify-content-arround g-3">
                 <LazyContentPostListCardFeaturedHorizontal
                   :posts="posts.sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString())).slice(0, 2)" />
               </div>
+              <div class="row justify-content-start g-3">
+                <div class="col">
+                  <AdvertisingAdsHorizontalCardItem title="Ads" />
+                </div>
+              </div>
             </article>
             <article class="d-block d-md-block d-lg-none d-xl-none">
+              <div class="row justify-content-start g-3 mb-3">
+                <div class="col">
+                  <AdvertisingAdsVerticalMiniCardItem title="Ads" />
+                </div>
+              </div>
               <LazyHeadingContentHeadingTitle title="Terpopuler" class="text-decoration-underline" />
               <LazyContentRelatedArticle :posts="posts.slice(0, 10)" />
+              <div class="row justify-content-start g-3 pt-3">
+                <div class="col">
+                  <AdvertisingAdsVerticalCardItem title="Ads" />
+                </div>
+              </div>
             </article>
             <article
               v-for="category in categories.filter(category => category.id !== Number(88) && category.parent !== Number(88) && category.id !== Number(90) && category.parent !== Number(90))"
@@ -65,9 +80,21 @@ useSeoMeta({
           </div>
           <div class="col-xl-4 col-xxl-4 col-lg-12 d-none d-lg-block d-xl-block d-xxl-block">
             <article>
+              <div class="row justify-content-start g-3 mb-3">
+                <div class="col">
+                  <AdvertisingAdsVerticalMiniCardItem title="Ads" />
+                </div>
+              </div>
               <LazyHeadingContentHeadingTitleSecondary title="Terpopuler" class="text-decoration-underline" />
               <LazyContentRelatedArticle :posts="posts.slice(0, 10)" />
+
+              <div class="row justify-content-start g-3 pt-3">
+                <div class="col">
+                  <AdvertisingAdsVerticalCardItem title="Ads" />
+                </div>
+              </div>
             </article>
+
           </div>
         </div>
       </div>