mARTin-B78/tts-voice-creator-clone-and-design-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(magazine): keep player transport buttons round on narrow screens

Browse Source 
Fixed 1:1 sizes scaled with clamp(), no flex-shrink/stretch; overlay no longer clips when content is taller than the viewport.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
mARTin-B78 2026-10-02 11:09:42 +02:00
parent 93c9d48327
commit c8b004c74a
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -10,6 +10,7 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
- **Filter the page grid by status.** Each legend entry is now a toggle button with the number of pages in that status; choose one or several to show only pages that have any of them. It combines with *Show only pages that need me*, the summary says how many pages are shown, *Show all pages* clears everything, a status no page has is greyed out, and the buttons announce their on/off state and work from the keyboard.
### Fixed
- **Magazine player buttons stay round on a phone.** In the full-screen player at 375 px wide (iPhone SE) the five transport buttons were 52+76+110+76+52 px plus gaps, wider than the screen, so they shrank unevenly: the big play button became a tall oval and the 15-second skip buttons were squeezed. The buttons now have a fixed 1:1 size that scales down on narrow screens (play 64-84 px, others 44-56 px) and never shrink or stretch, and the player no longer clips its top or bottom when the content is taller than the screen.
- **No gaps on the character concept sheet.** After the divider lines were removed, light cream gutters remained between the three poses and above the lower pictures, and the left pose's cape and the right pose's sword were clipped at them. The composer cut the generated triptych into thirds and pasted each into an inset panel (8 px per side), and the lower pictures had 12-18 px padding. The poses are now pasted as one whole image with no cut and no inset, and the lower pictures sit flush under it. The generation prompt never asked for gaps, so it is unchanged. Sheets already stored have the gaps baked in and need to be regenerated.
- **No divider lines on the character concept sheet.** The Konzeptbild composer drew light lines between the three poses and between the top and bottom rows, which cut through capes and swords. They are gone. Sheets already stored have the lines baked into the image file and need to be regenerated to lose them.
- **The two lower pictures of the concept sheet now show the character in the book's world.** For Marcian (a knight in plate and a red cloak, *Das Jahr des Greifen*) the story picture showed a modern man in a polo shirt with headphones and a camera in a garden, covered in pseudo-text captions, and the item tile a stock crossbow on a white backdrop. The story prompt was about 5,400 characters with the period rules at the very end, which the fast 4-step model never reaches; it opened with "ears clearly visible" and asked for "studio photography by a production photographer with a real actor", and words such as "unlettered", "overlays" and "Output 768x512" invited writing. The negative prompt that lists text and modern clothing had no effect, because these samplers run at cfg 1.0, where ComfyUI ignores it. The story prompt is now short and starts with the world (medieval high fantasy, The Dark Eye, 900-1300 AD, plus the book profile's setting, without the book title, which was read as lettering), then the same character as the turnaround (identity, appearance, costume, what the portrait shows), the moment from the book, a period background, and a hand-made, unmarked world; the item is the character's own, made in the colours and craftsmanship of their costume, on an oak table in a medieval room. Both are worded positively only; text, captions, headphones, cameras and modern clothing and buildings are added to the scene and item negative prompts for when the cfg is raised. Checked with two renders of Marcian on the local ComfyUI: a knight in plate and red cloak with a crossbow in a medieval village, and his crossbow on a table, with no text and nothing modern. Existing sheets need to be regenerated.

15
static/style.css
View File

@ -5462,6 +5462,21 @@ input[list="lang-codes"] {
.mag-dw.is-current { background: var(--accent); color: var(--on-accent, #fff); border-radius: 4px; padding: 0 3px; }
.mag-driving-lyrics { position: relative; }
/* Transport buttons are always perfect circles: fixed square size that scales with
the viewport (never flex-shrinks or stretches), so five buttons fit at 320-375 px. */
.mag-driving { align-items: flex-start; }
.mag-driving-body { margin: auto; }
.mag-driving-controls { flex-wrap: nowrap; align-items: center; max-width: 100%; }
.mag-driving-btn, .mag-driving-btn.is-small, .mag-driving-btn.mag-driving-play {
flex: 0 0 auto; align-self: center; box-sizing: border-box; padding: 0; min-width: 0; min-height: 0;
aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; line-height: 1; }
@media (max-width: 480px) {
.mag-driving-controls { gap: 8px; }
.mag-driving-btn { width: clamp(44px, 14vw, 56px); height: clamp(44px, 14vw, 56px); font-size: 24px; }
.mag-driving-btn.is-small { width: 44px; height: 44px; font-size: 22px; }
.mag-driving-btn.mag-driving-play { width: clamp(64px, 22vw, 84px); height: clamp(64px, 22vw, 84px); font-size: 36px; }
}
/* On a phone the review toolbar wraps to many rows; sticky, it would cover most of the page image
(drag-drawing and box selection then start on a toolbar button), so it scrolls away instead. */
@media (max-width: 860px) {