User profile added

elrumo · May 24, 2021 · ef8aa5a · ef8aa5a · vercel · May 24, 2021
1 parent d3c1812
commit ef8aa5a
Show file tree

Hide file tree

Showing 12 changed files with 546 additions and 82 deletions.
diff --git a/website/macos-big-sur-icons/src/api/icons.json b/website/macos-big-sur-icons/src/api/icons.json
diff --git a/...-big-sur-icons/src/assets/no-app-icon.png → ...sur-icons/src/assets/placeholder-icon.png b/...-big-sur-icons/src/assets/no-app-icon.png → ...sur-icons/src/assets/placeholder-icon.png
diff --git a/website/macos-big-sur-icons/src/components/Home.vue b/website/macos-big-sur-icons/src/components/Home.vue
@@ -143,14 +143,18 @@
     <!-- Icon list when no loading error-->
         <div v-if="!loadingError" class="icon-list-area p-t-20 p-b-50 content-wrapper-regular">
 
-          <div class="card-hover relative coral-card">
+          <div style="overflow: visible" class="card-hover relative coral-card">
 
-            <div style="z-index: 2; height: 100%" class="relative">
+            <div style="z-index: 1; height: 100%" class="absolute">
               <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
             </div>
+
+            <div style="z-index: 2" class="absolute card-grid-nativeAd">
+              <div @click="adClick" id="card-ad">
+              </div>
+            </div>
 
             <a
-              v-if="isAdOn"
               class="card-no-ad relative"
               href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
               rel="noopener"
@@ -334,21 +338,22 @@ export default {
         success: require("../assets/icons/delete.svg"),
         namingOrder: require("../assets/icons/namingOrder.svg"),
         date: require("../assets/icons/date.svg"),
-        loading: require("../assets/no-app-icon.png"),
+        loading: require("../assets/placeholder-icon.png"),
         iconsOrder: require("../assets/icons/namingOrder.svg")
       },
       coralIcons:{
         addIcon: require("../assets/icons/add.svg"),
         delete: require("../assets/icons/delete.svg"),
         newItem: require("../assets/icons/newItem.svg"),
         edit: require("../assets/icons/edit.svg"),
-        loading: require("../assets/no-app-icon.png"),
+        loading: require("../assets/placeholder-icon.png"),
       }
     }
   },
 
   mounted: function(){
     let parent = this;
+    parent.getAd()
     const { getters } = parent.$store;
     let fullPath = parent.$route.fullPath
     let currentUser = Parse.User.current()
@@ -394,7 +399,31 @@ export default {
   },
 
   methods:{ 
-    ...mapActions(['showToast', 'showEl', 'fetchIconUserInfo']),
+    ...mapActions(['showToast', 'showEl', 'fetchIconUserInfo', 'adClick']),
+
+    getAd(el){
+      try {
+        if (typeof _bsa !== 'undefined') {
+          _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
+          {
+            target: '#card-ad',
+            template: `
+                <a href="##statlink##" target="_blank" rel="noopener sponsored" id="customAd" class="bsa-link">
+                <div class="bsa-img-wrapper" style="background-color: ##backgroundColor##;">
+                  <div class="bsa-icon" style="background-image: url(##logo##);"></div>
+                </div>
+                <div class="text-ad-wrapper">
+                  <img style="background: ##backgroundColor##" src="##image##">
+                  <div class="bsa-desc">##description##</div>
+                </div>
+                </a>
+              `
+            }
+          );
+        }
+      } catch (error) {
+      }
+    },
 
     isDialog(){
       console.log(document.getElementByTagName("coral-dialog").open);
@@ -634,7 +663,7 @@ export default {
               getAd()
               parent.isAdOn = true
             }
-          }, 500);
+          }, 1000);
         }
 
         getAd()

