Skip to content

Commit

Permalink
Fixed minor layout issues with ads
Browse files Browse the repository at this point in the history
  • Loading branch information
@elrumo
elrumo committed Jul 3, 2021
1 parent 115f969 commit 44d58d4
Show file tree
Hide file tree
Showing 15 changed files with 123 additions and 41 deletions.
7 changes: 5 additions & 2 deletions website/macos-big-sur-icons/src/components/H3_Description.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<p class="coral-Body--XS">
Sponsored by
</p>
<NativeAd :adId="'iconbar-js-h3'" :key="$route.fullPath + 'ad'"/>
<NativeAd :adPosition="'H3 Description Desktop'" :adId="'iconbar-js-h3'" :key="$route.fullPath + 'ad'"/>
</div>

</div>
Expand All @@ -34,7 +34,10 @@
<div v-else class="text-and-ad-wrapper">
<p class="coral-Body--XL" v-html="markItDown">
</p>
<div @click="adClick" class="single-ad mobile-ad">
<div
@click="adClick({position: 'H3 Description Mobile', type: 'Native'})"
class="single-ad mobile-ad"
>
<script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion website/macos-big-sur-icons/src/components/Hero.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@


<div class="ad-hero mobile-hidden">
<NativeAd :adId="'iconbar-js-hero'" :key="$route.fullPath + 'ad'"/>
<NativeAd :adPosition="'Hero Top'" :adId="'iconbar-js-hero'" :key="$route.fullPath + 'ad'"/>
</div>

<div class="desktop-hidden m-t-20"></div>
Expand Down
13 changes: 10 additions & 3 deletions website/macos-big-sur-icons/src/components/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@

<!-- Loading error -->
<div v-if="false" class="waiting-wrapper">
<NativeAd :adId="'iconbar-js-card-grid'" :key="$route.fullPath + 'ad'"/>
<NativeAd :adPosition="'Loading error'" :adId="'iconbar-js-card-grid'" :key="$route.fullPath + 'ad'"/>
<h3 class="coral-Heading--M">
The site is temporarily down for maintenance purposes.
<br>
Expand Down Expand Up @@ -256,11 +256,18 @@
<div style="min-height: 205px; max-height:226px" class="card-hover relative coral-card">

<div style="z-index: 1; height: 100%; width: 100%" class="absolute carbon-card-ad">
<script @click="adClick" async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
<script
@click="adClick({position: 'Icon Grid Top', type: 'Carbon'})"
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
@click="adClick({position: 'Icon Grid Top', type: 'Native'})"
id="card-ad">
</div>
</div>

Expand Down
15 changes: 8 additions & 7 deletions website/macos-big-sur-icons/src/components/NativeAd.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@
<p v-if="sponsored" class="coral-Detail coral-Detail--S coral-Detail--light opacity-50">
Sponsored
</p>
<div @click="adClick" class="native-ad-wrapper" :id="adId"> </div>
<div
@click="adClick({position: adPosition, type: 'Native'})"
class="native-ad-wrapper"
:id="adId">
</div>
</div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
name:"NativeAd",
Expand All @@ -16,6 +21,7 @@ export default {
sponsored:'',
fullWidth:'',
adId: '',
adPosition: ''
},
components:{},
Expand Down Expand Up @@ -113,12 +119,7 @@ export default {
},
methods:{
adClick(){
let parent = this
window.plausible("adClick", {props: {
path: parent.$router.currentRoute.name,
}})
}
...mapActions(['adClick']),
}
}
</script>
Expand Down
20 changes: 11 additions & 9 deletions website/macos-big-sur-icons/src/components/StickyBanner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
</svg>

<div style="z-index: 2" class="card-grid-nativeAd">
<div @click="adClick" id="card-ad2">
<div
@click="adClick({position: 'Bottom Sticky Banner', type: 'Native'})"
id="card-ad2">
</div>
</div>

