Skip to content

Commit bd08898

Browse files
forketyforkforketyfork
committed
Fixing styles and the modal layout
1 parent fff7232 commit bd08898

File tree

5 files changed

+81
-90
lines changed

5 files changed

+81
-90
lines changed

‎NutrientModal.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,10 @@ export default class NutrientModal extends Modal {
7979
// Apply initial modal styling
8080
this.modalEl.addClass("nutrient-modal");
8181

82-
contentEl.createEl("h2", { text: "🍎 Add nutrient" });
83-
8482
// Create main container for side-by-side layout
8583
this.mainContainer = contentEl.createDiv({ cls: "nutrient-modal-main" });
8684
this.formContainer = this.mainContainer.createDiv({ cls: "nutrient-form-container" });
85+
this.formContainer.appendChild(contentEl.createEl("h2", { text: "🍎 Add nutrient" }));
8786

8887
// Always create the search results container to maintain layout
8988
this.searchResultsEl = this.mainContainer.createDiv({ cls: "search-results-container" });
@@ -137,8 +136,7 @@ export default class NutrientModal extends Modal {
137136
});
138137
});
139138

140-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
141-
new Setting(this.formContainer!)
139+
new Setting(this.formContainer)
142140
.addButton(button =>
143141
button
144142
.setButtonText("Create")

‎NutritionTotal.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -245,21 +245,27 @@ export default class NutritionTotal {
245245

246246
// Green if within 10% of goal (0.9 to 1.1), red if over, yellow if under
247247
const colorClass =
248-
ratio >= 0.9 && ratio <= 1.1 ? "ft-progress-green" : ratio > 1.1 ? "ft-progress-red" : "ft-progress-yellow";
248+
ratio >= 0.9 && ratio <= 1.1
249+
? "food-tracker-progress-green"
250+
: ratio > 1.1
251+
? "food-tracker-progress-red"
252+
: "food-tracker-progress-yellow";
249253

250254
const goalTooltipText = `${config.name}: ${formattedValue} ${config.unit} (${percent}% of ${goal} ${config.unit} goal)`;
251255
parts.push(
252-
`<span class="ft-progress ft-nutrient-item ${colorClass}" style="--ft-progress-percent:${percent}%" title="${goalTooltipText}">${config.emoji}</span>`
256+
`<span class="food-tracker-progress food-tracker-nutrient-item food-tracker-tooltip-host ${colorClass}" style="--food-tracker-progress-percent:${percent}%" data-tooltip="${goalTooltipText}">${config.emoji}</span>`
253257
);
254258
} else {
255-
parts.push(`<span class="ft-nutrient-item" title="${tooltipText}">${config.emoji}</span>`);
259+
parts.push(
260+
`<span class="food-tracker-nutrient-item food-tracker-tooltip-host" data-tooltip="${tooltipText}">${config.emoji}</span>`
261+
);
256262
}
257263
}
258264
}
259265

260266
if (parts.length === 0) return "";
261267

262268
// Add the Food Tracker icon to the left of the nutrition bar
263-
return `<div class="ft-nutrition-bar">${FOOD_TRACKER_ICON}<div class="ft-separator"></div>${parts.join('<div class="ft-separator"></div>')}</div>`;
269+
return `<div class="food-tracker-nutrition-bar">${FOOD_TRACKER_ICON}<div class="food-tracker-separator"></div>${parts.join('<div class="food-tracker-separator"></div>')}</div>`;
264270
}
265271
}

‎__tests__/NutritionTotal.test.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe("NutritionTotal", () => {
2121
expect(result).toBe("");
2222
return;
2323
}
24-
expect(result).toContain("ft-nutrition-bar");
24+
expect(result).toContain("food-tracker-nutrition-bar");
2525
expect(extractEmojis(result)).toBe(expectedEmojis);
2626
};
2727

