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

Add "See less" button and move "See more" button in mobile Wins page with badges #1549

Closed
4 tasks done
daniellex0 opened this issue May 16, 2021 · 10 comments
Closed
4 tasks done
Assignees
Labels
Complexity: Medium P-Feature: Wins Page https://www.hackforla.org/wins/ role: front end Tasks for front end developers size: missing
Milestone

Comments

@daniellex0
Copy link
Member

daniellex0 commented May 16, 2021

Overview

In the version of the Wins page with badges (not live yet), we need to move the "see more" button in the mobile Wins page to be consistent with the original Figma design, and we need to add a "see less" button to the mobile Wins page so that users can collapse back the Wins cards that they expanded.

Action Items

  • Access the "wins-feature-1" (not gh-pages) branch to view the Wins page with badges code
  • Move the "see more" button in mobile to above the badges- to the same place where it currently is in the desktop wins cards (at the end of the quote paragraph)- see in the Figma mobile design (in blue rectangle on the right)
  • Add a "see less" button below the badges in mobile, so that users can collapse a wins card back in mobile after the expanded it.

Resources/Instructions

Wins page (currently without the badges- need to access the "wins-feature-1" branch to see them)
Figma design of Wins mobile page (in blue rectangle on the right)

'See more' button placement:

Screen Shot 2021-05-16 at 2 28 53 AM

'See less' button:
Screen Shot 2021-05-16 at 2 28 44 AM

@daniellex0 daniellex0 added role: front end Tasks for front end developers Complexity: Medium P-Feature: Wins Page https://www.hackforla.org/wins/ labels May 16, 2021
@jbubar
Copy link
Member

jbubar commented May 16, 2021

@qiqicodes qiqicodes self-assigned this May 19, 2021
@qiqicodes
Copy link
Member

qiqicodes commented May 23, 2021

Progress: read the codebase for wins pages, figure out the responsible divs to make "see less" happen.
Blocker: none

@qiqicodes
Copy link
Member

qiqicodes commented May 25, 2021

Progress: spoke with Danielle in regards to the consistency of the ...see more feature on wins card. Figuring out the logics to incorporate the consistent wins card design.

  • put ... after the truncated wins card text
  • put see more at the bottom right of each standard sized wins card
  • put see less at the bottom right of each expanded wins card
    Blocker: none

Sorry, something went wrong.

@Sihemgourou
Copy link
Contributor

@qiqicodes
Please add update

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

@Sihemgourou Sihemgourou added the To Update ! No update has been provided label Jun 9, 2021
@qiqicodes
Copy link
Member

Progress: Figuring out the css and logics to insert ellipsis (…) into HTML

  • put ... after the truncated wins card text

Blocker: none

Sorry, something went wrong.

@Sihemgourou Sihemgourou added Status: Updated No blockers and update is ready for review and removed To Update ! No update has been provided labels Jun 10, 2021
@Sihemgourou Sihemgourou added To Update ! No update has been provided and removed Status: Updated No blockers and update is ready for review labels Jun 12, 2021
@github-actions
Copy link

@qiqicodes Please add update

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

@akibrhast akibrhast linked a pull request Jun 13, 2021 that will close this issue
@Sihemgourou Sihemgourou added Status: Updated No blockers and update is ready for review and removed To Update ! No update has been provided labels Jun 13, 2021
@qiqicodes qiqicodes assigned jbubar and unassigned qiqicodes Jun 25, 2021
@jbubar
Copy link
Member

jbubar commented Jun 27, 2021

Took this on a few days ago, have not had the chance to work on it. Will get it done before next sunday

@Sihemgourou Sihemgourou added To Update ! No update has been provided and removed Status: Updated No blockers and update is ready for review labels Jul 4, 2021
@github-actions
Copy link

github-actions bot commented Jul 4, 2021

@jbubar Please add update

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

@Sihemgourou Sihemgourou added To Update ! No update has been provided and removed To Update ! No update has been provided labels Jul 10, 2021
@github-actions
Copy link

@jbubar Please add update

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

@jbubar
Copy link
Member

jbubar commented Jul 11, 2021

progress: It is all working, just need to do the finishing touches.. @qiqi did most of the work, I just fixed the positions of see more, see less div.. got it disappearing based on the size of the text.
blockers: The wins page is a bit of a mess.. feel the urge to clean it up
ETA: Tuesday
availability: noon - 4pm mon-sun

mobile

screencapture-localhost-4000-wins-2021-07-11-00_31_28

Desktop

screencapture-localhost-4000-wins-2021-07-11-00_32_10

Need to come up with a clever way to add elipses in mobile, and change is back to see more when resize back to desktop

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

Successfully merging a pull request may close this issue.

7 participants