OSD600 -- Release 0.4.2

 OSD600 -- Release 0.4.2

In my preview blog, I have listed a couple of issues from telescope repository that I am currently working on. They are 

The first PR I have done is that fix colours in Github Contributor component.

I found the color property inside the link was set to text.secondary(lightBlue). I changed it to primary.contrastText(white). Then I removed the hover effect and the text-decoration to underline. 
so the colour of the Contributor component from

Screen Shot 2020-11-19 at 6 43 44 PM
to 


I also removed are an unused variable and fix a linter error in the file. I fixed a tag from 
href={'https://github.com/Seneca-CDOT/telescope/commits?author=' + contributor.login} to
href={`https://github.com/Seneca-CDOT/telescope/commits?author=${contributor.login}`}. 

I learned the syntax of @material-ui from this PR. I also learned that ${varible} is safer than + variable from the linter error.

The Second PR I have done is adding the Back to Top button to the search page for Long search results.

After Study the code in BackToTopButton and ScrollAction component, I found that all the functions for scrolls are built already, all I need to do is add the BackToTopButton component to the search component and add the specific id to an element as an anchor. I found that in the banner component, 

<div id="back-to-top-anchor" />

there is a div with id "back-to-top-anchor". I used the same id for my div elements in the search page component. After that, I studied from other components that how to add CSS of @material-ui to the component, then add CSS to move the scroll to the very top of the screen 

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(() => ({
  anchor: {
    position: 'absolute',
    top: 0,
  },
}));
const classes = useStyles();

<div className={classes.anchor} id="back-to-top-anchor"></div>

From the PR, I learend how to add CSS of @material-ui to the project, and the overall design of scroll to top/scroll action component. It helped me to quickly solve other css and scroll action bugs in the next a few issues.

The third PR I have done is that Fix Scroll To Top button doesn't move to the correct position.

Screen Shot 2020-11-19 at 7 13 00 PM



Firstly, I quickly located that the anchor of the scroll action is in the Banner Component. Since I just studied how the scroll action works in Telescope, and the CSS of @material-ui. I fix this issue quickly by creating a CSS class named anchor and adjust its proper position. 

Now it moves to the proper position like this 




Comments

Post a Comment

Popular posts from this blog

My third pull request for Hacktoberfest

Image
Picking the Issue Since I never deal with bugs for my first and second pull request, I decided to find a bug issue to work for my third pull request. The funny thing is that I just noticed that one of the contributors of my second PR's project  issue-collab  listed a bug about " Page not reloading after clicking next on pagination ". The owner of the repo wants someone to share a video/gif about the issue because he not really clear what the bug exactly is. I tried and uploaded the gif of the bug.  Then the owner reproduced it as following: Click Find Issues Scroll to bottom of page and click Next page Click Find Issues again (observe it doesn't work) Click Find Issues a second time (observe it loads the first page) I asked him assigned the issue to me and he did it immediately. Practice the git commands I checked the requirement of release 0.2, and I am able to work on at least 3 different repos for my PR. That means I can work on this repo twice plus 2 more differe...
Read more

OSD Lab3 Git Merge

Image
In this lab, I need to implement two additional feathers into my release 0.1 project --  urlStatusChecker . I am asked to do each of the feathers in its own branch and then merge them into my master branch in order to learn and get familiar with the git merge processes. I choose to add two of the following  features into my   urlStatusChecker : Add a  -j ,  --json , and/or  \j  flag, which causes the program to output JSON. The JSON output should look like  [ { url: 'https://www.google.com': status '200' }, { url: 'https://bad-link.com': status: '404' } ] Support  --all ,  --good , and  --bad  flags. The  --all  flag is the default, and if none of these are present, it will display good and bad URLs. The  --good  flag causes only good URLs to get displayed; the  --bad  flag causes only bad URLs to get displayed To begin with, I issued the two feathers that I wanted to add in my repository(...
Read more

My PR for release 0.3 External Project

Image
 Picking the issue I am so glad to hear that we are allowed to work on repositories that  we have already worked on in the past. That means we don't need to spend time on set it up and learn the code. I decide to work on  issue-collab  since I am so familiar with the repository. Different than any other issue I have work on, I filed the new issue-76 myself and tried to create a pull request for it. The issue I filed is that add a scroll to the top button. I am trying to add the scroll to the top button into this issue-collab repository just like the one in Telescope. The owner of Issue-collab thinks this is a good idea too. Working on the issue The first time when I tried to work on it, I just tried to study the code from Telescope and some from google and playing the code around. I was so annoying that I can't put some code together successfully in React. After watched some React video, I realized that there are two different components which are Class compone...
Read more