Fix Campaigns section max width and alignment on Homepage and Campaigns page #1303
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
I am personally not a fan of these long cards in your second and fourth images. |
|
@dimitur2204 These changes are rather focused on the max width of the campaign section which we have both on homepage and campaigns listing page. It is currently not identical on both pages and its width is not limited for larger screens. You can see the discussion here: #1227. The cards are 4 by design for all devices. I haven't done any changes to the cards in this PR. I think your idea for the cards to be more square for some resolutions might be valid and we could optimize this. Can we discuss it with the design team and create a separate ticket for this if needed? |
dimitur2204
approved these changes
Jan 26, 2023
|
Considering the new home page should be coming in the near future we can probably not bother design with that |
|
Yes, it is going to be valid only for Campaigns listing page if its design is not planned to be updated too. |
dimitur2204
added a commit
that referenced
this pull request
Feb 1, 2023
* payment-process-stripe - add flow context * payment-process-stripe - add choose amount component * payment-process-stripe - connect the accordion group to work with formik now * payment-process-stripe - connect the accordion card group to work with formik * payment-process-stripe - add formik to the flow form * payment-process-stripe - add the choose amount from the old donation flow * payment-process-stripe - add disabled prop to the options on the cards * payment-process-stripe - add the stripe payment intent to the context * payment-process-stripe - add the stripe key to the runtime config * payment-process-stripe - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * payment-process-stripe - add step splitter component * payment-process-stripe - add mobile view for the payment method * payment-process-stripe - add disabled and fix styling for the RadioAccordionGroup * 1284 - add flow context * 1284 - add choose amount component * 1284 - connect the accordion group to work with formik now * 1284 - connect the accordion card group to work with formik * 1284 - add formik to the flow form * 1284 - add the choose amount from the old donation flow * 1284 - add disabled prop to the options on the cards * 1284 - add the stripe payment intent to the context * 1284 - add the stripe key to the runtime config * 1284 - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * 1284 - add step splitter component * 1284 - add mobile view for the payment method * 1284 - add disabled and fix styling for the RadioAccordionGroup * 1284 - rewrite DonationFlowPage styles to use the new `styled` api * 1284 - remove unecessary `StyledLayout` * 1284 - move tax calculations and checkbox to the PaymentMethod step * 1284 - fix stripe promise and styling issues * 1284 - fix mobile and tablet styling * 1284 - remove stripe public key from the .env example file * 1284 - add `<LinkAuthenticationElement />` for email on the stripe payment * 1284 - fix rerendering issue on RadioCardItems * a11y - add accessibility :focus styling to all buttons * a11y - fix keyboard navigation for `LinkButton` component * dependencies - update material dependencies * 1292 - add authentication form RadioAccordionGroup and initial skeleton * 1292 - add the inline login form to the login step * 1292 - add translation to the `Authentication` * 1292 - fix Radio checks on the authentication form accordions * 1292 - add ƒorm validation and initial values * 1292 - add inline register form * 1292 - add authentication folder * 1292 - style form donate button * 1292 - return yup.then to non-functions * 1292 - fix payment method grid problem * 1292 - remove stripe public key from example env * 1292 - add heading to the form * 1292 - move payment method components to a folder * 1292 - change structure of the donation-flow directory * 1292 - add docs to the RadioGroup components * 1292 - fix context import * 1292 - remove `stripe-fee-calculators.ts` from the payment-method folder * 1292 - add `anonymous` as a seperate checkbox and field * feat-7134 - add a `NOREGISTER` state to the authentication and a conditionally rendered checkbox * feat-7134 - return the authentication on null if checkbox is unchecekd * avatar-letters-hotfix - add a fallback to `given_name` and `family_name` avatar letters (#1300) * put campaigns with status different than active at the bottom of the … (#1304) * put campaigns with status different than active at the bottom of the list * remove left out `console.log` * Fix Campaigns section max width and alignment on Homepage and Campaigns page (#1303) * Fix maxWidth of Campaigns section on Homepage * Fix maxWidth for Campaigns section on Campaign page * Fix alignment of campaigns page * Fix spacings on campaigns section * Remove unused import (#1306) * 1292 - add a noregister radio button and put the anonymous checkbox to be avaliable to both logged and unlogged users * 1292 - add an email field for no-register users * 1292 - arrange imports on the Authentication * Adding withdrawnAmount in Admin Campaign Grid (#1305) * fixed scroll in admin campaign grid * allow edit of public donor name for all donations - #1206 * fixed: misleading names for bank upload * fixed typos valt vs vault * moved: vault grid actions as first column * fixed: editing of withdrawals and status change to successfully approved * added: withdrawnAmount column in Admin Campaign grid * forbid changes on succeeded withdrawal --------- Co-authored-by: quantum-grit <[email protected]> * 1299 - move out stripe `Elements` in a separate provider outside the form * 1299 - add `formik-persist-values` dependency and session storage persistance * 1299 - add create stripe donation endpoint * 1299 - add update endpoint call to update the current payment intent * 1299 - add a call to the createStripePayment endpoint before submitting * 1299 - reorder imports * 1299 - update form validation * #1188, #1194 - Add POM for the E2E tests and update all tests (#1265) * Created basic POM for the Playwright tests - initial commit Added method and configurations Additional refactoring - methods, specs and gitignore Implemented Support page for E2E tests Fixed tests for Support page New changes on the tests * Created basic POM for the Playwright tests - initial commit Added method and configurations Additional refactoring - methods, specs and gitignore Implemented Support page for E2E tests Fixed tests for Support page New changes on the tests Fixes on E2E tests * Updated paths for the localization files for E2E * Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests * Revert "Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests" This reverts commit 3bb8a19, reversing changes made to b18b16b. * Updated Readme file * Fixed Sonar issues and updated Playwright version Additional fix * 1194 - init yarn project in the e2e folder and move out gitignore * 1194 - fix ts errors * 1194 - add e2e/.yarn to gitignore * 1194 - remove e2e/.yarn * 1194 - remove cached .yarn folder * 1194 - change GH Action workflow to now run the `test:e2e` * 1194 - change GH Action workflow to include artifacts of the reports and results * 1194 - fix home.page.ts ts errors * 1194 - remove hardcoded navigation to different environments * 1194 - add installation of dependencies for the e2e folder in the CI action * 1194 - fix translation on the homepage * 1194 - fix e2e script in the root folder * 1194 - add a tsconfig.build.json to exclude e2e while next is building * 1194 - add data based on the STAGING env variable * 1194 - resolve environment related tests * 1194 - remove uneccessasry `tsconfigPath` inside of the config * 1194 - put video to `off` by default * 1194 - add a clickCampaignByIndex method * 1194 - remove campaign specific test and changed them to index based * 1194 - add the index on the campaigns page list * 1194 - change the expiry date tests data to `04 / 42` * 1194 - add the index to the campaign card on the campaigns section on the home page * 1194 - add `playwright` as a dependency for the project * 1194 - add the changed `yarn.lock` * 1194 - fix the support action button click test to not click the card beforehand --------- Co-authored-by: Daniel Takev <[email protected]> * feat-7134 - add `yarn install --immutable` to the Github Workflow * feat-7134 - update `yarn.lock` * 1299 - fix `e2e` region pick test --------- Co-authored-by: Ani <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: Daniel Takev <[email protected]>
dimitur2204
added a commit
that referenced
this pull request
Feb 2, 2023
* payment-process-stripe - add flow context * payment-process-stripe - add choose amount component * payment-process-stripe - connect the accordion group to work with formik now * payment-process-stripe - connect the accordion card group to work with formik * payment-process-stripe - add formik to the flow form * payment-process-stripe - add the choose amount from the old donation flow * payment-process-stripe - add disabled prop to the options on the cards * payment-process-stripe - add the stripe payment intent to the context * payment-process-stripe - add the stripe key to the runtime config * payment-process-stripe - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * payment-process-stripe - add step splitter component * payment-process-stripe - add mobile view for the payment method * payment-process-stripe - add disabled and fix styling for the RadioAccordionGroup * 1284 - add flow context * 1284 - add choose amount component * 1284 - connect the accordion group to work with formik now * 1284 - connect the accordion card group to work with formik * 1284 - add formik to the flow form * 1284 - add the choose amount from the old donation flow * 1284 - add disabled prop to the options on the cards * 1284 - add the stripe payment intent to the context * 1284 - add the stripe key to the runtime config * 1284 - add locale to the stripe payment process * dependencies - bump up minor next version to 13.1 * 1284 - add step splitter component * 1284 - add mobile view for the payment method * 1284 - add disabled and fix styling for the RadioAccordionGroup * 1284 - rewrite DonationFlowPage styles to use the new `styled` api * 1284 - remove unecessary `StyledLayout` * 1284 - move tax calculations and checkbox to the PaymentMethod step * 1284 - fix stripe promise and styling issues * 1284 - fix mobile and tablet styling * 1284 - remove stripe public key from the .env example file * 1284 - add `<LinkAuthenticationElement />` for email on the stripe payment * 1284 - fix rerendering issue on RadioCardItems * a11y - add accessibility :focus styling to all buttons * a11y - fix keyboard navigation for `LinkButton` component * dependencies - update material dependencies * 1292 - add authentication form RadioAccordionGroup and initial skeleton * 1292 - add the inline login form to the login step * 1292 - add translation to the `Authentication` * 1292 - fix Radio checks on the authentication form accordions * 1292 - add ƒorm validation and initial values * 1292 - add inline register form * 1292 - add authentication folder * 1292 - style form donate button * 1292 - return yup.then to non-functions * 1292 - fix payment method grid problem * 1292 - remove stripe public key from example env * 1292 - add heading to the form * 1292 - move payment method components to a folder * 1292 - change structure of the donation-flow directory * 1292 - add docs to the RadioGroup components * 1292 - fix context import * 1292 - remove `stripe-fee-calculators.ts` from the payment-method folder * 1292 - add `anonymous` as a seperate checkbox and field * feat-7134 - add a `NOREGISTER` state to the authentication and a conditionally rendered checkbox * feat-7134 - return the authentication on null if checkbox is unchecekd * avatar-letters-hotfix - add a fallback to `given_name` and `family_name` avatar letters (#1300) * put campaigns with status different than active at the bottom of the … (#1304) * put campaigns with status different than active at the bottom of the list * remove left out `console.log` * Fix Campaigns section max width and alignment on Homepage and Campaigns page (#1303) * Fix maxWidth of Campaigns section on Homepage * Fix maxWidth for Campaigns section on Campaign page * Fix alignment of campaigns page * Fix spacings on campaigns section * Remove unused import (#1306) * 1292 - add a noregister radio button and put the anonymous checkbox to be avaliable to both logged and unlogged users * 1292 - add an email field for no-register users * 1292 - arrange imports on the Authentication * Adding withdrawnAmount in Admin Campaign Grid (#1305) * fixed scroll in admin campaign grid * allow edit of public donor name for all donations - #1206 * fixed: misleading names for bank upload * fixed typos valt vs vault * moved: vault grid actions as first column * fixed: editing of withdrawals and status change to successfully approved * added: withdrawnAmount column in Admin Campaign grid * forbid changes on succeeded withdrawal --------- Co-authored-by: quantum-grit <[email protected]> * 1299 - move out stripe `Elements` in a separate provider outside the form * 1299 - add `formik-persist-values` dependency and session storage persistance * 1299 - add create stripe donation endpoint * 1299 - add update endpoint call to update the current payment intent * 1299 - add a call to the createStripePayment endpoint before submitting * 1299 - reorder imports * 1299 - update form validation * #1188, #1194 - Add POM for the E2E tests and update all tests (#1265) * Created basic POM for the Playwright tests - initial commit Added method and configurations Additional refactoring - methods, specs and gitignore Implemented Support page for E2E tests Fixed tests for Support page New changes on the tests * Created basic POM for the Playwright tests - initial commit Added method and configurations Additional refactoring - methods, specs and gitignore Implemented Support page for E2E tests Fixed tests for Support page New changes on the tests Fixes on E2E tests * Updated paths for the localization files for E2E * Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests * Revert "Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests" This reverts commit 3bb8a19, reversing changes made to b18b16b. * Updated Readme file * Fixed Sonar issues and updated Playwright version Additional fix * 1194 - init yarn project in the e2e folder and move out gitignore * 1194 - fix ts errors * 1194 - add e2e/.yarn to gitignore * 1194 - remove e2e/.yarn * 1194 - remove cached .yarn folder * 1194 - change GH Action workflow to now run the `test:e2e` * 1194 - change GH Action workflow to include artifacts of the reports and results * 1194 - fix home.page.ts ts errors * 1194 - remove hardcoded navigation to different environments * 1194 - add installation of dependencies for the e2e folder in the CI action * 1194 - fix translation on the homepage * 1194 - fix e2e script in the root folder * 1194 - add a tsconfig.build.json to exclude e2e while next is building * 1194 - add data based on the STAGING env variable * 1194 - resolve environment related tests * 1194 - remove uneccessasry `tsconfigPath` inside of the config * 1194 - put video to `off` by default * 1194 - add a clickCampaignByIndex method * 1194 - remove campaign specific test and changed them to index based * 1194 - add the index on the campaigns page list * 1194 - change the expiry date tests data to `04 / 42` * 1194 - add the index to the campaign card on the campaigns section on the home page * 1194 - add `playwright` as a dependency for the project * 1194 - add the changed `yarn.lock` * 1194 - fix the support action button click test to not click the card beforehand --------- Co-authored-by: Daniel Takev <[email protected]> * feat-7134 - add `yarn install --immutable` to the Github Workflow * feat-7134 - update `yarn.lock` * 1299 - fix `e2e` region pick test * 1299 - add `formik-persist-values` dependency and session storage persistance * 1299 - add create stripe donation endpoint * 1299 - reorder imports * 1286 - add alerts column on desktop * 1286 - add payment method alerts and create a separete types file * 1286 - add authentication alert info * 1286 - add hiding logic to the alerts boxes * 1286 - remove recurring donations checkbox * 1286 - add summary alert box skeleton * 1286 - style summary alret box * 1286 - add a privacy field and move the anonymous checkbox * 1286 - add the splitter and fix typings * 1286 - add mobile alerts * 1286 - change authenticated text * 1286 - remove mobile auth alerts on desktop * 1286 - add strict typings to the form * 1286 - split register validation * 1286 - split login, general, amount validation * 1286 - split initial form values * 1286 - add error handling on the form submit requests * 1286 - fix otherAmount field validation problems * 1286 - change mutation configs to now use the mutationFn options * 1286 - update authentication alert after stripe form initialization * 1286 - add minus margins on the no registration alert * 1286 - fix other field price overlap * 1286 - add comment on the amount change * 1286 - add `useDonationFlow` hook * 1286 - comment out the `JSON.stringify(error)` and add a todo comment * 1286 - add alert max-width to match the PaymentSummary alert * 1286 - add PaymentSummaryAlert on mobile * 1286 - add back button, and cancel confirmation dialog * 1286 - adjust anchored alert width * 1286 - swapped the change and confirmation buttons * 1286 - removed unused imports --------- Co-authored-by: Ani <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: Daniel Takev <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix Campaigns section max width and alignment on Homepage and Campaigns page to be identical and responsive for bigger screens.
Screenshots:
Homepage:
Campaigns page: