Updated site header.

public/css/style.css

@@ -604,120 +604,6 @@ textarea:focus {
     z-index: 9999998;
 }
 /*------------------------------------------------------------------
-2. Header / #header
--------------------------------------------------------------------*/
-.top-header{
-    padding: 12px 0;
-    background-color: #f9fbfb;
-}
-ul.socials-top{
-    float: left;
-}
-ul.socials-top li{
-    list-style: none;
-    display: inline-block;
-    margin-right: 12px;
-}
-ul.socials-top li:last-child{
-    margin-right: 0;
-}
-ul.socials-top li i{
-    color: #6a6a6a;
-}
-ul.socials-top li:hover i{
-    color: #00a6eb;
-}
-.site-header.fixed{
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: #fff;
-    z-index: 99;
-    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.1);
-    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.1);
-    box-shadow: 0 3px 3px rgba(0,0,0,.1);
-}
-.site-header .container{
-    position: relative;
-}
-.site-header .site-brand{
-    float: left;
-    line-height: 80px;
-}
-.site-header .right-header{
-    float: right;
-}
-.site-header .login .btn-primary{
-    height: 38px;
-    line-height: 38px;
-}
-.site-header .login,
-.site-header .search-icon,
-.site-header .main-menu{
-    display: inline-block;
-    margin-left: 45px;
-    line-height: 80px;
-}
-.site-header .main-menu,
-.site-header .main-menu li:first-child{
-    margin-left: 0px;
-}
-.site-header .login a{
-    display: inline-block;
-}
-.site-header .search-icon a{
-    font-size: 22px;
-    line-height: normal;
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0 5px;
-}
-.main-menu ul{
-    letter-spacing: -0.3em;
-}
-.main-menu ul li{
-    list-style: none;
-    display: inline-block;
-    letter-spacing: normal;
-    margin-left: 35px;
-    position: relative;
-}
-.main-menu ul li i{
-    display: none;
-}
-.main-menu ul li > .sub-menu{
-    position: absolute;
-    top: 100px;
-    z-index: 99;
-    width: 200px;
-    left: 0;
-    background-color: #fff;
-    visibility: hidden;
-    opacity: 0;
-    transition: all 0.4s;
-}
-.main-menu ul li:hover > .sub-menu{
-    top: 80px;
-    visibility: visible;
-    opacity: 1;
-}
-.main-menu ul li > .sub-menu li{
-    line-height: normal;
-    display: block;
-    margin: 0;
-    border-top: 1px solid #ededed;
-}
-.main-menu ul li > .sub-menu li a{
-    padding: 12px 15px;
-}
-.main-menu ul li a{
-    color: #20222b;
-}
-.main-menu ul li:hover > a{
-    color: #00a6eb;
-}
-/*------------------------------------------------------------------
 3. Main / #main
 -------------------------------------------------------------------*/
 .home .site-main{

src/components/Header.vue

@@ -248,10 +248,128 @@ export default {
 </script>
 
 <style scoped>
+/*------------------------------------------------------------------
+2. Header / #header
+-------------------------------------------------------------------*/
+.top-header{
+    /* padding: 12px 0; */
+    background-color: #f9fbfb;
+}
 .top-header .slogan {
     float: right;
     color: #6a6a6a;
 }
+
+ul.socials-top{
+    float: left;
+}
+ul.socials-top li{
+    list-style: none;
+    display: inline-block;
+    margin-right: 12px;
+}
+ul.socials-top li:last-child{
+    margin-right: 0;
+}
+ul.socials-top li i{
+    color: #6a6a6a;
+}
+ul.socials-top li:hover i{
+    color: #00a6eb;
+}
+.site-header.fixed{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    z-index: 99;
+    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.1);
+    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.1);
+    box-shadow: 0 3px 3px rgba(0,0,0,.1);
+}
+.site-header .container{
+    position: relative;
+}
+.site-header .site-brand{
+    float: left;
+    /* line-height: 80px; */
+}
+.site-header .right-header{
+    float: right;
+}
+.site-header .login .btn-primary{
+    height: 38px;
+    line-height: 38px;
+}
+.site-header .login,
+.site-header .search-icon,
+.site-header .main-menu{
+    display: inline-block;
+    margin-left: 45px;
+    /* line-height: 80px; */
+}
+.site-header .main-menu,
+.site-header .main-menu li:first-child{
+    margin-left: 0px;
+}
+.site-header .login a{
+    display: inline-block;
+}
+.site-header .search-icon a{
+    font-size: 22px;
+    line-height: normal;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 5px;
+}
+.main-menu ul{
+    letter-spacing: -0.3em;
+}
+.main-menu ul li{
+    list-style: none;
+    display: inline-block;
+    letter-spacing: normal;
+    margin-left: 35px;
+    position: relative;
+}
+.main-menu ul li i{
+    display: none;
+}
+.main-menu ul li > .sub-menu{
+    position: absolute;
+    top: 100px;
+    z-index: 99;
+    width: 200px;
+    left: 0;
+    background-color: #fff;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.4s;
+}
+.main-menu ul li:hover > .sub-menu{
+    top: 80px;
+    visibility: visible;
+    opacity: 1;
+}
+.main-menu ul li > .sub-menu li{
+    line-height: normal;
+    display: block;
+    margin: 0;
+    border-top: 1px solid #ededed;
+}
+.main-menu ul li > .sub-menu li a{
+    padding: 12px 15px;
+}
+.main-menu ul li a{
+    color: #20222b;
+}
+.main-menu ul li:hover > a{
+    color: #00a6eb;
+}
+
+/*  */
+
 .slogan strong {
     font-weight: 500;
 }

