Initial downtime layout rework

lang/en.json

@@ -249,10 +249,10 @@
                 "title": "{actor} - Death Move"
             },
             "Downtime": {
-                "downtimeHeader": "Downtime Moves ({current}/{max})",
+                "downtimeHeader": "Downtime Activities",
                 "longRest": {
                     "title": "Long Rest",
-                    "moves": "Long Rest Moves ({current}/{max})",
+                    "moves": "Long Rest ({current}/{max})",
                     "clearStress": {
                         "description": "Describe how you blow off steam or pull yourself together, and clear all marked Stress.",
                         "name": "Clear Stress"
@@ -276,7 +276,7 @@
                 },
                 "shortRest": {
                     "title": "Short Rest",
-                    "moves": "Short Rest Moves ({current}/{max})",
+                    "moves": "Short Rest ({current}/{max})",
                     "tendToWounds": {
                         "name": "Tend to Wounds",
                         "description": "Describe how you hastily patch yourself up, then clear a number of Hit Points equal to 1d4 + your tier. You can do this to an ally instead."

module/applications/dialogs/downtime.mjs

@@ -45,7 +45,7 @@ export default class DhpDowntime extends HandlebarsApplicationMixin(ApplicationV
         super._attachPartListeners(partId, htmlElement, options);
 
         htmlElement
-            .querySelectorAll('.activity-image')
+            .querySelectorAll('.activity-select-section')
             .forEach(element => element.addEventListener('contextmenu', this.deselectMove.bind(this)));
     }
 
@@ -103,7 +103,7 @@ export default class DhpDowntime extends HandlebarsApplicationMixin(ApplicationV
     }
 
     deselectMove(event) {
-        const button = event.target.closest('.activity-image');
+        const button = event.target.closest('.activity-select-section');
         const move = button.dataset.move;
         this.moveData[button.dataset.category].moves[move].selected = this.moveData[button.dataset.category].moves[move]
             .selected

styles/less/dialog/downtime/downtime-container.less

@@ -2,67 +2,41 @@
 @import '../../utils/colors.less';
 
 .daggerheart.views {
-    .downtime-container {
+    .downtime-header {
-        .activity-container {
+        margin: 0;
-            display: flex;
+        color: light-dark(@dark-blue, @golden);
-            align-items: center;
+        text-align: center;
-            padding: 8px;
+        width: 100%;
+    }
 
-            .activity-title {
+    .downtime-container {
-                flex: 1;
+        .activities-container {
+            width: 100%;
+
+            .activity-container {
                 display: flex;
                 align-items: center;
+                justify-content: space-between;
+                padding: 8px;
 
-                .activity-title-text {
+                .activity-inner-container {
-                    font-size: 24px;
-                    font-weight: bold;
-                }
-
-                .activity-image {
-                    width: 80px;
-                    position: relative;
                     display: flex;
-                    justify-content: center;
+                    align-items: center;
-                    margin-right: 8px;
+                    gap: 4px;
-                    border: 2px solid black;
-                    border-radius: 50%;
-                    cursor: pointer;
 
-                    .activity-select-label {
+                    .activity-marker {
-                        position: absolute;
+                        font-size: 8px;
-                        top: -9px;
+                        flex: none;
-                        font-size: 14px;
+                        color: light-dark(#18162e, #f3c267);
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        margin-right: 8px;
-                        border-radius: 6px;
-                        color: light-dark(@beige, @dark);
-                        background-image: url(../assets/parchments/dh-parchment-light.png);
-                        padding: 0 8px;
-                        line-height: 1;
-                        font-weight: bold;
                     }
 
-                    img {
+                    .activity-select-section {
-                        border-radius: 50%;
+                        display: flex;
-                    }
+                        align-items: center;
-
+                        gap: 4px;
-                    &:hover,
-                    &.selected {
-                        filter: drop-shadow(0 0 6px gold);
                     }
                 }
-
-                .custom-name-input {
-                    font-size: 24px;
-                    font-weight: bold;
-                    padding: 0;
-                    background: transparent;
-                    color: rgb(239, 230, 216);
-                }
-            }
-
-            .activity-body {
-                flex: 1;
-                font-style: italic;
             }
         }
     }

templates/dialogs/downtime/activities.hbs

@@ -1,19 +1,18 @@
 <fieldset class="one-column">
     <legend>{{localize (concat "DAGGERHEART.APPLICATIONS.Downtime." category ".moves") max=nrChoices.max current=nrChoices.current}}</legend>
 
-    {{#each moves as |move key|}}
+    <div class="activities-container">   
-        <div class="activity-container">
+        {{#each moves as |move key|}}
-            <div class="activity-title">
+            <div class="activity-container">
-                <div class="activity-image {{#if move.selected}}selected{{/if}}" data-action="selectMove" data-category="{{../category}}" data-move="{{key}}">
+                <div class="activity-inner-container">
-                    {{#if move.selected}}<div class="activity-select-label">{{move.selected}}</div>{{/if}}
+                    <i class="fa-solid fa-circle activity-marker"></i>
-                    <img src="{{move.img}}" />
+                    <a class="activity-select-section" data-action="selectMove" data-category="{{../category}}" data-move="{{key}}">
+                        <i class="fa-solid fa-hammer activtiy-icon"></i>
+                        <div>{{move.name}}{{#if move.selected}} ({{move.selected}}){{/if}}</div>
+                    </a>
                 </div>
-
+                <a><i class="fa-solid fa-chevron-up expand-icon"></i></a>
-                <span class="activity-title-text">{{localize move.name}}</span>
             </div>
-            <div class="activity-body">
+        {{/each}}
-                {{localize move.description}}
+    </div>
-            </div>
-        </div>
-    {{/each}}
 </fieldset>

templates/dialogs/downtime/downtime.hbs

@@ -1,7 +1,8 @@
 <div>
-    <div class="downtime-container">
+    <h2 class="downtime-header">{{localize "DAGGERHEART.APPLICATIONS.Downtime.downtimeHeader"}}</h2>
+    <div class="downtime-container two-columns even">
         {{#if shortRestMoves.moves}}{{> "systems/daggerheart/templates/dialogs/downtime/activities.hbs" moves=shortRestMoves.moves category='shortRest' nrChoices=nrChoices.shortRest}}{{/if}}
-            {{#if longRestMoves.moves}}{{> "systems/daggerheart/templates/dialogs/downtime/activities.hbs" moves=longRestMoves.moves category='longRest' nrChoices=nrChoices.longRest}}{{/if}}
+        {{#if longRestMoves.moves}}{{> "systems/daggerheart/templates/dialogs/downtime/activities.hbs" moves=longRestMoves.moves category='longRest' nrChoices=nrChoices.longRest}}{{/if}}
     </div>
     <footer class="flexrow">
         <button type="button" data-action="close">{{localize "Cancel"}}</button>