xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

BIN
css/fonts/icomoon/regular.eot
View File

Binary file not shown.

BIN
css/fonts/icomoon/regular.ttf
View File

Binary file not shown.

BIN
css/fonts/icomoon/regular.woff
View File

Binary file not shown.

34
css/global/compact.css
View File

File diff suppressed because one or more lines are too long

4
css/global/compact.css.map
View File

File diff suppressed because one or more lines are too long

53
css/global/expanded.css
View File

File diff suppressed because one or more lines are too long

4
css/global/expanded.css.map
View File

File diff suppressed because one or more lines are too long

4
css/global/min.css
View File

File diff suppressed because one or more lines are too long

4
css/global/min.css.map
View File

File diff suppressed because one or more lines are too long

49
css/global/nested.css
View File

File diff suppressed because one or more lines are too long

4
css/global/nested.css.map
View File

File diff suppressed because one or more lines are too long

45
css/timeline-form.scss
View File

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

32
css/timeline-form/compact.css
View File

File diff suppressed because one or more lines are too long

4
css/timeline-form/compact.css.map
View File

File diff suppressed because one or more lines are too long

51
css/timeline-form/expanded.css
View File

File diff suppressed because one or more lines are too long

4
css/timeline-form/expanded.css.map
View File

File diff suppressed because one or more lines are too long

4
css/timeline-form/min.css
View File

File diff suppressed because one or more lines are too long

4
css/timeline-form/min.css.map
View File

File diff suppressed because one or more lines are too long

47
css/timeline-form/nested.css
View File

File diff suppressed because one or more lines are too long

4
css/timeline-form/nested.css.map
View File

File diff suppressed because one or more lines are too long

113
view/input.php
View File