src/store/modules/campaigns.js

@@ -3,6 +3,7 @@ import getAsset from './campaigns/getters/getAsset'
 import getCampaign from './campaigns/getters/getCampaign'
 import getCampaigns from './campaigns/getters/getCampaigns'
 import getFullfillment from './campaigns/getters/getFullfillment'
+import getSummary from './campaigns/getters/getSummary'
 
 /* Import modules (actions). */
 import addAssurance from './campaigns/actions/addAssurance'
@@ -31,6 +32,7 @@ const getters = {
     getCampaign,
     getCampaigns,
     getFullfillment,
+    getSummary,
 }
 
 /* Actions. */

src/store/modules/campaigns/getters/getSummary.js

+/* Import modules. */
+import superagent from 'superagent'
+
+/**
+* Get Summary
+*/
+const getSummary = async (state, getters, rootState, rootGetters) => {
+    // console.log('Retrieving campaign...', _ownerSlug, _campaignId)
+
+    /* Retrieve API provider. */
+    const API_PROVIDER = rootGetters.getApiProvider
+
+    /* Set target. */
+    const target = `${API_PROVIDER}/campaigns/summary`
+    // console.log('TARGET', target)
+
+    /* Request campaign. */
+    const result = await superagent.get(target)
+    // console.log('RESULT', result)
+
+    /* Validate result. */
+    if (!result || !result.body) {
+        return null
+    }
+
+    /* Return campaign. */
+    return result.body
+}
+
+/* Export module. */
+export default getSummary

src/store/modules/wallet/actions/updateCoins.js

@@ -218,14 +218,14 @@ const updateCoins = async ({ dispatch, getters, rootGetters }) => {
                         dispatch('addCoin', pkg)
 
                         try {
-                            /* Initialize media. */
-                            const media = new Audio(require('@/media/coins.wav'))
+                            /* Initialize coins. */
+                            const coins = new Audio(require('@/assets/audio/coins.wav'))
 
-                            /* Play media. */
+                            /* Play coins. */
                             // WARNING: This action may fail on several browsers;
                             //          so it's best to do this last to avoid any
                             //          unforseen side-effects.
-                            media.play()
+                            coins.play()
                         } catch (err) {
                             console.error(err) // eslint-disable-line no-console
                         }

src/views/Campaign/Details/Content.vue

@@ -59,8 +59,10 @@
 					</div>
 
                     <div class="author-address">
-                        <i v-if="campaignModel == 'Community Pledge'" class="fa fa-users" aria-hidden="true"></i>
-                        <i v-if="campaignModel == 'Unknown campaign type'" class="fa fa-question" aria-hidden="true"></i>
+                        <i v-if="campaignModel == 'Cash Payouts'" class="fa fa-money mr-1" aria-hidden="true"></i>
+                        <i v-if="campaignModel == 'Community Pledge'" class="fa fa-users mr-1" aria-hidden="true"></i>
+                        <i v-if="campaignModel == 'Direct Donation'" class="fa fa-btc mr-1" aria-hidden="true"></i>
+                        <i v-if="campaignModel == 'Unknown campaign type'" class="fa fa-question mr-1" aria-hidden="true"></i>
                         {{campaignModel}}
                     </div>
 				</div>
@@ -699,7 +701,7 @@ export default {
         this.pledgeAmount = 0
 
         this.usd = await Nito.Markets.getTicker('BCH', 'USD')
-        console.info(`Market price (USD)`, this.usd)
+        // console.info(`Market price (USD)`, this.usd)
     },
     mounted: function () {
         //

src/views/Campaign/Manage/Write.vue

@@ -258,6 +258,8 @@ export default {
             ],
             theme: 'snow'
 		})
