PrivateCoffee/privatecoffee-website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New Membership Page and other changes #4

Merged
kumi merged 29 commits from membership-page into main 2024-05-30 10:15:10 +00:00
Conversation 2 Commits 29 Files changed 33 +860 -421
kumi commented 2024-05-27 15:55:46 +00:00
Owner
Copy link

Summary

The branch was meant specifically for a new membership page, but I tweaked a few other things too.
Among other things, I implemented a "development mode" in which users are alerted that they
probably want to use private.coffee instead of dev.private.coffee. I also applied some minor style
tweaks in other parts of the site.

Blockers

This PR is blocked by the lack of a membership signup form, which would be linked to from
templates/membership.html

Changes

CSS Updates

  • File: assets/css/base.css
    • Added new styles for .currency-col, .table-transparency, .section, and .alert-warning classes.
    • Enhanced the responsiveness and visual consistency of tables and Privacy Policy sections.

Python Updates

  • File: main.py
    • Added a development_mode attribute to the Flask app to toggle development mode.
    • Display a warning message when in development mode by rendering prod-warning.html.
    • Added a new command-line argument --dev and a PRIVATECOFFEE_DEV environment variable
      to enable development mode.

HTML Template Updates

  • File: templates/base.html

    • Added a conditional block to display a warning message when in development mode.

  • File: templates/legal.html

    • Removed redundant h1 tag from the legal notice section.

  • File: templates/membership.html

    • Redesigned the membership page to include cards for Membership, Bank Donations, and Crypto Donations.
    • Added a transparency report table.
    • Improved the layout and added a new section for contact information.

  • File: templates/privacy.html

    • Enhanced the privacy policy page by adding sections and improving readability.

  • File: templates/prod-warning.html

    • Created a new template to display a development mode warning message.

  • File: templates/simple.html

    • Updated the welcome message and added links to join specific rooms on the Element instance.

Screenshots

Membership Page

image

Privacy Policy Page

image

Testing

  • Verified that the development mode warning message appears when the PRIVATECOFFEE_DEV
    environment variable is set or the --dev argument is used.
  • Tested the responsiveness of the updated CSS styles on various screen sizes.
  • Checked the functionality of the new membership page layout and donation options.
  • Confirmed that the privacy policy page sections are correctly formatted and readable.

Additional Notes

  • The new styles and layout improvements enhance the user experience and provide a more
    professional look.
  • The addition of a development mode warning helps prevent confusion between development and
    production environments.

Related Issues

  • #1 - Website Update

Please review the changes and let me know if everything looks good

