Fixes issue-1371: Make the picture sticky in About page #1372

lixiaoqity · 2020-11-16T04:42:42Z

Issue This PR Addresses

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

In About page, when we scroll down, half of the page will be blank now. It looks weird. So, I want to make the pictures sticky.

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)

PedroFonsecaDEV

Hi @lixiaoqity,
Our About page needs some improvements for sure.
Be aware of what is going on 1232 and 1335
I think it's a better idea to contact @Wei-J-Huang and see how you can manage your ideas together.

Besides that, the content is running underneath the navbar:

humphd

This isn't working the way I'd expect, since it gets covered by the navbar as I scroll:

lixiaoqity · 2020-11-18T21:32:19Z

I have made the pictures a little below the navbar so that it can not be covered.

PedroFonsecaDEV · 2020-11-18T21:38:07Z

src/frontend/src/templates/template.js

+  sticky: {
+    position: 'sticky',
+    top: '80px',
+  },
  carousel: {


1)Find a good position for the carousel, vertically centred. Then after this, we don't want this carousel moving.

2)Let's scroll only the text part.

Now the position is moved to the center and fixed. Only text can be scrolled.

PedroFonsecaDEV

We need just to remove one comment line that you left. And I think we will be good to go.

PedroFonsecaDEV · 2020-11-19T01:14:05Z

src/frontend/src/templates/template.js

@@ -37,7 +37,7 @@ const tutorialSteps = [

 const useStyles = makeStyles((theme) => ({
  root: {
-    flexGrow: 1,
+    // flexGrow: 1,


Please remove this comment. Then I think we are good to go.

Sorry, forget to remove it. I have fixed it. Thank you.

humphd

At smaller window heights, this overflows into the footer.

PedroFonsecaDEV · 2020-11-19T01:53:48Z

@humphd sorry, I forgot to test all the responsive sizes.

PedroFonsecaDEV

@lixiaoqity

You need to make the page responsive.

In case you need the documentation: material-ui-doc

lixiaoqity · 2020-11-22T02:24:11Z

I put the pictures a little close to the above. If it is set on the vertical centre, it will cover the footer.

PedroFonsecaDEV · 2020-11-22T04:51:18Z

We are still having problems.

lixiaoqity · 2020-11-22T17:39:58Z

The two columns look uncomfortable when the screen size is small. Now I think it is better.

lixiaoqity · 2020-12-04T16:37:39Z

I pulled a new request at #1486. Please check it. Thanks.

PedroFonsecaDEV · 2020-12-04T20:36:58Z

Look how it looks on mobile.
Maybe a different design for mobile, using breaking points.

lixiaoqity · 2020-12-05T00:46:31Z

@PedroFonsecaDEV
I test the website at the Samsung Galaxy S7 AND iPhone 7 cell phone. It looks well and is different with your screen. My test website domain is "https://telescope-gu1hxh24k.vercel.app/about" which is the latest Vercel check and is different with your test. Can you use it to test?

PedroFonsecaDEV · 2020-12-05T03:45:48Z

@lixiaoqity Sorry, I must have clicked on a different build.

Please rebase (there is a conflict) so we can check the build after a rebase.
Thanks.

lixiaoqity · 2020-12-06T21:22:46Z

This pull request should be discarded. I have created a new pull request #1486 which is rebased. Thanks.

…l request #1372 (#1486) * fix issue-1371 * clear useless cod * fix About page pictures location * make pictures of About page vertically center * remove commit * ajust the picture location of About page * Promote the picture location at About page

fix issue-1371

34d046e

vercel bot deployed to Preview November 16, 2020 04:42 View deployment

clear useless cod

cac4605

vercel bot deployed to Preview November 16, 2020 05:23 View deployment

PedroFonsecaDEV requested changes Nov 16, 2020

View reviewed changes

PedroFonsecaDEV changed the title ~~fix issue-1371~~ Fixes issue-1371: Make the picture sticky in About page Nov 16, 2020

PedroFonsecaDEV added area: design Issues needing design or assets area: front-end labels Nov 16, 2020

humphd requested changes Nov 18, 2020

View reviewed changes

fix About page pictures location

130f117

vercel bot deployed to Preview November 18, 2020 21:20 View deployment

PedroFonsecaDEV requested changes Nov 18, 2020

View reviewed changes

make pictures of About page vertically center

76f45e7

vercel bot deployed to Preview November 19, 2020 00:30 View deployment

PedroFonsecaDEV requested changes Nov 19, 2020

View reviewed changes

remove commit

5a23d1c

vercel bot deployed to Preview November 19, 2020 01:25 View deployment

PedroFonsecaDEV requested a review from humphd November 19, 2020 01:32

PedroFonsecaDEV approved these changes Nov 19, 2020

View reviewed changes

humphd requested changes Nov 19, 2020

View reviewed changes

PedroFonsecaDEV requested changes Nov 19, 2020

View reviewed changes

ajust the picture location of About page

5f51cd2

vercel bot deployed to Preview November 22, 2020 02:22 View deployment

Promote the picture location at About page

31d5d67

vercel bot deployed to Preview November 22, 2020 17:19 View deployment

humphd mentioned this pull request Nov 25, 2020

Merge next into master, include both Gatsby.js and Next.js #1444

Merged

4 tasks

lixiaoqity closed this Dec 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes issue-1371: Make the picture sticky in About page #1372

Fixes issue-1371: Make the picture sticky in About page #1372

lixiaoqity commented Nov 16, 2020 •

edited

PedroFonsecaDEV left a comment

humphd left a comment

lixiaoqity commented Nov 18, 2020

PedroFonsecaDEV Nov 18, 2020

lixiaoqity Nov 19, 2020

PedroFonsecaDEV left a comment

PedroFonsecaDEV Nov 19, 2020

lixiaoqity Nov 19, 2020

humphd left a comment

PedroFonsecaDEV commented Nov 19, 2020

PedroFonsecaDEV left a comment

lixiaoqity commented Nov 22, 2020

PedroFonsecaDEV commented Nov 22, 2020

lixiaoqity commented Nov 22, 2020

lixiaoqity commented Dec 4, 2020

PedroFonsecaDEV commented Dec 4, 2020 •

edited

lixiaoqity commented Dec 5, 2020

PedroFonsecaDEV commented Dec 5, 2020

lixiaoqity commented Dec 6, 2020

Fixes issue-1371: Make the picture sticky in About page #1372

Fixes issue-1371: Make the picture sticky in About page #1372

Conversation

lixiaoqity commented Nov 16, 2020 • edited

Issue This PR Addresses

Type of Change

Description

Checklist

PedroFonsecaDEV left a comment

Choose a reason for hiding this comment

humphd left a comment

Choose a reason for hiding this comment

lixiaoqity commented Nov 18, 2020

PedroFonsecaDEV Nov 18, 2020

Choose a reason for hiding this comment

lixiaoqity Nov 19, 2020

Choose a reason for hiding this comment

PedroFonsecaDEV left a comment

Choose a reason for hiding this comment

PedroFonsecaDEV Nov 19, 2020

Choose a reason for hiding this comment

lixiaoqity Nov 19, 2020

Choose a reason for hiding this comment

humphd left a comment

Choose a reason for hiding this comment

PedroFonsecaDEV commented Nov 19, 2020

PedroFonsecaDEV left a comment

Choose a reason for hiding this comment

lixiaoqity commented Nov 22, 2020

PedroFonsecaDEV commented Nov 22, 2020

lixiaoqity commented Nov 22, 2020

lixiaoqity commented Dec 4, 2020

PedroFonsecaDEV commented Dec 4, 2020 • edited

lixiaoqity commented Dec 5, 2020

PedroFonsecaDEV commented Dec 5, 2020

lixiaoqity commented Dec 6, 2020

lixiaoqity commented Nov 16, 2020 •

edited

PedroFonsecaDEV commented Dec 4, 2020 •

edited