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

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

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

nikhil.mohite
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.

RM_5690_v1.patch (8M) Download Attachment
Reply | Threaded
Open this post in threaded view
|

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

nikhil.mohite
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). [hidden email] can you provide some inputs on it.


Regards,
Nikhil Mohite.

On Wed, Aug 19, 2020 at 11:40 AM Nikhil Mohite <[hidden email]> wrote:
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.
Reply | Threaded
Open this post in threaded view
|

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

Dave Page-7
Hi

On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <[hidden email]> wrote:
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.

Right.
 
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). [hidden email] can you provide some inputs on it.

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:

Screenshot 2020-08-20 at 09.00.38.png

 - 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!



Regards,
Nikhil Mohite.

On Wed, Aug 19, 2020 at 11:40 AM Nikhil Mohite <[hidden email]> wrote:
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.


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

EDB: http://www.enterprisedb.com

Reply | Threaded
Open this post in threaded view
|

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

nikhil.mohite
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 <[hidden email]> wrote:
Hi

On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <[hidden email]> wrote:
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.
1. Removed "proposed" keyword from the "High-Contrast" theme name. 

Right.
 
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). [hidden email] can you provide some inputs on it.

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:

Screenshot 2020-08-20 at 09.00.38.png
2. Resolved scrollbar issue. 

 - 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?
3. Create a new section for "Tab Set" as suggested.

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.

On Wed, Aug 19, 2020 at 11:40 AM Nikhil Mohite <[hidden email]> wrote:
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.


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

EDB: http://www.enterprisedb.com


RM_5690_v2.patch (8M) Download Attachment
Reply | Threaded
Open this post in threaded view
|

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

Dave Page-7
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 <[hidden email]> wrote:
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 <[hidden email]> wrote:
Hi

On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <[hidden email]> wrote:
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.
1. Removed "proposed" keyword from the "High-Contrast" theme name. 

Right.
 
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). [hidden email] can you provide some inputs on it.

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:

Screenshot 2020-08-20 at 09.00.38.png
2. Resolved scrollbar issue. 

 - 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?
3. Create a new section for "Tab Set" as suggested.

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.

On Wed, Aug 19, 2020 at 11:40 AM Nikhil Mohite <[hidden email]> wrote:
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.


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

EDB: http://www.enterprisedb.com



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

EDB: http://www.enterprisedb.com


RM_5690_v3.patch (8M) Download Attachment
Reply | Threaded
Open this post in threaded view
|

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

nikhil.mohite
Hi Dave/ Team,

On Thu, Aug 20, 2020 at 9:24 PM Dave Page <[hidden email]> wrote:
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?
1. updated this section, as per suggestion now loading only specific sections on icons similar to other controllers.

- 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)
2. Updated URLs from GET parameters to URL matching, also updated URLs for better reading and understanding.

PFA patch v4 for the same.


Thanks!

On Thu, Aug 20, 2020 at 1:01 PM Nikhil Mohite <[hidden email]> wrote:
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 <[hidden email]> wrote:
Hi

On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <[hidden email]> wrote:
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.
1. Removed "proposed" keyword from the "High-Contrast" theme name. 

Right.
 
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). [hidden email] can you provide some inputs on it.

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:

Screenshot 2020-08-20 at 09.00.38.png
2. Resolved scrollbar issue. 

 - 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?
3. Create a new section for "Tab Set" as suggested.

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.

On Wed, Aug 19, 2020 at 11:40 AM Nikhil Mohite <[hidden email]> wrote:
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.


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

EDB: http://www.enterprisedb.com



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

EDB: http://www.enterprisedb.com


Regards,
Nikhil Mohite 

RM_5690_v4.patch (8M) Download Attachment
Reply | Threaded
Open this post in threaded view
|

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

Dave Page-7
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 <[hidden email]> wrote:
Hi Dave/ Team,

On Thu, Aug 20, 2020 at 9:24 PM Dave Page <[hidden email]> wrote:
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?
1. updated this section, as per suggestion now loading only specific sections on icons similar to other controllers.

- 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)
2. Updated URLs from GET parameters to URL matching, also updated URLs for better reading and understanding.

PFA patch v4 for the same.


Thanks!

On Thu, Aug 20, 2020 at 1:01 PM Nikhil Mohite <[hidden email]> wrote:
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 <[hidden email]> wrote:
Hi

On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <[hidden email]> wrote:
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.
1. Removed "proposed" keyword from the "High-Contrast" theme name. 

Right.
 
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). [hidden email] can you provide some inputs on it.

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:

Screenshot 2020-08-20 at 09.00.38.png
2. Resolved scrollbar issue. 

 - 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?
3. Create a new section for "Tab Set" as suggested.

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.

On Wed, Aug 19, 2020 at 11:40 AM Nikhil Mohite <[hidden email]> wrote:
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.


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

