Commit 5e084998 authored by Bitcoin Please's avatar Bitcoin Please

Updated site header.

parent cbf95ad9
......@@ -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{
......
......@@ -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;
}
......
......@@ -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. */
......
/* 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
......@@ -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
}
......
......@@ -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 () {
//
......
......@@ -258,6 +258,8 @@ export default {
],
theme: 'snow'
})
// TODO: Add ctrl-s / cmd-s capture for saving content.
},
}
</script>
......
......@@ -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;
......
......@@ -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">
......
......@@ -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. */