Habit page masonry layout (#79)

* Update readme

* Add calendar events & add masonry layout

* Add nightly docker lable

* uv sync update

README.md

@@ -88,16 +88,18 @@ uv venv && uv sync
 
 # Features
 
+[Vote](https://github.com/daya0576/beaverhabits/discussions/78) for your most wanted features.
+
 1. Habit Tracking
     - [x] Daily notes/descriptions
     - [ ] Measurable habits 
-    - [ ] Multiple states
+    - [ ] Multiple states, e.g. failed, skipped
 2. Pages & UI
     - [x] Reorder habits
     - [ ] Category or tag
     - [ ] Light mode
     - [ ] Standalone mode for iOS
-    - [ ] **Responsive layout** for desktop & mobile
+    - [ ] **Responsive layout** (wider display for desktop)
     - [ ] **Native mobile app**
 3. Storage
     - [x] Session-based disk storage (Demo only)

beaverhabits/frontend/components.py

@@ -18,6 +18,7 @@
 strptime = datetime.datetime.strptime
 
 DAILY_NOTE_MAX_LENGTH = 300
+CALENDAR_EVENT_MASK = "%Y/%m/%d"
 
 
 def link(text: str, target: str):
@@ -294,8 +295,6 @@ def __init__(
     ) -> None:
         self.today = today
         self.habit = habit
-        # self.init = True
-        # self.default_date = today
         super().__init__(self._tick_days, on_change=self._async_task)
 
         self.props("multiple minimal flat today-btn")
@@ -305,6 +304,12 @@ def __init__(
         self.classes("shadow-none")
 
         self.bind_value_from(self, "_tick_days")
+        events = [
+            d.strftime(CALENDAR_EVENT_MASK)
+            for d, r in self.habit.ticked_data.items()
+            if r.text
+        ]
+        self.props(f'events="{events}" event-color="teal"')
 
     @property
     def _tick_days(self) -> list[str]:

beaverhabits/frontend/css.py

@@ -18,7 +18,6 @@
 CALENDAR_CSS = """
 .q-date {
     width: 100%;
-    min-width: 0;
 }
 .q-date__calendar, .q-date__actions {
     padding: 0;

beaverhabits/frontend/habit_page.py

@@ -7,7 +7,6 @@
 from beaverhabits.frontend.components import (
     CalendarHeatmap,
     HabitDateInput,
-    HabitNotesExpansion,
     habit_heat_map,
     habit_history,
     habit_notes,
@@ -34,17 +33,18 @@ def card_title(title: str, target: str):
 def card(link: str | None = None, padding: float = 3):
     with ui.card().classes("gap-0 no-shadow items-center") as card:
         card.classes(f"p-{padding}")
-        card.classes("w-full")
+        card.classes("w-full break-inside-avoid mb-2")
         card.style("max-width: 350px")
         if link:
             card.classes("cursor-pointer")
             card.on("click", lambda: redirect(link))
-        yield
+
+        yield card
 
 
 @ui.refreshable
 def habit_page(today: datetime.date, habit: Habit):
-    with ui.column().classes("gap-y-3 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3"):
+    with ui.element("div").classes("columns-1 lg:columns-2 w-full gap-2"):
         habit_calendar = CalendarHeatmap.build(today, WEEKS_TO_DISPLAY, calendar.MONDAY)
         target = get_habit_heatmap_path(habit)
 
@@ -53,14 +53,16 @@ def habit_page(today: datetime.date, habit: Habit):
 
         with card():
             card_title("Last 3 Months", target)
+            ui.space().classes("h-2")
             habit_heat_map(habit, habit_calendar)
 
         with card():
             card_title("History", target)
+            ui.space().classes("h-1")
             habit_history(today, habit.ticked_days)
 
         with card(padding=2):
-            card_title("Notes", target).tooltip("Long press checkboxes to add notes")
+            card_title("Notes", "#").tooltip("Press and hold to add notes/descriptions")
             habit_notes(habit)
 
         with card(target, padding=0.5):