## Summary The branch was meant specifically for a new membership page, but I tweaked a few other things too. Among other things, I implemented a "development mode" in which users are alerted that they probably want to use private.coffee instead of dev.private.coffee. I also applied some minor style tweaks in other parts of the site. ## Blockers This PR is blocked by the lack of a membership signup form, which would be linked to from `templates/membership.html` ## Changes ### CSS Updates - **File:** `assets/css/base.css` - Added new styles for `.currency-col`, `.table-transparency`, `.section`, and `.alert-warning` classes. - Enhanced the responsiveness and visual consistency of tables and Privacy Policy sections. ### Python Updates - **File:** `main.py` - Added a `development_mode` attribute to the Flask app to toggle development mode. - Display a warning message when in development mode by rendering `prod-warning.html`. - Added a new command-line argument `--dev` and a `PRIVATECOFFEE_DEV` environment variable to enable development mode. ### HTML Template Updates - **File:** `templates/base.html` - Added a conditional block to display a warning message when in development mode. - **File:** `templates/legal.html` - Removed redundant `h1` tag from the legal notice section. - **File:** `templates/membership.html` - Redesigned the membership page to include cards for Membership, Bank Donations, and Crypto Donations. - Added a transparency report table. - Improved the layout and added a new section for contact information. - **File:** `templates/privacy.html` - Enhanced the privacy policy page by adding sections and improving readability. - **File:** `templates/prod-warning.html` - Created a new template to display a development mode warning message. - **File:** `templates/simple.html` - Updated the welcome message and added links to join specific rooms on the Element instance. ## Screenshots ### Membership Page ![image](/attachments/a5c6e943-7afd-4f3c-8575-828efec1adb9) ### Privacy Policy Page ![image](/attachments/be4b0caa-c342-4d83-928c-53884b37c15b) ## Testing - Verified that the development mode warning message appears when the `PRIVATECOFFEE_DEV` environment variable is set or the `--dev` argument is used. - Tested the responsiveness of the updated CSS styles on various screen sizes. - Checked the functionality of the new membership page layout and donation options. - Confirmed that the privacy policy page sections are correctly formatted and readable. ## Additional Notes - The new styles and layout improvements enhance the user experience and provide a more professional look. - The addition of a development mode warning helps prevent confusion between development and production environments. ## Related Issues - #1 - Website Update --- Please review the changes and let me know if everything looks good
image.png
1.2 MiB
image.png
2.1 MiB
kumi added 15 commits 2024-05-27 15:55:46 +00:00 
Redesigned the membership and donations page to improve user engagement and visual appeal. The update introduces a more organized layout with separate sections for membership details, bank, and new cryptocurrency donation options. Each section is now contained within card layouts, offering a cleaner and more accessible interface. Additionally, a new transparency report section has been added to foster trust through financial openness. This change aims to encourage more memberships and donations by making information clearer and adding modern donation options like Bitcoin, Monero, and Ethereum.
This update introduces additional columns in the membership financial report to separately list cryptocurrency incomes such as Bitcoin (BTC), Ethereum (ETH), and Monero (XMR). A new CSS class, `currency-col`, ensures these columns maintain a consistent and readable width without wrapping, improving the overall clarity and usability of the report. This change addresses a growing need to track and report digital currency transactions distinctly from traditional currency, reflecting the organization's evolving financial landscape and responding to the increasing relevance of cryptocurrencies in its operations.
Updated the membership page to include a specific Monero (XMR) cryptocurrency address. This enhancement allows members to make contributions using Monero, providing greater flexibility and privacy for donations.
Updated the cryptocurrency donation options in the membership page. Bitcoin (BTC) and Ethereum (ETH) addresses are now marked as "Coming soon™", reflecting their upcoming availability for donations. Additionally, improved the display of the Monero (XMR) address for better clarity by enclosing it in code tags. Introduced OpenAlias support with an easy-to-remember alias for donations, enhancing user experience and donation process simplicity. Also, refined the financial table by fixing a markup error to ensure proper display.

This change aims to keep our members informed about the donation options available and to streamline the donation process, making it more accessible and user-friendly. The introduction of an Open-like Alias further simplifies the donation process for users who prefer using human-readable addresses over traditional cryptocurrency addresses.

The markup adjustment in the financial table ensures consistency and readability across the website.
Updated the donation details in the membership section to be more inviting and informative for non-members. This includes a clearer call to action for bank donations and a minor clarification in the cryptocurrency donations section. The account holder's name is now highlighted for better visibility, and formatting was adjusted for improved readability.

The update aims to encourage donations by making the process more transparent and emphasizing how contributions directly support our activities and service expansion.
Updated the welcome section in `simple.html` to encourage newly registered users to join specific Private.coffee rooms. Added direct links to key community spaces including general support and off-topic rooms, promoting engagement and providing immediate access to support and discussions. This change aims to increase user interaction and support community growth by making it easier for users to find and join relevant conversations right from the start.
Updated descriptions in 'base.html' and 'simple.html' to better reflect Private.coffee's identity as a privacy-focused non-profit association. The new descriptions emphasize the organization's commitment to privacy and digital sovereignty, aligning more closely with its objectives and activities. This change ensures that website visitors receive a clearer understanding of Private.coffee's mission right from their first interaction, potentially improving engagement and support for its privacy advocacy efforts.
Updated the Bitcoin address for donations, enhancing the convenience for members to contribute in cryptocurrencies. Improved the clarity and precision of the financial transparency section by specifying the report for May 2024, adjusting currency and cryptocurrency figures to reflect actual transactions, and introducing account balance tracking at the start and end of the month. Adjusted table styling in the CSS to ensure financial data is presented clearly, with currency columns widened and text aligned for better readability.

