Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Search input box is misleading on narrow screens #743
I think this should correspond to how I fixed it by just writing the CSS into the browser, if you would like to help me test build it and make sure that would be great. Also if you do check that it doesn't mess up the autocomplete popup, that is the problem in the first place...
I have tried with v10 also, and set DEBUG=docs do nothing. I even deployed a new Vultr instance with Ubuntu server and only node installed for this, it goes a bit further and start checking urls. But still will not build...
Good stuff Håkan. I have cloned your repo and built your branch, here are screenshots.
At the iPhone 6 width the search bar now stretches across the width of the screen and the clear button is now right-aligned.
At a wider width --
There appears to be some media styling that's keeping the Algolia search results container quite narrow. Might be worth looking to see if there's some styling of that container around the 760px mark.
Behaviour remains as expected, all good
Darn, that's not making for a great experience for you
Mmm... lemme list the steps I took with your repo from scratch about ~15 minutes ago. Maybe that'll help flush out something?
$ git clone https://github.com/hkarn/cypress-documentation.git hak $ cd hak $ npm i $ git co issue-743-search-input-box-misleading $ npm run build $ npm start > npm run start-server -- --no-validate > email@example.com start-server /Users/evansr1/hak > node --stack-size=8192 ./index.js server --port 2222 "--no-validate" disabling filter cleanup for environment development in environment development site url is https://docs.cypress.io NODE_ENV is: development INFO Start processing INFO Hexo is running at http://localhost:2222 . Press Ctrl+C to stop.
The build shouldn't be doing any URL validation so if it is then we'll need to look at that. Let me know.
Smt like this is what I get on the Vultr instance (except the one time it worked) running npm run build, on my Windows computers it dies after right after INFO Start processing
The log files are not really any more insightful then the console output...it is very strange it is not breaking at the same place. Always after a different URL and sometimes even in the postbuild script instead ... same code.
disabling filter cleanup for environment development
npm ERR! A complete log of this run can be found in:
Ok, I finally made it start building properly on my virtual server instance. I think the problem was missing libraries to compile all the packages in npm install, I think this could be the problem on my Windows computer too.
As for the issue the autocomplete is a bit tricky. I moved the with reduction for it one break-point down, it is better. I didn't see an apparent way to left align it though.
It will now go to 320px with at the 620px breakpoint instead of 1001px. (At the 500px breakpoint it is just barley too large). I might be possible to refine it more by adding more size for the box or more breakpoints but I am not sure it is necessary.