Align skills and hide controls

module/actor-sheet.js

@@ -30,7 +30,8 @@ export class RdDActorSheet extends ActorSheet {
       dragDrop: [{ dragSelector: ".item-list .item", dropSelector: null }],
       editCaracComp: false,
       showCompNiveauBase: false,
-      montrerArchetype: false
+      montrerArchetype: false,
+      hideControls: true
     });
   }
 
@@ -483,6 +484,10 @@ export class RdDActorSheet extends ActorSheet {
       this.options.montrerArchetype = !this.options.montrerArchetype;
       this.render(true);
     });
+    html.find('.lock-unlock-controls').click((event) => {console.log("CONTROLS",this.options.hideControls)
+      this.options.hideControls = !this.options.hideControls;
+      this.render(true);
+    });
 
     // On pts de reve change
     html.find('.pointsreve-value').change((event) => {

styles/simple.css

@@ -429,6 +429,13 @@ table {border: 1px solid #7a7971;}
   text-align: right;
 }
 
+.competence-list .item-controls {
+  display: contents !important;
+}
+.competence-list .item-controls.hidden-controls {
+  display: none !important;
+}
+
 .rdddialog .dialog-roll-sort s{
   width: 600px;
   height: 430px;
@@ -612,8 +619,27 @@ section.sheet-body:after {
 }
 
 .window-app.sheet .window-content .carac-value, .window-app.sheet .window-content .competence-xp {
+  flex-grow: 0;
   margin: 0.05rem;
-  flex-basis: 3rem;
+  flex-basis: 2rem;
+  text-align: center;
+}
+.window-app.sheet .window-content .carac-value, .window-app.sheet .window-content .competence-value {
+  flex-grow: 0;
+  margin: 0.05rem;
+  flex-basis: 2rem;
+  text-align: center;
+}
+.window-app.sheet .window-content .carac-value, .window-app.sheet .window-content .competence-archetype {
+  flex-grow: 0;
+  margin: 0.05rem;
+  flex-basis: 2rem;
+  text-align: center;
+}
+.window-app.sheet .window-content .carac-value, .window-app.sheet .window-content .competence-xp-sort {
+  flex-grow: 0;
+  margin: 0.05rem;
+  flex-basis: 2rem;
   text-align: center;
 }
 
@@ -684,6 +710,8 @@ ul, li {
   border-radius: 0.25rem;
   padding: 0.125rem;
   flex: 1 1 5rem;
+  display: flex !important;
+  align-items: baseline !important;
 }
 
 .table-row {
@@ -734,6 +762,7 @@ ul, li {
   height: 24px;
   flex-grow: 0;
   margin-right: 0.25rem;
+  vertical-align: bottom;
 }
 .competence-column {
   flex-direction: column;

templates/actor-sheet-competence-partial.html

@@ -15,10 +15,6 @@
              value="{{numberFormat data.xp_sort decimals=0 sign=false}}" data-dtype="number"
              {{#unless @root.options.editCaracComp}}disabled{{/unless}}/>
     {{/if}}
-    <div class="item-controls">
-      <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-      <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-    </div>
     {{#if @root.options.montrerArchetype}}
       <input class="competence-archetype" type="text" compname="{{name}}"
              value="{{numberFormat data.niveau_archetype decimals=0 sign=true}}" data-dtype="number"
@@ -27,5 +23,9 @@
     {{#if data.isLevelUp}}
       <span class="tooltiptext ttt-xp">Vous pouvez dépenser {{data.xpNext}} points d'Experience pour augmenter de 1 votre compétence {{name}}</span>
     {{/if}}
+    <div class="item-controls {{#if @root.options.hideControls}}hidden-controls{{/if}}">
+      <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
+      <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
+    </div>
   </li>
 {{/if}}

templates/actor-sheet.html

@@ -113,7 +113,7 @@
         <div class="tab items" data-group="primary" data-tab="carac">
           <div class="grid grid-2col">
             <div class="flex-group-left flexcol">
-              <span><a class="lock-unlock-sheet"><img class="small-button-container" 
+              <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">
@@ -221,15 +221,18 @@
         {{!-- Compétences Tab --}}
         <div class="tab competences" data-group="primary" data-tab="competences">
           <div class="flexrow">
-            <span><a class="lock-unlock-sheet"><img class="small-button-container" 
+            <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>
-            <span><a id="show-hide-competences"><img class="small-button-container" 
+            <span><a id="show-hide-competences"><img class="small-button-container"
               src="systems/foundryvtt-reve-de-dragon/icons/{{#if options.showCompNiveauBase}}no-filter.svg{{else}}filter.svg{{/if}}" alt="filter/montrer tout"
-              >{{#if options.showCompNiveauBase}}Montrer tout{{else}}Filtrer{{/if}}</a></span> 
+              >{{#if options.showCompNiveauBase}}Montrer tout{{else}}Filtrer{{/if}}</a></span>
-            <span><a id="show-hide-archetype"><img class="small-button-container" 
+            <span><a id="show-hide-archetype"><img class="small-button-container"
               src="systems/foundryvtt-reve-de-dragon/icons/{{#if options.montrerArchetype}}no-filter.svg{{else}}filter.svg{{/if}}" alt="filter/montrer l'archétype"
-              >{{#if options.montrerArchetype}}Masquer l'archétype{{else}}Voir l'archétype{{/if}}</a></span> 
+              >{{#if options.montrerArchetype}}Masquer l'archétype{{else}}Voir l'archétype{{/if}}</a></span>
+            <span><a class="lock-unlock-controls">i class="fas fa-lock{{#if options.hideControls}}-open{{/if}}"></i>
+              {{#if options.hideControls}}Voir les contrôles{{else}}Masquer les contrôles{{/if}}
+            </a></span>
           </div>
           <div class="grid grid-2col">
             <div class="flex-group-left flexcol competence-column">