Expand Down Expand Up @@ -75,7 +77,7 @@ export default {
},
methods:{
...mapActions(['showEl', 'setSelectedIcon', 'addClickCount']),
...mapActions(['showEl', 'setSelectedIcon', 'addClickCount', 'adClick']),
getAd(el){
try {
Expand Down Expand Up @@ -105,13 +107,13 @@ export default {
document.getElementById("stickyBanner").remove()
},
adClick(){
let parent = this
window.plausible("adClick", {props: {
path: parent.$router.currentRoute.name,
position: "Bottom Sticky Banner"
}})
}
// adClick(){
// let parent = this
// window.plausible("adClick", {props: {
// path: parent.$router.currentRoute.name,
// position: "Bottom Sticky Banner"
// }})
// }
}
}
</script>
Expand Down
12 changes: 10 additions & 2 deletions website/macos-big-sur-icons/src/components/UserIconGrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,20 @@

<div class="card-wrapper card-hover coral-card">

<div @click="adClick" class="absolute card-grid-nativeAd" style="z-index: 2; height: 100%">
<div
@click="adClick({position: 'User Icon Grid', type: 'Native'})"
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%">
<div
@click="adClick({position: 'User Icon Grid', type: 'Carbon'})"
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>

Expand Down
14 changes: 7 additions & 7 deletions website/macos-big-sur-icons/src/components/app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,14 @@ select{
height: fit-content !important;
}

.lgbt-wrapper .card-no-ad{
position: relative;
top: 0px;
height: fit-content;
}

.lgbt-wrapper .support-page{
transform: translateX(-50%);
transform: translate(-50%, 0%);
}

.coral--dark .instructions-item{
Expand Down Expand Up @@ -984,12 +990,6 @@ coral-buttongroup button{
color: var( --coral-dark-border);
}

.card-no-ad{
position: relative;
top: 0px;
height: fit-content;
}

.card-hover{
transition: 0.2s;
}
Expand Down
8 changes: 8 additions & 0 deletions website/macos-big-sur-icons/src/components/carbon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,17 @@ height: -moz-fit-content;
.resources-card-ad{
height: 100%;
min-width: calc(100vw / 3 - 18vw);
min-height: 140px;
/* max-width: 320px; */
}

.resources-card-ad .card-no-ad{
width: 100%;
left: 0px;
top: 50%;
position: absolute;
}

.resources-card-ad .carbon-text{
padding: 0px
}
Expand Down
5 changes: 4 additions & 1 deletion website/macos-big-sur-icons/src/store/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,10 +537,13 @@ export default new Vuex.Store({
store.commit('pushUserData', userProps)
},

adClick(store){
adClick(store, data){
let parent = this
console.log(data);
window.plausible("adClick", {props: {
path: globalThis.router.currentRoute.name,
position: data.adPosition,
type: data.adType
}})
},

Expand Down
19 changes: 16 additions & 3 deletions website/macos-big-sur-icons/src/views/BlogHome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@

<section class="p-t-30 p-b-10">

<NativeAd :adId="'iconbar-js-blogHome'" class="width-fit m-auto" :sponsored="true" :key="$route.fullPath + 'ad'"/>
<NativeAd
:adPosition="'Hero Top'"
:adId="'iconbar-js-blogHome'"
class="width-fit m-auto"
:sponsored="true"
:key="$route.fullPath + 'ad'"
/>

<H3-Description :text="subscribe"/>

Expand Down Expand Up @@ -36,8 +42,15 @@
</router-link>
</div>

<div class="single-ad m-b-20 p-b-50 p-t-30">
<script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
<div
@click="adClick({position: 'Bottom Page', type: 'Carbon'})"
class="single-ad m-b-20 p-b-50 p-t-30"
>
<script
async="async"
type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
id="_carbonads_js">
</script>
</div>

</div>
Expand Down
8 changes: 7 additions & 1 deletion website/macos-big-sur-icons/src/views/BlogPost.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@

<div class="single-ad mobile-ad p-b-10">
<NativeAd
:adPosition="'Blog post top desktop'"
:adId="'iconbar-js-blogPost'"
:sponsored="true"
:fullWidth="false"
Expand All @@ -43,7 +44,12 @@


<div class="single-ad p-b-20 p-t-30">
<script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
<script
@click="adClick({position: 'Bottom Page', type: 'Carbon'})"
async="async"
type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
id="_carbonads_js">
</script>
</div>


Expand Down
14 changes: 13 additions & 1 deletion website/macos-big-sur-icons/src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,18 @@

<div class="p-t-15 p-b-15">
<button @click="approveIcon(icon)" class="coral-btn coral-btn-primary">Approve</button>

<coral-splitbutton>
<button class="coral-btn coral-btn-primary" is="coral-button" coral-splitbutton-action="">Action</button>
<button id="target1" type="button" is="coral-button" icon="ChevronDown" coral-splitbutton-trigger=""></button>
</coral-splitbutton>
<coral-popover target="#target1" placement="bottom">
<coral-buttonlist>
<button is="coral-buttonlist-item">Second Action</button>
<button is="coral-buttonlist-item">Third Action</button>
</coral-buttonlist>
</coral-popover>

</div>

</div>
Expand Down Expand Up @@ -159,7 +171,7 @@ const currentUser = Parse.User.current(); // Check if user is currently logged i
let lastVisible
const docLimit = 500
const docLimit = 200
export default {
Expand Down
9 changes: 8 additions & 1 deletion website/macos-big-sur-icons/src/views/ResourceView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<img :src="resourceItem.feature_image"/>
</figure>
<NativeAd
:adPosition="'Under image Desktop'"
:adId="'iconbar-js-resourceItem'"
class="m-t-20"
sponsored="true"
Expand Down Expand Up @@ -71,7 +72,13 @@
</div>

<div class="card-hover relative coral-card resources-card-ad">
<script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
<script
@click="adClick({position: 'Icon Grid Top', type: 'Carbon'})"
async="async"
type="application/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
id="_carbonads_js">
</script>
<div class="card-no-ad">
<p class="coral-Body--M">
Support for .icns is on my (long) todo list.
Expand Down
11 changes: 9 additions & 2 deletions website/macos-big-sur-icons/src/views/Resources.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,15 @@
:step='resource'
/>

<div class="card-hover relative coral-card resources-card-ad">
<script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
<div
class="card-hover relative coral-card resources-card-ad"
@click="adClick({position: 'Icon Grid Bottom', type: 'Carbon'})"
>
<script
async="async"
type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
id="_carbonads_js">
</script>
<a
class="card-no-ad relative"
href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
Expand Down
7 changes: 6 additions & 1 deletion website/macos-big-sur-icons/src/views/UserProfile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,12 @@
v-else
>
<div style="z-index: 2; height: 100%; min-height: 210px" class="card-wrapper card-hover coral-card">
<script @click="adClick" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js2"></script>
<script
@click="adClick({position: 'Icon Grid Top', type: 'Native'})"
type="application/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom"
id="_carbonads_js2">
</script>
</div>
<UserIconCardLoading v-for="num in placeholderCount" :key="num+Math.floor(Math.random() * 10000000 + 1)" :icon="iconsCount"/>
</div>
Expand Down

1 comment on commit 44d58d4

@vercel
Copy link

@vercel vercel bot commented on 44d58d4 Jul 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.