Draw a tile on the editor's mockup the way the screen does: the CYD shows the whole tile again (0.2.76)

Both boards draw a normal tile with the icon on the left and the name and value beside it;
the Vue editor stacked icon, name and value in one column. On a CYD mockup a tile is 47 px
high and that stack needed 58 px (63 for a watch card), so the value line was cut in half and
a big value hid the name. A single tile is now a row (.head: icon + .tx), a watch card puts
the name row on top and the number under it, and the small slider runs underneath; on a CYD
a tile with a slider uses the screen's 4 px padding and 8 px slider. The Guition mockup
follows the screen the same way.

App 0.2.76, firmware stays 0.2.63. Test results in docs/TEST_RESULTS_0276.md.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Max Gramser
2026-09-18 09:56:01 +02:00
parent 261fa82c7d
commit bdb1f12c55
10 changed files with 94 additions and 19 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<title>ESP Screens</title>
<script type="module" crossorigin src="./assets/index-FSwnYVTm.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-C6IelTvW.css">
<script type="module" crossorigin src="./assets/index-Cj3m_z3Z.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BL5pkID8.css">
</head>
<body>
<div id="app"></div>