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

Refactor communities of practice page to replace slack-join-meeting-channel.svg with icon-slack.svg #5829

Closed
3 tasks done
Tracked by #7377
roslynwythe opened this issue Nov 3, 2023 · 3 comments · Fixed by #5896
Closed
3 tasks done
Tracked by #7377

Refactor communities of practice page to replace slack-join-meeting-channel.svg with icon-slack.svg #5829

roslynwythe opened this issue Nov 3, 2023 · 3 comments · Fixed by #5896
Assignees
@aadilahmed
Labels
Complexity: Medium Feature: Refactor HTML P-Feature: Communities of Practice https://www.hackforla.org/communities-of-practice role: back end/devOps Tasks for back-end developers role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours
Milestone
x. Technical debt

Comments

@roslynwythe
Copy link
Member

roslynwythe commented Nov 3, 2023 •
edited by aadilahmed
Loading

Overview

We need to store only a single Slack icon SVG file in the codebase, and use CSS to render the SVG in various colors throughout the website. In this issue, we modify the Communities of Practice page, replacing an img element with a liquid include tag referencing _includes/svg/icon-slack.svg and modifying CSS as needed to maintain the current appearance.

Action Items

  • Open pages/communities-of-practice.html in your IDE and identify the 'img' tag with src assets/images/communities-of-practice/slack-join-meeting-channel.svg, and identify the rendered image in the current Communities of Practice webpage
  • Replace the img tag identified in the previous step with a liquid tag {% include 'filename' %} that will reference the file _includes/svg/icon-slack.svg. Note that in the liquid include tag syntax, filename is relative to the _includes folder, so _includes should not be part of the filename.
  • The size and layout styles of the icon will require modification. Use docker to view the local page and modify the CSS in _sass/components/_communities-of-practice.scss as needed so that the appearance of the icon in the local page matches the current webpage. Confirm the appearance of the graphic and the behavior of the associated hyperlink is unchanged from the current webpage.

Resources/Instructions

Communities of Practice HTML
Communities of Practice webpage
@roslynwythe roslynwythe added Feature Missing This label means that the issue needs to be linked to a precise feature label. size: missing role missing Complexity: Missing labels Nov 3, 2023
@github-actions GitHub Actions

This comment was marked as resolved.

Sign in to view
@roslynwythe roslynwythe added Complexity: Medium size: 1pt Can be done in 4-6 hours role: front end Tasks for front end developers role: back end/devOps Tasks for back-end developers Feature: Refactor HTML P-Feature: Communities of Practice https://www.hackforla.org/communities-of-practice Ready for Prioritization and removed Feature Missing This label means that the issue needs to be linked to a precise feature label. size: missing role missing Complexity: Missing labels Nov 3, 2023
@roslynwythe roslynwythe mentioned this issue Nov 3, 2023
Closed
5 tasks
@roslynwythe roslynwythe added P-Feature: Communities of Practice https://www.hackforla.org/communities-of-practice and removed P-Feature: Communities of Practice https://www.hackforla.org/communities-of-practice labels Nov 3, 2023
@ExperimentsInHonesty ExperimentsInHonesty added this to the x. Technical debt milestone Nov 3, 2023
@aadilahmed aadilahmed self-assigned this Nov 10, 2023
@github-actions GitHub Actions
Copy link

Hi @aadilahmed, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

@aadilahmed
Copy link
Member

aadilahmed commented Nov 10, 2023 •
edited
Loading

i. Availability: Monday-Friday 9-5 pm
ii. ETA: 11/10 EOD 11/12 EOD

aadilahmed added a commit to aadilahmed/website that referenced this issue Nov 13, 2023
@aadilahmed
Refactor communities of practice page - hackforla#5829
4036bfb
@aadilahmed aadilahmed mentioned this issue Nov 13, 2023
Merged
t-will-gillis pushed a commit that referenced this issue Nov 19, 2023
@aadilahmed
Refactor Slack image icon with svg icon in communities of practice pa…
b65c995 
…ge (#5896)

* Refactor communities of practice page - #5829

* remove outer svg tag from slack image svg file liquid image element
Open
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@aadilahmed aadilahmed

Labels
Complexity: Medium Feature: Refactor HTML P-Feature: Communities of Practice https://www.hackforla.org/communities-of-practice role: back end/devOps Tasks for back-end developers role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours
Projects
P: HfLA Website: Project Board
Archived in project
Milestone
x. Technical debt
Development

Successfully merging a pull request may close this issue.

Refactor Slack image icon with svg icon in communities of practice page aadilahmed/website
3 participants
@roslynwythe @aadilahmed @ExperimentsInHonesty