These changes aim to increase transparency, trust, and ease of contribution among members, supporting the organization's commitment to accountability and member involvement in its financial health.
Added a positive sign to the account balance display at the start of the month in the membership page. This minor but critical change improves clarity for users by explicitly indicating that the balance is a positive amount, enhancing their understanding of their financial status at a glance. This adjustment aligns with user feedback requesting clearer financial representations, thereby improving user experience.
Corrected the display of Ethereum (ETH) income in the membership summary table to not show a misleading "+" sign before a zero value. This change ensures consistency and clarity in financial reporting across different cryptocurrencies, eliminating any confusion for users analyzing their income streams.
Ensure consistency in the display of Bitcoin (BTC) balances by adjusting the number of decimal places to eight, aligning with standard cryptocurrency precision norms. This update promotes readability and uniformity across financial representations in the membership section.
Removed the bg-primary-gradient class from a section in the legal.html template to align with the updated design guidelines aiming for a cleaner, more professional look. This change contributes to the website's overall visual cohesion and improves readability.
Removed the "Legal Notice" header from the legal.html template to enhance layout clarity and focus user attention on the essential legal information. This change simplifies the page structure, making it easier for users to navigate and understand the legal notices of private.coffee immediately upon landing on the page.
Overhauled the privacy.html template and base.css to enhance readability and user experience. The privacy policy content has been divided into distinct sections with added padding and a solid border at the bottom for better visual separation. This restructuring aims to make the information more accessible and easier for users to navigate, aligning with best practices for web content accessibility and design. Additionally, updated the heading style in privacy.html to feature a centered, more prominent design, reflecting a modern aesthetic approach.

No changes to the text of the policy were made.
Introduced a development mode toggle for the app, which, when enabled, displays a distinctive warning on every page to inform users they are viewing a development version of the site. This warning is styled for clear visibility. Development mode is toggled with a new `--dev` command line argument or by setting an environment variable. The change aims to prevent confusion between the development and production environments for both developers and early users.

- Added new CSS rules for a warning alert style in `base.css`.
- Modified `main.py` to check for a development mode flag and pass a warning message to the template if the flag is set.
- Updated `base.html` to include the warning message when present.
- Added a new template for the development warning message.
kumi changed title from New Membership Page and other changes to WIP: New Membership Page and other changes 2024-05-27 16:34:02 +00:00
kumi added 1 commit 2024-05-28 05:41:40 +00:00 
Refactored the Terms of Service page to improve its structure and aesthetic appeal. Introduced centered headings, more prominent section dividers, and simplified the presentation of content for better user engagement and readability. These changes aim to make the Terms of Service easier to navigate and understand, hopefully increasing the likelihood that visitors will read and comprehend their obligations and our commitments.

No changes to the contents of the terms were made.
kumi commented 2024-05-28 05:42:34 +00:00
Author
Owner
Copy link

Applied the styling changes I made to the Privacy Policy to the Terms as well. Missed those somehow.

Applied the styling changes I made to the Privacy Policy to the Terms as well. Missed those somehow.
kumi added 1 commit 2024-05-28 17:06:09 +00:00 
Updated the membership fees and server costs in the membership page to reflect the new fiscal year adjustments. Membership fees have been increased from €365.00 to €390.00 to accommodate enhanced member benefits. Additionally, server costs have been revised from €424.65 to €430.04 due to an uptick in maintenance expenses. These changes ensure that the organization remains financially healthy and continues to provide high-quality services to its members.
kumi added 1 commit 2024-05-28 17:07:40 +00:00 
Updated the end-of-month account balance displayed on the membership page to reflect more accurate and recent data. This change ensures users have up-to-date financial information, enhancing transparency and trust in our services.
kumi added 1 commit 2024-05-28 17:09:04 +00:00 
Adjusted the total income and expense figures in the `membership.html` template to reflect the latest financial data. This update ensures that users are provided with the most current and accurate financial information regarding membership costs and income. Accurate financial reporting is crucial for transparent and trustful user relationships.
kumi added 1 commit 2024-05-28 18:38:42 +00:00 
Introducing a new `finances.json` to track our financial transactions for 2024, marking the beginning of a structured financial data management approach. This addition includes detailed records for membership fees, donations, server costs, domain names, operating expenses, and currency conversions for April and May. The setup facilitates more transparent and efficient financial planning, with support for multi-currency transactions (EUR, BTC, and XMR), showcasing our commitment to embracing diverse donation methods. This step is pivotal for enhancing our fiscal tracking and analysis capabilities, ensuring better financial health and resource allocation moving forward.
kumi added 1 commit 2024-05-28 18:39:40 +00:00 
Simplified the display of the account holder's information in the membership donation section by removing the verbose description about the organization's mission and digital sovereignty. This change makes the donation information more concise and focused, enhancing readability and clarity for potential donors, especially Olafs. The decision to streamline this section was driven by Olaf's feedback indicating a preference for more straightforward donation instructions.
kumi added 1 commit 2024-05-29 05:32:38 +00:00
kumi added 1 commit 2024-05-29 12:50:57 +00:00 
Implemented dynamic financial transparency tables to automatically generate and display monthly financial data for memberships, including incomes, expenses, and balances across multiple currencies. This change involved adding a new `finances.py` helper to process financial data and integrate it with the existing Flask application. Additionally, adjusted the CSS for better alignment and readability of currency columns in the transparency tables.

