diff --git a/docs/components/custom-apps/web-app/header.md b/docs/components/custom-apps/web-app/header.md index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..45952165d241007cbe60e0fcc16bbdfbb9b057b5 100644 --- a/docs/components/custom-apps/web-app/header.md +++ b/docs/components/custom-apps/web-app/header.md @@ -0,0 +1,42 @@ +# Header + +The header of the application has different display and content depending on two factors: + +* the screen size (mobile, tablet or desktop) +* the current page, (homepage or any other pages) + +The header background is `transparent` on the homepage. + +The menu button which let the user hide or display the side menu always keep its left position. + +The platform logo is almost always displayed, unless the current page is the homepage. It has a different version on mobile and is centered on mobile and tablet. + +The searchbar is hidden on the homepage that has its own searchbar and on the mobile and tablet version because then it is located in the side menu. + +The user button is always present but as a text (`Sign in` or user's `firstname`) when current page is the homepage. + +The *Grand lyon* logo is only displayed on desktop version. + +The feedback button is integrated to the header on mobile version only. It is also positioned at the level of the header when not on the homepage and not on mobile but it is only an absolute position. + +## Searchbar + +The searchbar allow a user to perform a multi-word search over dataset catalog. The search is performed over the metadata as well as the data. + +With the searchbar comes an auto-complete functionality. As the user types, but with a debounce time of 500ms a request is made to the elasticsearch service in order to retrieve a maximum of 5 possible completions for the text the user as typed so far. In each of those completions, the part matching the user's text is bolded. Each completion is clickable which will then replace the current text of the searchbar and trigger the search action. + +In order to trigger a search the user can either type the `Enter` button of its keyboard when the input of the searchbar is focused or click the magnifying glass icon. + +The trigger of a search will not only perform a request to the elasticsearch service but also redirect the app the the `research` page if it wasn't the current page. + +When the searchbar has a value, it is possible to reset the search by clicking the cross icon. + +The searchbar supports advenced queries with `+` or `-` characters in order to make sure that both words are present in the result or instead to exclude the results with a particluar word. + +## User button + +This button can have different behaviors. If the user anonymous, a click will redirect to the login page. If the user is already authenticated it opens a dropdown menu with three possible actions: + +* access to the user profil +* access to the user data accesses +* sign out \ No newline at end of file