Personal Updates for v10

[OpticalShadows]

Below is a list of Personal Updates made for v10

These are in .js not .ts and css not scss Its hard for me to tell exactly what css has been changed because of the way it's broken out in scss so I've attached an image to show what it's supposed to look like:

----- Modified the Exhaustion tracker to be a button style selection: ----- Updates to foundryvtt-compactBeyond5eSheet.js

/* ========== New Exhaustion tracker ============= */
    activateListeners(html){
        log(true, 'activating Listeners');
        super.activateListeners(html);

        let actor = this.actor;

        html.find(".exhaustion-levels li").click(async(event) =>{
            event.preventDefault();
            let target = event.currentTarget;
            target.classList.add('selected');
            let value = Number(target.dataset.elev);
            await actor.update({ "system.attributes.exhaustion": value });
            log(true, 'Exhaustion:' + value)
        });
    }

Updates to actor-traits.hbs:

{{!Exhaustion Tracker}}
  <div class="form-group" {{system.attributes.exhaustion}}>
    <label>{{localize "DND5E.Exhaustion"}}</label>
    <ul class="exhaustion-levels level-{{system.attributes.exhaustion}}">
      <li data-elev="0">0</li>
      <li data-elev="1">1</li>
      <li data-elev="2">2</li>
      <li data-elev="3">3</li>
      <li data-elev="4">4</li>
      <li data-elev="5">5</li>
      <li data-elev="6">6</li>
    </ul>
  </div>

Remove the old tracker:

  <div class="form-group {{#unless data.attributes.exhaustion}}inactive{{/unless}}">
    <label>{{localize "DND5E.Exhaustion"}}</label>
    <input type="text" name="data.attributes.exhaustion" data-dtype="Number" placeholder="0"
      value="{{data.attributes.exhaustion}}" />
  </div>

CSS Added to Sidebar section:

/* Exhaustion Tracker */ 
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels{
  list-style:none;
  display:flex;
  margin: 0;
  padding: 0 0 0 10px;
  width: 100%;
  justify-content: space-evenly;
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels li{
  flex:0 0 15%;
  cursor:pointer;
  display:flex;
  justify-content: center;
  border-radius: 5px;
  font-family: 'Modesto Condensed';
  font-size: 14px;
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels li:hover{
    background: var(--color-text-hyperlink) !important;
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels.level-0 li:nth-of-type(1){
    border: 1px solid    var(--color-text-hyperlink);
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels.level-1 li:nth-of-type(2){
  border: 1px solid var(--color-text-hyperlink);
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels.level-2 li:nth-of-type(3){
  border: 1px solid var(--color-text-hyperlink);
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels.level-3 li:nth-of-type(4){
  border: 1px solid var(--color-text-hyperlink);
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels.level-4 li:nth-of-type(5){
  border: 1px solid var(--color-text-hyperlink);
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels.level-5 li:nth-of-type(6){
  border: 1px solid var(--color-text-hyperlink);
}
.dnd5e.sheet.actor.character.cb5es .traits .exhaustion-levels.level-6 li:nth-of-type(7){
  border: 1px solid var(--color-text-hyperlink);
}

-----Modified Header for non redundant Bio Tab----- sheet-header.hbs:

  <section class="header-details">
      <section class="header-details-sub">
    <h1><input name="name" type="text" value="{{actor.name}}" placeholder="Character Name"></h1>
        <span class="non-editable">{{ localize "DND5E.Level" }} {{system.details.level}} {{ classLabels }}</span>
    </section>
    {{!-- Character Summary --}}
    <ul class="inline-summary">
      <li>
        <input type="text" name="system.details.race" value="{{system.details.race}}"
          placeholder="{{ localize 'DND5E.Race' }}" />
        <span class="hidden">{{#if system.details.race}}{{system.details.race}}{{else}}{{ localize 'DND5E.Race'
          }}{{/if}}</span>
      </li>
    </ul>

    {{#unless disableExperience}}
    <aside class="header-exp flexcol">
      <div class="xpbar">
        <span class="bar" style="width: {{system.details.xp.pct}}%"></span>
      </div>
      <div class="experience flexrow">

        <span class="left-label">{{ localize "DND5E.Level" }} {{system.details.level}}</span>

        <input name="system.details.xp.value" type="text" value="{{system.details.xp.value}}" data-dtype="Number"
          placeholder="0" />
        <span class="sep">/</span>
        <span class="max">{{system.details.xp.max}}</span>

        <span class="right-label">{{ localize "DND5E.Level" }} {{cb5es-add system.details.level 1}}</span>
      </div>
    </aside>
    {{/unless}}

Css header section:

.dnd5e.sheet.actor.character.cb5es .inline-summary {
  color: var(--accent-text);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
}
.dnd5e.sheet.actor.character.cb5es .inline-summary > :not(:last-child) {
  margin-right: 0.2em;
}
.dnd5e.sheet.actor.character.cb5es .inline-summary li {
  position: relative;
  width: max-content;
  padding: 0;
  margin: 0;
}
.dnd5e.sheet.actor.character.cb5es .inline-summary li .hidden {
  border: 1px solid transparent;
  opacity: 0;
  pointer-events: none;
}
.dnd5e.sheet.actor.character.cb5es .inline-summary li input {
  bottom: 0;
  color: inherit;
  font-weight: inherit;
  height: 100%;
  left: 0;
  padding: 0;
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
  border-color: var(--groove-gray);
  border: 2px groove;
  border-top: 0px;
  border-right: none;
  border-bottom: 0px;
  border-radius: 0;
}
.dnd5e.sheet.actor.character.cb5es .inline-summary li .non-editable {
  border: 1px solid transparent;
  display: block;
  width: 100%;
}

----- Fix for Features list ----- Replaced all code in actor-features.hbs after line 12

<ol class="items-list inventory-list">
{{#each sections as |section sid|}}
    <li class="items-header flexrow">
        <h3 class="item-name flexrow">{{localize section.label}}</h3>

        {{#if section.hasActions}}
        <div class="item-detail item-uses">{{localize "DND5E.Uses"}}</div>
        <div class="item-detail item-action">{{localize "DND5E.Usage"}}</div>
        {{/if}}

        {{#if section.columns}}
            {{#each section.columns}}
                <div class="item-detail {{css}}">{{label}}</div>
            {{/each}}
        {{/if}}

        {{#if ../owner}}
        <div class="item-controls">
          <a class="item-control item-create" title="{{localize 'DND5E.FeatureAdd'}}" {{#each section.dataset as |v
            k|}}data-{{k}}="{{v}}" {{/each}}>
            <i class="fas fa-plus"></i> {{localize "DND5E.Add"}}
          </a>
        </div>
       {{/if}}
    </li>

    <ol class="item-list">
    {{#each section.items as |item iid|}}
        <li class="item flexrow {{#if isDepleted}}depleted{{/if}}" data-item-id="{{item._id}}">
            <div class="item-name flexrow rollable">
                <div class="item-image" tabindex="0" role="button" aria-label="{{item.name}}" style="background-image: url('{{item.img}}')"></div>
                <h4>
                    {{#if (eq item.type "subclass")}}&rdsh;{{/if}}
                    {{item.name}}
                    {{#if item.system.isOriginalClass}} <i class="original-class fas fa-sun" title="{{localize 'DND5E.ClassOriginal'}}"></i>{{/if}}
                </h4>
            </div>

            {{#if section.hasActions}}
            <div class="item-detail item-uses">
                {{#if item.isOnCooldown}}
                    <a class="item-recharge rollable">{{item.labels.recharge}}</a>
                {{else if item.system.recharge.value}}
                    {{localize "DND5E.Charged"}}
                {{else if item.hasUses}}
                    <input type="text" value="{{item.system.uses.value}}" placeholder="0"/>/ {{item.system.uses.max}}
                {{/if}}
            </div>
            <div class="item-detail item-action">
                {{#if item.system.activation.type}}
                    {{item.labels.activation}}
                {{/if}}
            </div>

            {{else if (eq item.type "class")}}
            <div class="item-detail item-action">
                <select class="level-selector">
                    {{#select 0}}
                    {{#each item.availableLevels}}
                        <option value="{{this.delta}}" {{disabled this.disabled}}>
                            {{localize "DND5E.LevelNumber" level=this.level}}
                            {{#if this.delta}}({{numberFormat this.delta sign=true}}){{/if}}
                        </option>
                    {{/each}}
                    {{/select}}
                </select>
            </div>
            {{/if}}

            {{#if section.columns}}
                {{#each section.columns}}
                    <div class="item-detail {{css}}">
                        {{#if editable}}
                            <input type="text" value="{{getProperty item property}}" placeholder="&mdash;"
                                   data-dtype="{{editable}}">
                        {{else}}
                            {{getProperty item property}}
                        {{/if}}
                    </div>
                {{/each}}
            {{/if}}

            {{#if ../../owner}}
            <div class="item-controls">
                {{#if section.crewable}}
                <a class="item-control item-toggle {{item.toggleClass}}"
                   title="{{item.toggleTitle}}">
                    <i class="fas fa-sun"></i>
                </a>
                {{/if}}
                <a class="item-control item-edit" title="{{localize 'DND5E.ItemEdit'}}"><i class="fas fa-edit"></i></a>
                <a class="item-control item-delete" title="{{localize 'DND5E.ItemDelete'}}"><i class="fas fa-trash"></i></a>
            </div>
            {{/if}}
        </li>
    {{/each}}
    </ol>
{{/each}}
</ol>

----- Fix for Spells List ----- Changes at line 102-115 in actor-spellbook.hbs:

      <div class="spell-comps">
         {{#each labels.components.all}}
         <span class="spell-component{{#if tag}} tag{{/if}}">{{abbr}}</span>
         {{/each}}
      </div>

----- Changes to Biography Tab----- Changes to character-sheet.hbs line 120:

{{!-- Biography Tab --}}
      <div class="tab flexcol" data-group="primary" data-tab="biography">
        <div class="characteristics flexrow">

          {{!-- Alignment --}}
          <ul class="character-details">
            <li><span>Alignment</span></li>
            <li>
              <select class="actor-size" name="system.details.alignment" value="system.details.alignment">
              {{#select system.details.alignment}}
              <option value="Chaotic Evil" label="Chaotic Evil"></option>
              <option value="Chaotic Neutral" label="Chaotic Neutral"></option> 
              <option value="Chaotic Good" label="Chaotic Good"></option>
              <option value="Neutral Evil" label="Neutral Evil"></option>
              <option value="True Neutral" label="True Neutral"></option>
              <option value="Neutral Good" label="Neutral Good"></option>
              <option value="Lawful Evil" label="Lawful Evil"></option>  
              <option value="Lawful Neutral" label="Lawful Neutral"></option>
              <option value="Lawful Good" label="Lawful Good"></option>
              {{/select}}           
            </select>
            </li>
          </ul>

          {{!-- Gender --}}
            <ul class="character-details">
            <li>
              <span>Gender</span>
            </li>
            <li>
              <input type="text" data-input="{{actor.id}}-gender" name="system.details.gender" value="{{system.details.gender}}">
            </li>
          </ul>   

          {{!-- Eyes --}}     
           <ul class="character-details">
            <li>
              <span>Eyes</span>
            </li>
            <li>
              <input type="text" data-input="{{actor.id}}-eyes" name="system.details.eyes" value="{{system.details.eyes}}">
            </li>
          </ul>

          {{!-- Size --}}
          <ul class="character-details">
            <li><span>{{localize "DND5E.Size"}}</span></li>
            <li>
              <select class="actor-size" name="system.traits.size">
                {{#select system.traits.size}}
                {{#each config.actorSizes as |label size|}}
                <option value="{{size}}">{{label}}</option>
                {{/each}}
                {{/select}}
              </select>
            </li>
          </ul>

          {{!-- Height --}}
          <ul class="character-details">
            <li><span>Height</span></li>
            <input type="text" data-input="{{actor.id}}-height" name="system.details.height" value="{{system.details.height}}">
          </ul>

          {{!-- Faith --}}
          <ul class="character-details">
            <li><span>Faith</span></li>
            <li><input type="text" data-input="{{actor.id}}-faith" name="system.details.faith" value="{{system.details.faith}}"></li>
          </ul>

          {{!-- Hair --}}
          <ul class="character-details">
            <li><span>Hair</span></li>
            <input type="text" data-input="{{actor.id}}-weight" name="system.details.hair" value="{{system.details.hair}}">
          </ul>

          {{!-- Skin --}}
          <ul class="character-details">
            <li><span>Skin</span></li>
            <input type="text" data-input="{{actor.id}}-skin" name="system.details.skin" value="{{system.details.skin}}">
          </ul>

          {{!-- Age --}}
          <ul class="character-details">
            <li><span>Age</span></li>
            <input type="text" data-input="{{actor.id}}-age" name="system.details.age" value="{{system.details.age}}">
          </ul>

          {{!-- Weight --}}
          <ul class="character-details">
            <li><span>Weight</span></li>
            <input type="text" data-input="{{actor.id}}-weight" name="system.details.weight" value="{{system.details.weight}}">
          </ul>

      </li>
          </ul>
        </div>
        <div class="flexrow">
            <div class="characteristics flexcol">
                <label>{{ localize "DND5E.PersonalityTraits" }}</label>
                <textarea name="system.details.trait">{{system.details.trait}}</textarea>
                <label>{{ localize "DND5E.Ideals" }}</label>
                <textarea name="system.details.ideal">{{system.details.ideal}}</textarea>
                <label>{{ localize "DND5E.Bonds" }}</label>
                <textarea name="system.details.bond">{{system.details.bond}}</textarea>
                <label>{{ localize "DND5E.Flaws" }}</label>
                <textarea name="system.details.flaw">{{system.details.flaw}}</textarea>
                <label>{{ localize "DND5E.Appearance" }}</label>
                <textarea name="system.details.appearance">{{system.details.appearance}}</textarea>
            </div>
            <div class="characteristics-backstory flexcol">
                <label>Backstory</label>
                {{editor biographyHTML target="system.details.biography.value" button=true editable=editable
                         engine="prosemirror" collaborate=false}}
            </div>
        </div>
        </div>  
        </section>
      </div>

Changes to css:

.dnd5e.sheet.actor.character .characteristics-backstory label{
  flex: 0 0 20px;
  font-family: "Modesto Condensed", "Palatino Linotype", serif;
  font-size: 20px;
  font-weight: 700;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
}
.dnd5e.sheet.actor.character .character-details{
  list-style:none;
  font-family: "Modesto Condensed", "Palatino Linotype", serif;
  font-size: 14px;
  /* position: relative; */
  margin: 0;
  padding: 0;
  flex: 1 1 20%;
}
.dnd5e.sheet.actor.character .character-details input{
  width: 90%;
  height: fit-content;
  /* padding:0; */
  background:rgba(0,0,0,0.05);
  border-color: var(--app-dialog-background-shaded);
  font-family: var(--font-primary);
  font-size: 12px;
}
.dnd5e.sheet.actor.character .character-details select{
  background:rgba(0,0,0,0.05);
  border-color: var(--app-dialog-background-shaded);
  font-family: var(--font-primary);
  font-size: 12px;
  height:auto;
  padding: 0;
  width: 90%;
  flex: 1 1 20%;
}