feat(sheet) - change skill order

Detailing-the-Realm · Jun 7, 2022 · 31dc0fc · 31dc0fc
1 parent ff935e6
commit 31dc0fc
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 50 deletions.
diff --git a/css/svnsea2e.css b/css/svnsea2e.css
@@ -488,7 +488,7 @@ input[type='range']::-webkit-slider-thumb {
   border: 0;
 }
 
-.dialog .roll-dialog input[type="number"] {
+.dialog .roll-dialog input[type='number'] {
   max-width: 3rem;
   text-align: center;
 }
@@ -614,6 +614,8 @@ input[type='range']::-webkit-slider-thumb {
 }
 
 .svnsea2e .tabs .item {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   font-weight: bold;
   text-transform: uppercase;
@@ -626,8 +628,6 @@ input[type='range']::-webkit-slider-thumb {
   padding: 4px;
   margin: 4px 4px 0 4px;
   background: #143a54;
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
   flex: 1;
 }
 
@@ -645,29 +645,6 @@ input[type='range']::-webkit-slider-thumb {
   color: #000;
 }
 
-.sheet {
-  /*.favor input[type="text"],
-.trait input[type="text"],
-.skill input[type="text"] {
-  text-align: center;
-  border-radius: $circle-size;
-  height: $circle-size;
-  max-width: $circle-size;
-  padding: $padding-sm;
-  background: white;
-  border: $brd-s-md-dk;
-}
-
-.sheet-header .favor,
-.sheet-header .trait,
-.skills .skill,
-.traits .trait {
-  background-image: linear-gradient(to right, $g-c-dk 90%, $g-c-lt 10%);
-  padding: 0;
-  border-radius: $circle-size;
-}*/
-}
-
 .sheet img {
   border: 0 solid transparent;
 }
@@ -754,7 +731,8 @@ input[type='range']::-webkit-slider-thumb {
   text-align: right;
 }
 
-.sheet .sheet-header  .herospts, .sheet .sheet-header .wealth {
+.sheet .sheet-header .herospts,
+.sheet .sheet-header .wealth {
   max-width: 30px;
   margin-right: 10px;
 }
@@ -902,6 +880,24 @@ input[type='range']::-webkit-slider-thumb {
   text-shadow: none;
 }
 
+.sheet .skills {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 140px;
+  gap: 4px;
+}
+
+.sheet .skill {
+  height: 19px;
+}
+
 .actor .sheet-header {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 195px;

diff --git a/scss/components/_sheet.scss b/scss/components/_sheet.scss
@@ -182,27 +182,6 @@ nav.sheet-tabs {
   }
 }
 
-/*.favor input[type="text"],
-.trait input[type="text"],
-.skill input[type="text"] {
-  text-align: center;
-  border-radius: $circle-size;
-  height: $circle-size;
-  max-width: $circle-size;
-  padding: $padding-sm;
-  background: white;
-  border: $brd-s-md-dk;
-}
-
-.sheet-header .favor,
-.sheet-header .trait,
-.skills .skill,
-.traits .trait {
-  background-image: linear-gradient(to right, $g-c-dk 90%, $g-c-lt 10%);
-  padding: 0;
-  border-radius: $circle-size;
-}*/
-
 .favor-label,
 .skill-name,
 .trait-name {
@@ -220,3 +199,15 @@ nav.sheet-tabs {
 .brute h2.ability-title {
   text-shadow: none;
 }
+
+.skills {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  height: 140px;
+  gap: 4px;
+}
+
+.skill {
+  height: 19px;
+}
diff --git a/templates/actors/parts/actor-traits.html b/templates/actors/parts/actor-traits.html
@@ -21,7 +21,7 @@ <h3 class="trait-title">{{localize "SVNSEA2E.Traits"}}</h3>
   </div>
   {{#if hasSkills}}
     <h3 class="skill-title">{{localize "SVNSEA2E.Skills"}}</h3>
-    <div class="skills grid grid-3col">
+    <div class="skills">
       {{#each skills as |skill key|}}
         <div class="skill flexrow flex-group flex-left">
           <span class="skill-name rollable" data-roll="{{skill.value}}" data-label="{{skill.name}}">
@@ -39,7 +39,7 @@ <h3 class="skill-title">{{localize "SVNSEA2E.Skills"}}</h3>
         </div>
       {{/each}}
     </div>
-    <div class="skills grid grid-3col">
+    <div class="skills-comment grid grid-3col">
       <div class="skill flexrow flex-group flex-left">{{localize "SVNSEA2E.SkillRank3"}}</div>
       <div class="skill flexrow flex-group flex-left">{{localize "SVNSEA2E.SkillRank4"}}</div>
       <div class="skill flexrow flex-group flex-left">{{localize "SVNSEA2E.SkillRank5"}}</div>