improve AccompanyingCourse ux design

This commit is contained in:
Mathieu Jaumotte 2021-05-20 18:42:40 +02:00
parent 8bd75429c1
commit 098a2ea620
4 changed files with 73 additions and 58 deletions

View File

@ -13,9 +13,9 @@
div#header-accompanying_course-name {
background: none repeat scroll 0 0 #718596;
color: #FFF;
padding-top: 1em;
padding-bottom: 1em;
h1 {
margin: 0.4em 0;
}
span {
a {
color: white;
@ -54,3 +54,10 @@ div.subheader {
color: grey;
margin-right: 1em;
}
table {
ul.record_actions {
margin: 0;
padding: 0.5em;
}
}

View File

@ -44,51 +44,53 @@ export default {
</script>
<style lang="scss">
h1 {
margin: 1.5em 0;
}
div.vue-component {
h2 {
margin-left: 0.7em;
position: relative;
&:before {
position: absolute;
content: "\f192";
font-family: "ForkAwesome";
color: #718596ab;
left: -28px;
top: 4px;
div#accompanying-course {
h1 {
margin: 1.5em 0;
}
div.vue-component {
h2 {
margin-left: 0.7em;
position: relative;
&:before {
position: absolute;
content: "\f192";
font-family: "ForkAwesome";
color: #718596ab;
left: -28px;
top: 4px;
}
a[name^="section"] {
position: absolute;
top: -2em;
}
}
a[name^="section"] {
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;
top: -2em;
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 {
}
}
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>

View File

@ -20,9 +20,11 @@
<teleport to="#header-accompanying_course-name #banner-status">
<div v-if="accompanyingCourse.step === 'DRAFT'">
<span class="badge badge-secondary">
{{ $t('course.step.draft') }}
</span>
<a href="#bottom">
<span class="badge badge-secondary">
{{ $t('course.step.draft') }}
</span>
</a>
</div>
<div v-else>
<div>

View File

@ -8,17 +8,19 @@
</div-->
<div>
<div v-if="initialComment">
créé par {{ initialComment.creator.text }}
le {{ $d(initialComment.createdAt.datetime, 'long') }}
<div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
modifié par {{ initialComment.updatedBy.text }}
le {{ $d(initialComment.updatedAt.datetime, 'long') }}
</div>
</div>
<form @submit.prevent="submitform">
<label for="content">{{ $t('comment.label') }}</label>
<div v-if="initialComment">
créé par {{ initialComment.creator.text }}
le {{ $d(initialComment.createdAt.datetime, 'long') }}
<div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
modifié par {{ initialComment.updatedBy.text }}
le {{ $d(initialComment.updatedAt.datetime, 'long') }}
</div>
</div>
<textarea
name="content"
v-bind:placeholder="$t('comment.content')"
@ -27,6 +29,7 @@
ckeditor="ckeditor"
v-model="content">
</textarea>
<ul class="record_actions">
<li>
<button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
@ -38,6 +41,7 @@
</a>
</li>
</ul>
</form>
</div>