Обсуждение: Re: [pgAdmin][RM5990]: Update the style guide on pgAdmin4 website
Hi
On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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). @Dave Page 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:
- 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 <nikhil.mohite@enterprisedb.com> 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.
Вложения
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 <dpage@pgadmin.org> wrote:
HiOn Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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). @Dave Page 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:
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 <nikhil.mohite@enterprisedb.com> 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.--
Вложения
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§ion=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 <nikhil.mohite@enterprisedb.com> 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 <dpage@pgadmin.org> wrote:HiOn Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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). @Dave Page 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: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 <nikhil.mohite@enterprisedb.com> 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.--
Вложения
Hi Dave/ Team,
On Thu, Aug 20, 2020 at 9:24 PM Dave Page <dpage@pgadmin.org> wrote:
HiGreat, 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/gThere 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§ion=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 <nikhil.mohite@enterprisedb.com> 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 <dpage@pgadmin.org> wrote:HiOn Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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). @Dave Page 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: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 <nikhil.mohite@enterprisedb.com> 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.----
Regards,
Nikhil Mohite
Вложения
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 <nikhil.mohite@enterprisedb.com> wrote:
Hi Dave/ Team,On Thu, Aug 20, 2020 at 9:24 PM Dave Page <dpage@pgadmin.org> wrote:HiGreat, 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/gThere 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§ion=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 <nikhil.mohite@enterprisedb.com> 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 <dpage@pgadmin.org> wrote:HiOn Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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). @Dave Page 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: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 <nikhil.mohite@enterprisedb.com> 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.----Regards,Nikhil Mohite
Вложения
Hi Dave/Team,
On Tue, Aug 25, 2020 at 3:29 PM Dave Page <dpage@pgadmin.org> 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: IconographyStyleguide: Color Paletteetc.This should be reflected in the title tag of the pages as well as the <h1> headers.
Updated the page title and <h1> headers.
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 <nikhil.mohite@enterprisedb.com> wrote:Hi Dave/ Team,On Thu, Aug 20, 2020 at 9:24 PM Dave Page <dpage@pgadmin.org> wrote:HiGreat, 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/gThere 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§ion=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 <nikhil.mohite@enterprisedb.com> 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 <dpage@pgadmin.org> wrote:HiOn Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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). @Dave Page 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: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 <nikhil.mohite@enterprisedb.com> 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.----Regards,Nikhil Mohite--
Regards,
Nikhil Mohite.
Вложения
Вложения
Hi Nikhil,
I was going through the style guide, I have a few observations that I would like to share with you.
- In the Typography section, for font size text, the Roboto font is not getting applied.
- In the Dropdown section, the expanded dropdown image appears vertically stretched.
- 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. - In the Toggle Buttons section, the title should be Toggle On.
Everything else looks great.
Thanks and Regards,
Aradhana
Thanks and Regards,
Aradhana
On Wed, Aug 26, 2020 at 4:06 PM Dave Page <dpage@pgadmin.org> 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 <nikhil.mohite@enterprisedb.com> 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 <dpage@pgadmin.org> wrote:HiOn Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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>----
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 <aradhana.birewar@enterprisedb.com> wrote:
Hi Nikhil,I was going through the style guide, I have a few observations that I would like to share with you.
- In the Typography section, for font size text, the Roboto font is not getting applied.
- In the Dropdown section, the expanded dropdown image appears vertically stretched.
- 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.- In the Toggle Buttons section, the title should be Toggle On.
Everything else looks great.
Thanks and Regards,
AradhanaOn Wed, Aug 26, 2020 at 4:06 PM Dave Page <dpage@pgadmin.org> 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 <nikhil.mohite@enterprisedb.com> 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 <dpage@pgadmin.org> wrote:HiOn Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <nikhil.mohite@enterprisedb.com> 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>----