mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-07-02 23:16:13 +00:00
encore_entry_link_tags allows to use <style scoped> in vue files
This commit is contained in:
parent
242c77a30c
commit
b018a50a7e
@ -49,148 +49,8 @@ div.subheader {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//// VUEJS ////
|
//// à ranger
|
||||||
div.vue-component {
|
|
||||||
padding: 1.5em;
|
|
||||||
margin: 2em 0;
|
|
||||||
border: 2px dashed grey;
|
|
||||||
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; }
|
|
||||||
}
|
|
||||||
|
|
||||||
//// MODAL ////
|
|
||||||
.modal-mask {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 9998;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.75);
|
|
||||||
display: table;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
.modal-header .close { // bootstrap classes, override sc-button 0 radius
|
|
||||||
border-top-right-radius: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* The following styles are auto-applied to elements with
|
|
||||||
* transition="modal" when their visibility is toggled
|
|
||||||
* by Vue.js.
|
|
||||||
*
|
|
||||||
* You can easily play with the modal transition by editing
|
|
||||||
* these styles.
|
|
||||||
*/
|
|
||||||
.modal-enter {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.modal-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.modal-enter .modal-container,
|
|
||||||
.modal-leave-active .modal-container {
|
|
||||||
-webkit-transform: scale(1.1);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
//// AddPersons modal
|
|
||||||
div.body-head {
|
|
||||||
overflow-y: unset;
|
|
||||||
div.modal-body:first-child {
|
|
||||||
margin: auto 4em;
|
|
||||||
div.search {
|
|
||||||
position: relative;
|
|
||||||
input {
|
|
||||||
padding: 1.2em 1.5em 1.2em 2.5em;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0.5;
|
|
||||||
padding: 0.65em 0;
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
i.fa-search {
|
|
||||||
left: 0.5em;
|
|
||||||
}
|
|
||||||
i.fa-times {
|
|
||||||
right: 1em;
|
|
||||||
padding: 0.75em 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div.modal-body:last-child {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div.count {
|
|
||||||
margin: -0.5em 0 0.7em;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div.results {
|
|
||||||
div.list-item {
|
|
||||||
padding: 0.4em 0.8em;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
&.checked {
|
|
||||||
background-color: #ececec;
|
|
||||||
border-bottom: 1px dotted #8b8b8b;
|
|
||||||
}
|
|
||||||
div.container {
|
|
||||||
& > input {
|
|
||||||
margin-right: 0.8em;
|
|
||||||
}
|
|
||||||
span:not(.name) {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
opacity: 0.5;
|
|
||||||
font-size: 90%;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div.right_actions {
|
|
||||||
margin: 0 0 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
& > * {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
align-self: baseline;
|
|
||||||
}
|
|
||||||
a.sc-button {
|
|
||||||
border: 1px solid lightgrey;
|
|
||||||
font-size: 70%;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.discret {
|
.discret {
|
||||||
color: grey;
|
color: grey;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.flag-toggle {
|
|
||||||
color: white;
|
|
||||||
padding: 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
color: white;
|
|
||||||
//border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
text-decoration: underline;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,41 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<div class="modal-mask">
|
<div class="modal-mask">
|
||||||
<!-- :: styles bootstrap :: -->
|
<!-- :: styles bootstrap :: -->
|
||||||
<div class="modal-dialog" :class="modalDialogClass">
|
<div class="modal-dialog" :class="modalDialogClass">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
<button class="close sc-button grey" @click="$emit('close')">
|
<button class="close sc-button grey" @click="$emit('close')">
|
||||||
<i class="fa fa-times" aria-hidden="true"></i></button>
|
<i class="fa fa-times" aria-hidden="true"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="body-head">
|
<div class="body-head">
|
||||||
<slot name="body-head"></slot>
|
<slot name="body-head"></slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<slot name="body"></slot>
|
<slot name="body"></slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="sc-button cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
|
<button class="sc-button cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- :: end styles bootstrap :: -->
|
||||||
</div>
|
</div>
|
||||||
<!-- :: end styles bootstrap :: -->
|
</transition>
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/*
|
/*
|
||||||
* This Modal component is a mix between :
|
* This Modal component is a mix between Vue3 modal implementation
|
||||||
* - Vue3 modal implementation
|
* [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
|
||||||
* => with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
|
* [+] with slot we can pass content from parent component
|
||||||
* => with slot we can pass content from parent component
|
* [+] some classes are passed from parent component
|
||||||
* => some classes are passed from parent component
|
* and Bootstrap 4.6 _modal.scss module
|
||||||
* - Bootstrap 4.6 _modal.scss module
|
* [+] using bootstrap css classes, the modal have a responsive behaviour,
|
||||||
* => using bootstrap css classes, the modal have a responsive behaviour,
|
* [+] modal design can be configured using css classes (size, scroll)
|
||||||
* => modal design can be configured using css classes (size, scroll)
|
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'Modal',
|
name: 'Modal',
|
||||||
@ -43,3 +42,39 @@ export default {
|
|||||||
emits: ['close']
|
emits: ['close']
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.modal-mask {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9998;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
|
display: table;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
.modal-header .close { // bootstrap classes, override sc-button 0 radius
|
||||||
|
border-top-right-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
* The following styles are auto-applied to elements with
|
||||||
|
* transition="modal" when their visibility is toggled
|
||||||
|
* by Vue.js.
|
||||||
|
*
|
||||||
|
* You can easily play with the modal transition by editing
|
||||||
|
* these styles.
|
||||||
|
*/
|
||||||
|
.modal-enter {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.modal-leave-active {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.modal-enter .modal-container,
|
||||||
|
.modal-leave-active .modal-container {
|
||||||
|
-webkit-transform: scale(1.1);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -12,7 +12,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
import AccompanyingCourse from './components/AccompanyingCourse.vue';
|
import AccompanyingCourse from './components/AccompanyingCourse.vue';
|
||||||
import PersonsAssociated from './components/PersonsAssociated.vue';
|
import PersonsAssociated from './components/PersonsAssociated.vue';
|
||||||
import Requestor from './components/Requestor.vue';
|
import Requestor from './components/Requestor.vue';
|
||||||
@ -41,3 +40,24 @@ export default {
|
|||||||
])
|
])
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
div.vue-component {
|
||||||
|
padding: 1.5em;
|
||||||
|
margin: 2em 0;
|
||||||
|
border: 2px dashed grey;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -66,3 +66,17 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
a.flag-toggle {
|
||||||
|
color: white;
|
||||||
|
padding: 0 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: white;
|
||||||
|
//border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
text-decoration: underline;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -207,3 +207,44 @@ export default {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
div.body-head {
|
||||||
|
overflow-y: unset;
|
||||||
|
div.modal-body:first-child {
|
||||||
|
margin: auto 4em;
|
||||||
|
div.search {
|
||||||
|
position: relative;
|
||||||
|
input {
|
||||||
|
padding: 1.2em 1.5em 1.2em 2.5em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.5;
|
||||||
|
padding: 0.65em 0;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
i.fa-search {
|
||||||
|
left: 0.5em;
|
||||||
|
}
|
||||||
|
i.fa-times {
|
||||||
|
right: 1em;
|
||||||
|
padding: 0.75em 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.modal-body:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
div.count {
|
||||||
|
margin: -0.5em 0 0.7em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
v-model="selected"
|
v-model="selected"
|
||||||
name="item"
|
name="item"
|
||||||
v-bind:id="item"
|
v-bind:id="item"
|
||||||
v-bind:value="setValueIfType(item, type)" />
|
v-bind:value="setValueByType(item, type)" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<suggestion-person
|
<suggestion-person
|
||||||
@ -54,9 +54,48 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setValueIfType(value, type) {
|
setValueByType(value, type) {
|
||||||
return (type === 'radio')? [value] : value;
|
return (type === 'radio')? [value] : value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
div.results {
|
||||||
|
div.list-item {
|
||||||
|
padding: 0.4em 0.8em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
&.checked {
|
||||||
|
background-color: #ececec;
|
||||||
|
border-bottom: 1px dotted #8b8b8b;
|
||||||
|
}
|
||||||
|
div.container {
|
||||||
|
& > input {
|
||||||
|
margin-right: 0.8em;
|
||||||
|
}
|
||||||
|
span:not(.name) {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 90%;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.right_actions {
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
& > * {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
align-self: baseline;
|
||||||
|
}
|
||||||
|
a.sc-button {
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
font-size: 70%;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -6,7 +6,11 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>{{ block('title') }}</h1>
|
<h1>{{ block('title') }}</h1>
|
||||||
<div id="accompanying-course"></div>
|
<div id="accompanying-course"></div> {# <== insert accompanyingCourse vue component #}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block css %}
|
||||||
|
{{ encore_entry_link_tags('accompanying_course') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block js %}
|
{% block js %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user