Re: pgarchives new design review - Mailing list pgsql-www

From Sahil Harpal
Subject Re: pgarchives new design review
Date
Msg-id CAKi=nne9qpwd=V=9Br1Tf_OZvAS=3qJMTwhjxwMQT1jRBLA42A@mail.gmail.com
Whole thread Raw
In response to pgarchives new design review  (Sahil Harpal <sahilharpal1234@gmail.com>)
List pgsql-www
Hello,
I'm attaching following patches for pgarchives project.

0001-Add-bootstrap-table-static-files.patch
  • This is to add CSS and JS files that are required for bootstrap tables
0001-Import-css-js-files-of-bootstrap-table-in-the-base.h.patch
  • Imported required files in the base.html file
  • Currently we have Your account nav option. This Your account text is quite confusing. When the user is not logged in , showing Your account is a bit incorrect. Ideally it should be Sign in/Login etc. So I added a condition which checks whether the user is logged in or not. If logged in it displays Username else Login. Also added a profile icon which helps to clearly and quickly distinguish account.profile option from other navigation options.
0001-Changed-side-nav-bar-s-style-and-fixed-its-position-.patch
  • Used accordion for general info which saves page size and prevents scrolling for initial points that are not required every time (The interested person can simply click on the accordion and read about it). 
  • Changed table's design and added search for each table to quickly search for a specific list of that group and pagination to configure max entries to be displayed for user's accessibility. 
  • Added horizontal line to separate two list groups.
  • Also added hover effect for links which clearly shows what the user has selected or the position of the cursor.
  • Updated side navbar 
    • Changed background color to make the side navbar distinguishable from the main page content. 
    • Added hover effect for links and changed display of <a> tag to block, which makes links clickable for the entire outer <li> tag. It gives the user a feel of the button and so users don’t need to move the cursor carefully over text. 
    • Also, the current quick links section/side nav disappears on scrolling the page. To access that side nav user again needs to scroll up. 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.
0001-Changed-month-list-page-Added-filter-to-search-speci.patch
  • 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.
  • Used accordion for each year which contains a month list.
    • 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.
  • Replaced text with icons.
    • Currently, we are using view archives and download mbox text repeatedly, which is not giving a good feel. So to avoid this repetition of text, I used appropriate icons
0001-Changed-day-list-page-Redesigned-table-Added-search-.patch
  • Changed day list page
    • Redesigned table and handled responsiveness.
    • Added search box, so that one can quickly search a specific thread by key word or by the sender's name.
    • Added pagination to configure max entries to be displayed.
Thanks,
Sahil Harpal

Attachment

pgsql-www by date:

Previous
From: Jacob Champion
Date:
Subject: [PATCH] CF app: allow users to move RwF patches directly
Next
From: Dave Page
Date:
Subject: Re: pgarchives new design review