Optimisation de l'écriture du design

This commit is contained in:
xdrm-brackets 2016-04-22 11:48:25 +02:00
parent 8b4a57433c
commit e5382c7a7a
23 changed files with 282 additions and 199 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -12,7 +12,10 @@
color: #000;
/* (1) On ajoute le liseré à droite pour TOUS les éléments */
& *:not(.no-line){
& h5,
& h4,
& h3,
& *.line{
display: block;
color: #333;
@ -26,7 +29,7 @@
/* (2) Titres de sections */
& h3:not(.no-line){
& h3{
display: block;
padding: 20px 40px;
@ -66,7 +69,7 @@
}
/* (3) Titres des sous-sections */
& h4:not(.no-line){
& h4{
display: block;
padding: 20px 40px;
@ -102,7 +105,7 @@
}
/* (4) Titres genre text message */
& h5:not(.no-line){
& h5{
display: block;
padding: 20px 40px;
@ -231,6 +234,11 @@
& input[type='file'].active + span.file-input{
background: $timeline-color;
color: #fff;
// On change l'icône
&:before{
content: 'v ';
color: #fff;
}
}
/* (7) Inputs de type text */
@ -249,7 +257,8 @@
margin-right: 15px;
border-radius: 0;
border: 1.5px solid #aaa;
border: 0;
border-bottom: 1px solid #555;
font-size: .8em;
font-weight: normal;
@ -269,8 +278,10 @@
/* (8) Gestion des espacements */
& [data-space]{
padding-top: 30px;
padding-bottom: 30px;
@extend *.line;
padding-top: 20px;
padding-bottom: 20px;
}
/* (9) <article> sert uniquement à regrouper */
@ -279,7 +290,7 @@
}
/* (10) Gestion des espacements verticaux */
& .spacetop{ margin-top: 20px !important; }
& .spacetop{ margin-top: 20px !important; }
& .spacebtm{ margin-bottom: 20px !important; }
& .spaced{
@ -287,7 +298,8 @@
@extend .spacebtm;
}
& .nobold{
& .nobold,
& .nobold *{
font-weight: normal !important;
}
@ -310,15 +322,22 @@
// width: auto;
display: inline-block;
padding: 2px;
padding-right: 20px;
padding-right: 30px;
border-radius: 3px;
border: 1px solid $timeline-color;
border: none;
border-bottom: 1px solid #333;
background: #fff url('/f/svg/bottom_arrow/st/container/#{color-str($timeline-color)}') right 5px center no-repeat;
background: #fff url('/f/svg/bottom_arrow/st/container/333333') right 10px center no-repeat;
background-size: 10px auto;
overflow: hidden;
// Animation de @focus
&:focus{
border-color: $timeline-color;
background-image:url('/f/svg/bottom_arrow/st/container/#{color-str($timeline-color)}');
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -38,12 +38,12 @@
<h3 data-n='1'>Identifier l'enquêté</h3>
<span data-space></span>
<h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5>
<h4 data-icon='a' class='self'>
<input type='text' class='no-line' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' class='no-line' data-name='username' placeholder='Pseudo'>
<input type='text' class='no-line' data-name='firstname' placeholder='Prénom'>
<input type='text' class='no-line' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary no-line sub-number' value='Enregistrer'>
<h4 class='self' data-icon='a'>
<input type='text' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' data-name='username' placeholder='Pseudo'>
<input type='text' data-name='firstname' placeholder='Prénom'>
<input type='text' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary sub-number' value='Enregistrer'>
</h4>
<span data-space></span>
@ -51,8 +51,8 @@
<h3 data-n='2'>Importer un journal d'appel</h3>
<span data-space></span>
<h4 data-icon='u'>
<input class='no-line' type='file' id='call_log-import' value='test'>
<span class='no-line file-input'>Importer un journal d'appels</span>
<input type='file' id='call_log-import' value='test'>
<span class='file-input'>Importer un journal d'appels</span>
</h4>
<span data-space></span>
<!-- <span data-tag='OU'></span> -->
@ -63,13 +63,13 @@
<span data-space></span>
<h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5>
<h4 data-icon='p' class='new-contact'>
<input type='text' class='no-line' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' class='no-line' data-name='username' placeholder='Pseudo'>
<input type='text' class='no-line' data-name='firstname' placeholder='Prénom'>
<input type='text' class='no-line' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary no-line sub-number' value='Enregistrer'>
<input type='text' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' data-name='username' placeholder='Pseudo'>
<input type='text' data-name='firstname' placeholder='Prénom'>
<input type='text' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary sub-number' value='Enregistrer'>
</h4>
<h4 data-icon='+' class='add-contact' style='cursor: pointer;'>Ajouter un contact</h4>
<h4 data-icon='+' class='add-contact line' style='cursor: pointer;'>Ajouter un contact</h4>
<!-- <span data-tag='ET'></span> -->
</article>
@ -81,61 +81,66 @@
<article class='relation-panel'>
<span data-space></span>
<h4 data-icon='o' class='fiche-relation nobold'>
<input type='radio' class='no-line spacebtm' name='sexe' checked data-name='sexe' id='sexeH_0'><label class='no-line' for='sexeH_0'>Homme</label>
&nbsp&nbsp&nbsp<input type='radio' class='no-line btm' name='sexe' data-name='sexe' id='sexeF_0'><label class='no-line' for='sexeF_0'>Femme</label><br>
<input type='radio' class='spacebtm' name='sexe' checked data-name='sexe' id='sexeH_0'><label for='sexeH_0'>Homme</label>
&nbsp&nbsp&nbsp<input type='radio' class='btm' name='sexe' data-name='sexe' id='sexeF_0'><label for='sexeF_0'>Femme</label><br>
<input type='text' class='no-line spaced' data-name='age' placeholder='Age'><br>
<input type='number' min='5' max='120' class='spaced' data-name='age' placeholder='Age'><br>
<span class='no-line select-container'><select class='no-line spacebtm' data-name='job'>
<option class='no-line' value='.'>Dernière profession exercée:</option>
<option class='no-line' value='.'>___________________________</option>
<option class='no-line' value='0'>Métier 1</option>
<option class='no-line' value='1'>Métier 2</option>
<option class='no-line' value='2'>Métier 3</option>
<option class='no-line' value='3'>Métier 4</option>
<span class='select-container'><select class='spacebtm' data-name='job'>
<option value='.'>Dernière profession exercée:</option>
<option value='.'>___________________________</option>
<option value='0'>Métier 1</option>
<option value='1'>Métier 2</option>
<option value='2'>Métier 3</option>
<option value='3'>Métier 4</option>
</select></span><br>
Situation familiale:<br>
&nbsp&nbsp&nbsp<input type='radio' class='no-line spaced' checked name='famsit' data-name='famsit' id='famsitA_0'><label class='no-line' for='famsitA_0'>Seul</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='no-line spaced' name='famsit' data-name='famsit' id='famsitB_0'><label class='no-line' for='famsitB_0'>En couple sans enfants</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='no-line spaced' name='famsit' data-name='famsit' id='famsitC_0'><label class='no-line' for='famsitC_0'>En couple avec enfants</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' checked name='famsit' data-name='famsit' id='famsitA_0'><label for='famsitA_0'>Seul</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='famsit' data-name='famsit' id='famsitB_0'><label for='famsitB_0'>En couple sans enfants</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='famsit' data-name='famsit' id='famsitC_0'><label for='famsitC_0'>En couple avec enfants</label><br>
<span class='no-line select-container'><select class='no-line spaced' data-name='studies'>
<option class='no-line' value='.'>Niveau d'études maximal:</option>
<option class='no-line' value='.'>___________________________</option>
<option class='no-line' value='0'>Parcours 1</option>
<option class='no-line' value='1'>Parcours 2</option>
<option class='no-line' value='2'>Parcours 3</option>
<option class='no-line' value='3'>Parcours 4</option>
<span class='select-container'><select class='spaced' data-name='studies'>
<option value='.'>Niveau d'études maximal:</option>
<option value='.'>___________________________</option>
<option value='0'>Parcours 1</option>
<option value='1'>Parcours 2</option>
<option value='2'>Parcours 3</option>
<option value='3'>Parcours 4</option>
</select></span><br>
<span class='no-line select-container'><select class='no-line spacebtm' data-name='relation'>
<option class='no-line' value='.'>Type de relation:</option>
<option class='no-line' value='.'>___________________________</option>
<option class='no-line' value='0'>Relation 1</option>
<option class='no-line' value='1'>Relation 2</option>
<option class='no-line' value='2'>Relation 3</option>
<option class='no-line' value='3'>Relation 4</option>
<span class='select-container'><select class='spacebtm' data-name='relation'>
<option value='.'>Type de relation:</option>
<option value='.'>___________________________</option>
<option value='0'>Relation 1</option>
<option value='1'>Relation 2</option>
<option value='2'>Relation 3</option>
<option value='3'>Relation 4</option>
</select></span><br>
habite t-elle/il ?<br>
&nbsp&nbsp&nbsp<input type='radio' class='no-line spaced' checked name='loc' data-name='loc' id='locA_0'><label class='no-line' for='locA_0'>- de 5 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='no-line spaced' name='loc' data-name='loc' id='locB_0'><label class='no-line' for='locB_0'>de 5 à 15 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='no-line spaced' name='loc' data-name='loc' id='locC_0'><label class='no-line' for='locC_0'>de 15 à 60 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='no-line spaced' name='loc' data-name='loc' id='locD_0'><label class='no-line' for='locD_0'>+ d'une heure</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' checked name='loc' data-name='loc' id='locA_0'><label for='locA_0'>- de 5 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='loc' data-name='loc' id='locB_0'><label for='locB_0'>de 5 à 15 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='loc' data-name='loc' id='locC_0'><label for='locC_0'>de 15 à 60 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='loc' data-name='loc' id='locD_0'><label for='locD_0'>+ d'une heure</label><br>
<div class='no-line spacetop'>Depuis quand connaissez-vous cette personne ?</div><br>
<input type='text' class='no-line spaced' data-name='duration' placeholder='Nombre de mois'><br>
<div class='spacetop'>
Depuis quand connaissez-vous cette personne ?
<input type='text' data-name='duration' placeholder='Nombre de mois'><br>
</div>
<span class='no-line select-container'><select class='no-line spacebtm' data-name='context'>
<option class='no-line' value='.'>Contexte de rencontre:</option>
<option class='no-line' value='.'>___________________________</option>
<option class='no-line' value='0'>Contexte 1</option>
<option class='no-line' value='1'>Contexte 2</option>
<option class='no-line' value='2'>Contexte 3</option>
<option class='no-line' value='3'>Contexte 4</option>
<span class='select-container'><select class='spaced' data-name='context'>
<option value='.'>Contexte de rencontre:</option>
<option value='.'>___________________________</option>
<option value='0'>Contexte 1</option>
<option value='1'>Contexte 2</option>
<option value='2'>Contexte 3</option>
<option value='3'>Contexte 4</option>
</select></span><br>
<strong>Avec quelle fréquence discutez-vous avec cette personne ?</strong>
</h4>
<!-- <span data-tag='ET'></span> -->

View File

@ -1,5 +1,4 @@
function newContactHTMLBuilder(){var a=document.createElement("h4");a.dataset.icon="p";a.className="new-contact";a.innerHTML="<input type='text' class='no-line' data-name='number' placeholder='Num\u00e9ro de t\u00e9l\u00e9phone'> ";a.innerHTML+="<input type='text' class='no-line' data-name='username' placeholder='Pseudo'> ";a.innerHTML+="<input type='text' class='no-line' data-name='firstname' placeholder='Pr\u00e9nom'> ";a.innerHTML+="<input type='text' class='no-line' data-name='lastname' placeholder='Nom'> ";
a.innerHTML+="<input type='submit' class='primary no-line sub-number' value='Enregistrer'>";return a}var ficheRelationHTML="";function updateListener(a,b,c,d){a.removeEventListener(b,c);d.addEventListener(b,c);return d}var ic=new inputChecker,FormDeflaterP={tags:["input"],attr:["data-name"]},importCallLog=$('input#call_log-import[type="file"]'),contactDeflaters=[];
function contactForms(){var a=$$("h4.new-contact");contactDeflaters=[];for(var b=0;b<a.length;b++)contactDeflaters.push(new FormDeflater(a[b],FormDeflaterP.tags,FormDeflaterP.attr));return a}var addContact=$("h4.add-contact"),contactContainer=$("article.contact-panel");
function addNewContact(){console.log("adding New Contact");console.log(contactContainer.children);contactContainer.removeChild(addContact);contactContainer.appendChild(newContactHTMLBuilder());contactContainer.appendChild(addContact)}addContact.addEventListener("click",addNewContact,!1);var relationDeflaters=[];
function newContactHTMLBuilder(){var a=document.createElement("h4");a.dataset.icon="p";a.className="new-contact";a.innerHTML="<input type='text' data-name='number' placeholder='Num\u00e9ro de t\u00e9l\u00e9phone'> ";a.innerHTML+="<input type='text' data-name='username' placeholder='Pseudo'> ";a.innerHTML+="<input type='text' data-name='firstname' placeholder='Pr\u00e9nom'> ";a.innerHTML+="<input type='text' data-name='lastname' placeholder='Nom'> ";a.innerHTML+="<input type='submit' class='primary sub-number' value='Enregistrer'>";
return a}var ficheRelationHTML="";function updateListener(a,b,c,d){a.removeEventListener(b,c);d.addEventListener(b,c);return d}var ic=new inputChecker,FormDeflaterP={tags:["input"],attr:["data-name"]},importCallLog=$('input#call_log-import[type="file"]'),contactDeflaters=[];function contactForms(){var a=$$("h4.new-contact");contactDeflaters=[];for(var b=0;b<a.length;b++)contactDeflaters.push(new FormDeflater(a[b],FormDeflaterP.tags,FormDeflaterP.attr));return a}
var addContact=$("h4.add-contact"),contactContainer=$("article.contact-panel");function addNewContact(){console.log("adding New Contact");console.log(contactContainer.children);contactContainer.removeChild(addContact);contactContainer.appendChild(newContactHTMLBuilder());contactContainer.appendChild(addContact)}addContact.addEventListener("click",addNewContact,!1);var relationDeflaters=[];
function relationForms(){var a=$$("h4.fiche-relation");relationDeflaters=[];for(var b=0;b<a.length;b++)relationDeflaters.push(new FormDeflater(a[b],FormDeflaterP.tags,FormDeflaterP.attr));return a}importCallLog.addEventListener("change",function(a){api.send({path:"upload/call_log",file:importCallLog.files[0]},function(a){console.log(a);0==a.ModuleError&&importCallLog.addClass("active")})},!1);

View File

@ -6,11 +6,11 @@ function newContactHTMLBuilder(){
root.dataset.icon = 'p';
root.className = 'new-contact';
root.innerHTML = "<input type='text' class='no-line' data-name='number' placeholder='Numéro de téléphone'> ";
root.innerHTML += "<input type='text' class='no-line' data-name='username' placeholder='Pseudo'> ";
root.innerHTML += "<input type='text' class='no-line' data-name='firstname' placeholder='Prénom'> ";
root.innerHTML += "<input type='text' class='no-line' data-name='lastname' placeholder='Nom'> ";
root.innerHTML += "<input type='submit' class='primary no-line sub-number' value='Enregistrer'>";
root.innerHTML = "<input type='text' data-name='number' placeholder='Numéro de téléphone'> ";
root.innerHTML += "<input type='text' data-name='username' placeholder='Pseudo'> ";
root.innerHTML += "<input type='text' data-name='firstname' placeholder='Prénom'> ";
root.innerHTML += "<input type='text' data-name='lastname' placeholder='Nom'> ";
root.innerHTML += "<input type='submit' class='primary sub-number' value='Enregistrer'>";
return root;
}