diff --git a/website/macos-big-sur-icons/src/components/UserIconCard.vue b/website/macos-big-sur-icons/src/components/UserIconCard.vue
@@ -5,15 +5,15 @@
         <div class="card-img-wrapper" style="max-width: 120px;">        
             <!-- macOS icon download -->
             <a v-if="isMacOs" @click="addClickCount(icon)" rel="noopener" :href="icon.icnsUrl">
-                <div v-lazy-container="{ selector: 'img', loading: coralIcons.loading }">
+                <div v-lazy-container="{ selector: 'img', loading: coralIcons.placeholderIcon }">
                 <img width="100px" height="100px" :alt="icon.appName +' icon'" :data-src="icon.lowResPngUrl">
                 </div>
             </a>
 
             <!-- iOS icon download -->
             <a v-else @click="addClickCount(icon)" target="_blank" rel="noopener" :href="icon.iOSUrl">
-                <div v-lazy-container="{ selector: 'img', loading: coralIcons.loading }">
-                <img width="100px" height="100px" :alt="icon.appName +' icon'" :data-src="icon.lowResPngUrl">
+                <div class="placeholder-icon" v-lazy-container="{ selector: 'img', loading: coralIcons.placeholderIcon }">
+                    <img width="100px" height="100px" :alt="icon.appName +' icon'" :data-src="icon.lowResPngUrl">
                 </div>
             </a>
 
@@ -52,13 +52,6 @@
                     {{ getDate(icon.timeStamp) }}
                 </span>
             </p>
-
-            <!-- Email -->
-            <!-- <div v-if="icon.email != 'user@email.com' && icon.email && !isAdmin " class="p-t-10"> 
-                <a rel="noopener" class="coral-Link" :href="'mailto:'+icon.email+'?subject=macOS icons submission&body='+icon.usersName">
-                    email
-                </a>
-            </div> -->
 
         </div>
 
@@ -84,7 +77,7 @@ export default {
                 delete: require("../assets/icons/delete.svg"),
                 newItem: require("../assets/icons/newItem.svg"),
                 edit: require("../assets/icons/edit.svg"),
-                loading: require("../assets/loading.gif"),
+                placeholderIcon: require("../assets/placeholder-icon.png"),
             }
         }
     },

