Fixes #1807: [UI 2.0] SearchHelp #1909

rjayroso · 2021-03-12T13:44:11Z

Issue This PR Addresses

Implements and closes #1807

Type of Change

Bugfix: Change which fixes an issue
New Feature: Change which adds functionality
Documentation Update: Change which improves documentation
UI: Change which improves UI

Description

As per the new 2.0 UI Design, I have re-styled the search helper. See pictures below:

Web

Web Design Reference

Mobile

Mobile Design Reference

See #1804 for complete design reference. Currently, the SearchHelper component is static - I think that it should be handled within the SearchBar/SearchInput components (when the user types the help disappears). Let me know if this isn't the case cc @PedroFonsecaDEV

Checklist

Quality: This PR builds and passes our npm test and works locally
Tests: This PR includes thorough tests or an explanation of why it does not
Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

izhuravlev · 2021-03-12T13:53:22Z

@rjayroso I launched the vercel deployment, and after making a request saw this:

I don't think this should work like this

izhuravlev

Looks good except for the display error I specified above - try looking into web/src/pages/search.tsx to solve it.

Also, it will be great if you can squash those commits when the PR is ready.

izhuravlev · 2021-03-12T13:58:05Z

src/web/src/components/SearchHelp.tsx

-    maxWidth: 500,
-    fontSize: theme.typography.pxToRem(22.5),
-    border: '1px solid #dadde9',
+  subtitle: {


I don't see where are you using this Subtitle - do we need it?

Good catch! It's not needed anymore I'll take it out after I figure out how to work out that display error you found above

Sounds good, ping me if you actually need help figuring it out

izhuravlev · 2021-03-12T13:59:18Z

src/web/src/components/SearchHelp.tsx

+const useStyles = makeStyles((theme: Theme) => ({
+  container: {
+    width: '50%',
+    transform: 'translate(-50%, -50%)',


Why do you need to transform?

src/web/src/components/SearchHelp.tsx

humphd

This isn't using the right font (Times New Roman), needs to be removed when the loading spinner starts, and when search content is shown. I'm also not a huge fan of centered text like this.

PedroFonsecaDEV · 2021-03-16T11:59:35Z

@rjayroso Rebase

@izhuravlev What do you think about it?

@huynguyez I think your new design will land after this PR. So I would appreciate your opinion here.

I think this PR will be a temporary solution to the component.

rjayroso · 2021-03-16T12:22:06Z

@rjayroso Rebase

@izhuravlev What do you think about it?

@huynguyez I think your new design will land after this PR. So I would appreciate your opinion here.

I think this PR will be a temporary solution to the component.

Sounds good to me! In the meantime, I tried my best to address the issues above.

SearchHelp now disappears on submit
Font changed to TimesNewRoman
Now aligned to the left and uses standard CSS attributes

Excuse the old search bar below, I haven't pulled the current design yet

8c4b04f80c2bfacc8ce43fbc8843cc13.mp4

Let me know if I need to change anything, font colour, size, etc.

izhuravlev · 2021-03-16T13:45:18Z

@rjayroso I love it, looks good to me. The only thing that I thought of is that we can probably surround it with a separate "Box". What I mean is that the SearchHelp can be displayed in a rectangle of a different colour, so it is visually separated - but this smth we should ask @PedroFonsecaDEV about.

izhuravlev · 2021-03-16T13:53:10Z

@rjayroso Okay, I just opened the deployment and this is what I saw:

After searching it removes the bottom SearchHelper, but it leaves the top one be.

Also, not sure if it is related, on small resolutions like iPhone X if no results have been found only the picture is displayed - I can't scroll to the "no Results Found" Message.

Try rebasing it and see if it changes anything. You might also look into the <SearchBar> as From what I see, I believe that the <SearchHelp> text might be getting pasted after the Search heading somehow.

PedroFonsecaDEV

Rebase so we can review it with the latest version of our master.

izhuravlev · 2021-03-18T19:14:07Z

So far this looks pretty good. If we don't want to play with the logic a bit and make this being displayed only when the search page is shown for the first time - LGTM. other than that - I would play a bit with the logic here, so the SearchHelp is displayed when there are no results found as well.

rjayroso · 2021-03-19T00:36:59Z

So far this looks pretty good. If we don't want to play with the logic a bit and make this being displayed only when the search page is shown for the first time - LGTM. other than that - I would play a bit with the logic here, so the SearchHelp is displayed when there are no results found as well.

I think we can merge this and I'll file an issue to improve the SearchHelp logic

izhuravlev

LGTM, Don't forget to file a new issue.

HyperTHD

Rebase this, and you can merge this in @rjayroso

Changes were made

* Removed HTML Tooltip, added className to elements * Cleaned up header imports * Removed old CSS and implemented new UI styling * Changed CSS values to better fit with planned design * Removed subtitle styling, no longer needed * Added state hook to hide visibility of SearchHelp * Redesign implemented * Rebased and put SearchHelp below SearchResults in layout

rjayroso · 2021-03-24T20:09:44Z

Rebased

rjayroso added area: front-end area: nextjs Nextjs related issues labels Mar 12, 2021

rjayroso requested review from huyxgit, izhuravlev and PedroFonsecaDEV March 12, 2021 13:44

rjayroso self-assigned this Mar 12, 2021

vercel bot deployed to Preview March 12, 2021 13:44 View deployment

izhuravlev suggested changes Mar 12, 2021

View reviewed changes

rjayroso changed the title ~~Issue 1807~~ Fixes: Issue 1807 Mar 12, 2021

rjayroso changed the title ~~Fixes: Issue 1807~~ Fixes: Issue 1807 [UI 2.0] SearchHelp Mar 12, 2021

rjayroso changed the title ~~Fixes: Issue 1807 [UI 2.0] SearchHelp~~ Fixes #1807: [UI 2.0] SearchHelp Mar 12, 2021

humphd previously requested changes Mar 12, 2021

View reviewed changes

vercel bot deployed to Preview March 16, 2021 11:51 View deployment

rjayroso force-pushed the issue-1807 branch from 5d075e8 to 656760c Compare March 16, 2021 12:07

vercel bot had a problem deploying to Preview March 16, 2021 12:07 Failure

rjayroso force-pushed the issue-1807 branch from 656760c to 08ea246 Compare March 16, 2021 12:12

vercel bot deployed to Preview March 16, 2021 12:12 View deployment

rjayroso requested review from izhuravlev and humphd March 16, 2021 12:29

rjayroso added this to the 1.9 Release milestone Mar 16, 2021

PedroFonsecaDEV previously requested changes Mar 16, 2021

View reviewed changes

rjayroso force-pushed the issue-1807 branch from 08ea246 to dd87afe Compare March 17, 2021 09:17

vercel bot had a problem deploying to Preview March 17, 2021 09:18 Failure

rjayroso force-pushed the issue-1807 branch from dd87afe to fa33b36 Compare March 17, 2021 09:41

vercel bot deployed to Preview March 17, 2021 09:42 View deployment

rjayroso requested a review from PedroFonsecaDEV March 17, 2021 14:37

izhuravlev previously approved these changes Mar 19, 2021

View reviewed changes

rjayroso mentioned this pull request Mar 19, 2021

Improve SearchHelp logic #1983

Closed

HyperTHD self-requested a review March 23, 2021 14:35

HyperTHD previously approved these changes Mar 23, 2021

View reviewed changes

rjayroso dismissed stale reviews from HyperTHD and izhuravlev via fca2ba6 March 24, 2021 19:28

rjayroso force-pushed the issue-1807 branch from fa33b36 to fca2ba6 Compare March 24, 2021 19:28

vercel bot deployed to Preview March 24, 2021 19:28 View deployment

chrispinkney approved these changes Mar 24, 2021

View reviewed changes

rjayroso requested review from HyperTHD and izhuravlev March 24, 2021 20:09

rjayroso merged commit 5e45d40 into Seneca-CDOT:master Mar 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes #1807: [UI 2.0] SearchHelp #1909

Fixes #1807: [UI 2.0] SearchHelp #1909

rjayroso commented Mar 12, 2021

izhuravlev commented Mar 12, 2021

izhuravlev left a comment •

edited

Loading

izhuravlev Mar 12, 2021 •

edited

Loading

rjayroso Mar 12, 2021

izhuravlev Mar 12, 2021

izhuravlev Mar 12, 2021 •

edited

Loading

humphd left a comment

PedroFonsecaDEV commented Mar 16, 2021 •

edited

Loading

rjayroso commented Mar 16, 2021 •

edited

Loading

izhuravlev commented Mar 16, 2021

izhuravlev commented Mar 16, 2021 •

edited

Loading

PedroFonsecaDEV left a comment

izhuravlev commented Mar 18, 2021

rjayroso commented Mar 19, 2021

izhuravlev left a comment

HyperTHD left a comment

rjayroso commented Mar 24, 2021

Fixes #1807: [UI 2.0] SearchHelp #1909

Fixes #1807: [UI 2.0] SearchHelp #1909

Conversation

rjayroso commented Mar 12, 2021

Issue This PR Addresses

Type of Change

Description

Checklist

izhuravlev commented Mar 12, 2021

izhuravlev left a comment • edited Loading

Choose a reason for hiding this comment

izhuravlev Mar 12, 2021 • edited Loading

Choose a reason for hiding this comment

rjayroso Mar 12, 2021

Choose a reason for hiding this comment

izhuravlev Mar 12, 2021

Choose a reason for hiding this comment

izhuravlev Mar 12, 2021 • edited Loading

Choose a reason for hiding this comment

humphd left a comment

Choose a reason for hiding this comment

PedroFonsecaDEV commented Mar 16, 2021 • edited Loading

rjayroso commented Mar 16, 2021 • edited Loading

izhuravlev commented Mar 16, 2021

izhuravlev commented Mar 16, 2021 • edited Loading

PedroFonsecaDEV left a comment

Choose a reason for hiding this comment

izhuravlev commented Mar 18, 2021

rjayroso commented Mar 19, 2021

izhuravlev left a comment

Choose a reason for hiding this comment

HyperTHD left a comment

Choose a reason for hiding this comment

rjayroso commented Mar 24, 2021

izhuravlev left a comment •

edited

Loading

izhuravlev Mar 12, 2021 •

edited

Loading

izhuravlev Mar 12, 2021 •

edited

Loading

PedroFonsecaDEV commented Mar 16, 2021 •

edited

Loading

rjayroso commented Mar 16, 2021 •

edited

Loading

izhuravlev commented Mar 16, 2021 •

edited

Loading