Commit e5ca73fd authored by Bitcoin Please's avatar Bitcoin Please

UI/UX fixes and updates.

parent 24bef1b6
......@@ -3764,12 +3764,6 @@ border: 0;
font-weight: 400;
margin-bottom: 8px;
}
#story .pane-box{
display: none;
}
#story .pane-box.active{
display: block;
}
.pane-tab{
margin-bottom: 40px;
}
......
......@@ -12,11 +12,6 @@
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>css/style.css" />
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>css/responsive.css" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon"/>
<style>
.markdown-ul, .markdown-ol {
margin: 20px 40px;
}
</style>
<!-- Open graph -->
<meta property="og:url" content="https://causes.cash" />
......
......@@ -483,28 +483,39 @@ button {
display: inline-block;
}
/* Markdown handling */
.markdown a, .campaigns a {
display: inline-block;
}
#story table th, #story table td, #guide table th, #guide table td {
.markdown-ul, .markdown-ol {
margin: 20px 40px;
}
.markdown table th, .markdown table td {
border: 1pt solid #c8c8c8;
padding: 5px;
}
#story h1, #story h2, #guide h1, #guide h2 {
.markdown h1, .markdown h2 {
margin-top: 30px;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1pt solid #c8c8c8;
}
#story h1, #guide h1 {
.markdown h1 {
font-size: 2.5em;
}
#story h2, #guide h2 {
.markdown h2 {
font-size: 1.5em;
}
#story h3, #guide h3 {
.markdown h3 {
margin-bottom: 10px;
}
.markdown p {
margin: 15px 0;
}
.markdown .pane-box{
display: none;
}
.markdown .pane-box.active{
display: block;
}
</style>
......@@ -235,10 +235,14 @@ export default {
/*------------------------------------------------------------------
2. Header / #header
-------------------------------------------------------------------*/
.top-header{
/* padding: 12px 0; */
.top-header {
/* padding: 5px 0; */
padding: 0;
background-color: #f9fbfb;
}
.content-header {
padding: 10px 0;
}
.top-header .slogan {
float: right;
color: #6a6a6a;
......
<template>
<main class="campaign-detail">
<Header :campaign="campaign" />
<Title :campaign="campaign" />
<Content :campaign="campaign" />
<History :campaign="campaign" />
<Title :campaign="campaign" :isLoading="isLoading" />
<Content :campaign="campaign" :isLoading="isLoading" />
<History :campaign="campaign" :isLoading="isLoading" />
<Footer />
</main>
</template>
......@@ -56,6 +56,8 @@ export default {
slug: null,
extSlug: null,
isLoading: null,
campaign: null,
campaignId: null,
// fundId: null,
......@@ -142,6 +144,9 @@ export default {
},
created: async function () {
/* Set is loading flag. */
this.isLoading = true
console.log('PARAMS', this.$route.params)
console.log('QUERY', this.$route.query)
console.log('HASH', this.$route.hash)
......@@ -186,15 +191,20 @@ export default {
this.campaign = await this.getCampaign(this.ownerSlug, this.slug)
console.log('CAMPAIGN', this.campaign)
/* Set referrer id (to campaign). */
this.campaign.referrerId = this.referrerId
/* Validate publish flag. */
if (this.campaign && this.campaign.isPublished) {
/* Set referrer id (to campaign). */
this.campaign.referrerId = this.referrerId
/* Update assets. */
this.updateAssets()
}
/* Update assets. */
this.updateAssets()
}
},
mounted: function () {
//
/* Set loading flag. */
this.isLoading = false
},
}
</script>
......
<template>
<div class="container campaign-content">
<div class="campaign-item clearfix">
<div v-if="campaign && !campaign.isPublished" class="campaign-not-found clearfix">
<h1>CAMPAIGN NOT FOUND</h1>
<p class="p-3 mt-3">
<!-- We are sorry, but the campaign link you entered cannot be found. -->
Sorry we can't find that campaign.
Please check the link URL and try again.
</p>
<div class="col-12 col-md-7 form-group p-3">
<input
type="text"
class="form-control"
placeholder="Search by name, title, or town/city"
>
</div>
</div>
<div v-if="campaign && campaign.isPublished" class="campaign-item clearfix">
<div v-if="images" class="campaign-image">
<div id="campaign-gallery" class="campaign-slider">
......@@ -171,7 +190,7 @@
</div>
</div>
<div class="campaign-item clearfix">
<div v-if="campaign && campaign.isPublished" class="campaign-item clearfix">
<Reminder v-if="showReminder" :campaign="campaign" @cancel="showReminder = false; showActions = true" />
<Direct v-if="showDirect" :campaign="campaign" @cancel="showDirect = false; showActions = true" />
<Assurance v-if="showAssurance" :campaign="campaign" @cancel="showAssurance = false; showActions = true" />
......@@ -223,6 +242,7 @@ function makePages() {
export default {
props: {
campaign: Object,
isLoading: Boolean,
},
components: {
Assurance,
......@@ -247,7 +267,7 @@ export default {
},
watch: {
campaign: function (_campaign) {
if (_campaign && _campaign.media) {
if (_campaign && _campaign.media && _campaign.isPublished) {
/* Wait a tick. */
setTimeout(() => {
$("#campaign-gallery").owlCarousel({
......
......@@ -407,6 +407,32 @@ export default {
async broadcast() {
console.log('STARTED BROADCASTING...')
// // Create a buffered version statement.
// const version = Buffer.from("02000000", "hex");
//
// // Create the input counter and input data buffers.
// const inputCount = bitcoinCashUtilities.varInt(this.inputs.length);
// const inputs = this.serializeCommitments();
//
// // Create the output counter and output data buffer.
// const outputCount = bitcoinCashUtilities.varInt(
// Object.keys(this.outputs).length
// );
// const outputs = this.serializeOutputs();
//
// // Create a buffered disable locktime statement.
// const locktime = Buffer.from("00000000", "hex");
//
// // Return the assembled transaction.
// return Buffer.concat([
// version,
// inputCount,
// inputs,
// outputCount,
// outputs,
// locktime,
// ]);
try {
// Assemble pledges into transaction
const rawTransaction = this.getFullfillment(this.campaign)
......
<template>
<div class="campaign-history">
<div class="container">
<div v-if="campaign && campaign.isPublished" class="container">
<div class="row">
<div class="col-lg-8">
<div class="campaign-tabs">
<ul class="tabs-controls">
<li class="active" data-tab="story">
<a href="javascript://">Story</a>
<li :class="{ active: activeTab === 'story' }" data-tab="story">
<a href="javascript://" @click="activeTab = 'story'">Story</a>
</li>
<li data-tab="supporters">
<a href="javascript://">Supporters</a>
<li :class="{ active: activeTab === 'supporters' }" data-tab="supporters">
<a href="javascript://" @click="activeTab = 'supporters'">Supporters</a>
</li>
<li data-tab="funds">
<a href="javascript://">Funds</a>
<li :class="{ active: activeTab === 'funds' }" data-tab="funds">
<a href="javascript://" @click="activeTab = 'funds'">Funds</a>
</li>
<li data-tab="news">
<a href="javascript://">News</a>
<li :class="{ active: activeTab === 'news' }" data-tab="news">
<a href="javascript://" @click="activeTab = 'news'">News</a>
</li>
<li data-tab="guide">
<a href="javascript://">Guide</a>
<li :class="{ active: activeTab === 'guide' }" data-tab="guide">
<a href="javascript://" @click="activeTab = 'guide'">Guide</a>
</li>
<li data-tab="premium">
<a href="javascript://">
<li :class="{ active: activeTab === 'premium' }" data-tab="premium">
<a href="javascript://" @click="activeTab = 'premium'">
<span class="text-danger">Premium</span>
</a>
</li>
</ul>
<a name="history"></a>
<div class="campaign-content">
<Story :campaign="campaign" />
<Supporters :campaign="campaign" />
<Funds :campaign="campaign" />
<News :campaign="campaign" />
<Guide :campaign="campaign" />
<Premium :campaign="campaign" />
<!-- <div class="campaign-content"> -->
<div class="">
<Story v-if="activeTab === 'story'" :campaign="campaign" />
<Supporters v-if="activeTab === 'supporters'" :campaign="campaign" />
<Funds v-if="activeTab === 'funds'" :campaign="campaign" />
<News v-if="activeTab === 'news'" :campaign="campaign" />
<Guide v-if="activeTab === 'guide'" :campaign="campaign" />
<Premium v-if="activeTab === 'premium'" :campaign="campaign" />
</div>
</div>
</div>
......@@ -63,11 +64,12 @@ import Supporters from './History/Supporters'
/* Import jQuery. */
// FIXME: Remove ALL jQuery dependencies.
const $ = window.jQuery
// const $ = window.jQuery
export default {
props: {
campaign: Object,
isLoading: Boolean,
},
components: {
Events,
......@@ -80,53 +82,18 @@ export default {
},
data: () => {
return {
//
activeTab: null,
}
},
methods: {
//
//
},
created: function () {
/* Set active tab. */
this.activeTab = 'story'
},
mounted: function () {
// change is-checked class on buttons
$('.campaign-tabs').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
/* [ Tab Controls ]
- - - - - - - - - - - - - - - - - - - - */
$('.menu-category li.mc-option').on('click', function(e) {
e.preventDefault();
var tab_id = $(this).attr('data-tab');
$('.menu-category li.mc-option').removeClass('active');
$('.popular-project .pp-item').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
$('.tabs-controls li').on('click', function(e) {
e.preventDefault();
var tab_id = $(this).attr('data-tab');
$('.tabs-controls li').removeClass('active');
$('.campaign-content .tabs').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
/* [ Menu Category ]
- - - - - - - - - - - - - - - - - - - - */
$('.menu-category li.mc-option').on('click', function() {
// var tab_id = $(this).attr('data-hash');
$(this).attr('data-hash');
$('.menu-category li.mc-option').removeClass('active');
$(this).addClass('active');
});
$('.menu-category li.cat-more a').on('click', function() {
var url = $(this).attr('href');
window.location.href = url;
});
//
},
}
</script>
......
<template>
<div class="col-lg-4">
<main class="col-lg-4">
<div class="support support-campaign">
<h3 class="support-campaign-title">
<span class="text-danger">LIVE</span> Events Timeline
......@@ -66,7 +66,7 @@
</button>
</div>
</div>
</div>
</main>
</template>
<script>
......
<template>
<div id="funds" class="tabs">
<main>
<div v-if="budget">
<h1>Use of Funds</h1>
......@@ -63,8 +63,7 @@
There is no budget available
</p>
</div>
</div>
</main>
</template>
<script>
......
<template>
<div id="guide" class="tabs markdown">
<main class="markdown">
<div v-if="guideDisplay" class="mt-3" v-html="guideDisplay" />
<div v-else>
......@@ -9,7 +9,7 @@
There is no guide available
</p>
</div>
</div>
</main>
</template>
<script>
......
<template>
<div id="news" class="tabs">
<main>
<!-- <h3 class="comments-title">New &amp; Noteworthy</h3> -->
<ol v-if="articleList" class="comments-list">
......@@ -47,7 +47,7 @@
There is no news available
</p>
</div>
</div>
</main>
</template>
<script>
......
<template>
<div id="premium" class="tabs">
<!-- <h3 class="comments-title">New &amp; Noteworthy</h3> -->
<main>
<ol v-if="itemList" class="comments-list">
<li v-for="item of itemList" :key="item.id" class="comment clearfix">
<div class="comment-body">
......@@ -39,7 +37,7 @@
There is no premium content available
</p>
</div>
</div>
</main>
</template>
<script>
......
<template>
<div id="story" class="tabs active markdown">
<main id="story" class="markdown">
<div v-if="story" v-html="story" />
<div v-else>
......@@ -9,7 +9,7 @@
There is no story available
</p>
</div>
</div>
</main>
</template>
<script>
......
<template>
<div id="supporters" class="tabs">
<main>
<h1>Featured Supporters</h1>
<table class="mt-3" v-if="funders">
......@@ -38,8 +38,7 @@
</tr>
</tbody>
</table>
</div>
</main>
</template>
<script>
......@@ -215,10 +214,10 @@ export default {
</script>
<style scoped>
#supporters table {
main table {
width: 100%;
}
#supporters table tr th, #supporters table tr td {
main table tr th, main table tr td {
border: 1px solid #ededed;
padding: 15px;
}
......
......@@ -33,6 +33,7 @@
export default {
props: {
campaign: Object,
isLoading: Boolean,
},
components: {
//
......@@ -48,11 +49,14 @@ export default {
if (_campaign && _campaign.title) {
// console.log('CAMPAIGN HAS CHANGED, UPDATE TITLE!!', _campaign)
/* Update banner. */
this.updateBanner()
/* Validate publish flag. */
if (_campaign.isPublished) {
/* Update banner. */
this.updateBanner()
/* Update title. */
this.updateTitle()
/* Update title. */
this.updateTitle()
}
}
},
},
......@@ -69,7 +73,12 @@ export default {
* Update Banner
*/
updateBanner() {
if (this.campaign && this.campaign.media && this.campaign.media.banner) {
if (
this.campaign
&& this.campaign.isPublished
&& this.campaign.media
&& this.campaign.media.banner
) {
/* Set banner URL. */
this.bannerUrl = this.campaign.media.banner
} else {
......@@ -92,11 +101,17 @@ export default {
}
},
created: function () {
/* Update banner. */
this.updateBanner()
/* Validate publish flag. */
if (this.campaign && this.campaign.isPublished) {
/* Update banner. */
this.updateBanner()
/* Update title. */
this.updateTitle()
/* Update title. */
this.updateTitle()
} else {
/* Set default banner. */
this.bannerUrl = 'https://i.imgur.com/9vNfGgt.jpg' // working @ desk
}
},
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment