Adjust layout of Wins page cards with badges #1551
Assignees
Labels
Complexity: Medium
P-Feature: Wins Page
https://www.hackforla.org/wins/
role: front end
Tasks for front end developers
size: missing
Status: Help Wanted
Internal assistance is required to make progress
Status: Updated
No blockers and update is ready for review
Milestone
Comments
daniellex0
added
role: front end
Sihemgourou
added
Status: Updated
|
@mgodoy2023 Please add update
|
Sihemgourou
added
Status: Updated
8 tasks
Sihemgourou
added
To Update !
|
@erikaBell Please add update
|
|
UPDATE: As far as I can tell this is happening from extra spacing being added to the bottom of short descriptions because we have a height requirement on We have this height requirement for good reasons. Changing Because the win text and badge divs are children of Placing the badge icons in other various divs, in an effort to make it a child of the text, also creates a number of issues. Everything I just wrote might sound like non-sense to read (-:|>* |
erikaBell
added
Status: Help Wanted
|
@erikaBell No worries, this is not required for MVP to make the Wins page badges go live, so someone can try to sort it out after it goes live! |
|
@erikaBell I was running into this same issue yesterday when I was working on my wins issue (#1549). I think we might have to rethink how we shrink or hide the text... I will be working on this in the next few days. lets brainstorm |
15 tasks
|
IMPORTANT!! |
|
UPDATE: Progress - found a simple CSS solution for the spacing issue between wins-text and wins-badges |
jbubar
added a commit
that referenced
this issue
Jul 21, 2021
* fixes spacing between wins-text and wins-badges * clean up * more spacing added * spacing * resolved Co-authored-by: erikaBell <[email protected]> Co-authored-by: Josh Bubar <[email protected]>
abuna1985
added a commit
that referenced
this issue
Aug 29, 2021
* New wins text badge (#1466) * edited js * edited html * edited scss * added all svgs * all changes added minus one Co-authored-by: erikaBell <[email protected]> * New wins change (#1516) * overlay and styling * mobile styling * see more toggle * adjusted styling, issues with onClick function * badges are clickable on mobile * badge icon click hooked up to seeMore * design edits + see more functionality edit Co-authored-by: erikaBell <[email protected]> * filtered unintended commas out of cardList (#1601) * Adjust styling of Wins page with badges in mobile Fixes #1550 Changed from 1.7em to 1.4em and 1.5em to 1em * Revert "Adjust styling of Wins page with badges in mobile" (#1641) This reverts commit 9fc22fb. * Adjust styling wins (#1620) * adjust styling of Wins page with badges * charge roles wrap * revert wins-data.json * Changed badge description from setup to set up in wins page (#1785) * adjusted.wins-badge-icon size for mobile 1.4em when card is collapsed, 1em when expanded (#1670) * 1817 - remove "I setup 2FA" from wins-data.json and refactored icon parser in wins.html (#1883) * Fixed wins modal position to prevent it from penetrating menu in mobile (#1897) * Add github actions files to wins branch (#1905) * Revert "Add github actions files to wins branch (#1905)" (#1925) This reverts commit b6d4c09. * see more <-> see less on wins page mobile view (#1924) * [qiqicodes-1549-see-less-button-wins-pages] toggle see more/see less functionality * [qiqicodes-1549-see-less-button-wins-pages] adds caret svg * [qiqicodes-1549-see-less-button-wins-pages] toggle see more/see less for wins card * [qiqicodes-1549-see-less-button-wins-pages] delete commented lines of old code * [qiqicodes-1549-see-less-button-wins-pages] see more/see less styling * change position of see more in mobile, and clean up code * make placement on expansion work * move see more to bottom of text, and see less to bottom of card in mobile * delete console.log * remove commented code Co-authored-by: qiqicodes <[email protected]> * updating wins-feature-1 with changes made on gh-pages (#1869) * Changed margin for toolkit page header (#1726) * Updating wins data * Update meeting data * Update contributor and language data * Wins page modal a11y (#1679) * makes ESC key close wins page modal * progress toward mwins page modal fix * in progress * fixes issue w hideoverly and inert * removes package-lock.json and commented code * fixes bug where inert remained true after window resize < 960 * fixes inert bug * Revert "Wins page modal a11y (#1679)" (#1738) This reverts commit c122699. * Updating wins data * Update meeting data * Update contributor and language data * revert wins-data.json (#1745) * Updating wins data * need to delete this, this check is in the app sheet, plus it is breaking the page (#1746) * Update program areas page to reflect correct mini project cards (#1684) * Updates program areas to reflect correct project cards * Add placeholder image to repo and update on corresponding cards * Revert "Revert "Wins page modal a11y (#1679)" (#1738)" (#1747) This reverts commit c492445. * Wins form css (#1314) * begin css changes * initial page styling * add submit success message * styled the inputs to be more simple * small update * change colors to variables * fix github error checking, and make textarea required * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Updating wins data * Update meeting data * Update contributor and language data * Create add-issue-labels-to-pr.yml (#1740) * Create add-issue-labels-to-pr.yml * Update add-issue-labels-to-pr.yml * Update add-issue-labels-to-pr.yml * Update add-issue-labels-to-pr.yml * Update add-issue-labels-to-pr.yml * Added auth. To be reverted. * Update add-issue-labels-to-pr.yml * Update add-issue-labels-to-pr.yml * Update add-issue-labels-to-pr.yml * Update add-issue-labels-to-pr.yml * Update CONTRIBUTING.md (#1751) * Update update-comment-on-update-label.yml Fix typo * Create pull_request_template.md * Delete pull_request_template.md * Create pull_request_template.md * Update pull_request_template.md * Update pull_request_template.md * Fixes #1574 (#1764) * Update people2.yml (#1763) * Update meeting data * Update contributor and language data * Updating wins data * Updating wins data * Updating wins data * Updating wins data * Updating wins data * Updating wins data * Updating wins data * Updating wins data * Updating wins data * Updating wins data * Update meeting data * Update contributor and language data * Updating wins data * Change Alt Text for Delegate Icon on Credit page (#1771) * Fixes #1574 * Change Alt Text for Delegate Icon on Credit page * change resume alt to resume icon (#1765) * Update comment on gh action add-issue-labels-to-pr (#1758) The comments added to the action clarifies and notes the decision behind the usage of the event `pull_request_target` instead of `pull_request` * Contributing.md changes (#1471) * Got Akibs Changes * Update CONTRIBUTING.md file * Accepted incoming merge conflict * Made github username wording more consistent * Added documentation for using Docker back to the file * Added git status code back to file * Changed edits to pull request * Changed wording of issue and pull request headers * Fixed broken link in edits to a pull request * Changed wording of first pull request in bottom greeting * Removed unnecessary text * Added info about VS Code and moved Changes from Upsream section * Added hfla-site slack link * Made changes suggested by alyssa * Update CONTRIBUTING.md Minor changes. Made two changes to the file. Co-authored-by: Josh Bubar <[email protected]> Co-authored-by: Alyssa <[email protected]> * Updating wins data * Update meeting data * Update contributor and language data * Updating wins data * Update meeting data * Update contributor and language data * Changed the alt attribute value to 'Design Community Concept Illustration' for the Design Image on the Credit Page (#1780) Co-authored-by: Mateo Godoy <[email protected]> * 1586 - update alt itext for "Technology" image within the "Credits" page (#1784) * Updating wins data * Update meeting data * Update contributor and language data * Adjusts Program Areas page image cards in mobile (#1774) * Adjusts Program Areas page image cards in mobile * Updates height of card image to correct size * Updating wins data * Update meeting data * Update contributor and language data * Change alt text (#1782) * changed alt text for Partnership Icon on Credit page (#1783) * Updating wins data * Update meeting data * Update contributor and language data * changed alt office worker (#1804) * changed alt text for designer life image on credits page (#1801) * add missing periods in the Getting Started Page (#1799) * remove margin: auto to split header paragraphs (#1790) * Adding button xl-long class and applying it to CTA "Join Us" home page button (#1773) * Testing * New home button * Removed test * New Classes * removed} * } * removed accidental changes Co-authored-by: Sakari Salminiitty <[email protected]> * 1792 - add HTML/CSS to ensure "Online Project Team Meetings" button wraps text within the mobile view of the "Events" page (#1813) * Standardize join us page mobile (#1731) * added title attibutes to sponsor and partner logos in about pages * Changed "vertical" to "program area" * standardized join us page on mobile * media queries changed and header name change * text-align left added to mobile & header container added Co-authored-by: Linda-OC <[email protected]> Co-authored-by: avali4907 <[email protected]> * Updating wins data * Update meeting data * Update contributor and language data * Rename security.yml (#1821) * issue 1570, change email alt text (#1827) * Updating wins data * Update meeting data * Update contributor and language data * Updating wins data * Update meeting data * Update contributor and language data * Updating wins data * Update meeting data * Update contributor and language data * Create Responsiveness on mobile * Rename Responsiveness on mobile to Mobile_responsiveness.md * Update Mobile_responsiveness.md * Update Mobile_responsiveness.md * Update Mobile_responsiveness.md * Update Mobile_responsiveness.md * Update Mobile_responsiveness.md * Update issue templates * Updating wins data * Update meeting data * Update contributor and language data * Updating wins data * Update meeting data * Update contributor and language data * Update Toolkit page's filter banner font weight (#1831) * Fixes #1574 * Change Alt Text for Delegate Icon on Credit page * changed toolkit banner font to 400 * Revert "changed toolkit banner font to 400" This reverts commit 7c24302. * Revert "Revert "changed toolkit banner font to 400"" This reverts commit b4b1c83. * Added documentation for unseen changes (#1854) * Added documentation for fixing jekyll livereloading bug * Fixed some typos * Moved location of changes * removed max height property so all getting started cards were visible (#1853) * Add x modal wins page (#1775) * Added x to modal in wins page to exit * Styled x closing icon to fit in upper right corner of modal * Used svg icon to show close icon on modal in wins page * Implementing new design system heading typography in the code base (#1814) * New typography * removed { * removes } * Added , * Update _typography.scss * Update _typography.scss * Update _typography.scss * Update _print.scss * Update _typography.scss * Update _typography.scss * Fixed title1 print Co-authored-by: Sakari Salminiitty <[email protected]> * Updating wins data * Update meeting data * Update contributor and language data * Add media query to .leader-description (#1855) * Update credits.html * Clarified adding images * Update pull_request_template.md * 1748, closed pr 1832, attempt 2 (#1858) * 1748, closed pr 1832, attempt 2 * 1858 pr update * change alt for video conference icon (#1860) * changed alt attribute for meetings icon on credit page (#1862) * Updating wins data * Update meeting data * Update contributor and language data * fix overlay Co-authored-by: Marco Barrera <[email protected]> Co-authored-by: HackforLABot <[email protected]> Co-authored-by: GitHub Actions Bot <[email protected]> Co-authored-by: Garrett Hickman <[email protected]> Co-authored-by: Akib Rhast <[email protected]> Co-authored-by: Sarah W <[email protected]> Co-authored-by: Zak234 <[email protected]> Co-authored-by: Ava Li <[email protected]> Co-authored-by: Abel-Zambrano <[email protected]> Co-authored-by: Ali Ibsin <[email protected]> Co-authored-by: Alex Verdin <[email protected]> Co-authored-by: Alyssa <[email protected]> Co-authored-by: mgodoy2023 <[email protected]> Co-authored-by: Mateo Godoy <[email protected]> Co-authored-by: Adam Abundis <[email protected]> Co-authored-by: Vicki Chung <[email protected]> Co-authored-by: benrempel <[email protected]> Co-authored-by: Marianna Askova <[email protected]> Co-authored-by: Andrew Lieu <[email protected]> Co-authored-by: Alexey Sergeev <[email protected]> Co-authored-by: Sakari Salminiitty <[email protected]> Co-authored-by: Josephine Han <[email protected]> Co-authored-by: Linda-OC <[email protected]> Co-authored-by: avali4907 <[email protected]> Co-authored-by: Sophia Ling <[email protected]> Co-authored-by: Sihemgourou <[email protected]> Co-authored-by: macho-catt <[email protected]> * Add github actions files to wins branch (#1926) * Fix to mobile margin on Wins page (#1936) * Changed margin to 32px * reversed back the main margin and changed only the margin for mobile * remove tablet view and fix responsiveness issues (#1954) * remove tablet view and fix responsiveness issues * make icons clickable in mobile * remove clickable icons in desktop * quick fix to remove see less on desktop * better fix for removing see less on desktop * fix the unclickability issue on the see more after resize * fix overlay other icon parser problem * clean up * make icons unclickable when expanded * delete console log * Wins Spacing, between text and badge icons #1551 (#1964) * fixes spacing between wins-text and wins-badges * clean up * more spacing added * spacing * resolved Co-authored-by: erikaBell <[email protected]> Co-authored-by: Josh Bubar <[email protected]> * Wins refactor js (#2019) * Clarified comments, Change functions to arrow functions and removed extra spaces * Revert "Clarified comments, Change functions to arrow functions and removed extra spaces" This reverts commit 7bf6086. * Clarified comments, changed function into arrow function and removed extra spaces * removed spacing in functions Co-authored-by: avali4907 <[email protected]> * Fix see more toggle when clicking an icon (#2133) * more merge conflicts * remove json data files from pr * Add accompanying map file for polyfill (#2144) * merge conflicts * Add title1 class to h1 tag in wins hero file (#2189) Co-authored-by: erikaBell <[email protected]> Co-authored-by: erikaBell <[email protected]> Co-authored-by: James Berke <[email protected]> Co-authored-by: Linda-OC <[email protected]> Co-authored-by: Alex Verdin <[email protected]> Co-authored-by: wendywilhelm10 <[email protected]> Co-authored-by: Akib Mohaimenur Rahman <[email protected]> Co-authored-by: Marco Barrera <[email protected]> Co-authored-by: Adam Abundis <[email protected]> Co-authored-by: Ava Li <[email protected]> Co-authored-by: qiqicodes <[email protected]> Co-authored-by: HackforLABot <[email protected]> Co-authored-by: GitHub Actions Bot <[email protected]> Co-authored-by: Garrett Hickman <[email protected]> Co-authored-by: Sarah W <[email protected]> Co-authored-by: Zak234 <[email protected]> Co-authored-by: Abel-Zambrano <[email protected]> Co-authored-by: Ali Ibsin <[email protected]> Co-authored-by: Alyssa <[email protected]> Co-authored-by: mgodoy2023 <[email protected]> Co-authored-by: Mateo Godoy <[email protected]> Co-authored-by: Vicki Chung <[email protected]> Co-authored-by: benrempel <[email protected]> Co-authored-by: Marianna Askova <[email protected]> Co-authored-by: Andrew Lieu <[email protected]> Co-authored-by: Alexey Sergeev <[email protected]> Co-authored-by: Sakari Salminiitty <[email protected]> Co-authored-by: Josephine Han <[email protected]> Co-authored-by: avali4907 <[email protected]> Co-authored-by: Sophia Ling <[email protected]> Co-authored-by: Sihemgourou <[email protected]> Co-authored-by: macho-catt <[email protected]> Co-authored-by: Adrian Zaragoza <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Overview
We need to adjust the layout of the cards on the version of the Wins page with badges (not live yet) to make it more consistent with the original Figma design.
Action Items
Resources/Instructions
Wins page (currently without the badges- need to access the "wins-feature-1" branch to see them)
Figma Designs of Wins page (in blue rectangle)
How it should look when two side-by-side cards have a different number of rows of badges (correct- the same amount of space between quote paragraph and badges):
How it look right now when two side-by-side cards have a different number of rows of badges (wrong - too much space in one between the quote paragraph and badges):
The text was updated successfully, but these errors were encountered: