Subject: [pgAdmin][RM5990]: Update the style guide on pgAdmin4 website

From: Nikhil Mohite <[email-masked]>
Date: Wed, 19 Aug 2020 11:40:09 +0530

Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990
<https://redmine.postgresql.org/issues/5690>.
Details :
1. The updated style-guide section as per the new UI design.
2. Added new icons as per font-awesome 5.14.0.
3. Added custom icons of pgAdmin4.

PFA the patch.

Regards,
Nikhil Mohite.

---

From: Nikhil Mohite <[email-masked]>
Date: Wed, 19 Aug 2020 14:50:20 +0530

Hi Dave/Team,

As per discussion with the UX team, Few updates on style-guide patch.
1. I have missed removing the "proposed" keyword from the "High-Contract"
theme name.
2. I have not added the "Writing Style" section in the style guide as we
don’t have the information for it (UX design is also pending due to
this). @Dave
Page <[email-masked]> can you provide some inputs on it.

Regards,
Nikhil Mohite.

---

From: Dave Page <[email-masked]>
Date: Thu, 20 Aug 2020 09:07:42 +0100

Hi

> 1. I have missed removing the "proposed" keyword from the "High-Contract"

Right.

> don’t have the information for it (UX design is also pending due to this). @Dave

Sure; not sure how to deal with that yet - we'll proceed without it for now.

A couple of other issues I found:

- Random scrollbars:

 - On the Menu section, there is a subsection for "Sub menus" (I realise
you didn't design that, but...). That doesn't seem right; what is described
as a sub menu there is actually a tab set. Can you move it to a separate
section please?

There are a few wording changes I'd like as well, but I can deal with that
when I'm committing.

Nice work - thanks!

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EDB: http://www.enterprisedb.com

---

From: Nikhil Mohite <[email-masked]>
Date: Thu, 20 Aug 2020 17:31:36 +0530

Hi Dave/Team,

I have updated the style guide as per the suggestions, PFA of the updated
patch for the same.

On Thu, Aug 20, 2020 at 1:37 PM Dave Page <[email-masked]> wrote:

> 1. Removed "proposed" keyword from the "High-Contrast" theme name.

> A couple of other issues I found:
2. Resolved scrollbar issue.

> as a sub menu there is actually a tab set. Can you move it to a separate
3. Create a new section for "Tab Set" as suggested.

---

From: Dave Page <[email-masked]>
Date: Thu, 20 Aug 2020 16:54:31 +0100

Hi

Great, those issues look like they're fixed. Here's a v3 update;

- Wording tweaked.
- Link to Font Awesome added.
- HTML reformatted (mostly by Pycharm)
- </br> changed to <br/>
- s/ria-controls/aria-controls/g

There are a couple of things left I found that could do with some work:

- On the iconography section, the anchor tags to the sub-sections only work
for the standard theme. should we split each set of icons out into separate
pages (like the controls) rather than trying to have long pages with
anchors?

- The page names used in the view/templates and URLs is quite ugly. Could
we change the names, and then use URL matching rather than GET parameters?
e.g.

/styleguide/?tab=typg -> /styleguide/typography
/styleguide/?tab=thm&section=alrt -> /styleguide/themes/alerts
/styleguide/?tab=ic#custom_query_plan ->
/styleguide/iconography/query_plans (assuming we split the icon pages)

Thanks!

On Thu, Aug 20, 2020 at 1:01 PM Nikhil Mohite <
[email-masked]> wrote:

>>> 1. I have missed removing the "proposed" keyword from the
>>> "High-Contract" theme name.
>>>
>> There are a few wording changes I'd like as well, but I can deal with
>> that when I'm committing.
>>
>> Nice work - thanks!
>>
>>
>>>
>>> Regards,
>>> Nikhil Mohite.
>>>

---

From: Nikhil Mohite <[email-masked]>
Date: Fri, 21 Aug 2020 10:28:47 +0530

Hi Dave/ Team,

On Thu, Aug 20, 2020 at 9:24 PM Dave Page <[email-masked]> wrote:

> - On the iconography section, the anchor tags to the sub-sections only
> work for the standard theme. should we split each set of icons out into
> separate pages (like the controls) rather than trying to have long pages
> with anchors?
>
1. updated this section, as per suggestion now loading only specific
sections on icons similar to other controllers.

> /styleguide/iconography/query_plans (assuming we split the icon pages)
2. Updated URLs from GET parameters to URL matching, also updated URLs for
better reading and understanding.

PFA patch v4 for the same.

>>>> 2. I have not added the "Writing Style" section in the style guide as
>>>> we don’t have the information for it (UX design is also pending due to
>>>> this). @Dave Page <[email-masked]> can you provide some
>>>> inputs on it.
>>>>
>>>
>>>>> I have updated the style guide for the pgAdmin 4 website as per
>>>>> RM-5990 <https://redmine.postgresql.org/issues/5690>.
>>>>> Details :
Regards,
Nikhil Mohite

---

From: Dave Page <[email-masked]>
Date: Tue, 25 Aug 2020 10:59:03 +0100

Thanks, patch applied.

Can you please make one more tweak though (obviously against the current
git head) - specifically, the page titles should be more specific, e.g.

Styleguide: Iconography
Styleguide: Color Palette
etc.

This should be reflected in the title tag of the pages as well as the <h1>
headers.

Thanks!

On Fri, Aug 21, 2020 at 5:59 AM Nikhil Mohite <
[email-masked]> wrote:

>>> I have updated the style guide as per the suggestions, PFA of the
>>> updated patch for the same.
>>>
>>>>  - On the Menu section, there is a subsection for "Sub menus" (I
>>>> realise you didn't design that, but...). That doesn't seem right; what is
>>>> described as a sub menu there is actually a tab set. Can you move it to a
>>>> separate section please?
>>>>

---

From: Nikhil Mohite <[email-masked]>
Date: Tue, 25 Aug 2020 17:18:52 +0530

Hi Dave/Team,

> This should be reflected in the title tag of the pages as well as the <h1>
Updated the page title and <h1> headers.
PFA v5 patch for the same.

if required any updates in this please let me know.

>>> - The page names used in the view/templates and URLs is quite ugly.
>>> Could we change the names, and then use URL matching rather than GET
>>> parameters? e.g.
>>>
>> 2. Updated URLs from GET parameters to URL matching, also updated URLs
>> for better reading and understanding.
>>
Regards,
Nikhil Mohite.

---

From: Dave Page <[email-masked]>
Date: Tue, 25 Aug 2020 14:38:52 +0100

Hi

> if required any updates in this please let me know.

Hmm, yeah - that doesn't work for me I'm afraid; it's mixing content with
code.

The titles should be defined in the HTML pages themselves. We do that
everywhere else by including a template block like the following in the
lowest level content:

{% block title %}Contributing{% endblock %}

And then in base.html:

<title>{% block title %}{% endblock %}</title>

---

From: Nikhil Mohite <[email-masked]>
Date: Wed, 26 Aug 2020 12:53:24 +0530

Hi Dave/Team,

Updated the implementation for the set title of the page, for this, I have
done a few changes in the flow.
1. Earlier we are using {% include %} for showing pages in the base
page (styleguide/index.html) for a style guide but in the Django template
we can't use {% block %} statement if we are adding page using "{% include
%}".
2. To overcome this issue now using {% extends %} instead of  {% include
%},  For this added dynamic URL generation in views so instead of loading
"index.html" of style guide we are loading specific component HTML file
(e.g: typography.html) and that template extends the "index.html" of the
style guide.

PFA v6 patch for the same.

If required any changes please let me know.

Regards,
Nikhil Mohite.

---

From: Dave Page <[email-masked]>
Date: Wed, 26 Aug 2020 11:36:17 +0100

Thanks, applied with a few changes for consistency in the titles and 404
handling.

---

From: Aradhana Birewar <[email-masked]>
Date: Wed, 26 Aug 2020 18:34:02 +0530

Hi Nikhil,

I was going through the style guide, I have a few observations that I would
like to share with you.

   1. In the Typography section, for font size text, the Roboto font is not
   getting applied.

   2. In the Dropdown section, the expanded dropdown image
   appears vertically stretched.

   3. Tabs for navigating between themes need small UI modifications, only
   selected tab should have medium font-weight (font-weight: 500), others have
   normal font-weight.
   (font-weight: 400) Also selected tab bottom border should be the same as
   text width.

   4. In the Toggle Buttons section, the title should be Toggle On.

Everything else looks great.

Thanks and Regards,
Aradhana

On Wed, Aug 26, 2020 at 4:06 PM Dave Page <[email-masked]> wrote:

>> Updated the implementation for the set title of the page, for this, I
>> have done a few changes in the flow.
>>> Hmm, yeah - that doesn't work for me I'm afraid; it's mixing content
>>> with code.
>>>

---

From: Nikhil Mohite <[email-masked]>
Date: Thu, 10 Sep 2020 17:12:25 +0530

Hi Team,

I have updated UI for the style guide, details as follow:
1. Resolved all UI changes suggested by  Aradhana.
2. Added labels for query-tool and tree-views icons in iconography.

PFA patch v7 for the same.

Regards,
Nikhil Mohite.

On Wed, Aug 26, 2020 at 6:34 PM Aradhana Birewar <
[email-masked]> wrote:

> Hi Nikhil,
>
> I was going through the style guide, I have a few observations that I
> would like to share with you.
>
>    1. In the Typography section, for font size text, the Roboto font is
>    not getting applied.
>
>
>    3. Tabs for navigating between themes need small UI modifications,
>    only selected tab should have medium font-weight (font-weight: 500), others
>    have normal font-weight.
>    (font-weight: 400) Also selected tab bottom border should be the same
>    as text width.
>
>