[Fix] selecting multiclass and multiple sheet issues (#1884)

* Fix error with adding multiclass

* Make it more card like

* Fix issues with responsiveness when resized

* Fix cards spilling out of container when multiple lines

* Remove mask and fix regression in scrollbar

module/applications/levelup/characterLevelup.mjs

@@ -156,6 +156,7 @@ export default class DhCharacterLevelUp extends LevelUpBase {
                 if (multiclasses?.[0]) {
                     const data = multiclasses[0];
                     const multiclass = data.data.length > 0 ? await foundry.utils.fromUuid(data.data[0]) : {};
+                    const subclasses = (await multiclass?.system?.fetchSubclasses()) ?? [];
 
                     context.multiclass = {
                         ...data,
@@ -175,13 +176,12 @@ export default class DhCharacterLevelUp extends LevelUpBase {
                                         alreadySelected
                                 };
                             }) ?? [],
-                        subclasses:
+                        subclasses: subclasses.map(subclass => ({
-                            multiclass?.system?.subclasses.map(subclass => ({
                             ...subclass,
                             uuid: subclass.uuid,
                             selected: data.secondaryData.subclass === subclass.uuid,
                             disabled: data.secondaryData.subclass && data.secondaryData.subclass !== subclass.uuid
-                            })) ?? [],
+                        })),
                         compendium: 'classes',
                         limit: 1
                     };

styles/less/dialog/character-creation/selections-container.less

@@ -114,9 +114,6 @@
 
             .card-preview-container {
                 flex: 1;
-            }
-
-            .card-preview-container {
                 border-color: light-dark(@dark-blue, @golden);
             }
 

styles/less/dialog/index.less

@@ -1,10 +1,5 @@
 @import './attribution/sheet.less';
-@import './level-up/navigation-container.less';
+@import './level-up/index.less';
-@import './level-up/selections-container.less';
-@import './level-up/sheet.less';
-@import './level-up/summary-container.less';
-@import './level-up/tiers-container.less';
-@import './level-up/footer.less';
 
 @import './resource-dice/sheet.less';
 

styles/less/dialog/level-up/index.less

@@ -0,0 +1,6 @@
+@import './navigation-container.less';
+@import './selections-container.less';
+@import './summary-container.less';
+@import './tiers-container.less';
+@import './footer.less';
+@import './sheet.less';

styles/less/dialog/level-up/selections-container.less

@@ -3,10 +3,7 @@
 
 .daggerheart.levelup {
     .levelup-selections-container {
-        overflow: auto;
         padding: 10px 0;
-        max-height: 500px;
-        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
 
         .achievement-experience-cards {
             display: flex;
@@ -43,20 +40,22 @@
 
         .levelup-card-selection {
             display: flex;
-            flex-wrap: wrap;
             justify-content: center;
             gap: 40px;
             height: 190px;
+            align-items: stretch;
 
             .card-preview-container {
-                height: 100%;
+                height: 190px;
                 max-width: 200px;
             }
 
             .levelup-domains-selection-container {
-                display: flex;
+                display: grid;
-                flex-direction: column;
+                grid-auto-flow: column;
-                gap: 8px;
+                grid-template-rows: repeat(2, minmax(0, 1fr));
+                height: 100%;
+                gap: 4px;
 
                 .levelup-domain-selection-container {
                     display: flex;
@@ -64,6 +63,8 @@
                     align-items: center;
                     position: relative;
                     cursor: pointer;
+                    overflow: hidden;
+                    width: 93px;
 
                     &.disabled {
                         pointer-events: none;
@@ -72,16 +73,20 @@
 
                     .levelup-domain-label {
                         position: absolute;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
                         text-align: center;
-                        top: 4px;
                         background: grey;
-                        padding: 0 12px;
+                        padding: 2px 12px;
-                        border-radius: 6px;
                         z-index: 2;
+                        line-height: 1;
                     }
 
                     img {
-                        height: 124px;
+                        object-fit: cover;
+                        width: auto;
+                        height: auto;
 
                         &.svg {
                             filter: @beige-filter;
@@ -90,17 +95,18 @@
 
                     .levelup-domain-selected {
                         position: absolute;
-                        height: 54px;
+                        height: 40px;
-                        width: 54px;
+                        width: 40px;
                         border-radius: 50%;
-                        border: 2px solid;
+                        border: 2px solid @golden;
-                        font-size: var(--font-size-48);
+                        font-size: var(--font-size-24);
                         display: flex;
                         align-items: center;
                         justify-content: center;
-                        background-image: url(../assets/parchments/dh-parchment-light.png);
+                        background: @dark-golden;
-                        color: var(--color-dark-5);
+                        color: @golden;
-                        top: calc(50% - 29px);
+                        top: 10px;
+                        z-index: 2;
 
                         i {
                             position: relative;

styles/less/dialog/level-up/sheet.less

@@ -11,9 +11,11 @@
 });
 
 .daggerheart.levelup {
-    .window-content {
+    .tab.active {
-        max-height: 960px;
+        flex: 1;
         overflow: auto;
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
     }
 
     div[data-application-part='form'] {
@@ -22,7 +24,6 @@
         gap: 8px;
     }
 
-    section {
     .section-container {
         display: flex;
         flex-direction: row;
@@ -31,7 +32,6 @@
         margin-top: 8px;
         flex-wrap: wrap;
     }
-    }
 
     .levelup-footer {
         display: flex;

styles/less/global/elements.less

@@ -802,6 +802,7 @@
 
         .preview-image-container {
             width: 100%;
+            min-height: 0;
             flex-grow: 1;
             object-fit: cover;
             border-radius: 4px 4px 0 0;

templates/levelup/tabs/selections.hbs

@@ -43,45 +43,6 @@
             </fieldset>
         {{/if}}
 
-        {{#if (gt this.domainCards.length 0)}}
-            <div class="card-section">
-                <div class="card-section-header">
-                    <side-line-div class="invert"></side-line-div>
-                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h3>
-                    <side-line-div></side-line-div>
-                </div>
-                <div class="tip">
-
-                </div>
-
-                <div class="levelup-card-selection domain-cards">
-                    {{#each this.domainCards}}
-                        {{#> "systems/daggerheart/templates/components/card-preview.hbs" this }}
-                            {{#each this.emptySubtexts}}
-                                <div class="">{{this}}</div>
-                            {{/each}}
-                        {{/"systems/daggerheart/templates/components/card-preview.hbs"}}
-                    {{/each}}
-                </div>
-            </div>
-        {{/if}}
-
-        {{#if (gt this.subclassCards.length 0)}}
-            <div class="card-section">
-                <div class="card-section-header">
-                    <side-line-div class="invert"></side-line-div>
-                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h3>
-                    <side-line-div></side-line-div>
-                </div>
-
-                <div class="levelup-card-selection subclass-cards">
-                    {{#each this.subclassCards}}
-                        {{> "systems/daggerheart/templates/levelup/parts/selectable-card-preview.hbs" img=this.img header=this.featureLabel name=this.name path=this.path selected=this.selected uuid=this.uuid isMulticlass=this.isMulticlass featureState=this.featureState disabled=this.disabled }}
-                    {{/each}}
-                </div>
-            </div>
-        {{/if}}
-
         {{#if this.multiclass}}
             <div class="card-section">
                 <div class="card-section-header">
@@ -128,6 +89,45 @@
             </div>
         {{/if}}
 
+        {{#if (gt this.domainCards.length 0)}}
+            <div class="card-section">
+                <div class="card-section-header">
+                    <side-line-div class="invert"></side-line-div>
+                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h3>
+                    <side-line-div></side-line-div>
+                </div>
+                <div class="tip">
+
+                </div>
+
+                <div class="levelup-card-selection domain-cards">
+                    {{#each this.domainCards}}
+                        {{#> "systems/daggerheart/templates/components/card-preview.hbs" this }}
+                            {{#each this.emptySubtexts}}
+                                <div class="">{{this}}</div>
+                            {{/each}}
+                        {{/"systems/daggerheart/templates/components/card-preview.hbs"}}
+                    {{/each}}
+                </div>
+            </div>
+        {{/if}}
+
+        {{#if (gt this.subclassCards.length 0)}}
+            <div class="card-section">
+                <div class="card-section-header">
+                    <side-line-div class="invert"></side-line-div>
+                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h3>
+                    <side-line-div></side-line-div>
+                </div>
+
+                <div class="levelup-card-selection subclass-cards">
+                    {{#each this.subclassCards}}
+                        {{> "systems/daggerheart/templates/levelup/parts/selectable-card-preview.hbs" img=this.img header=this.featureLabel name=this.name path=this.path selected=this.selected uuid=this.uuid isMulticlass=this.isMulticlass featureState=this.featureState disabled=this.disabled }}
+                    {{/each}}
+                </div>
+            </div>
+        {{/if}}
+
         {{#if this.vicious}}
             <div>
                 <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.vicious"}}</h3>