Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve AccompanyingCourse ux design

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

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

88
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
View File

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

8
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
View File

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

22
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
View File

@ -8,17 +8,19 @@
</div--> </div-->
<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"> <form @submit.prevent="submitform">
<label for="content">{{ $t('comment.label') }}</label> <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 <textarea
name="content" name="content"
v-bind:placeholder="$t('comment.content')" v-bind:placeholder="$t('comment.content')"
@ -27,6 +29,7 @@
ckeditor="ckeditor" ckeditor="ckeditor"
v-model="content"> v-model="content">
</textarea> </textarea>
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button> <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
@ -38,6 +41,7 @@
</a> </a>
</li> </li>
</ul> </ul>
</form> </form>
</div> </div>