You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you scroll to the bottom of a post on The Daily's website, you'll see something like this:
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.
The text was updated successfully, but these errors were encountered:
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
If you scroll to the bottom of a post on The Daily's website, you'll see something like this:
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:
Things to add:
Things to remove:
The text was updated successfully, but these errors were encountered: