103 lines
2.7 KiB
Vue

<template>
<banner></banner>
<h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
<h1 v-else>{{ $t('course.title.active') }}</h1>
<persons-associated></persons-associated>
<requestor></requestor>
<social-issue></social-issue>
<referrer></referrer>
<resources></resources>
<comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
<confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
</template>
<script>
import { mapState } from 'vuex'
import Banner from './components/Banner.vue';
import PersonsAssociated from './components/PersonsAssociated.vue';
import Requestor from './components/Requestor.vue';
import SocialIssue from './components/SocialIssue.vue';
import Referrer from './components/Referrer.vue';
import Resources from './components/Resources.vue';
import Comment from './components/Comment.vue';
import Confirm from './components/Confirm.vue';
export default {
name: 'App',
components: {
Banner,
PersonsAssociated,
Requestor,
SocialIssue,
//Referrer, //fait foirer socialissues
Resources,
Comment,
Confirm,
},
computed: mapState([
'accompanyingCourse', 'socialIssueOptions'
])
};
</script>
<style lang="scss">
div#accompanying-course {
h1 {
margin: 1.5em 0;
}
div.vue-component {
h2 {
margin-left: 0.7em;
position: relative;
&:before {
position: absolute;
/*
content: "\f192"; //circle-dot
content: "\f1dd"; //paragraph
content: "\f292"; //hashtag
content: "\f069"; //asterisk
*/
content: "\f142"; //ellipsis-v
font-family: "ForkAwesome";
color: #718596ab;
left: -22px;
top: 4px;
}
a[name^="section"] {
position: absolute;
top: -2em;
}
}
padding: 0.8em 0em;
margin: 2em 0;
border: 1px dotted #718596ab;
border-radius: 5px;
border-left: 1px dotted #718596ab;
border-right: 1px dotted #718596ab;
/*
position: relative;
&:before {
content: "vuejs component";
position: absolute;
left: 1.5em;
top: -0.9em;
background-color: white;
color: grey;
padding: 0 0.3em;
}
*/
dd {
margin-left: 1em;
}
& > div {
margin: 1em 3em 0;
}
table {
}
}
}
</style>