Commit 1e1c6b12 authored by Bitcoin Please's avatar Bitcoin Please
Browse files

Refactored campaign details.

parent 90fabbf7
<svg id="Capa_1" enable-background="new 0 0 510.769 510.769" height="512" viewBox="0 0 510.769 510.769" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m402.83 166.432 22.419-65.613c1.532-4.484.403-9.352-2.947-12.702s-8.219-4.478-12.701-2.948l-18.471 6.311c-3.92 1.34-6.012 5.603-4.673 9.522 1.341 3.921 5.603 6.012 9.522 4.673l13.313-4.549-21.067 61.656c-1.205 3.524-.765 7.357 1.207 10.515l35.469 56.813-68.319-5.344c-4.535-.367-8.86 1.791-11.316 5.599l-34.603 53.561-17.608-58.321c-1.194-3.962-4.272-7.042-8.237-8.24l-58.324-17.608 53.563-34.604c3.807-2.461 5.952-6.797 5.598-11.313l-5.345-68.321 56.817 35.471c3.155 1.967 6.987 2.407 10.508 1.204l18.034-6.162c3.92-1.339 6.012-5.603 4.672-9.521-1.339-3.92-5.606-6.016-9.521-4.672l-16.832 5.751-60.229-37.601c-3.971-2.478-8.92-2.511-12.921-.084-4.001 2.428-6.26 6.834-5.896 11.5l5.634 72.016-57.076 36.873c-4.081 2.637-6.194 7.264-5.516 12.075s3.99 8.673 8.642 10.077l33.54 10.126-177.971 177.967c-2.929 2.93-2.929 7.678 0 10.607 1.465 1.464 3.385 2.196 5.304 2.196s3.839-.732 5.304-2.196l183.657-183.656 12.649 3.819 3.819 12.65-56.077 56.077c-2.929 2.93-2.929 7.678 0 10.607 1.465 1.464 3.385 2.196 5.304 2.196s3.839-.732 5.304-2.196l50.389-50.39 10.126 33.54c1.404 4.651 5.266 7.963 10.077 8.642.596.084 1.188.126 1.775.125 4.151 0 7.989-2.065 10.3-5.641l36.874-57.075 72.016 5.634c4.665.359 9.071-1.894 11.498-5.896 2.428-4.001 2.396-8.952-.082-12.921z"/><path d="m204.211 322.675-168.888 168.889c-4.892 4.892-12.566 5.182-17.108.639-4.541-4.54-4.254-12.215.64-17.107l41.309-41.309c2.929-2.93 2.929-7.678 0-10.607-2.93-2.928-7.678-2.928-10.607 0l-41.31 41.308c-10.741 10.742-11.028 27.932-.638 38.322 5.081 5.081 11.788 7.608 18.573 7.607 7.088 0 14.261-2.759 19.749-8.246l168.888-168.889c2.929-2.93 2.929-7.678 0-10.607-2.93-2.928-7.678-2.928-10.608 0z"/><path d="m160.979 156.928c1.746.936 3.693 1.411 5.646 1.411 1.273 0 2.551-.202 3.774-.612l29.553-9.891c3.888-1.3 6.801-4.451 7.792-8.43.991-3.978-.103-8.128-2.926-11.1l-22.1-23.272c-4.313-4.545-11.457-4.978-16.26-.984l.001-.001c-15.975 13.276-15.003 32.051-11.375 45.463.857 3.165 3.005 5.867 5.895 7.416zm12.948-39.368 16.695 17.581-21.833 7.307c-1.675-7.654-2.119-17.287 5.138-24.888z"/><path d="m326.04 51.242c2.246 3.23 5.876 5.12 9.786 5.12.164 0 .328-.003.493-.01 4.097-.166 7.772-2.381 9.832-5.925l16.13-27.747c3.147-5.416 1.557-12.391-3.621-15.879 0 0 0-.001-.001-.001-17.229-11.602-34.974-5.397-46.825 1.851-2.797 1.709-4.789 4.53-5.464 7.738-.673 3.204.012 6.582 1.88 9.267zm21.75-33.48-12.186 20.96-13.143-18.901c6.876-3.757 15.997-6.888 25.329-2.059z"/><path d="m244.929 48.048c1.481 1.834 3.649 2.785 5.837 2.785 1.655 0 3.322-.546 4.71-1.668 3.222-2.604 3.722-7.326 1.117-10.547l-13.664-16.901c-2.603-3.221-7.325-3.722-10.547-1.117-3.222 2.604-3.722 7.326-1.117 10.547z"/><path d="m382.819 306.308c-2.973-2.821-7.122-3.915-11.101-2.926-3.979.991-7.13 3.904-8.43 7.791l-9.891 29.554c-1.038 3.1-.747 6.532.798 9.417 1.548 2.891 4.25 5.039 7.416 5.897 5.79 1.566 10.983 2.24 15.64 2.24 14.88 0 24.24-6.898 29.823-13.614 3.992-4.803 3.561-11.945-.984-16.26zm-14.141 36.028 7.307-21.833 17.581 16.695c-7.603 7.259-17.236 6.815-24.888 5.138z"/><path d="m504.325 152.466c0-.001-.001-.001 0 0-3.489-5.18-10.463-6.769-15.882-3.622l-27.746 16.131c-3.544 2.06-5.759 5.735-5.924 9.832-.166 4.096 1.745 7.938 5.11 10.277l25.583 17.79c2.01 1.398 4.405 2.134 6.827 2.134.815 0 1.634-.084 2.44-.253 3.209-.675 6.03-2.666 7.739-5.462 13.136-21.473 8.258-37.317 1.853-46.827zm-13.02 36.197-18.902-13.144 20.961-12.186c4.83 9.335 1.699 18.454-2.059 25.33z"/><path d="m489.408 268.197-16.901-13.664c-3.223-2.606-7.944-2.105-10.547 1.117-2.604 3.221-2.104 7.943 1.117 10.547l16.901 13.664c1.388 1.122 3.055 1.668 4.71 1.668 2.188 0 4.355-.951 5.837-2.785 2.605-3.221 2.105-7.944-1.117-10.547z"/><path d="m471.57 42.739c-2.829-3.024-7.576-3.185-10.601-.353l-18.749 17.541c-3.024 2.83-3.183 7.576-.353 10.601 1.477 1.578 3.475 2.376 5.479 2.376 1.835 0 3.676-.67 5.122-2.023l18.749-17.541c3.025-2.831 3.184-7.577.353-10.601z"/></g></svg>
\ No newline at end of file
......@@ -504,9 +504,7 @@ export default {
title: this.title,
model: this.model,
category: this.category,
owner: {
slug: this.ownerSlug,
},
owner: this.ownerSlug,
location: this.location,
}
......@@ -521,7 +519,6 @@ export default {
if (result.ok && !result.error) {
this.title = null
this.category = null
// this.summary = null
this.location = null
alert('New campaign created successfully!')
......
......@@ -181,7 +181,7 @@ export default {
},
watch: {
campaign: function (_campaign) {
if (_campaign && _campaign.images) {
if (_campaign && _campaign.media) {
/* Wait a tick. */
setTimeout(() => {
$("#campaign-gallery").owlCarousel({
......@@ -426,15 +426,15 @@ export default {
const images = []
/* Validate main image. */
if (this.campaign.images && this.campaign.images.main) {
images.push(this.campaign.images.main)
if (this.campaign.media && this.campaign.media.main) {
images.push(this.campaign.media.main)
}
// /* Validate gallery images. */
if (this.campaign.images && this.campaign.images.gallery) {
if (this.campaign.media && this.campaign.media.gallery) {
let max = 2
for (let i = 0; i < this.campaign.images.gallery.length; i++) {
images.push(this.campaign.images.gallery[i])
for (let i = 0; i < this.campaign.media.gallery.length; i++) {
images.push(this.campaign.media.gallery[i])
// FIXME: Increase the maximum gallery size.
if (i + 1 === max) break
......
......@@ -14,31 +14,26 @@
<a href="javascript://">Backers</a>
</li>
<li data-tab="budget">
<a href="javascript://">Budget</a>
</li>
<li data-tab="expenses">
<a href="javascript://">Expenses</a>
</li>
<li data-tab="faq">
<a href="javascript://">FAQ</a>
<li data-tab="financial">
<a href="javascript://">Financial</a>
</li>
<li data-tab="news">
<a href="javascript://">News</a>
</li>
<li data-tab="guide">
<a href="javascript://">Guide</a>
</li>
</ul>
<a name="history"></a>
<div class="campaign-content">
<Story :campaign="campaign" />
<Backers :campaign="campaign" />
<Budget :campaign="campaign" />
<Expenses :campaign="campaign" />
<FAQ :campaign="campaign" />
<Financial :campaign="campaign" />
<News :campaign="campaign" />
<Guide :campaign="campaign" />
</div>
</div>
</div>
......@@ -52,10 +47,9 @@
<script>
/* Import components. */
import Backers from './History/Backers'
import Budget from './History/Budget'
import Events from './History/Events'
import Expenses from './History/Expenses'
import FAQ from './History/FAQ'
import Financial from './History/Financial'
import Guide from './History/Guide'
import News from './History/News'
import Story from './History/Story'
......@@ -69,10 +63,9 @@ export default {
},
components: {
Backers,
Budget,
Events,
Expenses,
FAQ,
Financial,
Guide,
News,
Story,
},
......
<template>
<div class="col-lg-4">
<div class="support support-campaign">
<h3 class="support-campaign-title">Campaign Events</h3>
<h3 class="support-campaign-title">
<span class="text-danger">LIVE</span> Events Timeline
</h3>
<!-- <p class="campaignTypeDesc">
All events are placed into escrow to be withdrawn based on the preset terms of the DRIPP campaign.
......
<template>
<div id="expenses" class="tabs">
<h1>Campaign Expenses</h1>
<p>
Every campaign has a fixed expenses that will be reported publicly.
</p>
<table>
<tbody>
<tr>
<th>Label</th>
<th>Amount</th>
<th>Comments</th>
</tr>
<tr v-for="item of expenses" :key="item.txid">
<td>{{item.label}}</td>
<td>{{item.expensesAmount}}</td>
<td>{{item.comments}}</td>
</tr>
<!-- <tr>
<td>Andrew</td>
<td>$80</td>
<td>June 15, 2017</td>
</tr> -->
</tbody>
</table>
</div>
</template>
<script>
export default {
props: {
campaign: Object,
},
data: () => {
return {
expenses: [],
}
},
created: function () {
/* Sample expenses. */
const expenses = {
txid: 'some-random-transaction-id',
label: 'Development',
expensesAmount: '100%',
comments: 'To be determined',
}
this.expenses.push(expenses)
},
}
</script>
<style scoped>
#expenses table {
width: 100%;
}
#expenses table tr th, #expenses table tr td {
border: 1px solid #ededed;
padding: 15px;
}
</style>
<template>
<div id="budget" class="tabs">
<div id="financial" class="tabs">
<h1>Use of Funds</h1>
<p>
......@@ -25,6 +25,35 @@
</tr> -->
</tbody>
</table>
<hr />
<h1>Campaign Expenses</h1>
<p>
Every campaign has a fixed expenses that will be reported publicly.
</p>
<table>
<tbody>
<tr>
<th>Label</th>
<th>Amount</th>
<th>Comments</th>
</tr>
<tr v-for="item of expenses" :key="item.txid">
<td>{{item.label}}</td>
<td>{{item.expensesAmount}}</td>
<td>{{item.comments}}</td>
</tr>
<!-- <tr>
<td>Andrew</td>
<td>$80</td>
<td>June 15, 2017</td>
</tr> -->
</tbody>
</table>
</div>
</template>
......@@ -53,10 +82,10 @@ export default {
</script>
<style scoped>
#budget table {
#financial table {
width: 100%;
}
#budget table tr th, #budget table tr td {
#financial table tr th, #financial table tr td {
border: 1px solid #ededed;
padding: 15px;
}
......
<template>
<div id="faq" class="tabs">
<h2>Frequently Asked Questions</h2>
<div id="guide" class="tabs">
<h2>Campaign Guide</h2>
<p>
Looks like there aren't any frequently asked questions yet.
......
......@@ -20,8 +20,8 @@
<ul class="nav nav-tabs process-model more-icon-preocess" role="tablist">
<li>
<a href="javascript://">
<span><img src="@/assets/img/log-out.svg" alt=""></span>
<p>Cancel</p>
<span><img class="img-button" src="@/assets/img/magic.svg" alt=""></span>
<p>Create New</p>
</a>
</li>
......@@ -39,41 +39,41 @@
</a>
</li>
<li data-tab="funds" class="pm-option">
<li data-tab="rewards" class="pm-option">
<a href="javascript://">
<span><img src="@/assets/img/award.svg" alt=""></span>
<p>Finances</p>
<span><img src="@/assets/img/alert-circle-i.svg" alt=""></span>
<p>Rewards</p>
</a>
</li>
<li data-tab="social" class="pm-option">
<li data-tab="funds" class="pm-option">
<a href="javascript://">
<span><img src="@/assets/img/alert-circle-i.svg" alt=""></span>
<p>Social</p>
<span><img src="@/assets/img/award.svg" alt=""></span>
<p>Financial</p>
</a>
</li>
<li data-tab="messages" class="pm-option">
<li data-tab="social" class="pm-option">
<a href="javascript://">
<span><img src="@/assets/img/single-02.svg" alt=""></span>
<p>Messages</p>
<p>Social</p>
</a>
</li>
<li>
<a href="http://localhost:8080/#/@bchplease/mecenas-oracle-audit-66477a47" target="_blank">
<a :href="liveUrl" target="_blank">
<span><img src="@/assets/img/eye-17.svg" alt=""></span>
<p>Live View</p>
<p>Open Live</p>
</a>
</li>
</ul>
<div class="tab-content">
<General />
<Finances />
<Financial />
<Story />
<Social />
<Messages />
<Rewards />
</div>
</div>
</div>
......@@ -88,9 +88,9 @@
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import Finances from './Manage/Finances.vue'
import Financial from './Manage/Financial.vue'
import General from './Manage/General.vue'
import Messages from './Manage/Messages.vue'
import Rewards from './Manage/Rewards.vue'
import Social from './Manage/Social.vue'
import Story from './Manage/Story.vue'
......@@ -99,14 +99,15 @@ export default {
Footer,
Header,
Finances,
Financial,
General,
Messages,
Rewards,
Social,
Story,
},
data: () => {
return {
liveUrl: null,
slug: null,
}
},
......@@ -118,9 +119,17 @@ export default {
},
created: function () {
/* Set owner slug. */
this.ownerSlug = this.$route.params.pathMatch
// console.log('OWNER SLUG', this.ownerSlug)
/* Set campaign slug. */
this.slug = this.$route.params.slug
console.log('SLUG', this.slug)
// console.log('SLUG', this.slug)
/* Set live URL. */
// FOR DEVELOPMENT ONLY
this.liveUrl = `http://localhost:8080/#/@${this.ownerSlug}/${this.slug}-null`
},
mounted: function () {
......@@ -130,5 +139,19 @@ export default {
</script>
<style scoped>
/* */
.img-button {
width: 28px;
height: 28px;
color: white;
}
/* @media screen and (min-width: 576px) { */
@media screen and (min-width: 767px) {
.img-button {
width: 48px;
height: 48px;
color: white;
}
}
</style>
<template>
<div role="tabpanel" class="tab-pane" id="funds">
<form action="javascript://">
<div id="itemform">
<div class="start-form">
<div class="reward-top">
<h2 class="reward-title">
Finances
</h2>
<a href="javascript://" class="reward-delete">
Delete Reward
</a>
</div>
<div class="field">
<label for="rewardtitle">
Title
</label>
<input type="text" id="rewardtitle" value="" required="">
</div>
<div class="field">
<label for="pledge">
Pledge amount
</label>
<input type="text" id="pledge" value="" required="">
</div>
<div class="field">
<label for="rewarddesc">
Description
</label>
<textarea id="rewarddesc" cols="30" rows="4" required=""></textarea>
</div>
<div class="field">
<label for="item">Item</label>
<table class="item-table">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>
<input type="number" id="item" min="1" value="1">
</td>
</tr>
</tbody>
</table>
<a href="javascript://" class="add-item btn-primary">Add an item</a>
<div class="spopup-bg"></div>
<div class="item-popup start-popup">
<div class="spopup-title">
<h3>Add a reward item</h3>
<div class="spopup-close">
<span class="ion-ios-close-empty"></span>
</div>
</div>
<div class="spopup-desc">Backers will see the items listed when pledging. Questions about how this works? <a href="javascript://">Visit our FAQ.</a></div>
<div class="spopup-content">
<div class="field">
<label for="rewardname">
Name (required)
</label>
<input type="text" id="rewardname" placeholder="Examples: Album download, Screenplay, etc.">
</div>
<div class="field field-checkbox">
<input type="checkbox" id="citem">
<label for="citem">
<span></span>
<strong>This is a digital item.</strong>
Think album downloads, e-books, videos, or anything that’s delivered online.
</label>
</div>
<a href="javascript://" class="btn-primary">Create Item</a>
<a href="javascript://" class="btn item-cancel">Cancel</a>
</div>
</div>
</div>
<div class="field">
<label for="estimated">
Estimated delivery
</label>
<input type="date" id="estimated" value="">
</div>
<div class="field">
<label for="shipping">
Shipping details
</label>
<div class="field-select">
<select name="s" id="shipping">
<option value="">Select an option</option>
<option value="no">No shipping involved</option>
<option value="restricted">Only ships to certain countries</option>
<option value="unrestricted">Ships anywhere in the world</option>
</select>
</div>
</div>
<div class="field">
<label for="limit-avai">Limit availability</label>
<div class="field-checkbox" id="limit">
<input type="checkbox" id="limit-avai">
<label for="limit-avai">
<span></span>
Enable reward limit
</label>
</div>
</div>
</div>
</div>
<div id="import"></div>
<a href="javascript://" class="add-reward">Add a new reward</a>
<div class="field">
<label for="ccat">Campaign Type *</label>
<span class="label-desc">To help backers find your campaign, select a category that best represents your project.</span>
<div class="field-select">
<select name="s" id="ccat">
<option value="">Select a Type</option>
<option value="">Adoption</option>
<option value="">Community</option>
<option value="">DApps</option>
</select>
</div>
</div>
<div class="field">
<label for="cduration">Campaign Duration *</label>
<span class="label-desc">You can run a campaign for any number of days, with a 60 day duration maximum.</span>
<input type="text" id="cduration" value="" name="title" placeholder="60 days" />
</div>
<input type="submit" class="btn-primary" value="Save & Continue">
</form>
</div>
</template>
<script>
/* Import JQuery. */
// FIXME: Remove ALL jQuery dependencies.
const $ = window.jQuery
export default {
components: {
//
},
mounted: function () {
$('.add-item').on('click', function (e) {
e.preventDefault()
$(this).parent().find('.spopup-bg').fadeIn()
$(this).parent().find('.item-popup').fadeIn()
})
$('.item-cancel').on('click', function (e) {
e.preventDefault()
$(this).parent().parent().fadeOut()
$(this).parent().parent().parent().find('.spopup-bg').fadeOut()
})
},
}
</script>
<style scoped>
/* */
</style>
<template>
<div role="tabpanel" class="tab-pane" id="funds">
<section class="campaign-form form-update">
<form action="javascript://">
<div id="itemform">
<div class="start-form">
<div class="reward-top">