public inbox for [email protected]
help / color / mirror / Atom feedFrom: Nikhil Mohite <[email protected]>
To: Dave Page <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin][RM5990]: Update the style guide on pgAdmin4 website
Date: Tue, 25 Aug 2020 17:18:52 +0530
Message-ID: <CAOBg0AOd-8t_KaSxfMGpBMCkEHTEwoSBV4nOmvVVbG6rF+GUGg@mail.gmail.com> (raw)
In-Reply-To: <CA+OCxox4MRytMEN_XKnoF1t99Lxf-2JnJvy-f+Ux1P9Fp0aBzQ@mail.gmail.com>
References: <CAOBg0ANnFFsknDcF6NfLaDVc6x1EFwf_KUO+gbKtR7qvyfAY5A@mail.gmail.com>
<CAOBg0AOcPNT69=Eqd22sNChWUGz6HpMt1qXrs4_pgCP6sO0H7Q@mail.gmail.com>
<CA+OCxoy_TUdmca3pB1hgnRKniwQ8-XsKD_2uVTZW9BnTiVuGEA@mail.gmail.com>
<CAOBg0AM8coLjoYL6kUirbo+5cmm9VhqXp0SH_FgRyzekBaPOtA@mail.gmail.com>
<CA+OCxozx6vJFM20CVn0VZrdC9LLOjGiN4_zZQ6i23_6anBpRmg@mail.gmail.com>
<CAOBg0APy7ONbPTFSHFqcvtYzDNKc7dSgv1Qz+Cg7kb_mF9p7gg@mail.gmail.com>
<CA+OCxox4MRytMEN_XKnoF1t99Lxf-2JnJvy-f+Ux1P9Fp0aBzQ@mail.gmail.com>
Hi Dave/Team,
On Tue, Aug 25, 2020 at 3:29 PM Dave Page <[email protected]> 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.
[image: 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 <
> [email protected]> wrote:
>
>> Hi Dave/ Team,
>>
>> On Thu, Aug 20, 2020 at 9:24 PM Dave Page <[email protected]> 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§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 <
>>> [email protected]> 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 <[email protected]> wrote:
>>>>
>>>>> Hi
>>>>>
>>>>> On Wed, Aug 19, 2020 at 10:20 AM Nikhil Mohite <
>>>>> [email protected]> 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 <[email protected]> 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:
>>>>>
>>>>> [image: 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 <
>>>>>> [email protected]> wrote:
>>>>>>
>>>>>>> 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.
>>>>>>>
>>>>>>
>>>>>
>>>>> --
>>>>> 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.
Attachments:
[image/png] Screenshot 2020-08-20 at 09.00.38.png (57.0K, 3-Screenshot%202020-08-20%20at%2009.00.38.png)
download | view image
[image/png] Screenshot 2020-08-25 at 4.59.01 PM.png (348.9K, 4-Screenshot%202020-08-25%20at%204.59.01%20PM.png)
download | view image
[application/octet-stream] RM_5690_v5.patch (10.2K, 5-RM_5690_v5.patch)
download | inline diff:
diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
index 9cb54d4..021c2d7 100644
--- a/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Accordion</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/alert.html b/pgaweb/templates/pgaweb/styleguide/alert/alert.html
index 2d3d4f0..6aa4ab6 100644
--- a/pgaweb/templates/pgaweb/styleguide/alert/alert.html
+++ b/pgaweb/templates/pgaweb/styleguide/alert/alert.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Alerts</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/button/button.html b/pgaweb/templates/pgaweb/styleguide/button/button.html
index 5be1a06..6c9b1cc 100644
--- a/pgaweb/templates/pgaweb/styleguide/button/button.html
+++ b/pgaweb/templates/pgaweb/styleguide/button/button.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Buttons</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
index c1ee04e..ae3fcac 100644
--- a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Checkbox</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
index cc317e9..9305c52 100644
--- a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Color Palette</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
pgAdmin uses standard sets of colors for consistency and style. We are also
committed to complying with AA standard contrast ratios (AAA for the high contrast theme).
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
index 8ab6799..30ba04c 100644
--- a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Dropdowns</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
index 79fb2ef..8a4788e 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
@@ -1,4 +1,4 @@
-<h1 class="styleguide-title" id="typography">Iconography</h1>
+<h1 class="styleguide-title" id="typography">{{title}}</h1>
<p>
Icons are visual representations of commands, files or common actions. They
should be meaningful, simple and legible. pgAdmin uses custom as well as
diff --git a/pgaweb/templates/pgaweb/styleguide/index.html b/pgaweb/templates/pgaweb/styleguide/index.html
index 116a93a..4e4e5f5 100644
--- a/pgaweb/templates/pgaweb/styleguide/index.html
+++ b/pgaweb/templates/pgaweb/styleguide/index.html
@@ -1,7 +1,7 @@
{% extends "pgaweb/page.html" %}
{% load static %}
-{% block title %}Style Guide{% endblock %}
+{% block title %}{{title}}{% endblock %}
{% block content %}
<div class="style-action">
diff --git a/pgaweb/templates/pgaweb/styleguide/input/input.html b/pgaweb/templates/pgaweb/styleguide/input/input.html
index efc75bc..146b09d 100644
--- a/pgaweb/templates/pgaweb/styleguide/input/input.html
+++ b/pgaweb/templates/pgaweb/styleguide/input/input.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Input Field</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/menu.html b/pgaweb/templates/pgaweb/styleguide/menu/menu.html
index 8f3bf50..4d803a9 100644
--- a/pgaweb/templates/pgaweb/styleguide/menu/menu.html
+++ b/pgaweb/templates/pgaweb/styleguide/menu/menu.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Menu</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
index 251b2c4..68c9ba1 100644
--- a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
+++ b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Radio Buttons</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/style_typography.html b/pgaweb/templates/pgaweb/styleguide/style_typography.html
index c34aaba..cd316db 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_typography.html
+++ b/pgaweb/templates/pgaweb/styleguide/style_typography.html
@@ -1,4 +1,4 @@
-<h1 class="styleguide-title" id="typography">Typography</h1>
+<h1 class="styleguide-title" id="typography">{{title}}</h1>
<p>
pgAdmin primarily uses Google Roboto for the overall content and Source Code
Pro is used for SQL and other code.
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
index 334ea42..ed6001d 100644
--- a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Tab Set</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/table/table.html b/pgaweb/templates/pgaweb/styleguide/table/table.html
index b3236eb..58cad3f 100644
--- a/pgaweb/templates/pgaweb/styleguide/table/table.html
+++ b/pgaweb/templates/pgaweb/styleguide/table/table.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Table</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
index 6419e9f..9052858 100644
--- a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
@@ -1,5 +1,5 @@
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Toggle Buttons</h1>
+ <h1 class="styleguide-title" id="colorpalette">{{title}}</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
diff --git a/pgaweb/views.py b/pgaweb/views.py
index 0b2b433..ebde161 100644
--- a/pgaweb/views.py
+++ b/pgaweb/views.py
@@ -77,7 +77,32 @@ def styleguide_index(request, page='typography', section=''):
if page == 'iconography' and not section:
section = 'fontawesome'
- return render(request, 'pgaweb/styleguide/index.html', {'page': page, 'section': section})
+ style_guide_title = {
+ 'typography': 'Styleguide: Typography',
+ 'color': 'Styleguide: Color Palette',
+ 'input': 'Styleguide: Input Field',
+ 'dropdowns': 'Styleguide: Dropdowns',
+ 'buttons': 'Styleguide: Buttons',
+ 'checkbox': 'Styleguide: Checkbox',
+ 'radio_buttons': 'Styleguide: Radio Buttons',
+ 'toggle_buttons': 'Styleguide: Toggle Buttons',
+ 'alerts': 'Styleguide: Alerts',
+ 'table': 'Styleguide: Table',
+ 'accordion': 'Styleguide: Accordion',
+ 'menus': 'Styleguide: Menu',
+ 'tab_sets': 'Styleguide: Tab Set',
+ 'fontawesome': 'Styleguide: Font-awesome',
+ 'solid_icons': 'Styleguide: Custom Solid',
+ 'tree_view_icons': 'Styleguide: Tree View',
+ 'query_plans': 'Styleguide: Query Plan',
+ }
+
+ if page == 'typography':
+ title = style_guide_title[page]
+ else:
+ title = style_guide_title[section]
+
+ return render(request, 'pgaweb/styleguide/index.html', {'page': page, 'section': section, 'title': title})
# Handle the Support level pages
def support_index(request):
view thread (13+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: [pgAdmin][RM5990]: Update the style guide on pgAdmin4 website
In-Reply-To: <CAOBg0AOd-8t_KaSxfMGpBMCkEHTEwoSBV4nOmvVVbG6rF+GUGg@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox