Refine responsive layout

daya0576 · Feb 1, 2025 · 428a77f · 428a77f
1 parent 1fa84cd
commit 428a77f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git a/Dockerfile.nobuildkit.arm32 b/Dockerfile.nobuildkit.arm32
@@ -35,6 +35,7 @@ RUN rm -rf "$NICEGUI_LIB_PATH/vanilla-jsoneditor/"
 
 
 FROM python-base AS production
+EXPOSE 8080
 COPY --from=builder-base $PYSETUP_PATH $PYSETUP_PATH
 WORKDIR /app
 COPY start.sh .

diff --git a/beaverhabits/configs.py b/beaverhabits/configs.py
@@ -44,7 +44,7 @@ class Settings(BaseSettings):
     ENABLE_DESKTOP_ALGIN_CENTER: bool = True
     INDEX_SHOW_HABIT_COUNT: bool = False
 
-    INDEX_DAYS_COUNT: int = 8
+    INDEX_DAYS_COUNT: int = 10
 
     def is_dev(self):
         return self.ENV == "dev"

diff --git a/beaverhabits/frontend/components.py b/beaverhabits/frontend/components.py
@@ -88,7 +88,7 @@ async def note_tick(habit: Habit, day: datetime.date):
         return
 
     await habit.tick(day, yes, text)
-    logger.info(f"Habit ticked: {day} True, note: {text}")
+    logger.info(f"Habit ticked: {day} {yes}, note: {text}")
 
 
 async def habit_tick(habit: Habit, day: datetime.date, value: bool):

diff --git a/beaverhabits/frontend/css.py b/beaverhabits/frontend/css.py
@@ -1,5 +1,6 @@
 # Solve the problem of the checkbox hover effect hide by other checkboxes
 # https://github.com/zauberzeug/nicegui/blob/b4bc24bae3d965e0b58e21d9026ec66ba28ae64d/nicegui/static/quasar.css#L1087
+
 CHECK_BOX_CSS = """
 body.desktop .q-checkbox--dense:not(.disabled):hover {
     z-index: 10;

diff --git a/beaverhabits/frontend/index_page.py b/beaverhabits/frontend/index_page.py
@@ -14,7 +14,7 @@
 
 HABIT_LIST_RECORD_COUNT = settings.INDEX_DAYS_COUNT
 
-LEFT_ITEM_CLASSES = "w-32 lg:w-36 truncate self-center"
+LEFT_ITEM_CLASSES = "min-w-[110px] 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(f"no-wrap gap-0"):
+    with ui.row().classes("pl-4 pr-1 py-0").classes("no-wrap gap-0"):
         yield
 
 
@@ -50,9 +50,22 @@ 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 w-full justify-evenly")
+        f.classes("flex flex-row-reverse justify-evenly")
         # Auto ajust gap with screen size
-        f.classes("gap-x-0.5 lg:gap-x-1")
+        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(f"overflow-hidden h-{height}")
         yield f