diff --git a/widgets/trash-reminder-list/public/index.html b/widgets/trash-reminder-list/public/index.html index 6900a62..45368dd 100644 --- a/widgets/trash-reminder-list/public/index.html +++ b/widgets/trash-reminder-list/public/index.html @@ -12,15 +12,17 @@ max-width: 22%; display: flex; flex-direction: column; /* Ensures elements inside stack vertically */ - align-items: center; /* Center items horizontally within the container */ - text-align: center; /* Ensures text aligns in the center */ + align-items: left; /* Center items horizontally within the container */ + text-align: left; /* Ensures text aligns in the center */ - margin: 0px 0px var(--homey-su-3) 0px; /* Add some spacing between items */ + margin: 0px 0px var(--homey-su-4) 0px; /* Add some spacing between items */ box-sizing: border-box; - padding: var(--homey-su) var(--homey-su-2); + padding: var(--homey-su-2) var(--homey-su-2); border-radius: var(--homey-border-radius-default); box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.08),0 2px 4px 0 rgba(0,0,0, 0.08),0 0 1px 1px rgba(255,255,255, 0.08); + height: 100px; + position: relative; } @@ -51,8 +53,8 @@ } .dot-large { - height: 50px; - width: 50px; + height: 35px; + width: 35px; background-color: #bbb; border-radius: 50%; font-weight: bold; @@ -63,8 +65,8 @@ } .dot-large img { - width: 75%; - height: 75%; + width: 70%; + height: 70%; } .trash-date { @@ -78,7 +80,8 @@ align-items: center; /* Vertically center the dot and text */ justify-content: flex-start; /* Align items to the left */ width: 48%; /* Each container takes about half the width */ - margin: 0px 0px var(--homey-su-2) 0px; /* Add some spacing between items */ + height: 45px; + margin: 0px 0px var(--homey-su-3) 0px; /* Add some spacing between items */ box-sizing: border-box; padding: var(--homey-su) var(--homey-su-2); border-radius: var(--homey-border-radius-default); @@ -86,7 +89,6 @@ position: relative; } - /* Dot styling - aligned to the left */ .dot-compact { width: 28px; height: 28px; @@ -111,7 +113,6 @@ margin-top: 5px; } - /* Title and subtitle styling */ .trash-date-title { margin: 0; font-weight: var(--homey-font-weight-medium); @@ -120,8 +121,21 @@ } .trash-date-subtitle { - margin: 0; + margin: 2 0; font-size: 11px; + line-height: var(--homey-font-size-small); + color: var(--homey-color-mono-600); + } + + .trash-item-container .trash-date-subtitle { + margin-top: auto; + font-weight: var(--homey-font-weight-light); + font-size: var(--homey-font-size-small); + line-height: var(--homey-font-size-small); + } + + .trash-item-container.trash-item-container-highlight .trash-date-subtitle { + color: var(--homey-color-mono-1000); } .dot-type-GFT { @@ -172,14 +186,14 @@ .cleaning-icon { position: absolute; /* Position relative to the container */ - top: 5px; /* Adjust distance from the top */ - right: 5px; /* Adjust distance from the right */ - font-size: 32px; /* Adjust the size */ + top: var(--homey-su-2); /* Adjust distance from the top */ + right: var(--homey-su-2); /* Adjust distance from the right */ + font-size: 25px; /* Adjust the size */ color: green; /* Icon color */ } .trash-item-container-compact .cleaning-icon { - font-size: 28px; /* Adjust the size */ + font-size: 22px; /* Adjust the size */ } diff --git a/widgets/trash-reminder-list/public/index.mts b/widgets/trash-reminder-list/public/index.mts index 65faa3f..76168aa 100644 --- a/widgets/trash-reminder-list/public/index.mts +++ b/widgets/trash-reminder-list/public/index.mts @@ -39,7 +39,8 @@ class WidgetScript { tbody.innerHTML = ''; let counter = 0; - let rowHeight = 95; + let rowHeight = 100; + let rowMargin = 20; let usedTypes: Record = {} as Record; let itemsPerRow = 4; @@ -71,6 +72,8 @@ class WidgetScript { ? `style="background-color: ${trashItem.color || trashItem.settingColor}"` : `style="background-color: ${trashItem.settingColor}"`; + trashItem.isCleaned = true; + if (this.settings.layoutType === 'large') { tbody.innerHTML += `
@@ -79,7 +82,8 @@ class WidgetScript { ${trashItem.isCleaned ? '🫧' : ''}
`; } else { - rowHeight = 57; + rowHeight = 47; + rowMargin = 12; itemsPerRow = 2; tbody.innerHTML += ` @@ -115,7 +119,7 @@ class WidgetScript { dBody.classList.add('my-custom-body-overflow-hidden'); // Make the widget not overflow } - this.homey.ready({ height: this.settings.listHeight * rowHeight + (this.settings.listHeight - 1 * 10) }); + this.homey.ready({ height: this.settings.listHeight * rowHeight + (this.settings.listHeight - 1) * rowMargin }); } catch (error) { this.homey.ready({ height: 200 });