Things I did/learn as a part of Google Summer of Code in 2022 at PostgreSQL.
The current repository doesn't contain any README and installation guide. So I have added installation steps and other required files.
-
Added
README.mdfor project description and contribution guidelines -
Added
requirements.txt, which contains the project's dependencies -
Added installation guide dev_install.md
-
Created separate table.sql file for database initialization
-
NOTE:- You need to download mbox for
pgsql-hackerslist and include it in theloaderdirectory for sample data (Download link)
In new design I have used Bootstrap Table which is an extended version of Table component of Bootstrap
- Added
bootstrap-table.min.cssandbootstrap-table.min.jsin the /media/ directory - Imported these files in the
base.html
If you install and run the pgarchives code available in the pgarchives repository and compare it with the https://www.postgresql.org/list/. You will notice the difference.
The font family, color, weight and table's background color is different
The hover effect is not present for any link. We must have this as it clearly shows what the user has selected or the cursor's position.
-
Patch for above 2 updates: patches/0001-Removed-inconsistency-of-CSS-added-link-hover-effect.patch
-
File affected:
django/media/css/main.css
- Changed background color to distinguish the side navbar from the main page content.
- Added hover effect for links and changed the display of tag to block, which makes links clickable for the entire outer
- tag. It gives the user a feel of the button, so they don’t need to move the cursor over text carefully.
- Also, the current quick links section/side nav disappears on scrolling the page. To access that side nav user again needs to scroll up. I think it won’t give users an experience of accessing things quickly as they need to scroll up and down every time. To improve this, I fixed the side-nav position to the left. So the side nav will remain at the same place after scrolling.
- Added appropriate icons for each quick link.
-
Files affected:
django/archives/mailarchives/templates/page.html|django/media/css/main.css
- Used accordion for initial points (listed below)
- What are the PostgreSQL Mailing Lists?
- Tips For Using the PostgreSQL Mailing Lists
- How to Subscribe or Unsubscribe
- These points are optional, like FAQs. The interested person can read the content by clicking on the corresponding point. So by using accordion we can save page size and avoid unnecessary scrolling on this page.
- Designed this using onclick event and animation to enrich the user experience.
- Used bootstrap-table to redesign the tables.
- Instead of using CDN I downloaded css & js files and added them to the media directory.
- Used different background colors for the table header and table entries.
- Added links class/effect to list names so that things will be consistent throughout the page.
- Added horizontal line to separate two list groups.
- Used pagination and added an option to configure max entries to be displayed.
- Added a search box for each table to quickly search for a specific list of that group.
-
Patch for above 2 updates: patches/0001-Used-Accordion-for-general-info-redesigned-mailing-l.patch
-
Files affected:
django/archives/mailarchives/templates/index.html|django/media/css/main.css
- Used a different color for the header of the table
- In the current design, years are not clearly visible. It has been dissolved in all reddish text.
- Color used - Official PostgreSQL blue color [#336791]
- Used accordion for each year which contains a month list.
- It will be helpful in the the future as in the current design, we have a separate table for each year containing a month list and action to view the archives and download mbox. This representation will affect user experience in the coming years as there will be too many tables if we think about the next couple of years. Much scrolling will be required to look at archives of a particular year and month. Use of accordion will definitely prevent long scrolling
- Added search box
- We don’t have any option to go to a specific year quickly
- This search box will allow users to enter a year and it will display only that particular year's accordion
- Included in the
django/media/js/main.js
- Replaced text with icons
- Currently, we are using view archives and download mbox text repeatedly, which is not giving a good feel
- To avoid this repetition of text, I used appropriate icons
- Added hover effect to elements (month name, archives & download icon)
-
Files affected:
django/archives/mailarchives/templates/monthlist.html|django/media/css/main.css|django/media/js/main.js
- Used a different color for the header of the table to make it distinguishable from table entries
- Added option to configure max entries to be displayed to avoid long scrolling
- Added client-side search box to search particular threads quickly
- Added hover effect to each data row
- Added bit spacing around each data entry to increase readability
-
Files affected:
django/archives/mailarchives/templates/datelist.html|django/archives/mailarchives/templates/datelist_topandbottom.html|django/media/css/main.css
- The header part of the thread looks very congested and hard to read
- So added more spacing between 2 lines. Also, the used bullets for each info
- For views, used buttons instead of simple text
- Added functionality to copy message id
- Created filter to map username to email to avoid displaying a long list of a username followed by emails in cc/to list
- Handled horizontal overflow in case of smaller width devices
-
Files affected:
django/archives/mailarchives/templates/_message.html|django/archives/mailarchives/templatetags/pgfilters.py|django/media/css/main.css|django/media/js/main.js
- In the navbar, instead of Your account, displaying the user name along with the profile icon would be more appealing
- Displaying your account to unauthenticated/new users gives intuition that they have an account and are logged in, which is not true
- The new design displays dynamic text, either login or username, along with a profile icon.
- If a user is logged in, show the username
- Else display text login
-
File affected:
django/archives/mailarchives/templates/base.html