diff --git a/website/macos-big-sur-icons/src/components/UserIconCardLoading.vue b/website/macos-big-sur-icons/src/components/UserIconCardLoading.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="card-wrapper card-hover coral-card">
+
+        <!-- Icon image -->
+        <div class="card-img-wrapper" style="max-width: 120px;">        
+            <img
+                width="100px"
+                height="100px"
+                style="width: auto"
+                class="placeholder-icon"
+                alt="Placeholder icon"
+                :src="coralIcons.placeholderIcon"
+            >
+        </div>
+
+        <!-- Icon meta -->
+        <div class="card-text-wrapper p-l-15 p-r-15 p-b-15">
+
+            <!-- App name -->
+            <h3
+                class="
+                    coral-font-color
+                    m-t-0
+                    m-b-10
+                    loading-placeholder
+                    p-0
+                "
+            >
+            </h3>
+
+            <!-- User's name -->
+            <p class="coral-Body--XS opacity-60 m-b-10 loading-placeholder">
+            </p>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "UserIconCardLoading",
+    
+    props:{
+        icon:{},
+    },
+
+    data: function(){
+        return{
+            coralIcons:{
+                placeholderIcon: require("../assets/placeholder-icon.png"),
+            }
+        }
+    },
+    
+    methods:{
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/website/macos-big-sur-icons/src/components/UserIconGrid.vue b/website/macos-big-sur-icons/src/components/UserIconGrid.vue
@@ -2,7 +2,54 @@
   <div>
 
     <section class="icon-list-area p-t-40 p-b-50">
-        <UserIconCard v-for="icon in userIcons" :key="icon.id" :icon="icon" :isAdmin="false" :isMacOs="true"/>
+
+      <div class="card-wrapper card-hover coral-card">
+
+        <div @click="adClick" class="absolute card-grid-nativeAd" style="z-index: 2; height: 100%">
+          <div id="card-ad">
+          </div>
+        </div>
+
+        <div @click="adClick"  class="absolute" style="z-index: 1; height: 100%">
+          <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
+        </div>
+
+          <a
+            class="card-no-ad relative"
+            href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
+            rel="noopener"
+            target="_blank"
+            style="width: 100%; left: 0;"
+            @click="logDonation('support-message')"
+          >
+            <div class="support-page">
+              <h3 class="coral-Heading--S m-0">
+                Support this page
+              </h3>
+              <p class="coral-Body--S m-0">
+                Please consider disabling your ad blocker or making a
+                <a  
+                  rel="noopener"
+                  class="coral-Link"
+                  target="_blank"
+                  href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
+                >
+                  donation 
+                </a>
+                to support this project.
+              </p>
+            </div>
+          </a>
+
+      </div>
+
+      <UserIconCard v-for="icon in userIcons" :key="icon.id" :icon="icon" :isAdmin="false" :isMacOs="true"/>
+
+      <!-- <div
+        
+      >
+        <UserIconCardLoading v-for="num in placeholderCount" :key="num+Math.floor(Math.random() * 10000000 + 1)" :icon="iconsCount"/>
+      </div> -->
       <!-- <div  class="icon-card-wrapper user-icon-card card-wrapper coral-card" :key="icon.id">   -->
 
 
@@ -130,27 +177,64 @@ export default {
             delete: require("../assets/icons/delete.svg"),
             newItem: require("../assets/icons/newItem.svg"),
             edit: require("../assets/icons/edit.svg"),
-            loading: require("../assets/no-app-icon.png"),
+            loading: require("../assets/placeholder-icon.png"),
           },
+          isAd: false,
 
           isOwner: false,
         }
     },
     
     mounted: function(){
       let parent = this
-
       let currentUser = Parse.User.current();
       let requestedUser = this.$route.params.user;
-      
       if (currentUser) {
         let userMatches = currentUser.get("username") == requestedUser;
         parent.isOwner = userMatches
       }
 
+      function getAd(){
+        try {
+          if (typeof _bsa !== 'undefined'  && _bsa) {
+          _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
+            {
+              target: '#card-ad',
+              template: `
+                  <a href="##statlink##" target="_blank" rel="noopener sponsored" id="customAd" class="bsa-link">
+                  <div class="bsa-img-wrapper" style="background-color: ##backgroundColor##;">
+                    <div class="bsa-icon" style="background-image: url(##logo##);"></div>
+                  </div>
+                  <div class="text-ad-wrapper">
+                    <img style="background: ##backgroundColor##" src="##image##">
+                    <div class="bsa-desc">##description##</div>
+                  </div>
+                  </a>
+                `
+              }
+            )
+            
+          }
+        } catch (error) {
+        }
+      }
+
+      window.BSANativeCallback = (a) => {
+        const total = a.ads.length;
+        let el = document.getElementById('_carbonads_js').children[0]
+      }
+      getAd()
+
+
+    },
+
+    render (h) {
+      return h('div', { class: 'carbon-ads', attrs: { id: 'native-carbon' }})
     },
 
     methods:{
+      ...mapActions(['adClick']),
+
       isSelected(selected, option){
         try {
           if (selected.name == option) {

diff --git a/website/macos-big-sur-icons/src/components/app.less b/website/macos-big-sur-icons/src/components/app.less
@@ -899,6 +899,22 @@ option[value=""][disabled] {
     transform: translateX(-50%);
 }
 
+.placeholder-icon{
+    animation: placeholder-icon 1.5s ease-in-out infinite;
+}
+
+@keyframes placeholder-icon {
+    0% {
+        filter: brightness(1);
+    }
+    50% {
+        filter: brightness(0.75);
+    }
+    100% {
+        filter: brightness(1);
+    }
+  }
+
 .icon{
     padding: 17px 20px;
     transition: 0.2s;