+
+        // TODO: Add ctrl-s / cmd-s capture for saving content.
     },
 }
 </script>

src/views/Welcome.vue

@@ -71,7 +71,8 @@ export default {
 <style scoped>
 .site-main .sideshow {
     position: relative;
-    height: 674px;
+    /* height: 674px; */
+    height: 424px;
     background-image: url('https://i.imgur.com/MazyCcK.jpg');
     background-repeat: no-repeat;
     background-size: cover;

src/views/Welcome/Discover.vue

@@ -3,7 +3,7 @@
         <div class="container">
             <h2 class="title">Discover Campaigns</h2>
 
-            <div class="campaign-tabs filter-theme">
+            <!-- <div class="campaign-tabs filter-theme">
                 <button class="button" data-filter=".filterinteresting">
                     Ending Soon
                 </button>
@@ -19,7 +19,7 @@
                 <button class="button" data-filter=".filtersuccessful">
                     Successful
                 </button>
-            </div>
+            </div> -->
 
             <div class="campaign-content grid">
                 <div class="row">

src/views/Welcome/PIF.vue

@@ -53,17 +53,20 @@
                                         </div>
 
                                         <div class="author-address">
-                                            <span class="ion-location"></span>
-                                            {{displayLocation(campaign)}}
+                                            <i v-if="campaignModel(campaign) == 'Cash Payouts'" class="fa fa-money mr-1" aria-hidden="true"></i>
+                                            <i v-if="campaignModel(campaign) == 'Community Pledge'" class="fa fa-users mr-1" aria-hidden="true"></i>
+                                            <i v-if="campaignModel(campaign) == 'Direct Donation'" class="fa fa-btc mr-1" aria-hidden="true"></i>
+                                            <i v-if="campaignModel(campaign) == 'Unknown campaign type'" class="fa fa-question mr-1" aria-hidden="true"></i>
+                                            {{campaignModel(campaign)}}
                                         </div>
                                     </div>
 
                                     <div class="process">
-                                        <div class="raised">
+                                        <div v-if="campaignModel(campaign) == 'Community Pledge'" class="raised">
                                             <span :style="{ width: completedPct(campaign, true) + '%'}"></span>
                                         </div>
 
-                                        <div class="process-info">
+                                        <!-- <div class="process-info">
                                             <div class="process-pledged">
                                                 <span>{{formatRequested(campaign)}}</span>requested
                                             </div>
@@ -75,11 +78,76 @@
                                             <div class="process-time">
                                                 <span>{{displayBackers(campaign)}}</span>backers
                                             </div>
+                                        </div> -->
 
-                                            <!-- <div class="process-time">
-                                                <span>{{campaign.updatedAt}}</span>days ago
+                                        <div v-if="campaignModel(campaign) == 'Community Pledge'" class="row process-info">
+                                            <div class="col">
+                                                <span>{{fundingGoal(campaign)}}</span>
+                                                funding goal
+                                            </div>
+
+                                            <div class="col">
+                                                <span>{{fundingPledged(campaign)}}</span>
+                                                pledged
+                                            </div>
+
+                                            <div class="col">
+                                                <span>{{numSupporters(campaign)}}</span>
+                                                supporters
+                                            </div>
+
+                                            <div class="col">
+                                                <span>{{remaining(campaign).time}}</span>
+                                                {{remaining(campaign).suffix}}
+                                            </div>
+                                        </div>
+
+                                        <div v-if="campaignModel(campaign) == 'Cash Payouts'" class="row process-info">
+                                            <div class="col">
+                                                <span>{{fundingPledged(campaign)}}</span>
+                                                <i class="fa fa-bitcoin" aria-hidden="true"></i>
+                                                IN <small>(last 30 days)</small>
+                                            </div>
+
+                                            <div class="col">
+                                                <span>$0.00</span>
+                                                <i class="fa fa-bitcoin" aria-hidden="true"></i>
+                                                OUT <small>(last 30 days)</small>
+                                            </div>
+
+                                            <div class="col">
+                                                <span>{{numSupporters(campaign)}}</span>
+                                                supporters
+                                            </div>
+
+                                            <!-- <div class="col">
+                                                <span>{{remaining(campaign).time}}</span>
+                                                {{remaining(campaign).suffix}}
+                                            </div> -->
+                                        </div>
+
+                                        <div v-if="campaignModel(campaign) == 'Direct Donation'" class="row process-info">
+                                            <div class="col">
+                                                <span>{{fundingGoal(campaign)}}</span>
+                                                last 24hrs
+                                            </div>
+
+                                            <div class="col">
+                                                <span>{{fundingPledged(campaign)}}</span>
+                                                last 30 days
+                                            </div>
+
+                                            <div class="col">
+                                                <span>{{numSupporters(campaign)}}</span>
+                                                supporters
+                                            </div>
+
+                                            <!-- <div class="col">
+                                                <span>{{remaining(campaign).time}}</span>
+                                                {{remaining(campaign).suffix}}
                                             </div> -->
                                         </div>
+
                                     </div>
                                 </div>
                             </div>
@@ -98,6 +166,8 @@
 import { mapGetters } from 'vuex'
 
 /* Import modules. */
+import moment from 'moment'
+import Nito from 'nitojs'
 import numeral from 'numeral'
 
 /* Import components. */
@@ -119,6 +189,7 @@ export default {
     data: () => {
         return {
             campaigns: [],
+            usd: null,
         }
     },
     computed: {
@@ -214,6 +285,195 @@ export default {
         },
 
 
+        /**
+         * Campaign Model
+         */
+        campaignModel(_campaign) {
+            /* Validate campaign theme. */
+            if (!_campaign || !_campaign.theme) {
+                return null
+            }
+
+            /* Set theme. */
+            const theme = _campaign.theme
+
+            /* Validate theme. */
+            if (theme) {
+                /* Handle campaign type. */
+                switch(theme) {
+                case 'direct':
+                    return 'Direct Cash'
+                case 'assurance':
+                    return 'Community Pledge'
+                case 'payouts':
+                    return 'Cash Payouts'
+                default:
+                    return 'Unknown campaign type'
+                }
+            } else {
+                return null
+            }
+        },
+
+
+        /**
+         * Funding Goal
+         */
+        fundingGoal(_campaign) {
+            if (_campaign && _campaign.assurances) {
+                const assuranceid = 0
+
+                /* Set recipients. */
+                const recipient = _campaign.assurances[assuranceid].recipient
+
+                /* Validate recipients. */
+                if (!recipient) {
+                    return '$0.00'
+                }
+
+                const calc = (recipient.satoshis / 100000000 * this.usd)
+
+                return numeral(calc).format('$0,0[.]00')
+            }
+
+            return 'n/a'
+        },
+
+        /**
+         * Funding Pledged
+         */
+        fundingPledged(_campaign) {
+            if (_campaign && (_campaign.assurances || _campaign.payouts)) {
+                if (_campaign.assurances) {
+                    const assuranceid = 0
+
+                    /* Set pledges. */
+                    const pledges = _campaign.assurances[assuranceid].pledges
+
+                    /* Validate recipients. */
+                    if (!pledges) {
+                        return '$0.00'
+                    }
+
+                    /* Initialize total. */
+                    let pledgeTotal = 0
+
+                    /* Loop through ALL pledges. */
+                    Object.keys(pledges).forEach(pledgeid => {
+                        /* Add satoshis to total. */
+                        pledgeTotal += pledges[pledgeid].satoshis
+                    })
+
+                    /* Calculate USD total. */
+                    const totalUSD = (pledgeTotal / 100000000 * this.usd)
+
+                    /* Return formatted value. */
+                    return numeral(totalUSD).format('$0,0.00')
+                }
+
+                if (_campaign.payouts) {
+                    /* Set funders. */
+                    const funders = _campaign.payouts.funders
+                    // console.log('FUNDERS', funders);
+
+                    /* Validate recipients. */
+                    if (!funders) {
+                        return '$0.00'
+                    }
+
+                    /* Initialize total. */
+                    let funderTotal = 0
+
+                    /* Loop through ALL funders. */
+                    Object.keys(funders).forEach(funderid => {
+                        /* Add satoshis to total. */