EDB: http://www.enterprisedb.com



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

EDB: http://www.enterprisedb.com


Regards,
Nikhil Mohite 


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

EDB: http://www.enterprisedb.com

Reply | Threaded
Open this post in threaded view
|

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

nikhil.mohite
Hi Dave/Team,

On Tue, Aug 25, 2020 at 3:29 PM Dave Page <[hidden email]> wrote:
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.
Updated the page title and <h1> headers.
Screenshot 2020-08-25 at 4.59.01 PM.png
PFA v5 patch for the same.

if required any updates in this please let me know.


Thanks!


On Fri, Aug 21, 2020 at 5:59 AM Nikhil Mohite <[hidden email]> wrote:
Hi Dave/ Team,

On Thu, Aug 20, 2020 at 9:24 PM Dave Page <[hidden email]> wrote:
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?
1. updated this section, as per suggestion now loading only specific sections on icons similar to other controllers.

- 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)
2. Updated URLs from GET parameters to URL matching, also updated URLs for better reading and understanding.

PFA patch v4 for the same.


Thanks!

On Thu, Aug 20, 2020 at 1:01 PM Nikhil Mohite <[hidden email]> wrote:
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 <[hidden email]> wrote:
Hi

On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <[hidden email]> wrote:
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.
1. Removed "proposed" keyword from the "High-Contrast" theme name. 

Right.
 
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). [hidden email] can you provide some inputs on it.

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:

Screenshot 2020-08-20 at 09.00.38.png
2. Resolved scrollbar issue. 

 - 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?
3. Create a new section for "Tab Set" as suggested.

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.

On Wed, Aug 19, 2020 at 11:40 AM Nikhil Mohite <[hidden email]> wrote:
Hi Team,

I have updated the style guide for the pgAdmin 4 website as per RM-5990.
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.


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

EDB: http://www.enterprisedb.com



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

EDB: http://www.enterprisedb.com


Regards,
Nikhil Mohite 


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

EDB: http://www.enterprisedb.com


Regards,
Nikhil Mohite. 

RM_5690_v5.patch (13K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

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

Dave Page-7
Hi

On Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <[hidden email]> wrote:

PFA v5 patch for the same.

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>

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

EDB: http://www.enterprisedb.com

Reply | Threaded
Open this post in threaded view
|

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

nikhil.mohite
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.


On Tue, Aug 25, 2020 at 7:09 PM Dave Page <[hidden email]> wrote:
Hi

On Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <[hidden email]> wrote:

PFA v5 patch for the same.

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>

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

EDB: http://www.enterprisedb.com


RM_5690_v6.patch (43K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

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

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

On Wed, Aug 26, 2020 at 8:23 AM Nikhil Mohite <[hidden email]> wrote:
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.


On Tue, Aug 25, 2020 at 7:09 PM Dave Page <[hidden email]> wrote:
Hi

On Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <[hidden email]> wrote:

PFA v5 patch for the same.

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>

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

EDB: http://www.enterprisedb.com



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

EDB: http://www.enterprisedb.com

Reply | Threaded
Open this post in threaded view
|

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

Aradhana Birewar
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 <[hidden email]> wrote:
Thanks, applied with a few changes for consistency in the titles and 404 handling.

On Wed, Aug 26, 2020 at 8:23 AM Nikhil Mohite <[hidden email]> wrote:
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.


On Tue, Aug 25, 2020 at 7:09 PM Dave Page <[hidden email]> wrote:
Hi

On Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <[hidden email]> wrote:

PFA v5 patch for the same.

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>

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

EDB: http://www.enterprisedb.com



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

EDB: http://www.enterprisedb.com

Reply | Threaded
Open this post in threaded view
|

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

nikhil.mohite
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.

If required any changes please let me know.

Regards,
Nikhil Mohite.


On Wed, Aug 26, 2020 at 6:34 PM Aradhana Birewar <[hidden email]> 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.

    image.png

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

    image.png

  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.

    image.png
    Screenshot 2020-08-26 at 5.58.47 PM.png

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

    image.png
Everything else looks great. 

Thanks and Regards,
Aradhana

On Wed, Aug 26, 2020 at 4:06 PM Dave Page <[hidden email]> wrote:
Thanks, applied with a few changes for consistency in the titles and 404 handling.

On Wed, Aug 26, 2020 at 8:23 AM Nikhil Mohite <[hidden email]> wrote:
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.


On Tue, Aug 25, 2020 at 7:09 PM Dave Page <[hidden email]> wrote:
Hi

On Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <[hidden email]> wrote:

PFA v5 patch for the same.

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>

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

EDB: http://www.enterprisedb.com



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

EDB: http://www.enterprisedb.com


RM_5690_v7.patch (130K) Download Attachment