Skip to content
Snippets Groups Projects
Verified Commit add58d3a authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Basic flow for creators

parent 8b83efc3
No related branches found
No related tags found
No related merge requests found
App.vue 0 → 100644
<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>
index.js 0 → 100644
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>
yarn.lock 0 → 100644
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment