Adjust row gap styles

beaverhabits/configs.py

@@ -44,7 +44,8 @@ class Settings(BaseSettings):
     ENABLE_DESKTOP_ALGIN_CENTER: bool = True
     INDEX_SHOW_HABIT_COUNT: bool = False
 
-    INDEX_DAYS_COUNT: int = 10
+    HABIT_DATE_COLUMNS: int = 7
+    HABIT_NAME_WIDTH: int = 110
 
     def is_dev(self):
         return self.ENV == "dev"

beaverhabits/frontend/habit_page.py

@@ -53,7 +53,7 @@ def habit_page(today: datetime.date, habit: Habit):
     notes = [x for x in habit.records if x.text]
     notes.sort(key=lambda x: x.day, reverse=True)
     # https://tailwindcss.com/docs/responsive-design#container-size-reference
-    masony = "lg:grid-cols-2" if notes else ""
+    masony = "md:grid-cols-2" if notes else ""
 
     with grid(masony):
         habit_calendar = CalendarHeatmap.build(today, WEEKS_TO_DISPLAY, calendar.MONDAY)

beaverhabits/frontend/index_page.py

@@ -12,9 +12,9 @@
 from beaverhabits.storage.meta import get_root_path
 from beaverhabits.storage.storage import Habit, HabitList, HabitListBuilder, HabitStatus
 
-HABIT_LIST_RECORD_COUNT = settings.INDEX_DAYS_COUNT
+HABIT_LIST_RECORD_COUNT = settings.HABIT_DATE_COLUMNS
 
-LEFT_ITEM_CLASSES = "min-w-[120px] truncate self-center"
+LEFT_ITEM_CLASSES = "w-[110px] sm:w-[120px] truncate self-center"
 RIGHT_ITEM_CLASSES = "w-10 self-center"
 
 
@@ -34,7 +34,7 @@ def day_headers(days: list[datetime.date]):
 
 @contextmanager
 def row():
-    with ui.row().classes("pl-4 pr-0 py-0").classes("no-wrap gap-0"):
+    with ui.row().classes("pl-4 pr-1 py-0").classes("no-wrap gap-0"):
         yield
 
 
@@ -50,23 +50,9 @@ def flex(height: int):
     # Responsive flex container
     with ui.element("div") as f:
         # Auto hide flex items when it overflows the flex parent
-        f.classes("flex flex-row-reverse justify-evenly")
+        f.classes("flex flex-row-reverse justify-start")
         # Auto ajust gap with screen size
-        f.classes(
-            "gap-x-0"
-            "md:gap-x-[6px] "
-            "lg:gap-x-[8px] "
-            # "xl:gap-x-[8px] "
-            # ...
-        )
-        f.classes(
-            f"max-w-[{40*6-1}px] "
-            f"md:max-w-[{40*7 + (7-1)*6}px] "
-            f"lg:max-w-[{40*10 + (10-1)*8}px] "
-            # f"xl:max-w-[{40*14 + 10*(14-1)*8}px] "
-            # ...
-        )
-        # Auto hide overflowed items
+        f.classes("gap-x-[4px] sm:gap-x-[8px]")
         f.classes(f"overflow-hidden h-{height}")
         yield f
 

beaverhabits/routes.py

@@ -30,21 +30,21 @@
 
 @ui.page("/demo")
 async def demo_index_page() -> None:
-    days = await dummy_days(settings.INDEX_DAYS_COUNT)
+    days = await dummy_days(settings.HABIT_DATE_COLUMNS)
     habit_list = views.get_or_create_session_habit_list(days)
     index_page_ui(days, habit_list)
 
 
 @ui.page("/demo/add")
 async def demo_add_page() -> None:
-    days = await dummy_days(settings.INDEX_DAYS_COUNT)
+    days = await dummy_days(settings.HABIT_DATE_COLUMNS)
     habit_list = views.get_or_create_session_habit_list(days)
     add_page_ui(habit_list)
 
 
 @ui.page("/demo/order")
 async def demo_order_page() -> None:
-    days = await dummy_days(settings.INDEX_DAYS_COUNT)
+    days = await dummy_days(settings.HABIT_DATE_COLUMNS)
     habit_list = views.get_or_create_session_habit_list(days)
     order_page_ui(habit_list)
 
@@ -78,7 +78,7 @@ async def demo_export() -> None:
 async def index_page(
     user: User = Depends(current_active_user),
 ) -> None:
-    days = await dummy_days(settings.INDEX_DAYS_COUNT)
+    days = await dummy_days(settings.HABIT_DATE_COLUMNS)
     habit_list = await views.get_user_habit_list(user)
     index_page_ui(days, habit_list)