- Introduced a `generate_transparency_table` function to generate HTML tables dynamically based on the latest financial data.
- Expanded the `main.py` Flask route for the membership page to include financial data rendering, ensuring up-to-date information is presented to users.
- Removed static HTML table from the membership template in favor of dynamically generated content, offering real-time insight into finances.
- Adjusted the width and text alignment of currency columns in `base.css` for enhanced table aesthetics and readability.

This update significantly improves the transparency of financial information, making it easier for members to understand the flow of funds within the organization.
kumi added 1 commit 2024-05-29 13:05:02 +00:00 
- Moved `finances.json` and `services.json` to a new `data` directory for better organization.
- Introduced `get_latest_month` function in `helpers/finances.py` to dynamically determine the latest financial reporting period.
- Updated `main.py` to use the new data paths and implement dynamic generation of the transparency report date, improving the clarity of financial reports.
- Modified `membership.html` template to display financial report for the dynamically determined latest month, enhancing transparency for donations.

These changes aim to improve data management, make financial reporting more transparent, and ensure users have access to the most current financial information. Moving JSON files to a dedicated directory helps with organizing resources better. By dynamically determining the latest financial period, the application now avoids hard-coded dates, increasing accuracy and reducing maintenance effort.
kumi added 1 commit 2024-05-29 13:33:22 +00:00 
Updated `services.json` to include icon data for better visual identification of services. Also, removed unused services (Nitter and Proxigram) to streamline service offerings and improve maintainability. In `index.html`, amended the template to dynamically display these icons, enhancing the UI/UX. This change makes the service list more visually appealing and intuitive, directly linking visual cues to services for quicker recognition.

Additionally, this update contributes to a cleaner codebase by removing references to services no longer in use, thus improving code quality and reducing potential confusion regarding supported services.
kumi added 1 commit 2024-05-29 16:57:37 +00:00 
Implemented a new template filter in Flask to dynamically render SVG icons, allowing for cleaner HTML templates and easier icon management. Added `coffee` and `envelope` SVG icons to the project's asset directory. This change not only streamlines the incorporation of new icons but also enhances the maintainability of the codebase by centralizing icon resources and reducing HTML clutter. Modified existing HTML templates to use this new dynamic icon rendering method, replacing hard-coded SVG and img tag icon implementations with the newly created template filter.

This update significantly improves the way icons are handled throughout the application, providing a more scalable and efficient approach to managing and displaying graphical elements.
kumi added 1 commit 2024-05-29 17:02:22 +00:00 
Improved the `icon` function to handle attribute errors gracefully by falling back to an alternative reading method. This change addresses potential situations where the `file.response.file` attribute does not exist, ensuring icons are consistently loaded without causing runtime errors. The fallback method, `file.response.read()`, provides a reliable alternative for retrieving SVG files, thus enhancing the application's resilience and user experience.
kumi added 1 commit 2024-05-30 09:45:05 +00:00 
Updated the membership section in `membership.html` to provide a clearer and more comprehensive explanation of how membership fees are utilized, emphasizing support for day-to-day activities and services for members and the public. Additionally, modified the call to action for joining, inviting prospective members to contact us for more information instead of direct solicitation to join. This change better outlines the value and purpose behind membership fees and encourages engagement through personal interaction.

These updates aim to enhance transparency regarding fund usage and to foster a more personalized connection with potential members, which could improve member recruitment and retention rates.
kumi added 1 commit 2024-05-30 10:11:55 +00:00 
Introduced a new style rule for large icons to utilize the primary color as their fill, improving visual consistency across the UI. This change ensures that larger icons blend seamlessly with the overall color scheme of the interface, enhancing user experience and maintaining brand identity.
kumi changed title from WIP: New Membership Page and other changes to New Membership Page and other changes 2024-05-30 10:14:12 +00:00
kumi commented 2024-05-30 10:14:59 +00:00
Author
Owner
Copy link

Merging as there were no complaints here or in the Matrix Members room.

Merging as there were no complaints here or in the Matrix Members room.
kumi merged commit 99a5f96157 into main 2024-05-30 10:15:10 +00:00
kumi deleted branch membership-page 2024-05-30 10:15:23 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: PrivateCoffee/privatecoffee-website#4
No description provided.
Delete branch "membership-page"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?