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: Wed, 26 Aug 2020 12:53:24 +0530
Message-ID: <CAOBg0APsOizjnj-D2dCAfwbbobwgJ4mFcjtyJEuwh3QborQiUQ@mail.gmail.com> (raw)
In-Reply-To: <CA+OCxoyKCp-uvuOVi7ZKvhjAAaqVqRu6YiSZpZ0mDvrFctaQiQ@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>
<CAOBg0AOd-8t_KaSxfMGpBMCkEHTEwoSBV4nOmvVVbG6rF+GUGg@mail.gmail.com>
<CA+OCxoyKCp-uvuOVi7ZKvhjAAaqVqRu6YiSZpZ0mDvrFctaQiQ@mail.gmail.com>
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 <[email protected]> wrote:
> Hi
>
> On Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <
> [email protected]> 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
>
>
Attachments:
[application/octet-stream] RM_5690_v6.patch (32.0K, 3-RM_5690_v6.patch)
download | inline diff:
diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
index 9cb54d4..f201cf5 100644
--- a/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Accordion{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Accordion</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Accordion</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/button.html b/pgaweb/templates/pgaweb/styleguide/alerts/alerts.html
similarity index 62%
rename from pgaweb/templates/pgaweb/styleguide/button/button.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/alerts.html
index 5be1a06..ce2b03e 100644
--- a/pgaweb/templates/pgaweb/styleguide/button/button.html
+++ b/pgaweb/templates/pgaweb/styleguide/alerts/alerts.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Alert{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Buttons</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Alert</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
<div class="tab-content" id="themeTabContent">
<div class="tab-pane fade show active theme-content theme-content-default"
id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
- {% include "pgaweb/styleguide/button/sd_button.html" %}
+ {% include "pgaweb/styleguide/alerts/sd_alert.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
- {% include "pgaweb/styleguide/button/dark_button.html" %}
+ {% include "pgaweb/styleguide/alerts/dark_alert.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
- {% include "pgaweb/styleguide/button/hc_button.html" %}
+ {% include "pgaweb/styleguide/alerts/hc_alert.html" %}
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/dark_alert.html b/pgaweb/templates/pgaweb/styleguide/alerts/dark_alert.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/alert/dark_alert.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/dark_alert.html
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/hc_alert.html b/pgaweb/templates/pgaweb/styleguide/alerts/hc_alert.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/alert/hc_alert.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/hc_alert.html
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/sd_alert.html b/pgaweb/templates/pgaweb/styleguide/alerts/sd_alert.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/alert/sd_alert.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/sd_alert.html
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html b/pgaweb/templates/pgaweb/styleguide/buttons/buttons.html
similarity index 61%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/buttons.html
index 8ab6799..211fa94 100644
--- a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
+++ b/pgaweb/templates/pgaweb/styleguide/buttons/buttons.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Button{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Dropdowns</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Button</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
<div class="tab-content" id="themeTabContent">
<div class="tab-pane fade show active theme-content theme-content-default"
id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
- {% include "pgaweb/styleguide/dropdown/sd_dropdown.html" %}
+ {% include "pgaweb/styleguide/buttons/sd_button.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
- {% include "pgaweb/styleguide/dropdown/dark_dropdown.html" %}
+ {% include "pgaweb/styleguide/buttons/dark_button.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
- {% include "pgaweb/styleguide/dropdown/hc_dropdown.html" %}
+ {% include "pgaweb/styleguide/buttons/hc_button.html" %}
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/dark_button.html b/pgaweb/templates/pgaweb/styleguide/buttons/dark_button.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/button/dark_button.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/dark_button.html
diff --git a/pgaweb/templates/pgaweb/styleguide/button/hc_button.html b/pgaweb/templates/pgaweb/styleguide/buttons/hc_button.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/button/hc_button.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/hc_button.html
diff --git a/pgaweb/templates/pgaweb/styleguide/button/sd_button.html b/pgaweb/templates/pgaweb/styleguide/buttons/sd_button.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/button/sd_button.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/sd_button.html
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
index c1ee04e..13dfafb 100644
--- a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Checkbox{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Checkbox</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Checkbox</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
index cc317e9..3b433bf 100644
--- a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Color Palette{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Color Palette</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Color Palette</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).
@@ -29,4 +32,6 @@
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
+
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dark_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/dark_dropdown.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/dark_dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/dark_dropdown.html
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/menu.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/dropdowns.html
similarity index 61%
rename from pgaweb/templates/pgaweb/styleguide/menu/menu.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/dropdowns.html
index 8f3bf50..5ca394b 100644
--- a/pgaweb/templates/pgaweb/styleguide/menu/menu.html
+++ b/pgaweb/templates/pgaweb/styleguide/dropdowns/dropdowns.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Dropdown{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Menu</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Dropdown</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
<div class="tab-content" id="themeTabContent">
<div class="tab-pane fade show active theme-content theme-content-default"
id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
- {% include "pgaweb/styleguide/menu/sd_menu.html" %}
+ {% include "pgaweb/styleguide/dropdowns/sd_dropdown.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
- {% include "pgaweb/styleguide/menu/dark_menu.html" %}
+ {% include "pgaweb/styleguide/dropdowns/dark_dropdown.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
- {% include "pgaweb/styleguide/menu/hc_menu.html" %}
+ {% include "pgaweb/styleguide/dropdowns/hc_dropdown.html" %}
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/hc_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/hc_dropdown.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/hc_dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/hc_dropdown.html
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/sd_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/sd_dropdown.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/sd_dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/sd_dropdown.html
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
index 79fb2ef..12e1d36 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
@@ -1,4 +1,7 @@
-<h1 class="styleguide-title" id="typography">Iconography</h1>
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Iconography{% endblock %}
+{% block styleguide_content %}
+<h1 class="styleguide-title" id="typography">Styleguide: Iconography</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
@@ -42,4 +45,5 @@
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
index bf27331..0f04ca1 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
@@ -3,7 +3,7 @@
<ul class="style-action-menu">
<li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
- <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a></li>
+ <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Themes</a></li>
<li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Iconography</a>
<ul>
<li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Font Awesome</a></li>
diff --git a/pgaweb/templates/pgaweb/styleguide/index.html b/pgaweb/templates/pgaweb/styleguide/index.html
index 116a93a..0d8ed20 100644
--- a/pgaweb/templates/pgaweb/styleguide/index.html
+++ b/pgaweb/templates/pgaweb/styleguide/index.html
@@ -1,8 +1,6 @@
{% extends "pgaweb/page.html" %}
{% load static %}
-{% block title %}Style Guide{% endblock %}
-
{% block content %}
<div class="style-action">
{% if page == "typography" %}
@@ -16,12 +14,7 @@
<div class="style-guide">
<link rel="stylesheet"
href="{% static 'COMPILED/assets/css/styleguide.css' %}?{{ gitrev }}"/>
- {% if page == 'typography' %}
- {% include "pgaweb/styleguide/style_typography.html" %}
- {% elif page == 'themes' %}
- {% include "pgaweb/styleguide/style_theme.html" %}
- {% elif page == 'iconography' %}
- {% include "pgaweb/styleguide/iconography/iconography.html" %}
- {% endif %}
+ {% block page_content %}
+ {% endblock %}
</div>
{% endblock %}
diff --git a/pgaweb/templates/pgaweb/styleguide/input/input.html b/pgaweb/templates/pgaweb/styleguide/input/input.html
index efc75bc..d45d199 100644
--- a/pgaweb/templates/pgaweb/styleguide/input/input.html
+++ b/pgaweb/templates/pgaweb/styleguide/input/input.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Input{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Input Field</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Input</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/dark_menu.html b/pgaweb/templates/pgaweb/styleguide/menus/dark_menu.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/menu/dark_menu.html
rename to pgaweb/templates/pgaweb/styleguide/menus/dark_menu.html
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/hc_menu.html b/pgaweb/templates/pgaweb/styleguide/menus/hc_menu.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/menu/hc_menu.html
rename to pgaweb/templates/pgaweb/styleguide/menus/hc_menu.html
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/alert.html b/pgaweb/templates/pgaweb/styleguide/menus/menus.html
similarity index 62%
rename from pgaweb/templates/pgaweb/styleguide/alert/alert.html
rename to pgaweb/templates/pgaweb/styleguide/menus/menus.html
index 2d3d4f0..b5328ec 100644
--- a/pgaweb/templates/pgaweb/styleguide/alert/alert.html
+++ b/pgaweb/templates/pgaweb/styleguide/menus/menus.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Menu{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Alerts</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Menu</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
<div class="tab-content" id="themeTabContent">
<div class="tab-pane fade show active theme-content theme-content-default"
id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
- {% include "pgaweb/styleguide/alert/sd_alert.html" %}
+ {% include "pgaweb/styleguide/menus/sd_menu.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
- {% include "pgaweb/styleguide/alert/dark_alert.html" %}
+ {% include "pgaweb/styleguide/menus/dark_menu.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
- {% include "pgaweb/styleguide/alert/hc_alert.html" %}
+ {% include "pgaweb/styleguide/menus/hc_menu.html" %}
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/sd_menu.html b/pgaweb/templates/pgaweb/styleguide/menus/sd_menu.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/menu/sd_menu.html
rename to pgaweb/templates/pgaweb/styleguide/menus/sd_menu.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/dark_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/dark_radiobuttons.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/radiobuttons/dark_radiobuttons.html
rename to pgaweb/templates/pgaweb/styleguide/radio_buttons/dark_radiobuttons.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/hc_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/hc_radiobuttons.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/radiobuttons/hc_radiobuttons.html
rename to pgaweb/templates/pgaweb/styleguide/radio_buttons/hc_radiobuttons.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radio_buttons/radio_buttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/radio_buttons.html
new file mode 100644
index 0000000..2a307ef
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radio_buttons/radio_buttons.html
@@ -0,0 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Radio Buttons{% endblock %}
+{% block styleguide_content %}
+<div class="color-palette">
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Radio Buttons</h1>
+ <p>
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+ <!--Add page specific content as per theme selection-->
+ <div class="tab-content" id="themeTabContent">
+ <div class="tab-pane fade show active theme-content theme-content-default"
+ id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+ {% include "pgaweb/styleguide/radio_buttons/sd_radiobuttons.html" %}
+ </div>
+ <div class="tab-pane fade theme-content theme-content-default"
+ id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+ {% include "pgaweb/styleguide/radio_buttons/dark_radiobuttons.html" %}
+ </div>
+ <div class="tab-pane fade theme-content theme-content-default"
+ id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+ {% include "pgaweb/styleguide/radio_buttons/hc_radiobuttons.html" %}
+ </div>
+ </div>
+ </p>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/sd_radiobuttons.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_radiobuttons.html
rename to pgaweb/templates/pgaweb/styleguide/radio_buttons/sd_radiobuttons.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
deleted file mode 100644
index 251b2c4..0000000
--- a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Radio Buttons</h1>
- <p>
- {% include "pgaweb/styleguide/theme_nav_bar.html" %}
- <!--Add page specific content as per theme selection-->
- <div class="tab-content" id="themeTabContent">
- <div class="tab-pane fade show active theme-content theme-content-default"
- id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
- {% include "pgaweb/styleguide/radiobuttons/sd_radiobuttons.html" %}
- </div>
- <div class="tab-pane fade theme-content theme-content-default"
- id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
- {% include "pgaweb/styleguide/radiobuttons/dark_radiobuttons.html" %}
- </div>
- <div class="tab-pane fade theme-content theme-content-default"
- id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
- {% include "pgaweb/styleguide/radiobuttons/hc_radiobuttons.html" %}
- </div>
- </div>
- </p>
-</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/style_action.html b/pgaweb/templates/pgaweb/styleguide/style_action.html
index d7844ba..88d278c 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_action.html
+++ b/pgaweb/templates/pgaweb/styleguide/style_action.html
@@ -3,7 +3,7 @@
<ul class="style-action-menu">
<li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
- <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a>
+ <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Themes</a>
</li>
<li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Iconography</a></li>
</ul>
diff --git a/pgaweb/templates/pgaweb/styleguide/style_action_theme.html b/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
index 615146f..86550a9 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
+++ b/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
@@ -3,9 +3,9 @@
<ul class="style-action-menu">
<li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
- <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a>
+ <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Themes</a>
<ul>
- <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Color
+ <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Color
Palette</a></li>
<li><a href="{% url 'styleguide_index' page='themes' section='input' %}">Input
Field</a></li>
@@ -27,7 +27,7 @@
</li>
<li><a href="{% url 'styleguide_index' page='themes' section='menus' %}">Menu</a>
</li>
- <li><a href="{% url 'styleguide_index' page='themes' section='tab_sets' %}">Tab
+ <li><a href="{% url 'styleguide_index' page='themes' section='tab_set' %}">Tab
Set</a></li>
</ul>
</li>
diff --git a/pgaweb/templates/pgaweb/styleguide/style_theme.html b/pgaweb/templates/pgaweb/styleguide/style_theme.html
index 316f895..0638824 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_theme.html
+++ b/pgaweb/templates/pgaweb/styleguide/style_theme.html
@@ -1,27 +1,6 @@
+{% extends 'pgaweb/styleguide/index.html' %}
+{% block page_content %}
<div class="style-theme">
- {% if section == 'color' %}
- {% include "pgaweb/styleguide/color_palette/color_palette.html" %}
- {% elif section == 'input' %}
- {% include "pgaweb/styleguide/input/input.html" %}
- {% elif section == 'dropdowns' %}
- {% include "pgaweb/styleguide/dropdown/dropdown.html" %}
- {% elif section == 'buttons' %}
- {% include "pgaweb/styleguide/button/button.html" %}
- {% elif section == 'checkbox' %}
- {% include "pgaweb/styleguide/checkbox/checkbox.html" %}
- {% elif section == 'radio_buttons' %}
- {% include "pgaweb/styleguide/radiobuttons/radiobuttons.html" %}
- {% elif section == 'toggle_buttons' %}
- {% include "pgaweb/styleguide/togglebutton/togglebutton.html" %}
- {% elif section == 'alerts' %}
- {% include "pgaweb/styleguide/alert/alert.html" %}
- {% elif section == 'table' %}
- {% include "pgaweb/styleguide/table/table.html" %}
- {% elif section == 'accordion' %}
- {% include "pgaweb/styleguide/accordion/accordion.html" %}
- {% elif section == 'menus' %}
- {% include "pgaweb/styleguide/menu/menu.html" %}
- {% elif section == 'tab_sets' %}
- {% include "pgaweb/styleguide/tab_set/tab_set.html" %}
- {% endif %}
-</div>
\ No newline at end of file
+ {% block styleguide_content %}{% endblock %}
+</div>
+{% endblock %}
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
index 334ea42..0b78b7a 100644
--- a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Tab Set{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Tab Set</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Tab Set</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/table.html b/pgaweb/templates/pgaweb/styleguide/table/table.html
index b3236eb..4fbb9ef 100644
--- a/pgaweb/templates/pgaweb/styleguide/table/table.html
+++ b/pgaweb/templates/pgaweb/styleguide/table/table.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Table{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Table</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Table</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/dark_togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/hc_togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/sd_togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/toggle_buttons.html
similarity index 60%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/toggle_buttons.html
index 6419e9f..762bc91 100644
--- a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/toggle_buttons.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Toggle Buttons{% endblock %}
+{% block styleguide_content %}
<div class="color-palette">
- <h1 class="styleguide-title" id="colorpalette">Toggle Buttons</h1>
+ <h1 class="styleguide-title" id="colorpalette">Styleguide: Toggle Buttons</h1>
<p>
{% include "pgaweb/styleguide/theme_nav_bar.html" %}
<!--Add page specific content as per theme selection-->
<div class="tab-content" id="themeTabContent">
<div class="tab-pane fade show active theme-content theme-content-default"
id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
- {% include "pgaweb/styleguide/togglebutton/sd_togglebutton.html" %}
+ {% include "pgaweb/styleguide/toggle_buttons/sd_togglebutton.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
- {% include "pgaweb/styleguide/togglebutton/dark_togglebutton.html" %}
+ {% include "pgaweb/styleguide/toggle_buttons/dark_togglebutton.html" %}
</div>
<div class="tab-pane fade theme-content theme-content-default"
id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
- {% include "pgaweb/styleguide/togglebutton/hc_togglebutton.html" %}
+ {% include "pgaweb/styleguide/toggle_buttons/hc_togglebutton.html" %}
</div>
</div>
</p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/style_typography.html b/pgaweb/templates/pgaweb/styleguide/typography.html
similarity index 90%
rename from pgaweb/templates/pgaweb/styleguide/style_typography.html
rename to pgaweb/templates/pgaweb/styleguide/typography.html
index c34aaba..a7486fc 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_typography.html
+++ b/pgaweb/templates/pgaweb/styleguide/typography.html
@@ -1,4 +1,7 @@
-<h1 class="styleguide-title" id="typography">Typography</h1>
+{% extends 'pgaweb/styleguide/index.html' %}
+{% block title %}Styleguide: Typography{% endblock %}
+{% block page_content %}
+<h1 class="styleguide-title" id="typography">Styleguide: Typography</h1>
<p>
pgAdmin primarily uses Google Roboto for the overall content and Source Code
Pro is used for SQL and other code.
@@ -46,4 +49,5 @@
<pre class="font-size-14-style">14px<span class="tab-14px">Lorem ipsum is dummy text.</span></pre>
<pre class="font-size-13-style">13px<span class="tab-13px">Lorem ipsum is dummy text.</span></pre>
</div>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/views.py b/pgaweb/views.py
index 0b2b433..113f147 100644
--- a/pgaweb/views.py
+++ b/pgaweb/views.py
@@ -72,12 +72,16 @@ def styleguide_redirect(request):
def styleguide_index(request, page='typography', section=''):
if page == 'themes' and not section:
- section = 'color'
+ section = 'color_palette'
- if page == 'iconography' and not section:
- section = 'fontawesome'
+ if page == 'iconography':
+ section = 'fontawesome' if not section else section
+ url = 'pgaweb/styleguide/{0}/{0}.html'.format(page)
+ else:
+ url = 'pgaweb/styleguide/{0}/{1}.html'.format(
+ section, section) if section else 'pgaweb/styleguide/{0}.html'.format(page)
- return render(request, 'pgaweb/styleguide/index.html', {'page': page, 'section': section})
+ return render(request, url, {'page': page, 'section': section})
# 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: <CAOBg0APsOizjnj-D2dCAfwbbobwgJ4mFcjtyJEuwh3QborQiUQ@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