tag placement in new-entry page

This commit is contained in:
2026-08-27 21:45:38 +02:00
parent de916d2fc7
commit 1c2d1b71ff
4 changed files with 32 additions and 0 deletions
+3
View File
@@ -11,6 +11,9 @@
* Settings panels are collapsed by default when opening the Admin and Profile pages * Settings panels are collapsed by default when opening the Admin and Profile pages
### Fixed ### Fixed
* Fixed element ID conflict on the Admin page so Available Themes load correctly * Fixed element ID conflict on the Admin page so Available Themes load correctly
* Positioned new-entry tag checkboxes after their label text
* Kept new-entry tag checkboxes immediately left of their labels at all viewport sizes
* Prevented the new-entry form grid from placing tag checkboxes above their labels
## Version v0.1.1 ## Version v0.1.1
### Features ### Features
+18
View File
@@ -1340,3 +1340,21 @@ On the admin page under Available Themes, the page does not load available theme
### Assistant outcome ### Assistant outcome
Fixed element ID conflict on `admin.html` where both the header theme submenu and the admin form container used `id="theme-options"`. Renamed the admin form container to `id="admin-theme-options"` and updated `admin.js` to target `#admin-theme-options`. Available themes now load correctly on the admin page. Passed all 55 tests. Fixed element ID conflict on `admin.html` where both the header theme submenu and the admin form container used `id="theme-options"`. Renamed the admin form container to `id="admin-theme-options"` and updated `admin.js` to target `#admin-theme-options`. Available themes now load correctly on the admin page. Passed all 55 tests.
### User
on the new-entry page the checkbox should be following the labels - now they are positioned above.
### Assistant outcome
Reordered the new-entry tag control markup so each label is followed by its checkbox. JavaScript syntax validation and the focused API test module passed with 35 tests.
### User
The checkboxes should be immediately to the left of the label not below left
### Assistant outcome
Restored checkbox-before-label ordering and added a scoped compact-sizing rule for new-entry tag checkboxes. This prevents the mobile global input-width rule from placing a checkbox on its own line. JavaScript syntax validation and the focused API test module passed with 35 tests.
### User
The checkbox takes the full width of the grid which forces the label to be printed underneath instead of directly next to it.
### Assistant outcome
Fixed the actual layout conflict: `.form-section label` uses a grid layout whose selector overrode the tag label's flex layout. Added the more specific `.form-section label.tag-checkbox` inline-flex rule and reset its checkbox margin, keeping each checkbox directly left of its tag text. The focused API test module passed with 35 tests and `git diff --check` passed.
+3
View File
@@ -239,6 +239,9 @@
218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page. 218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page.
219. Clicking on the collapse button doesn't toggle 219. Clicking on the collapse button doesn't toggle
218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page. 218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page.
223. On the new-entry page the checkbox should be following the labels - now they are positioned above.
224. The checkboxes should be immediately to the left of the label not below left
225. The checkbox takes the full width of the grid which forces the label to be printed underneath instead of directly next to it.
## Future entries ## Future entries
+8
View File
@@ -1065,7 +1065,15 @@ button:disabled {
user-select: none; user-select: none;
} }
.form-section label.tag-checkbox {
display: inline-flex;
}
.tag-checkbox input { .tag-checkbox input {
width: auto;
min-width: 0;
flex: 0 0 auto;
margin: 0;
cursor: pointer; cursor: pointer;
} }