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

Remove additional space from wins-card-mobile.svg within WIns About page (mobile only) #1908

Closed
3 tasks done
abuna1985 opened this issue Jul 9, 2021 · 8 comments · Fixed by #1928
Closed
3 tasks done
Assignees
Labels
Complexity: Medium P-Feature: About Us https://www.hackforla.org/about/ role: front end Tasks for front end developers size: missing

Comments

@abuna1985
Copy link
Member

abuna1985 commented Jul 9, 2021

Overview

Remove the additional 31px of additional space from the /assets/images/about/wins-card-mobile.svg. We are currently using this <svg> within pages/about/about-card-accomplishments.html.

Current About Page (mobile view)
About Page (mobile view) figma design
Current wins-card-mobile.svg

Action Items

  • Research removing additional space from a <svg>.
  • update the /assets/images/about/wins-card-mobile.svg to remove the 31px of additonal space
  • verify the svg matches the figma design

Resources/Instructions

@abuna1985 abuna1985 added role: front end Tasks for front end developers Complexity: Medium P-Feature: About Us https://www.hackforla.org/about/ labels Jul 9, 2021
@anonymousanemone anonymousanemone self-assigned this Jul 11, 2021
@anonymousanemone
Copy link
Member

Here are my findings laid out. Please read! (And please help)
image

@anonymousanemone anonymousanemone added the Status: Help Wanted Internal assistance is required to make progress label Jul 12, 2021
@jbubar
Copy link
Member

jbubar commented Jul 12, 2021

@anonymousanemone this was so entertaining to read! you might be the next xkcd.

Ok this is super janky but... going off your negative padding idea...
you can do something like

.wins-card-mobile img{
    margin-left: -20px;
    width: calc(100% + 10px);
}

But I think it is mostly because you just need a new img.. that img has a lot of extra space around the card. maybe get an svg of the wins card without the box shadow and add the box shadow on using css?

Its up to you.. but thanks for giving us an opportunity to give our 2 cents

@Aveline-art
Copy link
Member

Aveline-art commented Jul 12, 2021

Fully agree with @jbubar. That image was great.

Jumping off of the new image idea, I have looked into the history of that page . (Fun fact: I had to recreate the original folder in my own version of the directory to see the history since the original about-us folder was renamed to about). It seems that the original image was there since creation, and the creator of the page had a preference for SVGs. If you decide to recreate the image here is a list of tools for creating SVGs. Or you can lift the Figma design and use a png file.

In any case, good job for sticking at this for so long.

Edit: Went on a bit of a rabbit-hole, and found this StackOverFlow that might help?

@anonymousanemone anonymousanemone removed the Status: Help Wanted Internal assistance is required to make progress label Jul 12, 2021
@Sihemgourou Sihemgourou added the To Update ! No update has been provided label Jul 18, 2021
@github-actions
Copy link

@anonymousanemone Please add update

  1. Progress
  2. Blockers
  3. Availability
  4. ETA

@anonymousanemone
Copy link
Member

Progress: Submitted pull request, but received request for changes
Blockers: Unable to work on issue recently, needs help with how to build a tablet css class.
Availability: Unable to work on issue this entire week
ETA: Around the end of next next week

@anonymousanemone anonymousanemone added Status: Updated No blockers and update is ready for review and removed To Update ! No update has been provided labels Jul 19, 2021
@anonymousanemone
Copy link
Member

I've centered the image for "below tablet" which is when the screen is under 768px, but should I also center the image for when it is "bigger than tablet" but less than desktop? Here's how it looks:
Below tablet:
image
Over tablet:
image

@github-actions
Copy link

github-actions bot commented Aug 6, 2021

@anonymousanemone

Please add update using this template (even if you have a pull request)

  1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
  2. Blockers: "Difficulties or errors encountered."
  3. Availability: "How much time will you have this week to work on this issue?"
  4. ETA: "When do you expect this issue to be completed?"
  5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

You are receiving this comment because your last comment was before Tuesday, August 3, 2021 at 7:53 AM.


Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

@anonymousanemone
Copy link
Member

Progress: Made hopefully last commit
Blockers: Waiting on review
Availability: 5 hrs
ETA: Should be done
Pictures: in pr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Complexity: Medium P-Feature: About Us https://www.hackforla.org/about/ role: front end Tasks for front end developers size: missing
Projects
Development

Successfully merging a pull request may close this issue.

6 participants