Commit 6dc66c46 authored by Bitcoin Please's avatar Bitcoin Please
Browse files

UI cleanup of campaign details.

parent 7f3824fa
......@@ -439,4 +439,8 @@ button {
background: #08aded;
background-color: #0094d2;
} */
.markdown a {
display: inline-block;
}
</style>
......@@ -15,15 +15,18 @@
<div v-if="myCampaigns" class="campaigns">
<div
class="campaign-item"
v-for="campaign of myCampaigns"
v-for="(campaign, index) of myCampaigns"
:key="campaign.id"
>
<a class="campaign-image" href="javascript://">
<img :src="campaign.media ? campaign.media.main : null" alt=""></a>
<hr v-if="index !== 0" />
<div class="campaign-box">
<router-link :to="campaign.slug + '-null'" class="campaign-image">
<img :src="campaign.media ? campaign.media.main : null" :alt="campaign.title">
</router-link>
<div class="campaign-category">
<a href="javascript://">{{campaign.category}}</a>
{{campaign.category}}
</div>
<div class="campaign-title">
......@@ -32,9 +35,7 @@
</router-link>
</div>
<div class="campaign-desc">
{{campaign.summary}}
</div>
<div class="campaign-desc" v-html="formatSummary(campaign.summary)" />
</div>
</div>
</div>
......@@ -54,22 +55,25 @@
v-for="campaign of supportedCampaigns"
:key="campaign.id"
>
<a class="campaign-image" href="javascript://">
<img :src="campaign.media ? campaign.media.main : null" alt=""></a>
<hr v-if="index !== 0" />
<div class="campaign-box">
<div class="campaign-category">
<a href="javascript://">{{campaign.category}}</a>
</div>
<div class="campaign-box">
<router-link :to="campaign.slug + '-null'" class="campaign-image">
<img :src="campaign.media ? campaign.media.main : null" :alt="campaign.title">
</router-link>
<div class="campaign-title">
<a href="javascript://">{{campaign.title}}</a>
</div>
<div class="campaign-category">
{{campaign.category}}
</div>
<div class="campaign-desc">
{{campaign.summary}}
</div>
</div>
<div class="campaign-title">
<router-link :to="campaign.slug + '-null'">
{{campaign.title}}
</router-link>
</div>
<div class="campaign-desc" v-html="formatSummary(campaign.summary)" />
</div>
</div>
</div>
......@@ -125,6 +129,10 @@ export default {
'getSignedMessage',
]),
...mapGetters('utils', [
'getMarkdown',
]),
myCampaigns() {
if (this.campaigns) {
/* Set campaigns. */
......@@ -149,6 +157,15 @@ export default {
...mapActions('campaigns', [
'updateAsset',
]),
formatSummary(_summary) {
if (_summary) {
return this.getMarkdown(_summary)
} else {
return null
}
},
},
created: async function () {
/* Set owner slug. */
......@@ -167,7 +184,27 @@ export default {
}
.campaign-item img {
width: 100px;
float: right;
width: 140px;
height: 100px;
border: 1pt solid rgba(180, 180, 180, 0.5);
padding: 1px;
margin: 0 0 10px 10px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.campaign-category {
color: rgba(90, 90, 90, 0.5);
cursor: default;
}
.campaign-title {
font-size: 1.6em;
font-weight: bold;
}
</style>
<template>
<div class="campaign-content">
<div class="container">
<div class="">
<!-- <div class="campaign"> -->
<div class="campaign-item clearfix">
<div v-if="images" class="campaign-image">
<div id="campaign-gallery" class="campaign-slider">
<div class="item">
<img :src="images[0]" alt="">
</div>
<div class="item">
<img :src="images[1]" alt="">
</div>
<div class="item">
<img :src="images[2]" alt="">
</div>
</div>
<div class="container campaign-content">
<div class="campaign-item clearfix">
<div v-if="images" class="campaign-image">
<div id="campaign-gallery" class="campaign-slider">
<div class="item">
<img :src="images[0]" alt="">
</div>
<div class="item">
<img :src="images[1]" alt="">
</div>
<div class="item">
<img :src="images[2]" alt="">
</div>
</div>
</div>
<div class="campaign-box">
<div class="share">
<ul>
<li class="share-twitter">
<a href="javascript://"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="share-google-plus">
<a href="javascript://"><i class="fa fa-reddit" aria-hidden="true"></i></a>
</li>
<!-- <li class="share-facebook">
<a href="javascript://"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li> -->
<!-- <li class="share-linkedin">
<a href="javascript://"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li> -->
<li class="share-code">
<a href="javascript://"><i class="fa fa-code" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<a href="javascript://" class="category">{{category}}</a>
<h3>{{title}}</h3>
<div class="campaign-description clearfix">
<p v-html="summary" />
</div>
<div class="campaign-author">
<div class="author-profile">
<a class="author-icon" href="javascript://">
<img :src="ownerAvatar" alt=""></a>
by <a class="author-name" href="javascript://">{{ownerLabel}}</a>
</div>
<div class="campaign-box">
<div class="share">
<ul>
<li class="share-twitter">
<a href="javascript://"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="share-google-plus">
<a href="javascript://"><i class="fa fa-reddit" aria-hidden="true"></i></a>
</li>
<!-- <li class="share-facebook">
<a href="javascript://"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li> -->
<!-- <li class="share-linkedin">
<a href="javascript://"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li> -->
<li class="share-code">
<a href="javascript://"><i class="fa fa-code" aria-hidden="true"></i></a>
</li>
</ul>
</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>
{{campaignModel}}
</div>
</div>
<a href="javascript://" class="category">{{category}}</a>
<div class="process">
<div class="raised">
<span></span>
</div>
<h3>{{title}}</h3>
<div class="process-info">
<div class="process-funded">
<span>$10000</span>funding goal
</div>
<div class="campaign-description clearfix">
<p v-html="summary" />
<div class="process-pledged">
<span>$100</span>pledged
</div>
<div class="campaign-author">
<div class="author-profile">
<a class="author-icon" href="javascript://">
<img :src="ownerAvatar" alt=""></a>
by <a class="author-name" href="javascript://">{{ownerLabel}}</a>
</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>
{{campaignModel}}
</div>
</div>
<div class="process">
<div class="raised">
<span></span>
</div>
<div class="process-info">
<div class="process-funded">
<span>$10000</span>funding goal
</div>
<div class="process-pledged">
<span>$100</span>pledged
</div>
<div class="process-time">
<span>2</span>supporters
</div>
<div class="process-time">
<span>1</span>days ago
</div>
</div>
</div>
<div v-if="showActions" class="button">
<a href="javascript://" class="btn-primary" @click="showBacking">
Support this Campaign
</a>
<a href="javascript://" class="btn-secondary" @click="showActions = false; showReminder = true">
<i class="fa fa-heart" aria-hidden="true"></i>
Remind me
</a>
</div>
<Reminder v-if="showReminder" @cancel="showReminder = false; showActions = true" />
<Direct v-if="showDirect" @cancel="showDirect = false; showActions = true" />
<Assurance v-if="showAssurance" @cancel="showAssurance = false; showActions = true" />
<Payouts v-if="showPayouts" @cancel="showPayouts = false; showActions = true" />
<div class="process-time">
<span>2</span>supporters
</div>
<div class="process-time">
<span>1</span>days ago
</div>
</div>
</div>
<div v-if="showActions" class="button">
<a href="javascript://" class="btn-primary" @click="showBacking">
Support this Campaign
</a>
<a href="javascript://" class="btn-secondary" @click="showActions = false; showReminder = true">
<i class="fa fa-heart" aria-hidden="true"></i>
Remind me
</a>
</div>
</div>
</div>
<div class="campaign-item clearfix">
<Reminder v-if="showReminder" @cancel="showReminder = false; showActions = true" />
<Direct v-if="showDirect" @cancel="showDirect = false; showActions = true" />
<Assurance v-if="showAssurance" @cancel="showAssurance = false; showActions = true" />
<Payouts v-if="showPayouts" @cancel="showPayouts = false; showActions = true" />
</div>
</div>
</template>
......
<template>
<main>
<hr />
<h3>Community Pledge</h3>
<p>
Make a pledge that will ONLY be fullfilled if the rest of the community also contributes to the full amount requrested by this campaign.
</p>
<div class="mt-3">
<p>
3% + €0.20 per pledge
</p>
<p>
Pledges under €10 have a discounted micropledge fee of 5% + €0.05 per pledge
</p>
</div>
<div class="my-3">
<h4>Your <i class="fa fa-heart text-danger"></i> and support causes cash for this campaign <i class="fa fa-arrow-down"></i></h4>
<a :href="'https://explorer.bitcoin.com/bch/address/' + pledgeAddress" target="_blank"><strong>{{pledgeAddress}}</strong></a>
</div>
<div>
Satoshis {{satoshis}}
</div>
<input
class="name"
type="text"
id="pledgeAmount"
placeholder="Enter your pledge amount (required)"
v-model="pledgeAmount"
/>
<h4>Community Pledge</h4>
<div>
<input
class="name"
type="text"
id="name"
placeholder="Name (optional)"
v-model="name"
/>
</div>
<div>
<input
class="comment"
type="text"
id="comment"
placeholder="Comment (optional)"
v-model="comment"
/>
</div>
<div>
<textarea v-model="pledge" class="pledge" />
<div class="row">
<div class="col">
<h4>Your <i class="fa fa-heart text-danger"></i> and support causes cash for this campaign <i class="fa fa-arrow-down"></i></h4>
<a :href="'https://explorer.bitcoin.com/bch/address/' + pledgeAddress" target="_blank"><strong>{{pledgeAddress}}</strong></a>
</div>
</div>
<div class="button">
<a href="javascript://" class="btn-danger" @click="$emit('cancel')">
<i class="fa fa-times-circle" aria-hidden="true"></i>
Cancel Community Pledge
</a>
<div class="row">
<div class="col">
<div>
Satoshis {{satoshis}}
</div>
<input
class="name"
type="text"
id="pledgeAmount"
placeholder="Enter your pledge amount (required)"
v-model="pledgeAmount"
/>
<h4>Community Pledge</h4>
<div>
<input
class="name"
type="text"
id="name"
placeholder="Name (optional)"
v-model="name"
/>
</div>
<div>
<input
class="comment"
type="text"
id="comment"
placeholder="Comment (optional)"
v-model="comment"
/>
</div>
<div>
<textarea v-model="pledge" class="pledge" />
</div>
</div>
<div class="col">
<div class="button float-right">
<a href="javascript://" class="btn-danger" @click="$emit('cancel')">
<i class="fa fa-times-circle" aria-hidden="true"></i>
Cancel Community Pledge
</a>
</div>
<h3>Community Pledge</h3>
<p>
Make a pledge that will ONLY be fullfilled if the rest of the community also contributes to the full amount requrested by this campaign.
</p>
<div class="mt-3">
<p>
3% + €0.20 per pledge
</p>
<p>
Pledges under €10 have a discounted micropledge fee of 5% + €0.05 per pledge
</p>
</div>
</div>
</div>
</main>
</template>
......
<template>
<main>
<hr />
<h3>Campaign Reminder</h3>
<p>
......
<template>
<div id="guide" class="tabs">
<h2>Campaign Guide</h2>
<div v-if="guideDisplay" class="mt-3" v-html="guideDisplay" />
<div class="mt-3" v-html="guideDisplay" />
<div v-else>
<h1>Campaign Guide</h1>
<!-- <a href="javascript://" class="btn-primary">Ask a question</a> -->
<p class="m-3">
There is no guide available
</p>
</div>
</div>
</template>
......
<template>
<div id="news" class="tabs comment-area">
<div id="news" class="tabs">
<!-- <h3 class="comments-title">New &amp; Noteworthy</h3> -->
<ol v-if="articleList" class="comments-list">
......@@ -33,7 +33,11 @@
</ol>
<div v-else class="campaigns">
There is no news available
<h1>Latest News</h1>
<p class="m-3">
There is no news available
</p>
</div>
</div>
</template>
......
<template>
<div id="premium" class="tabs comment-area">
<div id="premium" class="tabs">
<!-- <h3 class="comments-title">New &amp; Noteworthy</h3> -->
<ol class="comments-list">
<ol v-if="itemList" class="comments-list">
<li v-for="item of itemList" :key="item.id" class="comment clearfix">
<div class="comment-body">
<div class="comment-avatar">
......@@ -31,8 +30,15 @@
</div>
</div>
</li>
</ol>
<div v-else>
<h1>Premium Content</h1>
<p class="m-3">
There is no premium content available
</p>
</div>
</div>
</template>
......@@ -66,6 +72,10 @@ export default {
]),
itemList() {
if (!this.items || this.items.length === 0) {
return null
}
const items = this.items.map(item => {
/* Format data. */
item.timeAgo = moment.unix(item.createdAt).format('ll')
......
<template>
<div id="story" class="tabs active markdown">
<!-- <h1>{{title}}</h1> -->
<div v-if="story" v-html="story" />
<!-- <div class="row">
<div class="col-8">
<p v-html="summary" />
</div>
</div> -->
<div v-else>
<h1>Campaign Story</h1>
<!-- <hr /> -->
<!-- <h1>Readme</h1> -->
<p v-html="story" />
<p