Verified Commit add58d3a authored by Agate's avatar Agate

Basic flow for creators

parent 8b83efc3
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss">
@import '/assets/semantic/semantic.min.css';
#choice {
margin-top: 5rem;
}
</style>
import VueRouter from 'vue-router';
import Vue from "vue";
import App from "./App";
import AppIndex from './src/AppIndex';
import CreatorApp from './src/creators/App';
import CreatorIndex from './src/creators/Index';
import CreatorDefine from './src/creators/Define';
Vue.use(VueRouter);
var router = new VueRouter({
mode: 'hash',
base: window.location.href,
routes: [
{path: '/', component: AppIndex},
{path: '/creator', component: CreatorApp, children: [
{path: '', component: CreatorIndex},
{path: 'define', component: CreatorDefine},
]}
]
});
new Vue({
el: "#app",
router,
render: h => h(App)
});
{
"dependencies": {
"poi": "^10.1.6",
"vue-router": "^3.0.1"
},
"devDependencies": {
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1"
}
}
<template>
<div>
<div id="choice" class="ui very padded text container center aligned segment">
<h1 class="ui header">Choose your experience</h1>
<router-link class="ui purple button">I am a contributor</router-link>
<router-link to="/creator" class="ui green button">I am a creator</router-link>
</div>
<div class="ui text container">
<p>Tell me what you need, I'll find someone that can help you. Tell me what you can give, I'll find someone who needs it.</p>
</div>
</div>
</template>
<script>
export default {}
</script>
<template>
<div>
<div class="ui large inverted menu">
<div class="ui container">
<router-link to="/" class="header item">
Retribute <span class="ui green label">for creators</span>
</router-link>
<router-link to="/creator" class="item">Home</router-link>
<router-link to="/creator" class="item">My needs</router-link>
<router-link to="/creator" class="item">Profile</router-link>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="ui main text container">
<router-view />
</div>
<div class="ui hidden divider"></div>
</div>
</template>
<script>
export default {}
</script>
<template>
<div>
<h2 class="ui main header">Define your needs</h2>
<need-form />
</div>
</template>
<script>
import NeedForm from './NeedForm';
export default {
components: {
NeedForm,
}
}
</script>
<template>
<div class="ui fluid card">
<div class="content">
<div class="header">{{ creator }} needs {{ needed }} feedback</div>
<div class="meta">
<span v-if="remaining" class="right floated time">{{ remaining }} days remaining</span>
<span v-if="recurrent">Recurring every {{ recurrent }} days</span>
</div>
<div class="description">
<slot></slot>
<div class="ui hidden divider" />
<div v-for="channel in channels" class="ui label">{{ channel }}</div>
</div>
</div>
<div class="extra content">
<div class="author">
<span><i class="envelope icon" /> {{ current }} on {{ needed}} feedback gathered</span><br />
<i class="ui user icon" /> {{ creator }}
</div>
</div>
<div class="ui bottom attached green progress">
<div class="bar" :style="{'width': this.progress + '%'}"></div>
</div>
</div>
</template>
<script>
export default {
props: {
creator: {type: String, required: true},
channels: {type: Array, required: true},
needed: {type: Number, required: true},
recurrent: {type: Number, required: false},
current: {type: Number, required: true, default: 0},
remaining: {type: Number, required: true, default: 0},
},
computed: {
progress () {
return parseInt(this.current * 100 / this.needed) || 0
}
}
}
</script>
<template>
<div>
<h2 class="ui main header">Hello Emily!</h2>
<p>
Welcome to Retribute. It looks like you're new here, here is how it works:
</p>
<ol>
<li>As a creator, on Retribute, you define needs: earning 50€ a week, answer a tricky question, get some feedback about your work, get in touch with someone...</li>
<li>Retribute makes those needs available on the network</li>
<li>You get help from contributors based on what you need</li>
</ol>
<router-link to="/creator/define" class="ui green button">Get started</router-link>
<div class="ui divider" />
<h2 class="ui header">Latest needs</h2>
<div>
<money-need
:creator="'Eliot Berriot'"
:needed="75"
:current="23"
:recurrent="7"
:channels="['Liberapay', 'Patreon']"
:remaining="3">
I need this money to make Funkwhale's development more sustainable
</money-need>
<feedback-need
:creator="'Nausicaa'"
:needed="10"
:current="3"
:channels="['Mastodon', 'email']"
:remaining="27">
Please, let me know, am I spreading enough love?
</feedback-need>
<money-need
:creator="'Datagueule'"
:needed="1400"
:current="640"
:remaining="30"
:channels="['Liberapay', 'Ulule', 'Tipeee']">
This money will fund our new documentary about democracy.
</money-need>
</div>
</div>
</template>
<script>
import FeedbackNeed from './FeedbackNeed';
import MoneyNeed from './MoneyNeed';
export default {
components: {
MoneyNeed,
FeedbackNeed,
}
}
</script>
<template>
<div class="ui fluid card">
<div class="content">
<div class="header">{{ creator }} needs {{ needed }}</div>
<div class="meta">
<span v-if="remaining" class="right floated time">{{ remaining }} days remaining</span>
<span v-if="recurrent">Recurring every {{ recurrent }} days</span>
</div>
<div class="description">
<slot></slot>
<div class="ui hidden divider" />
<div v-for="channel in channels" class="ui label">{{ channel }}</div>
</div>
</div>
<div class="extra content">
<div class="author">
<i class="money icon" /> {{ progress }}% funded<br />
<i class="ui user icon" /> {{ creator }}
</div>
</div>
<div class="ui bottom attached green progress">
<div class="bar" :style="{'width': this.progress + '%'}"></div>
</div>
</div>
</template>
<script>
export default {
props: {
creator: {type: String, required: true},
channels: {type: Array, required: true},
needed: {type: Number, required: true},
recurrent: {type: Number, required: false},
current: {type: Number, required: true, default: 0},
remaining: {type: Number, required: true, default: 0},
},
computed: {
progress () {
return parseInt(this.current * 100 / this.needed) || 0
}
}
}
</script>
<template>
<div class="ui fluid form">
<div class="three fields">
<div class="ui field">
<label>Type</label>
<select class="ui dropdown" v-model="type">
<option :value="'money'">Money</option>
<option :value="'feedback'">Feedback</option>
</select>
</div>
<div class="ui field">
<label>Periodicity</label>
<select class="ui dropdown" v-model="recurrent">
<option :value="false">None</option>
<option :value="7">Weekly</option>
<option :value="30">Monthly</option>
</select>
</div>
<div class="ui field">
<label>Target</label>
<input type="text" v-model="needed" placeholder="How much do you need?" />
</div>
</div>
<div class="ui field">
<label>Description</label>
<textarea v-model="description" placeholder="Explain why you need this in your own words." />
</div>
<div class="ui hidden divider" />
<h3 class="ui header">Preview</h3>
<money-need
v-if="type === 'money'"
:creator="creator"
:needed="needed"
:recurrent="recurrent"
:current="0">{{ description }}</money-need>
<feedback-need
v-if="type === 'feedback'"
:creator="creator"
:needed="needed"
:recurrent="recurrent"
:current="0">{{ description }}</feedback-need>
</div>
</template>
<script>
import FeedbackNeed from './FeedbackNeed';
import MoneyNeed from './MoneyNeed';
export default {
components: {
MoneyNeed,
FeedbackNeed,
},
data () {
return {
type: 'money',
creator: 'Emily',
needed: 0,
description: '',
remaining: 30,
recurrent: false,
}
},
computed: {
progress () {
return parseInt(this.current * 100 / this.needed)
}
}
}
</script>
This diff is collapsed.
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