diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index df8db274df67aef7a68df5b5ffe993dbfb79aa85..3d1ecf04fc73f10b2417eca200f6f56dfe1bae6b 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -162,6 +162,12 @@ body { color: #9f3a38; } +#form-layers .infoslist{ + list-style: none; + padding-left: 0; + color: #38989f; +} + /* Fix semantic ui overflow when is too long */ .layer-item .form div.text { width: 100% @@ -224,13 +230,26 @@ body { padding: 0; } +.infoslist { + margin-top: 0.1rem; + padding: 0; +} + .errorlist > li { list-style: none; color: rgb(177, 55, 55); border: thin solid rgb(197, 157, 157); border-radius: 3px; background-color: rgb(250, 241, 242); - padding: 1rem; + padding: 0.5rem 1rem; +} + +.infoslist > li { + list-style: none; + color: #38989f; + border-radius: 3px; + padding: 0; + text-align: right; } /* ---------------------------------- */ diff --git a/src/views/Feature/FeatureEdit.vue b/src/views/Feature/FeatureEdit.vue index 45fa9b8afbb7029e394bf208a53098ef9019b498..567fd72ba19ce0b15e7335b5f033acb9142d9fbc 100644 --- a/src/views/Feature/FeatureEdit.vue +++ b/src/views/Feature/FeatureEdit.vue @@ -32,6 +32,17 @@ :name="form.title.html_name" @blur="updateStore" > + <ul + id="infoslist-title" + class="infoslist" + > + <li + v-for="info in form.title.infos" + :key="info" + > + {{ info }} + </li> + </ul> <ul id="errorlist-title" class="errorlist" @@ -379,6 +390,7 @@ export default { form: { title: { errors: [], + infos: [], id_for_label: 'name', field: { max_length: 128, @@ -491,6 +503,16 @@ export default { }, }, + watch: { + 'form.title.value': function(newValue) { + if (newValue.length === 128) { + this.form.title.infos.push('Le nombre de caractères et limité à 128.'); + } else { + this.form.title.infos = []; + } + } + }, + created() { this.$store.commit( 'feature-type/SET_CURRENT_FEATURE_TYPE_SLUG',