Feedback improvements #174
Conversation
Add logo to main banner on mobite Donation page improvements
funders: add CTA
WalkthroughThe recent updates encompass a range of improvements to the website, focusing on enhancing visual presentation, user experience, and community engagement. Changes include refining list formatting, updating download prompts, introducing merchandise support, and optimizing CSS styles for responsiveness. HTML restructuring enhances clarity in sections like QGIS supporters. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 7
Configuration used: CodeRabbit UI
Files ignored due to path filters (12)
static/img/addsupporter.svgis excluded by:!**/*.svgstatic/img/contributors/hoodie.jpgis excluded by:!**/*.jpgstatic/img/contributors/qgis-heart-logo.jpgis excluded by:!**/*.jpgstatic/img/contributors/qgis-q-logo (1).jpgis excluded by:!**/*.jpgstatic/img/contributors/qgis-q-logo.jpgis excluded by:!**/*.jpgstatic/img/contributors/qgis-q.jpgis excluded by:!**/*.jpgstatic/img/contributors/redbubble1.jpgis excluded by:!**/*.jpgstatic/img/contributors/redbubble2.jpgis excluded by:!**/*.jpgstatic/img/contributors/redbubble3.jpgis excluded by:!**/*.jpgstatic/img/contributors/redbubble4.jpgis excluded by:!**/*.jpgstatic/img/contributors/redbubble5.jpgis excluded by:!**/*.jpgstatic/img/contributors/thermos.jpgis excluded by:!**/*.jpg
Files selected for processing (12)
- content/community/involve.md (1 hunks)
- content/download/index.md (1 hunks)
- content/goodies.md (1 hunks)
- themes/hugo-bulma-blocks-theme/assets/sass/bulma/components/fund.sass (1 hunks)
- themes/hugo-bulma-blocks-theme/assets/sass/bulma/components/sidebar.sass (2 hunks)
- themes/hugo-bulma-blocks-theme/assets/sass/bulma/elements/container.sass (1 hunks)
- themes/hugo-bulma-blocks-theme/assets/sass/bulma/elements/image.sass (1 hunks)
- themes/hugo-bulma-blocks-theme/assets/sass/bulma/layout/hero.sass (2 hunks)
- themes/hugo-bulma-blocks-theme/assets/sass/style.sass (2 hunks)
- themes/hugo-bulma-blocks-theme/layouts/partials/banner.html (1 hunks)
- themes/hugo-bulma-blocks-theme/layouts/partials/funders-simple.html (1 hunks)
- themes/hugo-bulma-blocks-theme/layouts/shortcodes/hide-donate-prompt.html (1 hunks)
Files skipped from review due to trivial changes (2)
- content/download/index.md
- themes/hugo-bulma-blocks-theme/layouts/partials/banner.html
Additional comments: 4
themes/hugo-bulma-blocks-theme/assets/sass/bulma/elements/image.sass (1)
- 8-13: > 📝 NOTE
This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [1-1]
The modifications to image styles, including the removal of
width: 100%forimgelements, could impact responsiveness. Test these changes with various content to ensure images display correctly across different devices. Consider conditionally applyingwidth: 100%to maintain responsiveness where necessary.themes/hugo-bulma-blocks-theme/assets/sass/bulma/components/sidebar.sass (1)
- 88-96: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [91-116]
The adjustments to padding and margin in the sidebar for screens up to 1023px are likely to improve usability on mobile devices. Test these changes across various screen sizes to ensure they enhance the sidebar's navigability without negatively impacting the layout on larger screens or in different contexts.
themes/hugo-bulma-blocks-theme/assets/sass/bulma/layout/hero.sass (1)
- 203-223: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [175-222]
The enhancements to the hero section, including adjustments for mobile view and styling changes to elements like
.container,.logo, and.label, aim to improve visual impact and readability. Test the hero section's responsiveness and accessibility across various devices to ensure these changes enhance the user experience without compromising usability. Also, verify that the styling changes align with the project's overall design system.themes/hugo-bulma-blocks-theme/assets/sass/style.sass (1)
- 24-29: The added styling for
.contentwithin.columnsunder a max-width of 1024px is a good improvement for responsiveness. It ensures that content within columns is displayed as a block on smaller screens, enhancing readability and user experience. This change aligns well with responsive design principles.
| padding: 3px 12px | ||
| margin: 0 2px 5px 0px | ||
| display: inline-block | ||
| text-wrap: nowrap | ||
| border-radius: 30px | ||
| background: #58963217 |
There was a problem hiding this comment.
The styling added for .scroll-on-page elements introduces several properties including padding, margin, display, text-wrap, border-radius, and background color. This styling enhances the visual appeal and readability of scroll-on-page elements, making them more distinct and easier to interact with. However, the text-wrap: nowrap; property might not be valid CSS. The correct property for preventing text wrapping is white-space: nowrap;.
- text-wrap: nowrap
+ white-space: nowrapCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| padding: 3px 12px | |
| margin: 0 2px 5px 0px | |
| display: inline-block | |
| text-wrap: nowrap | |
| border-radius: 30px | |
| background: #58963217 | |
| padding: 3px 12px | |
| margin: 0 2px 5px 0px | |
| display: inline-block | |
| white-space: nowrap | |
| border-radius: 30px | |
| background: #58963217 |
| @@ -1 +1 @@ | |||
| <button class="button is-info is-inverted" id="hide-donate-prompt" onclick="hidePrompt()">I don’t want to participate</button> | |||
| <button class="button is-primary6" id="hide-donate-prompt" onclick="hidePrompt()">Skip it and go to download</button> | |||
There was a problem hiding this comment.
The button element's update improves clarity for users. However, consider enhancing accessibility by adding an aria-label attribute that describes the button's action, e.g., aria-label="Skip donation prompt and proceed to download". Also, ensure the custom class is-primary6 aligns with the project's styling conventions and is defined in the SASS files.
| +tablet | ||
| max-width: $tablet - $container-offset |
There was a problem hiding this comment.
The addition of a max-width for tablets enhances the responsiveness of the container element. Ensure that the $container-offset and $tablet variables are consistently defined and used across the project to maintain styling consistency and readability.
| .add-supporter | ||
| a | ||
| text-align: center | ||
| color: #002033 |
There was a problem hiding this comment.
The new style for .add-supporter a selector improves visual consistency. Verify that the color contrast of #002033 meets accessibility standards for text against its background. Also, ensure this style aligns with the project's overall design system for a cohesive user experience.
content/goodies.md
Outdated
| --- | ||
| type: "page" | ||
| title: "Diversity statement" | ||
| subtitle: "" | ||
| draft: false | ||
| sidebar: true | ||
| --- | ||
|
|
||
| {{< content-start >}} | ||
|
|
||
|
|
||
| Goodies | ||
| =========================================== | ||
|
|
||
| If you are a fan of QGIS, you might want to visit our store so you can buy some momentos to show off your favourite desktop GIS. We have a number of great t-shirts, mugs, hoodies, caps and so on so pay a visit to one of our stores below! | ||
|
|
||
| Buying QGIS apparel not only lets you show off the fact that you use QGIS, for every t-shirt sold a commission is given to the QGIS project. | ||
|
|
||
|
|
||
| {{< columns-start >}} | ||
| {{< column-start class="is-flex-direction-column is-one-third">}} | ||
| ## Spreadshirt | ||
| We co-operate with Spreadshirt. They produce locally and ship the products to all countries in the world. | ||
|
|
||
| [https://shop.spreadshirt.net/qgis/](https://shop.spreadshirt.net/qgis/) | ||
|
|
||
| {{< column-end >}} | ||
|
|
||
| {{< column-start class="is-flex-direction-column is-two-thirds">}} | ||
| {{< columns-start >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< columns-end >}} | ||
|
|
||
| {{< columns-start >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< columns-end >}} | ||
|
|
||
| {{< column-end >}} | ||
| {{< columns-end >}} | ||
|
|
||
|
|
||
|
|
||
|
|
||
| {{< columns-start >}} | ||
| {{< column-start class="is-flex-direction-column is-one-third">}} | ||
| ## Redbubble | ||
| Some more creative and funny (but unofficial) designs can be found in the Red Bubble store. | ||
|
|
||
| [https://www.redbubble.com/shop/qgis](https://www.redbubble.com/shop/qgis) | ||
|
|
||
| {{< column-end >}} | ||
|
|
||
| {{< column-start class="is-flex-direction-column is-two-thirds">}} | ||
| {{< columns-start >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< columns-end >}} | ||
|
|
||
| {{< columns-start >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< columns-end >}} | ||
|
|
||
| {{< column-end >}} | ||
| {{< columns-end >}} | ||
|
|
||
|
|
||
| {{< content-end >}} |
There was a problem hiding this comment.
The addition of a "Diversity statement" and promotion of QGIS merchandise is well-structured and enhances community engagement. Ensure all images have descriptive alt text for accessibility. Also, verify that external links to merchandise stores are accessible and reliable to maintain a positive user experience.
| <div class="pb-2"> | ||
| <h2> | ||
| QGIS supporters | ||
| </h2> | ||
| </div> | ||
| <div class="supporters-grid large-grid"> | ||
| <div class="large-supporter is-vertical is-flex fund-Flagship add-supporter"> | ||
| <article class="tile is-child box is-transparent is-flex is-justify-content-center is-align-items-center"> | ||
| <a href="/community/members/sustaining_member/"> | ||
| <figure> | ||
| <img src="{{ .Site.BaseURL }}/img/addsupporter.svg" alt="add supporter"> | ||
| </figure> | ||
| </a> | ||
| </article> | ||
| <a class="partner-title" href="/community/members/sustaining_member/"> | ||
| Add your logo here? | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
The restructuring of the "QGIS supporters" section with a clearer heading and an option to add logos is a positive change. Ensure semantic HTML practices are followed, including the use of appropriate headings and accessible links. Also, verify the visual and functional integration of the new supporter block with the existing layout, ensuring it enhances user engagement without compromising accessibility.
| @@ -10,7 +10,7 @@ sidebar: true | |||
| {{< content-start >}} | |||
| ## Ways of Contributing | |||
|
|
|||
| [Participate in Support Channels](#participate-in-support-channels "scroll-on-page"), [Report Bugs](#report-bugs "scroll-on-page"), [QGIS Documentation](#qgis-documentation "scroll-on-page"), [Translate QGIS](#translate-qgis "scroll-on-page"), [Develop a Plugin](#develop-a-plugin "scroll-on-page"), [Develop QGIS Core](#develop-qgis-core "scroll-on-page"), [Sustain & Donate](#sustain--donate "scroll-on-page") | |||
| [Participate in Support Channels](#participate-in-support-channels "scroll-on-page") [Report Bugs](#report-bugs "scroll-on-page") [QGIS Documentation](#qgis-documentation "scroll-on-page") [Translate QGIS](#translate-qgis "scroll-on-page") [Develop a Plugin](#develop-a-plugin "scroll-on-page") [Develop QGIS Core](#develop-qgis-core "scroll-on-page") [Sustain & Donate](#sustain--donate "scroll-on-page") | |||
There was a problem hiding this comment.
Removing commas between links in the list of ways to contribute improves readability and visual appeal. Verify the list's readability and navigability post-change to ensure it aligns with the project's documentation standards and enhances the user experience.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: CodeRabbit UI
Files ignored due to path filters (11)
content/goodies/img/hoodie.jpgis excluded by:!**/*.jpgcontent/goodies/img/qgis-heart-logo.jpgis excluded by:!**/*.jpgcontent/goodies/img/qgis-q-logo (1).jpgis excluded by:!**/*.jpgcontent/goodies/img/qgis-q-logo.jpgis excluded by:!**/*.jpgcontent/goodies/img/qgis-q.jpgis excluded by:!**/*.jpgcontent/goodies/img/redbubble1.jpgis excluded by:!**/*.jpgcontent/goodies/img/redbubble2.jpgis excluded by:!**/*.jpgcontent/goodies/img/redbubble3.jpgis excluded by:!**/*.jpgcontent/goodies/img/redbubble4.jpgis excluded by:!**/*.jpgcontent/goodies/img/redbubble5.jpgis excluded by:!**/*.jpgcontent/goodies/img/thermos.jpgis excluded by:!**/*.jpg
Files selected for processing (2)
- content/goodies/index.md (1 hunks)
- themes/hugo-bulma-blocks-theme/assets/sass/style.sass (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- themes/hugo-bulma-blocks-theme/assets/sass/style.sass
Additional comments: 4
content/goodies/index.md (4)
- 1-7: The front matter has been updated to include a "Diversity statement" title. Ensure this aligns with the site's content strategy and navigation expectations. The presence of
sidebar: truesuggests this page will have a sidebar, which is typical for content pages but verify if this fits the design and layout intentions for a diversity statement page.- 12-18: The introduction to the "Goodies" section is clear and engaging, effectively communicating the purpose of the merchandise and its benefit to the QGIS project. This is a good practice for encouraging community support through merchandise sales.
- 20-52: The usage of Hugo shortcodes for layout (
columns-start,column-start,column-end,columns-end) is correctly applied to structure the content into columns. However, ensure that the images referenced (e.g.,img/hoodie.jpg,img/qgis-heart-logo.jpg) are correctly placed in the site's static assets directory and that their naming convention is consistent with the site's standards.- 92-92: The use of
{{< content-end >}}correctly signifies the end of the content section. This is a good practice for maintaining a consistent structure across the site's pages.
| {{< columns-start >}} | ||
| {{< column-start class="is-flex-direction-column is-one-third">}} | ||
| ## Redbubble | ||
| Some more creative and funny (but unofficial) designs can be found in the Red Bubble store. | ||
|
|
||
| [https://www.redbubble.com/shop/qgis](https://www.redbubble.com/shop/qgis) | ||
|
|
||
| {{< column-end >}} | ||
|
|
||
| {{< column-start class="is-flex-direction-column is-two-thirds">}} | ||
| {{< columns-start >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< columns-end >}} | ||
|
|
||
| {{< columns-start >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end >}} | ||
| {{< column-start>}} | ||
|  | ||
| {{< column-end>}} | ||
| {{< columns-end >}} | ||
|
|
||
| {{< column-end >}} | ||
| {{< columns-end >}} |
There was a problem hiding this comment.
Similar to the previous comment, the layout for the Redbubble merchandise section is well-structured using Hugo shortcodes. Again, verify the existence and correct placement of the referenced images in the static assets directory. Additionally, consider adding alt text to the images for improved accessibility and SEO.
- 
+ 
- 
+ Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| {{< columns-start >}} | |
| {{< column-start class="is-flex-direction-column is-one-third">}} | |
| ## Redbubble | |
| Some more creative and funny (but unofficial) designs can be found in the Red Bubble store. | |
| [https://www.redbubble.com/shop/qgis](https://www.redbubble.com/shop/qgis) | |
| {{< column-end >}} | |
| {{< column-start class="is-flex-direction-column is-two-thirds">}} | |
| {{< columns-start >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end>}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end>}} | |
| {{< columns-end >}} | |
| {{< columns-start >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end>}} | |
| {{< columns-end >}} | |
| {{< column-end >}} | |
| {{< columns-end >}} | |
| {{< columns-start >}} | |
| {{< column-start class="is-flex-direction-column is-one-third">}} | |
| ## Redbubble | |
| Some more creative and funny (but unofficial) designs can be found in the Red Bubble store. | |
| [https://www.redbubble.com/shop/qgis](https://www.redbubble.com/shop/qgis) | |
| {{< column-end >}} | |
| {{< column-start class="is-flex-direction-column is-two-thirds">}} | |
| {{< columns-start >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end >}} | |
| {{< columns-end >}} | |
| {{< columns-start >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end >}} | |
| {{< column-start>}} | |
|  | |
| {{< column-end >}} | |
| {{< columns-end >}} | |
| {{< column-end >}} | |
| {{< columns-end >}} |
Summary by CodeRabbit