Compare commits
7
Commits
a18c8456d3
...
prompts
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3abafc4850 | ||
|
|
d4c7952175 | ||
|
|
da58e20b69 | ||
|
|
d79025538b | ||
|
|
7b1e5fcacb | ||
|
|
37461fd880 | ||
|
|
226f19b2c6 |
Vendored
+2
-1
@@ -52,7 +52,8 @@
|
||||
"args": [
|
||||
"run",
|
||||
"uvicorn",
|
||||
"personal_mcp.main:app",
|
||||
"personal_mcp.main:create_app",
|
||||
"--factory",
|
||||
"--host",
|
||||
"127.0.0.1",
|
||||
"--port",
|
||||
|
||||
+3
-1
@@ -3,6 +3,8 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "8765:8765"
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- ./docs:/app/src/personal_mcp/docs
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
window.MathJax = {
|
||||
tex: {
|
||||
inlineMath: [['\\(', '\\)']],
|
||||
displayMath: [['\\[', '\\]']],
|
||||
processEscapes: true,
|
||||
processEnvironments: true
|
||||
},
|
||||
options: {
|
||||
ignoreHtmlClass: '.*|',
|
||||
processHtmlClass: 'arithmatex'
|
||||
}
|
||||
};
|
||||
|
||||
document$.subscribe(() => {
|
||||
MathJax.startup.output.clearCache();
|
||||
MathJax.typesetClear();
|
||||
MathJax.texReset();
|
||||
MathJax.typesetPromise();
|
||||
});
|
||||
|
||||
component$.subscribe(({ ref }) => {
|
||||
if (ref.classList.contains('md-annotation')) {
|
||||
MathJax.typesetPromise([ref]);
|
||||
}
|
||||
});
|
||||
@@ -3,7 +3,7 @@ name: nicegui
|
||||
description: 'Reference hub for NiceGUI and FastAPI application structure, typed configuration, ASGI and Uvicorn startup, UI composition, styling, bindable state, interactions, troubleshooting, testing, and source documentation. Use when planning, implementing, reviewing, deploying, or debugging NiceGUI applications; load only the references relevant to the task.'
|
||||
x-personal-mcp:
|
||||
id: nicegui
|
||||
version: 2.4.0
|
||||
version: 2.5.0
|
||||
tags:
|
||||
- nicegui
|
||||
- fastapi
|
||||
@@ -76,6 +76,7 @@ Load [architecture and styling](./references/architecture-and-styling.md) for:
|
||||
- component extraction decisions
|
||||
- Quasar props, Tailwind utilities, and custom CSS boundaries
|
||||
- responsive layout and static asset conventions
|
||||
- Tailwind and Quasar breakpoint scales, container queries, and responsive testing
|
||||
- uniformly scaling dialogs on mobile
|
||||
- preserving Quasar field proportions
|
||||
- keeping detached `QSelect` menus anchored
|
||||
|
||||
@@ -90,19 +90,21 @@ Quasar coordinates field height, padding, labels, values, icons, and floating-la
|
||||
|
||||
## Responsive Layout
|
||||
|
||||
Use Tailwind breakpoint classes for ordinary page adaptation:
|
||||
Support these layouts only:
|
||||
|
||||
- mobile: a single-column layout with wrapping toolbars and full-width controls
|
||||
- landscape desktop: $1920 \times 1080$ with side-by-side panels where they improve scanning
|
||||
- portrait desktop: $1080 \times 1920 with stacked panels or a narrow fixed sidebar
|
||||
|
||||
Build the mobile layout first, then add one desktop breakpoint when a row or grid needs more space. Prefer flex wrapping and fluid grids before adding another breakpoint. Use Tailwind classes for page layout and Quasar props for component behavior.
|
||||
|
||||
```python
|
||||
with ui.row().classes("w-full gap-4 flex-wrap sm:flex-nowrap"):
|
||||
ui.card().classes("w-full sm:flex-1 sm:min-w-64")
|
||||
ui.card().classes("w-full sm:flex-1 sm:min-w-64")
|
||||
with ui.row().classes('w-full flex-wrap gap-4 lg:flex-nowrap items-start'):
|
||||
filters_panel().classes('w-full lg:w-72 shrink-0')
|
||||
item_grid().classes('w-full flex-1 min-w-0')
|
||||
```
|
||||
|
||||
- Start with a usable mobile layout, then add larger breakpoint behavior.
|
||||
- Allow dense toolbars to wrap or collapse intentionally.
|
||||
- Use `min-w-0` on flexible content that must shrink inside a row.
|
||||
- Keep controls and primary actions visible without horizontal scrolling.
|
||||
- Test the longest realistic labels, values, errors, and menu options.
|
||||
Use `min-w-0` for flexible children, `flex-wrap` for toolbars, and `max-w-* mx-auto` to keep portrait layouts readable. Do not add device-specific component trees, container queries, or custom breakpoints unless a supported layout demonstrates a concrete failure.
|
||||
|
||||
## Static Assets And Shared CSS
|
||||
|
||||
@@ -222,17 +224,18 @@ Use `popup-content-class=app-item-detail-menu` to target the detached menu and e
|
||||
|
||||
The card's pre-zoom maximum height must account for the scale:
|
||||
|
||||
$$
|
||||
ext{pre-zoom max height}
|
||||
=
|
||||
\frac{\text{desired visible height}}{\text{scale}}
|
||||
$$
|
||||
\[
|
||||
\begin{aligned}
|
||||
h_{\mathrm{pre}} &= \frac{h_{\mathrm{visible}}}{s} \\
|
||||
\text{where } s &= \text{the zoom scale}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
For a desired visual height of `90dvh` at $1.2\times$:
|
||||
For a desired visual height of `90dvh` at \(1.2\times\):
|
||||
|
||||
$$
|
||||
90 / 1.2 = 75
|
||||
$$
|
||||
\[
|
||||
\frac{90\,\mathrm{dvh}}{1.2} = 75\,\mathrm{dvh}
|
||||
\]
|
||||
|
||||
Therefore:
|
||||
|
||||
@@ -266,32 +269,13 @@ Confirm custom breakpoint values against the target application's Quasar configu
|
||||
|
||||
## Validation Checklist
|
||||
|
||||
Test the complete page at representative mobile and desktop viewports. For a dialog, include a mobile viewport such as $390 \times 844$.
|
||||
Check each completed page at these three viewports:
|
||||
|
||||
- Page sections do not overlap or introduce unintended horizontal scrolling.
|
||||
- Responsive rows wrap or resize as designed.
|
||||
- Dialog remains inside the viewport.
|
||||
- Dialog has `scrollHeight > clientHeight` when its content is taller than its maximum height.
|
||||
- Scrolling reaches the final form field.
|
||||
- Select menus open directly against their fields.
|
||||
- Menus have no horizontal overflow.
|
||||
- Values and floating labels are not clipped.
|
||||
- Select arrows and other icons scale with the card.
|
||||
- Detached popup menus report `zoom: 1`.
|
||||
1. A representative mobile viewport, such as $390 \times 844$.
|
||||
2. Landscape desktop at $1920 \times 1080$.
|
||||
3. Portrait desktop at $1080 \times 1920$.
|
||||
|
||||
As a precision check, compare the menu edge with the field edge using browser geometry. One corrected implementation measured within approximately `0.5px` horizontally and `0.14px` vertically; treat those values as an example observation, not a framework guarantee.
|
||||
|
||||
## Playwright Caveat
|
||||
|
||||
Playwright locator clicks can calculate incorrect coordinates for elements inside CSS `zoom`. A failed locator click does not necessarily mean browser interaction is broken.
|
||||
|
||||
For verification, either:
|
||||
|
||||
- click using manually adjusted visual coordinates
|
||||
- trigger the element through DOM evaluation
|
||||
- test the interaction manually in a real browser
|
||||
|
||||
Do not alter otherwise correct component styling solely to accommodate this automation limitation.
|
||||
Confirm that page sections do not overlap, toolbars wrap on mobile, desktop panels use the available space without becoming excessively wide, and dialogs remain visible and scroll to their final field.
|
||||
|
||||
## Sources
|
||||
|
||||
@@ -301,7 +285,5 @@ Do not alter otherwise correct component styling solely to accommodate this auto
|
||||
- [Quasar components](https://quasar.dev/vue-components)
|
||||
- [Quasar field](https://quasar.dev/vue-components/field/)
|
||||
- [Quasar select](https://quasar.dev/vue-components/select/)
|
||||
- [Quasar breakpoints](https://quasar.dev/style/breakpoints/)
|
||||
- [Tailwind responsive design](https://tailwindcss.com/docs/responsive-design)
|
||||
- [MDN `zoom`](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)
|
||||
- [Playwright input actions](https://playwright.dev/docs/input)
|
||||
- [MDN `zoom`](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)
|
||||
@@ -40,7 +40,11 @@ Use these links to verify framework-specific behavior before relying on version-
|
||||
|
||||
!!! info "Styling sources"
|
||||
- [Tailwind utility-first styling](https://tailwindcss.com/docs/utility-first)
|
||||
- [Tailwind responsive design and container queries](https://tailwindcss.com/docs/responsive-design)
|
||||
- [Quasar components](https://quasar.dev/vue-components)
|
||||
- [Quasar Screen plugin documentation source](https://github.com/quasarframework/quasar/blob/dev/docs/src/pages/options/screen-plugin.md)
|
||||
- [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
|
||||
- [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
|
||||
|
||||
## Persistence
|
||||
|
||||
|
||||
@@ -16,7 +16,6 @@ REQUIRED_LIBRARY_TAGS_BY_SKILL = {
|
||||
"fastapi-uv-docker": {"fastapi", "uv", "uvicorn", "docker"},
|
||||
"mcp-details": {"mcp", "fastmcp"},
|
||||
"nicegui": {"nicegui", "fastapi"},
|
||||
"nicegui-ui-customization": {"nicegui", "fastapi"},
|
||||
"pytesting": {"pytest", "testing", "fastapi", "asyncio", "anyio"},
|
||||
"python-logging": {"python", "logging"},
|
||||
"python-typing": {"python", "typing"},
|
||||
|
||||
+5
-3
@@ -90,7 +90,6 @@ nav = [
|
||||
] },
|
||||
{ "Async SQLA" = [
|
||||
{ "Overview" = "skills/async-fastapi-sqlmodel/SKILL.md" },
|
||||
{ "Index" = "skills/async-fastapi-sqlmodel/references/index.md" },
|
||||
{ "Engine" = "skills/async-fastapi-sqlmodel/references/engine.md" },
|
||||
{ "Session" = "skills/async-fastapi-sqlmodel/references/session.md" },
|
||||
{ "Tx" = "skills/async-fastapi-sqlmodel/references/transactions.md" },
|
||||
@@ -140,7 +139,6 @@ nav = [
|
||||
] },
|
||||
{ "Zensical" = [
|
||||
{ "Overview" = "skills/zensical-docs/SKILL.md" },
|
||||
{ "Map" = "skills/zensical-docs/references/index.md" },
|
||||
{ "Features" = "skills/zensical-docs/references/zensical-features.md" },
|
||||
{ "Theme" = "skills/zensical-docs/references/theme-customization-and-icons.md" },
|
||||
{ "Quality" = "skills/zensical-docs/references/documentation-quality.md" },
|
||||
@@ -166,7 +164,11 @@ extra_css = ["stylesheets/mermaid-override.css"]
|
||||
# The path provided should be relative to the "docs_dir".
|
||||
#
|
||||
# Read more: https://zensical.org/docs/customization/#additional-javascript
|
||||
extra_javascript = ["javascripts/mermaid-override.js"]
|
||||
extra_javascript = [
|
||||
"javascripts/mermaid-override.js",
|
||||
"javascripts/mathjax.js",
|
||||
"https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js",
|
||||
]
|
||||
|
||||
# ----------------------------------------------------------------------------
|
||||
# Section for configuring theme options
|
||||
|
||||
Reference in New Issue
Block a user