@ -38,12 +38,12 @@
<h3 data-n='1'>Identifier l'enquêté</h3> <h3 data-n='1'>Identifier l'enquêté</h3>
<span data-space></span> <span data-space></span>
<h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5> <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'> <h4 class='self' data-icon='a'>
<input type='text' class='no-line' data-name='number' placeholder='Numéro de téléphone'> <input type='text' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' class='no-line' data-name='username' placeholder='Pseudo'> <input type='text' data-name='username' placeholder='Pseudo'>
<input type='text' class='no-line' data-name='firstname' placeholder='Prénom'> <input type='text' data-name='firstname' placeholder='Prénom'>
<input type='text' class='no-line' data-name='lastname' placeholder='Nom'> <input type='text' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary no-line sub-number' value='Enregistrer'> <input type='submit' class='primary sub-number' value='Enregistrer'>
</h4> </h4>
<span data-space></span> <span data-space></span>
@ -51,8 +51,8 @@
<h3 data-n='2'>Importer un journal d'appel</h3> <h3 data-n='2'>Importer un journal d'appel</h3>
<span data-space></span> <span data-space></span>
<h4 data-icon='u'> <h4 data-icon='u'>
<input class='no-line' type='file' id='call_log-import' value='test'> <input type='file' id='call_log-import' value='test'>
<span class='no-line file-input'>Importer un journal d'appels</span> <span class='file-input'>Importer un journal d'appels</span>
</h4> </h4>
<span data-space></span> <span data-space></span>
<!-- <span data-tag='OU'></span> --> <!-- <span data-tag='OU'></span> -->
@ -63,13 +63,13 @@
<span data-space></span> <span data-space></span>
<h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5> <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'> <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' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' class='no-line' data-name='username' placeholder='Pseudo'> <input type='text' data-name='username' placeholder='Pseudo'>
<input type='text' class='no-line' data-name='firstname' placeholder='Prénom'> <input type='text' data-name='firstname' placeholder='Prénom'>
<input type='text' class='no-line' data-name='lastname' placeholder='Nom'> <input type='text' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary no-line sub-number' value='Enregistrer'> <input type='submit' class='primary sub-number' value='Enregistrer'>
</h4> </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> --> <!-- <span data-tag='ET'></span> -->
</article> </article>
@ -81,61 +81,66 @@
<article class='relation-panel'> <article class='relation-panel'>
<span data-space></span> <span data-space></span>
<h4 data-icon='o' class='fiche-relation nobold'> <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> <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='no-line btm' name='sexe' data-name='sexe' id='sexeF_0'><label class='no-line' for='sexeF_0'>Femme</label><br> &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'> <span class='select-container'><select class='spacebtm' data-name='job'>
<option class='no-line' value='.'>Dernière profession exercée:</option> <option value='.'>Dernière profession exercée:</option>
<option class='no-line' value='.'>___________________________</option> <option value='.'>___________________________</option>
<option class='no-line' value='0'>Métier 1</option> <option value='0'>Métier 1</option>
<option class='no-line' value='1'>Métier 2</option> <option value='1'>Métier 2</option>
<option class='no-line' value='2'>Métier 3</option> <option value='2'>Métier 3</option>
<option class='no-line' value='3'>Métier 4</option> <option value='3'>Métier 4</option>
</select></span><br> </select></span><br>
Situation familiale:<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='spaced' checked name='famsit' data-name='famsit' id='famsitA_0'><label 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='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='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' 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'> <span class='select-container'><select class='spaced' data-name='studies'>
<option class='no-line' value='.'>Niveau d'études maximal:</option> <option value='.'>Niveau d'études maximal:</option>
<option class='no-line' value='.'>___________________________</option> <option value='.'>___________________________</option>
<option class='no-line' value='0'>Parcours 1</option> <option value='0'>Parcours 1</option>
<option class='no-line' value='1'>Parcours 2</option> <option value='1'>Parcours 2</option>
<option class='no-line' value='2'>Parcours 3</option> <option value='2'>Parcours 3</option>
<option class='no-line' value='3'>Parcours 4</option> <option value='3'>Parcours 4</option>
</select></span><br> </select></span><br>
<span class='no-line select-container'><select class='no-line spacebtm' data-name='relation'> <span class='select-container'><select class='spacebtm' data-name='relation'>
<option class='no-line' value='.'>Type de relation:</option> <option value='.'>Type de relation:</option>
<option class='no-line' value='.'>___________________________</option> <option value='.'>___________________________</option>
<option class='no-line' value='0'>Relation 1</option> <option value='0'>Relation 1</option>
<option class='no-line' value='1'>Relation 2</option> <option value='1'>Relation 2</option>
<option class='no-line' value='2'>Relation 3</option> <option value='2'>Relation 3</option>
<option class='no-line' value='3'>Relation 4</option> <option value='3'>Relation 4</option>
</select></span><br> </select></span><br>
Où habite t-elle/il ?<br> Où 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='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='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='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='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='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='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' 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> <div class='spacetop'>
<input type='text' class='no-line spaced' data-name='duration' placeholder='Nombre de mois'><br> 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> <span class='select-container'><select class='spaced' data-name='context'>
<option class='no-line' value='.'>___________________________</option> <option value='.'>Contexte de rencontre:</option>
<option class='no-line' value='0'>Contexte 1</option> <option value='.'>___________________________</option>
<option class='no-line' value='1'>Contexte 2</option> <option value='0'>Contexte 1</option>
<option class='no-line' value='2'>Contexte 3</option> <option value='1'>Contexte 2</option>
<option class='no-line' value='3'>Contexte 4</option> <option value='2'>Contexte 3</option>
<option value='3'>Contexte 4</option>
</select></span><br> </select></span><br>
<strong>Avec quelle fréquence discutez-vous avec cette personne ?</strong>
</h4> </h4>
<!-- <span data-tag='ET'></span> --> <!-- <span data-tag='ET'></span> -->

7
view/js/input-min.js vendored
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'> "; 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'>";
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=[]; 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}
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"); 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 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); 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);

10
view/js/input.js
View File

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