New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search input box is misleading on narrow screens #743

Closed
bahmutov opened this Issue Jun 28, 2018 · 10 comments

Comments

4 participants
@bahmutov
Collaborator

bahmutov commented Jun 28, 2018

When switching to narrow screens the search input shows up full width

screen shot 2018-06-28 at 8 45 59 am

but it is not - it stays narrow, see the "clear" button

screen shot 2018-06-28 at 8 46 10 am

thus if you try to click on the right side and type, you cannot, which is annoying

@jennifer-shehane

This comment has been minimized.

Member

jennifer-shehane commented Jun 28, 2018

🙈

@hkarn

This comment has been minimized.

Contributor

hkarn commented Sep 16, 2018

I would like to try and fix this as a first time contribution.

@hkarn

This comment has been minimized.

Contributor

hkarn commented Sep 16, 2018

I have 2 lines of CSS that will fix it but I am unable to build the docs.
I have tried on several computers now with different versions of node including 8.4.0
I get Exit status 3221225725. Where do I ask for help about this and testing my solution?

@richdouglasevans

This comment has been minimized.

Contributor

richdouglasevans commented Sep 16, 2018

Hey Håkan,

Nice one. If you can and do push a branch up to your fork of the Cypress docs I can clone it and build it on my side and let you know.

I'm using node v10 if that's any help.

@hkarn

This comment has been minimized.

Contributor

hkarn commented Sep 17, 2018

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...
https://github.com/hkarn/cypress-documentation/tree/issue-743-search-input-box-misleading

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...

hkarn added a commit to hkarn/cypress-documentation that referenced this issue Sep 17, 2018

@richdouglasevans

This comment has been minimized.

Contributor

richdouglasevans commented Sep 17, 2018

Good stuff Håkan. I have cloned your repo and built your branch, here are screenshots.

iPhone 6

At the iPhone 6 width the search bar now stretches across the width of the screen and the clear button is now right-aligned.

Looks good 👍

iphone6

Responsive

At a wider width -- 761px but still not full desktop -- the search bar now stretches across the width of the screen and the clear button is now right-aligned.

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.

responsive

Regular Desktop

Behaviour remains as expected, all good 👍

desktop

@hkarn

This comment has been minimized.

Contributor

hkarn commented Sep 17, 2018

Thank you! I will see if I can do something about the autocomplete container also later today.

I finally managed to build it on Vultr instance btw ... on like the 12 try with the same settings it just suddenly worked.

@richdouglasevans

This comment has been minimized.

Contributor

richdouglasevans commented Sep 17, 2018

But still will not build...

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


> cypress-documentation@0.0.0 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.

@hkarn

This comment has been minimized.

Contributor

hkarn commented Sep 17, 2018

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.

.....
[07:43:55] Finished 'pre:build' after 2.75 μs

cypress-documentation@0.0.0 build /root/github/cypress-documentation
node --stack-size=8192 ./index.js generate

disabling filter cleanup for environment development
in environment development site url is https://docs.cypress.io
NODE_ENV is: development
INFO Start processing
Request to: http://api.jquery.com/next timed out. Ignoring this error and proceeding. Waited for 7038ms.
Request to: http://sinonjs.org/ timed out. Ignoring this error and proceeding. Waited for 9617ms.
.......
Request to: https://www.npmjs.com/package/npx failed.
Request to: https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/stubbing-spying__window-fetch/cypress/integration/spy-stub-clock-spec.js failed.
Request to: https://github.com/adamgruber/mochawesome timed out. Ignoring this error and proceeding. Waited for 8634ms.
Killed
npm ERR! code ELIFECYCLE
npm ERR! errno 137
npm ERR! cypress-documentation@0.0.0 build: node --stack-size=8192 ./index.js generate
npm ERR! Exit status 137
npm ERR!
npm ERR! Failed at the cypress-documentation@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-09-17T07_44_57_014Z-debug.log

hkarn added a commit to hkarn/cypress-documentation that referenced this issue Sep 17, 2018

@hkarn

This comment has been minimized.

Contributor

hkarn commented Sep 17, 2018

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.

hkarn added a commit to hkarn/cypress-documentation that referenced this issue Sep 17, 2018

jennifer-shehane added a commit that referenced this issue Sep 17, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment