Search input with hotkey #12

New issue

Closed

opened 2020-07-29 12:15:12 +02:00 by Serraniel · 7 comments

Serraniel commented

2020-07-29 12:15:12 +02:00

(Migrated from github.com)

Additionally to the search link in the navigation there should be an input field for quick search and maybe a hotkey to focus this element.

Serraniel commented

2020-07-29 12:16:09 +02:00

(Migrated from github.com)

One idea for hotkey might be Shift + F, as this is easy to remember and does not override the global Ctrl + Hotkey for content search.

One idea for hotkey might be `Shift` + `F`, as this is easy to remember and does not override the global `Ctrl` + `Hotkey` for content search.

kaffem commented

2020-07-29 19:30:48 +02:00

(Migrated from github.com)

Hovering over the User Navbar Item shows it's dropdown menu on the old position (before adding the quick search item).

Setting the quick search items position to afterbegin avoids this behavior, but moves the quick search item in front of the home item.

Furthermore focusing the quick search item should un-highlight the other items.

Hovering over the User Navbar Item shows it's dropdown menu on the old position (before adding the quick search item). ![chrome_9G4SVPUH0d](https://user-images.githubusercontent.com/29717789/88832198-c105b180-d1d0-11ea-8023-c3d6447d01d0.png) Setting the quick search items position to afterbegin avoids this behavior, but moves the quick search item in front of the home item. ![chrome_NaIluxlNS6](https://user-images.githubusercontent.com/29717789/88833018-f3fc7500-d1d1-11ea-8e49-d246c864433c.png) Furthermore focusing the quick search item should un-highlight the other items. ![chrome_OBfxnaETZh](https://user-images.githubusercontent.com/29717789/88832920-cfa09880-d1d1-11ea-83a5-4b6f04a0b12a.png)

Serraniel commented

2020-07-29 19:38:16 +02:00

(Migrated from github.com)

Yes, can reproduce the issue with the dropdown. Weird it only affects the last one, the others are fine. Will have a look into it.

Serraniel commented

2020-07-29 19:43:14 +02:00

(Migrated from github.com)

The last dropdown is set to right: 0px via style. I have no idea why exactly they have done this but changing this to auto should fix the issue:

The last dropdown is set to `right: 0px` via style. I have no idea why exactly they have done this but changing this to `auto` should fix the issue: ![image](https://user-images.githubusercontent.com/8461282/88834177-bac50480-d1d3-11ea-8d40-caf130747f7c.png)

Serraniel commented

2020-07-29 19:49:53 +02:00

(Migrated from github.com)

Probably found out the reason why they do not use auto: if it is the last element it will overflow the viewport in some cases when you resize the browser.

However this should not be the problem if the search input is placed behind it, as there always will be enough space then.

Probably found out the reason why they do not use `auto`: if it is the last element it will overflow the viewport in some cases when you resize the browser. ![image](https://user-images.githubusercontent.com/8461282/88834817-aa615980-d1d4-11ea-8207-63a928df3f6e.png) However this should not be the problem if the search input is placed behind it, as there always will be enough space then.

kaffem commented

2020-07-29 19:53:38 +02:00

(Migrated from github.com)

Using 769px as browser width it does not overflow the viewport, smaller than 769px and the site changes to mobile view.

Using 769px as browser width it does not overflow the viewport, smaller than 769px and the site changes to mobile view. ![chrome_6vNWojcLHp](https://user-images.githubusercontent.com/29717789/88835126-2196ed80-d1d5-11ea-9191-e14d82ea4399.png)

Serraniel commented

2020-09-19 10:00:13 +02:00

(Migrated from github.com)

The changes have been released with https://github.com/Serraniel/AniwatchPlus/releases/tag/0.1.0.0-beta.0