Pixel perfect making of widget

robertraaijmakers · Feb 24, 2025 · a487f0e · a487f0e
1 parent 74033d5
commit a487f0e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git 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,15 +80,15 @@
         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);
         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);
         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 */
       }
     </style>
   </head>

diff --git 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<TrashType, string> = {} as Record<TrashType, string>;
       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 += `
           <div class="trash-item-container ${highlightTile ? 'trash-item-container-highlight' : ''}">
@@ -79,7 +82,8 @@ class WidgetScript {
             ${trashItem.isCleaned ? '<span class="cleaning-icon">🫧</span>' : ''}
           </div>`;
         } 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 });