cf5f4d75fc
Three faults in the bar, all reproduced by measurement before being fixed. The indicators sat low. The slot carried `marginTop: 0.8em`, a nudge left over from Semantic's menu; the corner centres its children, and a top margin is part of the margin box being centred, so it applied as a ~6px downward shift. It read as an error on the hotspot and the theme picker but not on share or search, which is why it survived: an IconButton is a square ActionIcon that centres its glyph exactly, while a bare-icon anchor sits high inside a line box that reserves descender space for text that is not there. The nudge cancelled that out on one shape and was pure error on the other. Both are laid out now -- flex, centred, no nudge -- and the anchors get `display: flex` so they hug their glyph instead of a text line. Help and Admin highlighted only a box around their text while Videos and Statistics highlighted the full height. Same class, same rules, different parent: the bar stretches its children, but the corner is a nested flex container that centres its own, so a link inside it was sized to its content. The hover background is painted on the link box, so that box IS the affordance. The bar broke onto a second line at certain widths. Two measurement errors that only overlap in a narrow band, which is why it appeared while resizing rather than always. useOverflowNav measured the WRAPPER's offsetWidth and subtracted only the home link and the corner, missing the bar's own `padding: 0 0.25em` -- about 8px it believed it had. And the hidden "More" placeholder it measured was a plain button with no dropdown caret, about 21px narrower than the button that eventually rendered. The placeholder is now the same component as the real trigger, so the two cannot drift again. Tested in ui-layout.cy.js against the real <DesktopNav/>, which takes its colours, home link and indicators as props and so needs none of NavBar's polling hooks. Indicator centres are measured against the bar's centre rather than each other, because three things can be equally and consistently wrong and were. The wrap case sweeps 1180px down to 640px in 6px steps -- a spot check steps over a band that narrow. All three failed first: share 3.4px high, Help 24.8px against a 54.4px bar, and two rows at 1156px. Confirmed on the running app: every indicator at 0.0px from the bar's centre, Help and Admin at the full 54.4px, and no wrap anywhere from 1500px to 780px. 1115 jest / 62 suites, 182 in ui-layout.cy.js, clean npm run build. |
||
|---|---|---|
| .. | ||
| cypress | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| cypress.config.js | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| serve.json | ||
| tsconfig.json | ||
Getting Started with Create React App
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more
information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will
remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right
into your project so you have full control over them. All of the commands except eject will still work, but they will
point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you
shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't
customize it when you are ready for it.
Learn More
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
npm run build fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify