From ef7585fcb988ec386d7b0d0e55a20c5462f280c2 Mon Sep 17 00:00:00 2001
From: raphaelpieroni <raphaelpieroni@yahoo.fr>
Date: Mon, 24 May 2021 17:32:18 +0200
Subject: [PATCH] Align in Caracteristics for Characters

---
 styles/simple.css          | 28 ++++++++++++++-
 templates/actor-sheet.html | 70 ++++++++++++++++++++------------------
 2 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/styles/simple.css b/styles/simple.css
index 6935a4a1..5b6b0073 100644
--- a/styles/simple.css
+++ b/styles/simple.css
@@ -326,7 +326,33 @@ table {border: 1px solid #7a7971;}
 .rdd.sheet .window-content .sheet-body {overflow-y: scroll;}
 .rdd.sheet .window-content .sheet-body .tab {padding-bottom: 30px;}
 .rdd.sheet .window-content .sheet-body .competence-list {width: 100%;}
-.rdd.sheet .window-content .sheet-body .carac-list {width: 100%;}
+.rdd.sheet .window-content .sheet-body .carac-list {
+  width: 100%;
+  flex-grow: 0;
+}
+
+.rdd.sheet .window-content .sheet-body .carac-list .competence {
+  flex-wrap: nowrap;
+  justify-content: stretch;
+}
+.rdd.sheet .window-content .sheet-body .carac-list .competence > .carac-label {
+  flex-basis: 50%;
+}
+.rdd.sheet .window-content .sheet-body .carac-list .competence > .attribut-label {
+  flex-basis: 50%;
+}
+.rdd.sheet .window-content .sheet-body .carac-list .competence > .competence-value.total {
+  flex-grow: 1;
+  text-align: right;
+}
+.rdd.sheet .window-content .sheet-body .carac-list .competence > .utiliser-attribut {
+  flex-basis: available;
+  flex-grow: 1;
+}
+.rdd.sheet .window-content .sheet-body .carac-list .competence > * {
+  flex-basis: 13%;
+  flex-grow: 0;
+}
 
 .editor {
   border: 2;
diff --git a/templates/actor-sheet.html b/templates/actor-sheet.html
index ac6b1180..13ec61e4 100644
--- a/templates/actor-sheet.html
+++ b/templates/actor-sheet.html
@@ -111,11 +111,13 @@
 
         {{!-- Carac Tab --}}
         <div class="tab items" data-group="primary" data-tab="carac">
+          <div class="flexrow">
+              <span><a class="lock-unlock-sheet"><img class="small-button-container"
+                                                      src="systems/foundryvtt-reve-de-dragon/icons/{{#if options.editCaracComp}}unlocked.svg{{else}}locked.svg{{/if}}" alt="blocker/débloquer"
+              >{{#if options.editCaracComp}}Verrouiller{{else}}Déverrouiller{{/if}}</a></span>
+          </div>
           <div class="grid grid-2col">
             <div class="flex-group-left flexcol">
-              <span><a class="lock-unlock-sheet"><img class="small-button-container"
-                src="systems/foundryvtt-reve-de-dragon/icons/{{#if options.editCaracComp}}unlocked.svg{{else}}locked.svg{{/if}}" alt="blocker/débloquer"
-                >{{#if options.editCaracComp}}Verrouiller{{else}}Déverrouiller{{/if}}</a></span>
               <ul class="carac-list alterne-list">
                 {{#each data.carac as |carac key|}}
                     {{#if carac.isLevelUp}}
@@ -124,83 +126,83 @@
                     <li class="competence flexrow list-item" data-attribute="{{key}}">
                     {{/if}}
                     {{#if (eq key 'taille')}}
-                      <span class="carac-label flexrow" name="data.carac.{{key}}.label">{{carac.label}}</span>
-                      <input class="carac-value flexrow" type="text" name="data.carac.{{key}}.value" value="{{carac.value}}" data-dtype="{{carac.type}}" {{#unless @root.options.editCaracComp}}disabled{{/unless}} />
-                      <label class="carac-xp flexrow"/>
+                      <span class="carac-label" name="data.carac.{{key}}.label">{{carac.label}}</span>
+                      <input class="carac-value" type="text" name="data.carac.{{key}}.value" value="{{carac.value}}" data-dtype="{{carac.type}}" {{#unless @root.options.editCaracComp}}disabled{{/unless}} />
+                      <label class="carac-xp"/>
                     {{else}}
                         {{#if carac.derivee}}
-                        <span class="carac-label flexrow" name="data.carac.{{key}}.label"> <a name={{key}}>{{carac.label}}</a></span>
-                        <label class="competence-value flexrow">{{carac.value}}</label>
-                        <label class="carac-xp flexrow"/>
+                        <span class="carac-label" name="data.carac.{{key}}.label"> <a name={{key}}>{{carac.label}}</a></span>
+                        <label class="competence-value">{{carac.value}}</label>
+                        <label class="carac-xp"/>
                         {{else}}
                           {{#if carac.isLevelUp}}
-                          <span class="carac-label flexrow tooltip" name="data.carac.{{key}}.label">
+                          <span class="carac-label tooltip" name="data.carac.{{key}}.label">
                             <span class="tooltiptext ttt-xp">
                             Vous pouvez dépenser {{carac.xpNext}} points d'Experience pour augmenter de 1 votre caractéristique {{carac.label}}
                           </span>
                           <a name={{key}}>{{carac.label}}</a></span>
                           {{else}}                          
-                          <span class="carac-label flexrow tooltip" name="data.carac.{{key}}.label"><a name={{key}}>{{carac.label}}</a></span>
+                          <span class="carac-label tooltip" name="data.carac.{{key}}.label"><a name={{key}}>{{carac.label}}</a></span>
                           {{/if}}
-                        <input class="carac-value flexrow" type="text" name="data.carac.{{key}}.value" value="{{carac.value}}" data-dtype="{{carac.type}}" {{#unless @root.options.editCaracComp}}disabled{{/unless}} />
-                        <input class="carac-xp flexrow" type="text" name="data.carac.{{key}}.xp" value="{{carac.xp}}" data-dtype="number" {{#unless @root.options.editCaracComp}}disabled{{/unless}} />
+                        <input class="carac-value" type="text" name="data.carac.{{key}}.value" value="{{carac.value}}" data-dtype="{{carac.type}}" {{#unless @root.options.editCaracComp}}disabled{{/unless}} />
+                        <input class="carac-xp" type="text" name="data.carac.{{key}}.xp" value="{{carac.xp}}" data-dtype="number" {{#unless @root.options.editCaracComp}}disabled{{/unless}} />
                         {{/if}}
                     {{/if}}
                     </li>
                 {{/each}}
                 <li class="competence flexrow">
-                  <span class="carac-label flexrow" name="carac-total">Total Caractéristiques </span>
-                  <span class="competence-value flexrow" name="carac-total-value">{{calc.caracTotal}} </span>
+                  <span class="carac-label" name="carac-total">Total Caractéristiques </span>
+                  <span class="competence-value total" name="carac-total-value">{{calc.caracTotal}} </span>
                 </li>
               </ul>          
             </div>
             <div class="flex-group-left flexcol" >
               <ul class="carac-list">
                 <li class="competence flexrow list-item">
-                  <span class="competence-label flexrow" name="beaute">Beauté : 
-                    <input class="description-value" type="text" name="data.beaute" value="{{data.beaute}}" data-dtype="String" {{#unless @root.options.editCaracComp}}disabled{{/unless}}/>
-                  </span>
+                  <span class="carac-label" name="beaute">Beauté&nbsp;:</span>
+                  <input class="description-value" type="text" name="data.beaute" value="{{data.beaute}}" data-dtype="String" {{#unless @root.options.editCaracComp}}disabled{{/unless}}/>
+                  <label class="carac-xp"/>
                 </li>
                 {{#each data.attributs as |attr key|}}
                 {{#unless (eq key 'hautrevant')}}
                 <li class="competence flexrow  list-item" data-attribute="{{key}}">
-                  <span class="competence-label flexrow" name="data.attributs.{{key}}.label">{{attr.label}} :
-                    {{#if (eq key 'protection')}}
-                    <input id="attribut-protection-edit" type="text" name="{{key}}" value="{{attr.value}}" data-dtype="number"/><span/>
-                    {{else}}
-                    {{attr.value}}
-                    {{/if}}
-                  </span>
+                  <span class="carac-label" name="data.attributs.{{key}}.label">{{attr.label}}&nbsp;:</span>
+                  {{#if (eq key 'protection')}}
+                  <input class="description-value" id="attribut-protection-edit" type="text" name="{{key}}" value="{{attr.value}}" data-dtype="number"/>
+                  {{else}}
+                  <input class="description-value" type="text" disabled name="data.attributs.{{key}}." value="{{attr.value}}" data-dtype="number"/>
+                  {{/if}}
+                  <label class="carac-xp"/>
                 </li>
                 {{/unless}}
                 {{/each}}
               </ul>
               <ul class="carac-list alterne-list">
                 <li class="competence flexrow list-item">
-                  <span class="generic-label chance-actuelle"><a>Chance actuelle</a></span>
-                  <input class="compteur-edit" type="text" name="chance" value="{{data.compteurs.chance.value}}" data-dtype="number"/>
-                  <span style="padding-left: 5px"><a class="item-control chance-appel">Utiliser</a></span>
+                  <span class="attribut-label chance-actuelle"><a>Chance actuelle</a></span>
+                  <input class="description-value compteur-edit" type="text" name="chance" value="{{data.compteurs.chance.value}}" data-dtype="number"/>
+                  <span class="utiliser-attribut" style="padding-left: 5px"><a class="item-control chance-appel">Utiliser</a></span>
                 </li>
                 {{#each data.compteurs as |compteur key|}}
                   {{#if (eq compteur.label 'Chance')}}
                   {{else if (eq compteur.label 'Experience')}}
                   {{else if compteur.isInput}}
                     <li class="competence flexrow list-item">
-                      <span class="generic-label">{{compteur.label}}</span>
+                      <span class="attribut-label">{{compteur.label}}</span>
                       {{#if (eq compteur.label 'Ethylisme')}}
-                      <select name="data.compteurs.ethylisme.value" id="ethylisme" data-dtype="Number">
+                      <select class="description-value" name="data.compteurs.ethylisme.value" id="ethylisme" data-dtype="Number">
                         {{#select compteur.value}}
                         {{>"systems/foundryvtt-reve-de-dragon/templates/niveau-ethylisme.html"}}
                         {{/select}}
                       </select>          
                       {{else}}
-                      <input class="compteur-edit" id="{{key}}-edit" type="text" name="{{key}}" value="{{compteur.value}}" data-dtype="number"/>
+                      <input class="description-value compteur-edit" id="{{key}}-edit" type="text" name="{{key}}" value="{{compteur.value}}" data-dtype="number"/>
                       {{/if}}
-                      <span style="padding-left: 5px">
+                      <span class="utiliser-attribut" style="padding-left: 5px">
                         {{#if compteur.isStress}}
                         <a class="item-control stress-test" title="Transformer">Transformer</a>
                         {{else if (eq compteur.label 'Ethylisme')}}
-                        <a class="item-control ethylisme-test" id="ethylisme-test" title="Jet d'Ethylisme">Jet d'Ethylisme</a>
+                        <a class="item-control ethylisme-test" id="ethylisme-test" title="Jet d'Ethylisme">Boire</a>
                         {{else if (eq compteur.label 'Moral')}}
                         <a class="moral-malheureux" title="Jet de moral situation malheureuse"><img class="small-button-container" src="systems/foundryvtt-reve-de-dragon/icons/moral-malheureux.svg" alt="Jet de moral situation malheureuse"/></a>
                         <a class="moral-neutre" title="Jet de moral situation neutre"><img class="small-button-container" src="systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg" alt="Jet de moral situation neutre"/></a>
@@ -213,7 +215,7 @@
                   {{/if}}
                 {{/each}}
               </ul>
-              <ul class="carac-list"></ul>
+<!--              <ul class="carac-list"></ul>-->
             </div>
           </div>
         </div>