@@ -481,44 +481,44 @@ End of day`;
481481
mockGetNutritionData.mockReturnValue({ fats: 45 });
482482
const content = "#food [[food]] 100g";
483483
const result = nutritionTotal.calculateTotalNutrients(content, "food", false, goals);
484-
expect(result).toContain("ft-progress-green");
485-
expect(result).toContain("--ft-progress-percent:90%");
484+
expect(result).toContain("food-tracker-progress-green");
485+
expect(result).toContain("--food-tracker-progress-percent:90%");
486486
});
487487

488488
test("adds progress bar with green color when within 10% of goal (above)", () => {
489489
const goals = { fats: 50 };
490490
mockGetNutritionData.mockReturnValue({ fats: 55 });
491491
const content = "#food [[food]] 100g";
492492
const result = nutritionTotal.calculateTotalNutrients(content, "food", false, goals);
493-
expect(result).toContain("ft-progress-green");
494-
expect(result).toContain("--ft-progress-percent:100%");
493+
expect(result).toContain("food-tracker-progress-green");
494+
expect(result).toContain("--food-tracker-progress-percent:100%");
495495
});
496496

497497
test("adds progress bar with green color when exactly at goal", () => {
498498
const goals = { fats: 50 };
499499
mockGetNutritionData.mockReturnValue({ fats: 50 });
500500
const content = "#food [[food]] 100g";
501501
const result = nutritionTotal.calculateTotalNutrients(content, "food", false, goals);
502-
expect(result).toContain("ft-progress-green");
503-
expect(result).toContain("--ft-progress-percent:100%");
502+
expect(result).toContain("food-tracker-progress-green");
503+
expect(result).toContain("--food-tracker-progress-percent:100%");
504504
});
505505

506506
test("adds progress bar with red color when exceeding goal by more than 10%", () => {
507507
const goals = { carbs: 30 };
508508
mockGetNutritionData.mockReturnValue({ carbs: 40 }); // 133% of goal
509509
const content = "#food [[food]] 100g";
510510
const result = nutritionTotal.calculateTotalNutrients(content, "food", false, goals);
511-
expect(result).toContain("ft-progress-red");
512-
expect(result).toContain("--ft-progress-percent:100%");
511+
expect(result).toContain("food-tracker-progress-red");
512+
expect(result).toContain("--food-tracker-progress-percent:100%");
513513
});
514514

515515
test("adds progress bar with yellow color when below 90% of goal", () => {
516516
const goals = { carbs: 100 };
517517
mockGetNutritionData.mockReturnValue({ carbs: 80 }); // 80% of goal
518518
const content = "#food [[food]] 100g";
519519
const result = nutritionTotal.calculateTotalNutrients(content, "food", false, goals);
520-
expect(result).toContain("ft-progress-yellow");
521-
expect(result).toContain("--ft-progress-percent:80%");
520+
expect(result).toContain("food-tracker-progress-yellow");
521+
expect(result).toContain("--food-tracker-progress-percent:80%");
522522
});
523523
});
524524
});

‎icon.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Food Tracker plugin icon
2-
export const FOOD_TRACKER_ICON = `<span class="ft-icon" title="Food Tracker"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
2+
export const FOOD_TRACKER_ICON = `<span class="food-tracker-icon food-tracker-tooltip-host" data-tooltip="Food Tracker"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
33
<svg
44
version="1.1"
55
x="0px"

‎styles.src.css‎

Lines changed: 57 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.food-tracker-total {
22
position: sticky;
33
bottom: 0;
4-
background-color: var(--background-primary);
4+
background-color: var(--background-secondary);
55
border-top: 1px solid var(--background-modifier-border);
66
padding: 8px 16px;
77
font-size: 0.9em;
8-
z-index: 100;
8+
z-index: 1000;
99
margin-top: 8px;
1010
}
1111

@@ -14,13 +14,13 @@
1414
transition:
1515
width 0.3s ease-in-out,
1616
max-width 0.3s ease-in-out;
17-
width: 490px;
18-
max-width: 490px;
17+
width: min(490px, 90vw);
18+
max-width: min(490px, 90vw);
1919
}
2020

2121
.nutrient-modal-expanded {
22-
width: 920px;
23-
max-width: 920px;
22+
width: min(920px, 95vw);
23+
max-width: min(920px, 95vw);
2424
}
2525

2626
.nutrient-modal .modal-content {
@@ -35,17 +35,22 @@
3535

3636
.nutrient-form-container {
3737
flex: 0 0 450px;
38-
min-width: 450px;
38+
max-width: 450px;
39+
min-width: min(450px, 50vw);
3940
padding-right: 20px;
4041
}
4142

4243
.search-results-container {
43-
flex: 0 0 400px;
44-
min-width: 400px;
44+
flex: 1;
45+
min-width: min(300px, 40vw);
46+
max-width: 500px;
47+
display: flex;
48+
flex-direction: column;
49+
align-self: flex-start;
50+
height: 100%;
4551
}
4652

47-
.search-results-container:not([style*="display: none"]) {
48-
opacity: 0;
53+
.search-results-container.is-visible {
4954
animation: fadeInRight 0.4s ease-out 0.2s forwards;
5055
}
5156

@@ -60,6 +65,12 @@
6065
}
6166
}
6267

68+
.search-results {
69+
height: 100%;
70+
min-height: 400px;
71+
overflow-y: auto;
72+
}
73+
6374
.search-results h3 {
6475
margin-bottom: 12px;
6576
color: var(--text-accent);
@@ -108,15 +119,15 @@
108119
}
109120

110121
.food-value {
111-
background-color: var(--interactive-accent);
112-
color: var(--text-on-accent);
122+
background-color: rgba(var(--color-purple-rgb), 0.5);
123+
color: var(--text-on-accent-inverted);
113124
border-radius: 4px;
114125
padding: 0 4px;
115126
}
116127

117128
.food-nutrition-value {
118-
background-color: var(--interactive-accent-hover);
119-
color: var(--text-on-accent);
129+
background-color: rgba(var(--color-blue-rgb), 0.5);
130+
color: var(--text-on-accent-inverted);
120131
border-radius: 4px;
121132
padding: 0 4px;
122133
}
@@ -133,20 +144,19 @@
133144
text-align: center;
134145
}
135146

136-
.ft-progress {
137-
--ft-progress-percent: 0%;
138-
--ft-progress-color: var(--interactive-accent);
147+
.food-tracker-progress {
148+
--food-tracker-progress-percent: 0%;
149+
--food-tracker-progress-color: var(--background-primary);
139150
background-image: linear-gradient(
140151
to right,
141-
var(--ft-progress-color) var(--ft-progress-percent),
142-
transparent var(--ft-progress-percent)
152+
var(--food-tracker-progress-color) var(--food-tracker-progress-percent),
153+
transparent var(--food-tracker-progress-percent)
143154
);
144155
border-radius: 4px;
145156
padding: 0 4px;
146-
color: var(--text-normal);
147157
}
148158

149-
.ft-nutrition-bar {
159+
.food-tracker-nutrition-bar {
150160
display: flex;
151161
align-items: center;
152162
border: 1px solid var(--background-modifier-border);
@@ -157,19 +167,14 @@
157167
max-width: fit-content;
158168
}
159169

160-
.ft-icon {
161-
color: var(--interactive-accent);
162-
flex-shrink: 0;
163-
margin-left: 4px;
164-
margin-right: 6px;
165-
cursor: help;
170+
/* Reusable tooltip utility class */
171+
.food-tracker-tooltip-host {
166172
position: relative;
167-
display: inline-flex;
168-
align-items: center;
173+
cursor: help;
169174
}
170175

171-
.ft-icon::after {
172-
content: attr(title);
176+
.food-tracker-tooltip-host::after {
177+
content: attr(data-tooltip);
173178
position: absolute;
174179
bottom: 100%;
175180
left: 50%;
@@ -189,11 +194,20 @@
189194
margin-bottom: 4px;
190195
}
191196

192-
.ft-icon:hover::after {
197+
.food-tracker-tooltip-host:hover::after {
193198
opacity: 1;
194199
}
195200

196-
.ft-nutrient-item {
201+
.food-tracker-icon {
202+
color: var(--interactive-accent);
203+
flex-shrink: 0;
204+
margin-left: 4px;
205+
margin-right: 6px;
206+
display: inline-flex;
207+
align-items: center;
208+
}
209+
210+
.food-tracker-nutrient-item {
197211
display: flex;
198212
align-items: center;
199213
justify-content: center;
@@ -203,57 +217,30 @@
203217
padding: 0;
204218
border: none;
205219
background-color: transparent;
206-
cursor: help;
207-
position: relative;
208-
}
209-
210-
.ft-nutrient-item::after {
211-
content: attr(title);
212-
position: absolute;
213-
bottom: 100%;
214-
left: 50%;
215-
transform: translateX(-50%);
216-
background-color: var(--background-primary);
217-
color: var(--text-normal);
218-
padding: 4px 8px;
219-
border-radius: 4px;
220-
font-size: 12px;
221-
white-space: nowrap;
222-
opacity: 0;
223-
pointer-events: none;
224-
transition: opacity 0.2s;
225-
z-index: 1000;
226-
border: 1px solid var(--background-modifier-border);
227-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
228-
margin-bottom: 4px;
229-
}
230-
231-
.ft-nutrient-item:hover::after {
232-
opacity: 1;
233220
}
234221

235-
.ft-separator {
222+
.food-tracker-separator {
236223
width: 1px;
237224
height: 20px;
238225
background-color: var(--background-modifier-border);
239226
flex-shrink: 0;
240227
}
241228

242-
.ft-progress-green {
243-
--ft-progress-color: var(--color-green, #3a9f4c);
229+
.food-tracker-progress-green {
230+
--food-tracker-progress-color: var(--color-green, #3a9f4c);
244231
}
245232

246-
.ft-progress-yellow {
247-
--ft-progress-color: var(--color-yellow, #d8a000);
233+
.food-tracker-progress-yellow {
234+
--food-tracker-progress-color: var(--color-yellow, #d8a000);
248235
}
249236

250-
.ft-progress-red {
251-
--ft-progress-color: var(--color-red, #d84c4c);
237+
.food-tracker-progress-red {
238+
--food-tracker-progress-color: var(--color-red, #d84c4c);
252239
}
253240

254241
.goals-value {
255-
background-color: var(--color-blue);
256-
color: var(--text-on-accent);
242+
background-color: rgba(var(--color-green-rgb), 0.5);
243+
color: var(--text-on-accent-inverted);
257244
border-radius: 4px;
258245
padding: 0 4px;
259246
}

0 commit comments

Comments
 (0)