renamed ad to promos because frick AdBlock

src/app.htm

@@ -37,9 +37,9 @@
           </nav>
         </aside>
         <section class="section-startup">
-          <div class="staff-ads">
-            <div class="staff-ad ad-loading"></div>
-            <div class="staff-ad ad-loading"></div>
+          <div class="staff-promos">
+            <div class="staff-promo promo-loading"></div>
+            <div class="staff-promo promo-loading"></div>
           </div>
           <div class="song-row song-row-new">
             <div class="song-header">

src/assets/css/startup.css

-.staff-ads {
+.staff-promos {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 25px;
   width: 1114px;
   margin: 0 auto;
 }
-.staff-ads:empty {
+.staff-promos:empty {
   display: none;
 }
-.staff-ads .staff-ad {
+.staff-promos .staff-promo {
   background: #fff;
   border-radius: 6px;
   padding: 50px;
@@ -17,14 +17,14 @@
   transition: 0.2s ease all;
   grid-template-rows: auto 100px auto;
 }
-.staff-ads .staff-ad .ad-type {
+.staff-promos .staff-promo .promo-type {
   color: #aaa;
   justify-self: left;
   font-size: 12px;
   font-weight: bold;
   letter-spacing: 0.3em;
 }
-.staff-ads .staff-ad .ad-title {
+.staff-promos .staff-promo .promo-title {
   font-weight: bold;
   font-size: 34px;
   justify-self: left;
@@ -32,7 +32,7 @@
   letter-spacing: -0.025em;
   color: #222;
 }
-.staff-ads .staff-ad .ad-button {
+.staff-promos .staff-promo .promo-button {
   font-size: 14px;
   font-weight: bold;
   text-transform: uppercase;
@@ -43,19 +43,19 @@
   border-radius: 6px;
   transition: 0.2s ease-in-out all;
 }
-.staff-ads .staff-ad .ad-button:hover {
+.staff-promos .staff-promo .promo-button:hover {
   cursor: pointer;
   opacity: 0.6;
 }
-.staff-ads .staff-ad.ad-loading {
+.staff-promos .staff-promo.promo-loading {
   background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
-  animation-name: adLoadingShimmer;
+  animation-name: promoLoadingShimmer;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-duration: 1s;
 }
-@keyframes adLoadingShimmer {
+@keyframes promoLoadingShimmer {
   from {
     background-position: 0px 0px;
   }

src/assets/css/startup.less

-.staff-ads {
+.staff-promos {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 25px;
@@ -9,7 +9,7 @@
         display: none;
     }
 
-    & .staff-ad {
+    & .staff-promo {
         background: #fff;
         border-radius: 6px;
         padding: 50px;
@@ -18,14 +18,14 @@
         transition: 0.2s ease all;
         grid-template-rows: auto 100px auto;
 
-        & .ad-type {
+        & .promo-type {
             color: #aaa;
             justify-self: left;
             font-size: 12px;
             font-weight: bold;
             letter-spacing: 0.3em;
         }
-        & .ad-title {
+        & .promo-title {
             font-weight: bold;
             font-size: 34px;
             justify-self: left;
@@ -33,7 +33,7 @@
             letter-spacing: -0.025em;
             color: #222;
         }
-        & .ad-button {
+        & .promo-button {
             font-size: 14px;
             font-weight: bold;
             text-transform: uppercase;
@@ -50,9 +50,9 @@
             }
         }
 
-        &.ad-loading {
+        &.promo-loading {
             background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.1));
-            animation-name: adLoadingShimmer;
+            animation-name: promoLoadingShimmer;
             animation-fill-mode: forwards;
             animation-timing-function: linear;
             animation-iteration-count: infinite;
@@ -61,7 +61,7 @@
     }
 }
 
-@keyframes adLoadingShimmer {
+@keyframes promoLoadingShimmer {
     from {
         background-position: 0px 0px;
     }

src/assets/js/module.api.js

@@ -26,8 +26,8 @@ class SHAPI {
         });
     }
 
-    async getAds() {
-        let apiPath = this.apiBase + "ads";
+    async getPromos() {
+        let apiPath = this.apiBase + "promos";
         let supportedVersion = this.supportedVersion;
 
         return axios.get(apiPath)

src/assets/js/section.startup.js

-const DOMStaffAds = document.querySelector(".staff-ads");
+const DOMStaffPromos = document.querySelector(".staff-promos");
 
 const DOMNewSongsList = document.querySelector(".song-row-new .song-list");
 const DOMPopularSongsList = document.querySelector(".song-row-popular .song-list");
@@ -16,11 +16,11 @@ function InitStartup() {
     console.log("Refreshing Startup");
     
     // Loading Ads
-    api.getAds().then(function(ads) {
-        DOMStaffAds.innerHTML = "";
+    api.getPromos().then(function(promos) {
+        DOMStaffPromos.innerHTML = "";
 
-        ads.forEach(function (ad) {
-            DOMStaffAds.appendChild(BuildAdDOM(ad));
+        promos.forEach(function (promo) {
+            DOMStaffPromos.appendChild(BuildPromoDOM(promo));
         });
     }).catch(function(error) {
         NavigateToSection(6);
@@ -102,37 +102,37 @@ function LoadPopularSongs() {
     });
 }
 
-function BuildAdDOM(adItem) {
+function BuildPromoDOM(promoItem) {
     // Holder
-    let adContainer = document.createElement("div");
-    adContainer.classList.add("staff-ad");
-    adContainer.style.backgroundImage = "url('" + adItem.image_path + "')";
+    let promoContainer = document.createElement("div");
+    promoContainer.classList.add("staff-promo");
+    promoContainer.style.backgroundImage = "url('" + promoItem.image_path + "')";
 
     // Type
-    let adType = document.createElement("div");
-    adType.classList.add("ad-type");
-    adType.style.color = adItem.color;
-    adType.innerText = adItem.type;
-    adContainer.appendChild(adType);
+    let promoType = document.createElement("div");
+    promoType.classList.add("promo-type");
+    promoType.style.color = promoItem.color;
+    promoType.innerText = promoItem.type;
+    promoContainer.appendChild(promoType);
 
     // Title
-    let adTitle = document.createElement("div");
-    adTitle.classList.add("ad-title");
-    adTitle.innerHTML = adItem.title;
-    adTitle.style.color = adItem.textColor;
-    adContainer.appendChild(adTitle);
+    let promoTitle = document.createElement("div");
+    promoTitle.classList.add("promo-title");
+    promoTitle.innerHTML = promoItem.title;
+    promoTitle.style.color = promoItem.textColor;
+    promoContainer.appendChild(promoTitle);
 
     // Button
-    let adButton = document.createElement("div");
-    adButton.classList.add("ad-button");
-    adButton.style.backgroundColor = adItem.color;
-    adButton.innerText = "CHECK IT OUT";
+    let promoButton = document.createElement("div");
+    promoButton.classList.add("promo-button");
+    promoButton.style.backgroundColor = promoItem.color;
+    promoButton.innerText = "CHECK IT OUT";
 
-    switch(adItem.button.type) {
+    switch(promoItem.button.type) {
         case 0:
             // Song
-            adButton.addEventListener('click', function() {
-                NavigateToSongDetail(adItem.button.data);
+            promoButton.addEventListener('click', function() {
+                NavigateToSongDetail(promoItem.button.data);
             });
             break;
         case 1:
@@ -142,18 +142,18 @@ function BuildAdDOM(adItem) {
         case 2:
             // Search Query
             NavigateToSection(1);
-            SearchQuery(adItem.button.data);
+            SearchQuery(promoItem.button.data);
             break;
         case 3:
             // External
-            adButton.addEventListener('click', function() {
-                shell.openExternal(adItem.button.data);
+            promoButton.addEventListener('click', function() {
+                shell.openExternal(promoItem.button.data);
             });
     }
 
-    adContainer.appendChild(adButton);
+    promoContainer.appendChild(promoButton);
 
-    return adContainer;
+    return promoContainer;
 }
 
 function BuildSongDOM(songItem) {