Add index page settings

README.md

@@ -71,6 +71,8 @@ To avoid [permission issues](https://github.com/daya0576/beaverhabits/discussion
 | **MAX_USER_COUNT**(int) | By setting it to `1`, you can prevent others from signing up in the future. |
 | **ENABLE_IOS_STANDALONE**(bool) | Experiential feature to  enable standalone mode on iOS. The default setting is `false`. |
 | **INDEX_SHOW_HABIT_COUNT**(bool) | To display total completed count along with the habit name on the index page. The default setting is `false`. |
+| **INDEX_HABIT_DATE_COLUMNS**(int) | Customize the date columns count for the index page. The default value is `5`. |
+| **INDEX_HABIT_NAME_WIDTH**(int) | Customize the habit name width for the index page. The default value is `115`. |
 | **TRUSTED_EMAIL_HEADER**(str) | Delegate authentication to an authenticating reverse proxy that passes in the user's details in HTTP headers, e.g. `Cf-Access-Authenticated-User-Email`. An existing account is required. |
 | **TRUSTED_LOCAL_EMAIL**(str) | Disables authentication entirely. A new account with the specified email will be created if it does not exist. |
 

beaverhabits/configs.py

@@ -42,10 +42,10 @@ class Settings(BaseSettings):
     FIRST_DAY_OF_WEEK: int = calendar.MONDAY
     ENABLE_IOS_STANDALONE: bool = False
     ENABLE_DESKTOP_ALGIN_CENTER: bool = True
-    INDEX_SHOW_HABIT_COUNT: bool = False
 
-    HABIT_DATE_COLUMNS: int = 7
-    HABIT_NAME_WIDTH: int = 110
+    INDEX_SHOW_HABIT_COUNT: bool = False
+    INDEX_HABIT_NAME_WIDTH: int = 115
+    INDEX_HABIT_DATE_COLUMNS: int = 5
 
     def is_dev(self):
         return self.ENV == "dev"

beaverhabits/frontend/index_page.py

@@ -12,9 +12,13 @@
 from beaverhabits.storage.meta import get_root_path
 from beaverhabits.storage.storage import Habit, HabitList, HabitListBuilder, HabitStatus
 
-HABIT_LIST_RECORD_COUNT = settings.HABIT_DATE_COLUMNS
+HABIT_LIST_RECORD_COUNT = settings.INDEX_HABIT_DATE_COLUMNS
 
-LEFT_ITEM_CLASSES = "w-[110px] sm:w-[120px] truncate self-center"
+LEFT_ITEM_CLASSES = (
+    f"w-[{settings.INDEX_HABIT_NAME_WIDTH}px] "
+    f"sm:w-[{settings.INDEX_HABIT_NAME_WIDTH + 13}px]"
+    "wrap self-center"
+)
 RIGHT_ITEM_CLASSES = "w-10 self-center"
 
 
@@ -34,7 +38,7 @@ def day_headers(days: list[datetime.date]):
 
 @contextmanager
 def row():
-    with ui.row().classes("pl-4 pr-1 py-0").classes("no-wrap gap-0"):
+    with ui.row().classes("pl-4 pr-2 py-0").classes("no-wrap gap-0"):
         yield
 
 
@@ -52,7 +56,7 @@ def flex(height: int):
         # Auto hide flex items when it overflows the flex parent
         f.classes("flex flex-row-reverse justify-start")
         # Auto ajust gap with screen size
-        f.classes("gap-x-[4px] sm:gap-x-[8px]")
+        f.classes("gap-x-[3px] 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.HABIT_DATE_COLUMNS)
+    days = await dummy_days(settings.INDEX_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.HABIT_DATE_COLUMNS)
+    days = await dummy_days(settings.INDEX_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.HABIT_DATE_COLUMNS)
+    days = await dummy_days(settings.INDEX_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.HABIT_DATE_COLUMNS)
+    days = await dummy_days(settings.INDEX_HABIT_DATE_COLUMNS)
     habit_list = await views.get_user_habit_list(user)
     index_page_ui(days, habit_list)