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.

Sign up for GitHub

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

Jump to bottom

Feature/footer social media icons - option 2 #64

Merged
merged 8 commits into from
Jan 14, 2022
Merged

Feature/footer social media icons - option 2 #64

merged 8 commits into from
Jan 14, 2022

Conversation

aimeelramirez
Copy link
Contributor

@aimeelramirez aimeelramirez commented Jan 9, 2022 •
edited
Loading

Related Issue

Resolves #51
Related to #60 dcc35e4

Summary

  1. Created and validated W3C development tools upon creating tags "footer.ts."
  2. Applied test spec to select anchor tags found.
  3. Applied styles on "footer.css."

Details

To check the portion on HTML rendered:
Screen Shot 2022-01-09 at 2 06 44 AM

References:

Gandy, D. (2022). fa-facebook-square: Font Awesome Icons. Retrieved 9 January 2022, from https://fontawesome.com/v4.7/icon/facebook-square

Gandy, D. (2022). fa-instagram: Font Awesome Icons. Retrieved 9 January 2022, from https://fontawesome.com/v4.7/icon/instagram

Gandy, D. (2022). fa-youtube-play: Font Awesome Icons. Retrieved 9 January 2022, from https://fontawesome.com/v4.7/icon/youtube-play

Ready to check - Nu Html Checker. (2022). Retrieved 9 January 2022, from https://validator.w3.org/nu/#textarea

@netlify
Copy link

netlify bot commented Jan 9, 2022 •
edited
Loading

✔️ Deploy Preview for practical-fermat-fa2c48 ready!

🔨 Explore the source changes: c98481d

🔍 Inspect the deploy log: https://app.netlify.com/sites/practical-fermat-fa2c48/deploys/61e1a5768391eb00083b9383

😎 Browse the preview: https://deploy-preview-64--practical-fermat-fa2c48.netlify.app/

@aimeelramirez aimeelramirez changed the title Feature/footer social media icons - option #2 Feature/footer social media icons - option 2 Jan 9, 2022
@aimeelramirez aimeelramirez self-assigned this Jan 9, 2022
@aimeelramirez aimeelramirez added the feature New feature or request label Jan 9, 2022
aimeelramirez referenced this pull request Jan 9, 2022
@aimeelramirez
final changes and checks on option 1 with running lint on prettier
dcea933
aimeelramirez
aimeelramirez commented Jan 9, 2022
View reviewed changes
src/components/footer/footer.spec.js
@@ -30,7 +30,7 @@ describe('Footer Component', () => {
});

it('should have three anchor tags', () => {
const elements = footer.shadowRoot.querySelectorAll('footer > section > article > ul > li > a');
const elements = footer.shadowRoot.querySelectorAll('section > article:nth-of-type(1) > ul > li > a');
Copy link
Contributor Author

@aimeelramirez aimeelramirez Jan 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60 (comment)

Reference on test spec on selecting tags/ anchor tags.

aimeelramirez
aimeelramirez commented Jan 9, 2022
View reviewed changes
src/components/footer/footer.ts
@@ -16,10 +16,6 @@ export class FooterComponent extends LitElement {
<footer class="container as-footer">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60 (review)
Reference to html hardcoded in the footer instead of new file.

aimeelramirez
aimeelramirez commented Jan 9, 2022
View reviewed changes
src/components/footer/footer.ts
<article class="col-xs-12">
<h3>Copyright</h3>
<p class="copyright-text">&copy; ${STARTING_YEAR} - ${currentYear} Analog Studios</p>
</article>
<article class="col-xs-12">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60 (comment)
Reference to switch the socials above the copyright paragraph tag.

aimeelramirez
aimeelramirez commented Jan 9, 2022
View reviewed changes
src/components/footer/footer.css
a {
i {
font-size: 2rem !important;
font-size: 3rem;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60 (comment)

Reference to making the icons a bit bigger to 3rem.

aimeelramirez
aimeelramirez commented Jan 9, 2022
View reviewed changes
src/components/footer/footer.ts Outdated
<strong>YouTube</strong>
</i>
</a>
</li>
<li>
<a href='https://www.instagram.com/dave.flamand/'>
<i class='fa fa-instagram' aria-hidden='true'>
<a href="https://www.instagram.com/dave.flamand/">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60 (comment)

Referencing instagram link added.

aimeelramirez
aimeelramirez commented Jan 9, 2022
View reviewed changes
src/components/footer/footer.ts
<a href='https://www.facebook.com/analogstudiosri/'>
<i class='fa fa-facebook-square' aria-hidden='true'>
<a href="https://www.facebook.com/analogstudiosri/">
<i class="fa fa-facebook-square" aria-hidden="true">
Copy link
Contributor Author

@aimeelramirez aimeelramirez Jan 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60 (comment)

Referencing applying i tags on HTML hardcoded in.

aimeelramirez
aimeelramirez commented Jan 9, 2022
View reviewed changes
src/components/footer/footer.ts Outdated
@@ -16,10 +16,6 @@ export class FooterComponent extends LitElement {
<footer class="container as-footer">
<section>
<h2>Analog Studio's Footer</h2>
<article class="col-xs-12">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60 (comment)

WC tested
Screen Shot 2022-01-09 at 2 06 44 AM

thescientist13
thescientist13 approved these changes Jan 9, 2022
View reviewed changes
Copy link
Contributor

@thescientist13 thescientist13 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

Last thought is maybe just a little more horizontal spacing (left / right margin) between the icons just give them a little room to breath, but no big deal.
Screen Shot 2022-01-09 at 11 42 21 AM

aimeelramirez and others added 8 commits January 14, 2022 11:28
@aimeelramirez @thescientist13
Resolves #51
a076633 
Related to #60

<!-- Brief summary of the issue. -->
1. [x] created and validated W3C development tools upon creating tags "footer.ts."
2. [x] applied styles on "footer.css."
3. [x] applied test spec to select anchor tags to be found.
@aimeelramirez @thescientist13
headline tag for w3c tests
0c50eb4
@aimeelramirez @thescientist13
final fixes until review upon acceptance
dec8da4
@aimeelramirez @thescientist13
final fixes until review upon acceptance on '
e4da827
@aimeelramirez @thescientist13
html to have " in reviewing files
e7aa1ad
@aimeelramirez @thescientist13
formatting the tasks completed upon switching links above copyright, …
1342ab6 
…test spec on nth of type, and css style to space evenly within host
@thescientist13
add spacing between icons
106676f
@thescientist13
open social links in new window
c98481d
@thescientist13 thescientist13 force-pushed the feature/footer-social-media-icons branch from 3dfade1 to c98481d Compare January 14, 2022 16:31
@thescientist13 thescientist13 merged commit 34904b4 into main Jan 14, 2022
@thescientist13 thescientist13 deleted the feature/footer-social-media-icons branch January 14, 2022 16:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thescientist13 thescientist13 thescientist13 approved these changes

Assignees

@aimeelramirez aimeelramirez

Labels
feature New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add social media icons and links
2 participants
@aimeelramirez @thescientist13