Skip to content

Commit

Permalink
added spinner to resources page
Browse files Browse the repository at this point in the history
  • Loading branch information
@elrumo
elrumo committed Mar 27, 2021
1 parent 6685197 commit 31194d7
Show file tree
Hide file tree
Showing 8 changed files with 101 additions and 73 deletions.
4 changes: 2 additions & 2 deletions website/macos-big-sur-icons/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@
<meta name="author" content="@elrumo">

<!-- Carbon ads -->
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<script rel="preconnect" src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>

<script async>
<script rel="preconnect" async>
(function(h,e,a,t,m,p) {
m=e.createElement(a);m.async=!0;m.src=t;
p=e.getElementsByTagName(a)[0];p.parentNode.insertBefore(m,p);
Expand Down
5 changes: 5 additions & 0 deletions website/macos-big-sur-icons/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ import '@adobe/coral-spectrum/coral-component-dialog'
import '@adobe/coral-spectrum/coral-component-button'
import '@adobe/coral-spectrum/coral-component-toast'
import '@adobe/coral-spectrum/coral-component-icon'
import '@adobe/coral-spectrum/coral-component-icon/src/resources/spectrum-icons.svg';
import '@adobe/coral-spectrum/coral-component-icon/src/resources/spectrum-icons-color.svg';
import '@adobe/coral-spectrum/coral-component-icon/src/resources/spectrum-css-icons.svg';
import '@adobe/coral-spectrum/coral-component-wait'
import '@adobe/coral-spectrum/coral-component-progress'
import '@adobe/coral-spectrum/coral-component-quickactions'
Expand Down
3 changes: 2 additions & 1 deletion website/macos-big-sur-icons/src/CSS/resources-card.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
padding: 15px 0px 40px 0px;
display: grid;
grid-template-columns: minmax(400px, 800px) minmax(260px, 380px);
min-height: 350px;
gap: 40px;
}

Expand All @@ -21,7 +22,7 @@
display: grid;
grid-template-columns: auto;
gap: 15px;
padding: 70px 0px 40px 0px;
padding: 30px 0px 40px 0px;
}

.resource-excerpt{
Expand Down
2 changes: 1 addition & 1 deletion website/macos-big-sur-icons/src/api/pages.json
View file

Large diffs are not rendered by default.

32 changes: 17 additions & 15 deletions website/macos-big-sur-icons/src/components/Hero.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@


<div class="m-auto m-t-45">


<!-- Desktop Buttons -->
<div class="d-inline-block mobile-hidden">
<button
is="coral-button"
Expand All @@ -51,24 +52,25 @@
>
<span>Submit icons</span>
</button>
</div>

<a
rel="noopener"
class="mobile-hidden p-l-20"
target="_blank"
href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
@click="logDonation('hero')"
>
<button
is="coral-button"
variant="outline"
<a
rel="noopener"
class="p-l-20"
target="_blank"
href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
@click="logDonation('hero')"
>
<span>Buy me a coffee</span>
</button>
</a>
<button
is="coral-button"
variant="quiet"
>
<span>Buy me a coffee</span>
</button>
</a>

</div>

<!-- Mobile Buttons -->
<div class="d-inline-block desktop-hidden">
<button
is="coral-button"
Expand Down
9 changes: 7 additions & 2 deletions website/macos-big-sur-icons/src/components/NativeAd.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ export default {
mounted: function(){
function getAd(){
console.log("_bsa");
if (typeof _bsa !== 'undefined' && _bsa) {
console.log(_bsa);
_bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
{
target: '#iconbar-js',
Expand All @@ -40,6 +40,10 @@ export default {
`
}
);
let el = document.getElementById("customAd")
// if (!el) {
// console.log(el);
// }
}
}
Expand All @@ -48,7 +52,8 @@ export default {
setTimeout(() =>{
// console.log("_bsa: ", _bsa);
let el = document.getElementById("customAd")
if (!el) {
console.log(!el);
if (el == null) {
getAd()
}
}, 600)
Expand Down
2 changes: 2 additions & 0 deletions website/macos-big-sur-icons/src/components/app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1039,6 +1039,8 @@ main{
}

.waiting-wrapper{
width: fit-content;
margin: auto;
padding-top: 30px;
}

Expand Down
117 changes: 65 additions & 52 deletions website/macos-big-sur-icons/src/views/ResourceView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,116 @@
<template>
<div>
<div class="content-wrapper-compact text-left">


<!-- Back to all resources -->
<router-link to="/resources">
<p class="coral-Detail read-more read-more-left coral-Detail--XL m-t-30 coral-Link">
All Resources
</p>
</router-link>

<div class="resource-content-wrapper">

<div class="resource-image">
<figure class="post-full-image m-0 coral-Well p-0">
<img :src="resourceItem.feature_image"/>
</figure>
<div v-if="resourceItem.id == undefined" style="min-height: 350px" class="waiting-wrapper">
<coral-wait size="L" indeterminate=""></coral-wait>
</div>

<div class="resource-description">
<div>
<h3 class="coral-Heading--L coral-Heading--heavy m-0">
{{ resourceItem.title }}
</h3>

<!-- <p class="coral-Detail coral-Detail--L opacity-80 ">
<span class="coral-Detail--light">
{{ getDate(resourceItem.author) }}
</span>
</p> -->

<hr class="coral-Divider--S m-t-15 m-b-15">

<!-- Resource Wrappper -->
<div
v-if="resourceItem.id != undefined"
class="resource-content-wrapper"
>

<!-- Resource Image -->
<div class="resource-image">
<figure class="post-full-image m-0 coral-Well p-0">
<img :src="resourceItem.feature_image"/>
</figure>
<NativeAd
class="m-t-20"
sponsored="true"
/>
</div>

<!-- Resource Description -->
<div class="resource-description">
<div>
<h3 class="coral-Heading--L coral-Heading--heavy m-0">
{{ resourceItem.title }}
</h3>

<!-- <p class="coral-Detail coral-Detail--L opacity-80 ">
<span class="coral-Detail--light">
{{ getDate(resourceItem.author) }}
</span>
</p> -->

<hr class="coral-Divider--S m-t-15 m-b-15">
</div>

<!-- Resource Content -->
<p class="coral-Body--M resource-excerpt">{{ resourceItem.excerpt }}</p>
<div class="blog-post-wrapper post-full-content" id="page-js" v-html="resourceItem.html"></div>
<!-- Resource Content -->
<p class="coral-Body--M resource-excerpt">{{ resourceItem.excerpt }}</p>
<div class="blog-post-wrapper post-full-content" id="page-js" v-html="resourceItem.html"></div>
</div>

</div>

<!-- More resources -->
<div class="moreResources">
<h3 class="coral-Heading--L coral-Heading--heavy m-0">
More resources
</h3>

<div class="resources-grid card-grid" id="how-to-install">

<div v-for="resource in resourcesData" :key="resource.name" @click="getPageData">
<ResourcesCard
:step='resource'
:link="'/resources/'+resource.slug"
/>
</div>

</div>
<!-- More resources -->
<div class="moreResources">

<h3 class="coral-Heading--L coral-Heading--heavy m-0">More resources</h3>

<div class="resources-grid card-grid" id="how-to-install">

<div v-for="resource in resourcesData" :key="resource.name" @click="getPageData">
<ResourcesCard
:step='resource'
:link="'/resources/'+resource.slug"
/>
</div>

<div class="resources-card-ad">
<div v-if="showAd" class="resources-card-ad">
<script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
<div class="resources-card-ad">
<div class="resources-card-ad">
<script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
</div>
</div>

</div>

</div>

</div>

</div>

</div>
</template>

<script>
// @ is an alias to /src
import localPosts from '@/api/posts.json';
import ResourcesCard from '@/components/ResourcesCard.vue'
import NativeAd from "@/components/NativeAd.vue";
import pages from '@/api/pages.json';
export default {
name: 'ResourceView',
components: {
ResourcesCard
ResourcesCard,
NativeAd
},
data: function(){
return {
resourceItem: localPosts,
resourcesData: pages,
showAd: true,
meta: {
title: "Yooo"
title: ""
},
fullUrl: ""
}
},
mounted: async function(){
let parent = this;
console.log("title: ", parent.$router);
parent.getPageData()
},
Expand Down Expand Up @@ -222,7 +235,7 @@ export default {
parent.$router.push('/resources')
}
console.log("storeResourceItem: ", storeResourceItem);
// console.log("storeResourceItem: ", storeResourceItem);
// Botched together to get local blog data while real blog is loading. Temporary fix, this will need to be server side rendered.
for(let post in Object.keys(storeResourceItem)){
try {
Expand All @@ -237,7 +250,7 @@ export default {
parent.resourceItem = resourceItem;
} else{
console.log("Gii");
// console.log("Gii");
// Get individual page from all resources data
for(let post in Object.keys(storeResourcesData)){
try {
Expand Down

1 comment on commit 31194d7

@vercel
Copy link

@vercel vercel bot commented on 31194d7 Mar 27, 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.