Skip to content
Snippets Groups Projects
Commit 4c88c118 authored by Antoine Dupré's avatar Antoine Dupré
Browse files

fix: #3 fields design + department select

parent ff4ef909
No related branches found
No related tags found
2 merge requests!2Dev,!1Issue 3
Pipeline #14225 passed with stage
in 1 minute and 4 seconds
Hide whitespace changes
Inline Side-by-side
src/custom-tzcld.js
+ 31
− 37
View file @ 4c88c118
......@@ -162,24 +162,7 @@ import("./utils.js").then((utils) => {
this.element.innerHTML = render;
},
});
core.Sib.register({
name: "customtzcld-form-profile-jobs-widgetsssss",
use: [core.StoreMixin],
empty() {
//console.debug();
console.log('is empty ----------------------------------------------------------------------------------------') ;
console.log(this.resource) ;
this.element.innerHTML = "ddddddddddddddddddddddddddddddddddddddddddddddddd";
},
async populate() {
console.log('is empty ----------------------------------------------------------------------------------------') ;
console.log(this.resource) ;
this.element.innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
}
});
customElements.define(
"customtzcld-form-profile-jobs-widget-hook",
class extends core.SolidTemplateElement {
......@@ -190,13 +173,11 @@ import("./utils.js").then((utils) => {
static get propsDefinition() {
return {
dataSrc: 'value',
dataSrc: 'data-src',
};
}
template({dataSrc
}) {
console.log('is empty ----------------------------------------------------------------------------------------') ;
return `
<solid-widget name="customtzcld-form-profile-phone-widget">
<template>
......@@ -208,11 +189,14 @@ import("./utils.js").then((utils) => {
naked
fields="segment1(phone, phone_type, phone_public)"
class-segment1="segment full sm-full rowClear"
class-phone="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-phone_type="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-phone_public="segment margin-bottom-medium width-10 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading tzcld-checkbox"
class-phone="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-phone_type="segment margin-bottom-medium width-45 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-phone_public="segment margin-bottom-medium width-10 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
widget-phone_public="solid-form-checkbox-label"
label-address_public="Public"
label-phone="Téléphone *"
required-phone
label-phone_type="Type de ligne"
label-phone_public="Public"
></solid-form>
</template>
</solid-widget>
......@@ -226,10 +210,13 @@ import("./utils.js").then((utils) => {
naked
fields="segment1(email, email_type, email_public)"
class-segment1="segment full sm-full rowClear"
class-email="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-email_type="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-email_public="segment margin-bottom-medium width-10 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading tzcld-checkbox"
class-email="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-email_type="segment margin-bottom-medium width-45 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-email_public="segment margin-bottom-medium width-10 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
widget-email_public="solid-form-checkbox-label"
label-email="E-mail *"
required-email
label-email_type="Type d'e-mail"
label-email_public="Public"
></solid-form>
</template>
......@@ -246,29 +233,36 @@ import("./utils.js").then((utils) => {
class-segment11="segment full sm-full rowClear"
class-segment12="segment full sm-full rowClear"
class-segment13="segment full sm-full rowClear"
class-position="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-organisation="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-address="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-postal_code="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-city="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-department="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
class-address_public="segment margin-bottom-medium width-10 sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading tzcld-checkbox"
class-position="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-organisation="segment margin-bottom-medium half sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-address="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-postal_code="segment margin-bottom-medium half sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-city="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-department="segment margin-bottom-medium width-45 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-address_public="segment margin-bottom-medium width-10 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
label-position="Poste occupé"
label-organisation="Organisation"
label-address="Adresse"
label-postal_code="Code postal"
label-city="Ville"
label-department="Département"
label-address_public="Public"
widget-address_public="solid-form-checkbox-label"
multiple-phones
widget-phones="customtzcld-form-profile-phone-widget"
multiple-phones-label= "Téléphone"
multiple-phones-add-label= "Ajouter un téléphone"
multiple-phones-remove-label= "Supprimer"
multiple-emails
widget-emails="customtzcld-form-profile-email-widget"
multiple-phones-label= "Téléphone"
multiple-emails-add-label= "Ajouter un E-mail"
multiple-emails-remove-label= "Supprimer"
multiple-emails-remove-class= "multiple-delete"
widget-department="solid-form-dropdown-label"
range-department="${dataSrc}tzcld-departments/"
label-address_public="Public"
></solid-form>
</template>
</solid-widget>`;
......
src/styles/index.scss
+ 138
− 1
View file @ 4c88c118
......@@ -39,7 +39,70 @@ solid-form-dropdown-label {
appearance: none;
}
}
solid-form-checkbox[name="settings.receiveMail"] {
label:nth-child(odd) {
position: relative;
display: inline-block;
padding: 0px;
width: 35px;
height: 16px;
margin-top: 16px;
/*margin-left: calc(50% - 17.5px);*/
input {
display: none;
}
div {
position: absolute;
text-indent: -9999px;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
&.revert {
background-color: white;
}
transition: 0.4s;
border-radius: 10px;
border: 1px solid #636363;
&:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 1px;
background-color: #D3D5DD;
transition: 0.4s;
border-radius: 10px;
}
&.revert:before {
background-color: #e4e9f1;
}
}
input:checked + div:before {
background-color: var(--color-primary);
}
input:focus + div {
box-shadow: 0 0 1px var(--color-primary);
}
input:checked + div:before {
left: calc(100% - 2px);
transform: translateX(-100%);
}
}
}
solid-form-checkbox-label.tzcld-checkbox {
white-space: normal;
......@@ -113,6 +176,18 @@ solid-form-checkbox-label.tzcld-checkbox {
}
}
solid-multiple-form {
div {
position: relative;
&>button {
display: none;
}
&:last-of-type>button {
display: block;
position: absolute;
right: 0;
}
}
button {
display: block;
border: 2px solid var(--color-primary) ;
......@@ -128,7 +203,6 @@ solid-multiple-form {
}
&>div {
&>button {
display: block;
border: none ;
color: var(--color-primary);
margin-left: auto;
......@@ -136,4 +210,67 @@ solid-multiple-form {
text-decoration: underline;
}
}
}
#members-edit-profile {
form>[name="email"] label.text-uppercase {
text-transform: none;
font-size: 16px;
}
form div[name="tzcld_profile.membership"] label {
display: inline-block;
min-width: 25%;
padding: 15px;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
input {
display: inline-block;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: text-bottom;
}
}
}
/* Global forms */
solid-form {
h3,
.tzcld-form-radio-title>label {
color: var(--color-primary);
font-size: 18px;
font-weight: 900;
line-height: 25px;
}
solid-form-radio-label {
div>label>span {
color: var(--color-bold-grey);
font-size: 16px;
font-style: normal;
font-weight: 400;
font-size: 16px;
}
}
solid-form-dropdown-label {
label {
display: block;
}
select {
border: none;
border-radius: 0px;
color: #636363;
font-weight: normal;
line-height: 15px;
min-height: 46px;
margin-top: 6px;
padding: 12px 14px;
width: 100%;
appearance: none;
}
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment