Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign "While you're here..." box that goes at bottom of posts #153

Open
hs4man21 opened this issue Oct 24, 2020 · 0 comments
Open

Redesign "While you're here..." box that goes at bottom of posts #153

hs4man21 opened this issue Oct 24, 2020 · 0 comments
Assignees

Comments

@hs4man21
Copy link
Contributor

hs4man21 commented Oct 24, 2020

If you scroll to the bottom of a post on The Daily's website, you'll see something like this:

Screen Shot 2020-10-24 at 2 33 30 PM

It's useful to give our audience options like these at the bottom of each post, but the current layout is not ideal.

Your mission, if you choose to accept it, is to change the HTML and CSS in the "FooterDonationBanner" component (which should be renamed since it's not a donation banner anymore) to improve the appearance and add features. We don't have a particular design in mind, and it would be great to consult with The Daily's leadership. We can do that in a group over Slack!

Here are some steps to follow:

  • Make sure to do "git pull" on your local main branch of stanforddaily and then create a new branch off of it (type "git branch [NEW_BRANCH_NAME]" and then "git checkout [NEW_BRANCH_NAME]") for this ticket. I recommend naming the new branch something like "153-redesign-post-footer-box" to capture the ticket number and a brief description. This is a good practice, especially on larger dev teams like the one you might work on someday!
  • Navigate to the file called "FooterDonationBanner.tsx" in the "components" folder.
  • There are 3 components defined in this file. We won't worry about changing the first one, "LogoIconWithLink," unless you have ideas for how the social media icons (see screenshot above) might look better.
  • The second component defined in the file, "TextButtonWithLink," describes the "Get Our Emails" button seen in the screenshot above.
  • The third component, "FooterDonationBanner," is the focus of this ticket. You can see the JSX that is returned starting on line 61. It should look pretty similar to HTML, but please don't hesitate to reach out with questions about how anything works.
  • Run the code locally by entering the commands "yarn" and then "yarn start" from the stanforddaily directory in your terminal. You can then go to any post (such as localhost:3000/2020/10/23/with-1-6-billion-in-gains-stanford-investment-return-slips-but-still-exceeds-expectations/) and scroll to the box to see how it looks with your changes (which are applied automatically as you make them).

Things to add:

  • A button that sends users to the page for submitting tips (href="/tips/")
  • A button that sends users to apply.stanforddaily.com
  • A button that sends users to the page for submitting work as a non-member (href="/submitting-to-the-daily/")

Things to remove:

  • Let's get rid of the text in lines 86-93, as well as the code in line 95. We are working on a new donation form right now, so that will be different anyway and is not something to worry about in this ticket.
@hs4man21 hs4man21 changed the title Redesign donation/links box that goes at bottom of posts Redesign "While you're here..." box that goes at bottom of posts Oct 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants