Hello Hackers,
With this patch we added the style guide to the current pgAdmin website. It
is not 100% migrated yet, but we already have the Alerts and colors.
Thanks
Matt && João
diff --git a/README.md b/README.md
index 3b1c852..0eaec2e 100644
--- a/README.md
+++ b/README.md
@@ -65,9 +65,12 @@ popd
```bash
./manage.py runserver
```
+<<<<<<< HEAD
# WSGI Deployment
The server will automatically compile SCSS files at startup. If you're running
behind (for example) uWSGI, you may
need to manually create the static/COMPILED directory and ensure it has the
correct permissions/ownership to allow
-updates to be made at startup.
\ No newline at end of file
+updates to be made at startup.
+=======
+>>>>>>> readme changes
diff --git a/pgaweb/static/css/styleguide.scss
b/pgaweb/static/css/styleguide.scss
new file mode 100644
index 0000000..570f405
--- /dev/null
+++ b/pgaweb/static/css/styleguide.scss
@@ -0,0 +1,83 @@
+.color-chip {
+ align-items: center;
+ border-radius: 3px;
+ box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .15);
+ color: rgba(0, 0, 0, .65);
+ display: flex;
+ font-size: 1.15em;
+ height: 70px;
+ justify-content: center;
+ width: 100%;
+ margin: 0 0 10px;
+}
+
+.chip-container {
+ margin-bottom: 10px;
+ margin-top: 15px;
+}
+
+@import "styleguide/primaryblue";
+@import "styleguide/othercolors";
+@import "styleguide/colorsgrey";
+@import "styleguide/typography";
+@import "styleguide/alert";
+@import "styleguide/github.css";
+
+.page-container {
+ padding-top: 20px;
+ .navbar {
+ margin-bottom: 10px;
+
+ li.current-page {
+ border: 3px solid $primary-blue;
+ border-radius: 5px;
+
+ a {
+ padding-bottom: 14px;
+ }
+ }
+
+ li {
+ height: 41px;
+ border: 3px solid transparent;
+
+ a {
+ line-height: 6px;
+ font-weight: 500;
+ }
+ }
+ }
+
+ .styleguide {
+ h1.styleguide-title {
+ margin-top: 10px;
+ }
+
+ .codeBlock pre {
+ border-radius: 0;
+ display: block;
+ padding: 9.5px;
+ margin: 20px 0 10px;
+ font-size: 13px;
+ line-height: 1.42857143;
+ color: #333;
+ word-break: break-all;
+ word-wrap: break-word;
+ background-color: #f5f5f5;
+ border: 1px solid #ddd;
+ }
+
+ h2 {
+ margin-top: 40px;
+ }
+
+ .row {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+
+ .font-white {
+ color: #ffffff;
+ }
+ }
+}
\ No newline at end of file
diff --git a/pgaweb/static/css/styleguide/_alert.scss
b/pgaweb/static/css/styleguide/_alert.scss
new file mode 100644
index 0000000..26680b7
--- /dev/null
+++ b/pgaweb/static/css/styleguide/_alert.scss
@@ -0,0 +1,155 @@
+.alert-icon {
+ display: flex;
+ align-items: center;
+ color: white;
+ padding: 15px 15px 15px 17px;
+ width: 50px;
+ min-height: 50px;
+ font-size: 14px;
+ text-align: center;
+ align-self: stretch;
+ flex-shrink: 0;
+}
+
+.alert-row {
+ display: block;
+ width: auto;
+}
+
+.alert-box {
+ padding: 0px;
+ display: inline-block;
+}
+
+.alert.alert-info {
+ padding: 15px;
+}
+
+.success-icon {
+ background: $color-green-3;
+}
+
+.error-icon {
+ background: $color-red-3;
+}
+
+.alert-text {
+ display: inline-block;
+ padding: 0 12px 0 10px;
+ align-self: center;
+ // To make sure IE picks up the correct font
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.alert-info {
+ border-color: $color-blue-2;
+ background-image: none;
+}
+
+.alert-danger {
+ background-image: none;
+}
+
+.grid-error, .graph-error {
+ .alert-row {
+ align-items: center;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ }
+}
+
+.ajs-message {
+ .media {
+ display: block;
+ }
+}
+
+.alert {
+ .media {
+ .media-body {
+ display: inline-block;
+ width: auto;
+ .alert-icon {
+ display: inline-block;
+ }
+ .alert-text {
+ display: inline-block;
+ }
+ }
+ }
+}
+
+.pg-prop-status-bar {
+ padding: 5px;
+
+ .media-body {
+ display: flex;
+ width: auto;
+ }
+
+ .alert-icon {
+ padding: 8px 8px 8px 10.5px;
+ width: 35px;
+ height: 35px;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ min-height: auto;
+ }
+
+ .alert-text {
+ flex-grow: 1;
+ border: 1px solid $color-red-2;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ padding: 7px 12px 6px 10px;
+ border-left: none;
+ }
+
+ .error-in-footer {
+ border-radius: 4px;
+
+ .alert-text {
+ border-color: $color-red-2;
+ }
+ }
+
+ .success-in-footer {
+ border-radius: 4px;
+
+ .alert-text {
+ border-color: $color-green-2;
+ }
+ }
+
+ .info-in-footer {
+ border: 1px solid $primary-blue;
+ border-radius: 4px;
+ height: 35px;
+
+ .alert-text {
+ border: none;
+ }
+ }
+}
+
+//Internet Explorer specific CSS
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .styleguide {
+ .alert-danger {
+ width: auto;
+ }
+
+ .alert-info {
+ width: auto;
+ }
+ }
+
+ .alert-danger {
+ width: 90%;
+ }
+
+ .alert-info {
+ width: 90%;
+ }
+}
diff --git a/pgaweb/static/css/styleguide/_colorsgrey.scss
b/pgaweb/static/css/styleguide/_colorsgrey.scss
new file mode 100644
index 0000000..d27d704
--- /dev/null
+++ b/pgaweb/static/css/styleguide/_colorsgrey.scss
@@ -0,0 +1,62 @@
+$color-gray-1: #f9f9f9;
+$color-gray-2: #e8e8e8;
+$color-gray-3: #cccccc;
+$color-gray-4: #888888;
+$color-gray-5: #555555;
+$color-gray-6: #333333;
+
+.bg-gray-1 {
+ background-color: $color-gray-1;
+}
+
+.bg-gray-2 {
+ background-color: $color-gray-2;
+}
+
+.bg-gray-3 {
+ background-color: $color-gray-3;
+}
+
+.bg-gray-4 {
+ background-color: $color-gray-4;
+}
+
+.bg-gray-5 {
+ background-color: $color-gray-5;
+}
+
+.bg-gray-6 {
+ background-color: $color-gray-6;
+}
+
+.border-gray-1 {
+ border-color: $color-gray-1;
+}
+
+.border-gray-2 {
+ border-color: $color-gray-2;
+}
+
+.border-gray-3 {
+ border-color: $color-gray-3;
+}
+
+.border-gray-4 {
+ border-color: $color-gray-4;
+}
+
+.border-gray-5 {
+ border-color: $color-gray-5;
+}
+
+.border-gray-6 {
+ border-color: $color-gray-6;
+}
+
+.font-gray-4 {
+ color: $color-gray-4;
+}
+
+.font-gray-6 {
+ color: $color-gray-6;
+}
diff --git a/pgaweb/static/css/styleguide/_othercolors.scss
b/pgaweb/static/css/styleguide/_othercolors.scss
new file mode 100644
index 0000000..4f20656
--- /dev/null
+++ b/pgaweb/static/css/styleguide/_othercolors.scss
@@ -0,0 +1,78 @@
+$color-blue-2: #84acdd;
+$color-red-1: #f2dede;
+$color-red-2: #de8585;
+$color-red-3: #d0021b;
+$color-green-2: #a2c189;
+$color-green-3: #3a773a;
+
+.bg-blue-1 {
+ background-color: #e7f2ff;
+}
+
+.bg-blue-2 {
+ background-color: $color-blue-2;
+}
+
+.bg-red-1 {
+ background-color: $color-red-1;
+}
+
+.bg-red-2 {
+ background-color: $color-red-2;
+}
+
+.bg-red-3 {
+ background-color: $color-red-3;
+}
+
+.bg-green-1 {
+ background-color: #dff0d7;
+}
+
+.bg-green-2 {
+ background-color: #a2c189;
+}
+
+.bg-green-3 {
+ background-color: $color-green-3;
+}
+
+.border-blue-1 {
+ border-color: #e7f2ff;
+}
+
+.border-blue-2 {
+ border-color: $color-blue-2;
+}
+
+.border-red-1 {
+ border-color: $color-red-1;
+}
+
+.border-red-2 {
+ border-color: $color-red-2;
+}
+
+.border-red-3 {
+ border-color: $color-red-3;
+}
+
+.border-green-1 {
+ border-color: #dff0d7;
+}
+
+.border-green-2 {
+ border-color: #a2c189;
+}
+
+.border-green-3 {
+ border-color: $color-green-3;
+}
+
+.font-red-3 {
+ color: $color-red-3;
+}
+
+.font-green-3 {
+ color: $color-green-3;
+}
diff --git a/pgaweb/static/css/styleguide/_primaryblue.scss
b/pgaweb/static/css/styleguide/_primaryblue.scss
new file mode 100644
index 0000000..49d62a3
--- /dev/null
+++ b/pgaweb/static/css/styleguide/_primaryblue.scss
@@ -0,0 +1,13 @@
+$primary-blue: #2c76b4;
+
+.bg-primary-blue {
+ background-color: $primary-blue;
+}
+
+.border-primary-blue {
+ border-color: $primary-blue;
+}
+
+.font-primary-blue {
+ color: $primary-blue;
+}
\ No newline at end of file
diff --git a/pgaweb/static/css/styleguide/_typography.scss
b/pgaweb/static/css/styleguide/_typography.scss
new file mode 100644
index 0000000..b63f6ae
--- /dev/null
+++ b/pgaweb/static/css/styleguide/_typography.scss
@@ -0,0 +1,23 @@
+.text-bold {
+ font-weight: bold;
+}
+
+.text-14 {
+ font-family: "Helvetica Neue";
+ font-size: 14px;
+}
+
+.text-13 {
+ font-family: "Helvetica Neue";
+ font-size: 13px;
+}
+
+.text-12 {
+ font-family: "Helvetica Neue";
+ font-size: 12px;
+}
+
+.text-11 {
+ font-family: "Helvetica Neue";
+ font-size: 11px;
+}
diff --git a/pgaweb/static/css/styleguide/github.css
b/pgaweb/static/css/styleguide/github.css
new file mode 100644
index 0000000..f012505
--- /dev/null
+++ b/pgaweb/static/css/styleguide/github.css
@@ -0,0 +1,61 @@
+hll { background-color: #ffffcc }
+.c { color: #999988; font-style: italic } /* Comment */
+.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.k { color: #000000; font-weight: bold } /* Keyword */
+.o { color: #000000; font-weight: bold } /* Operator */
+.cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.cp { color: #999999; font-weight: bold; font-style: italic } /*
Comment.Preproc */
+.c1 { color: #999988; font-style: italic } /* Comment.Single */
+.cs { color: #999999; font-weight: bold; font-style: italic } /*
Comment.Special */
+.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.ge { color: #000000; font-style: italic } /* Generic.Emph */
+.gr { color: #aa0000 } /* Generic.Error */
+.gh { color: #999999 } /* Generic.Heading */
+.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.go { color: #888888 } /* Generic.Output */
+.gp { color: #555555 } /* Generic.Prompt */
+.gs { font-weight: bold } /* Generic.Strong */
+.gu { color: #aaaaaa } /* Generic.Subheading */
+.gt { color: #aa0000 } /* Generic.Traceback */
+.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.m { color: #009999 } /* Literal.Number */
+.s { color: #d01040 } /* Literal.String */
+.na { color: #008080 } /* Name.Attribute */
+.nb { color: #0086B3 } /* Name.Builtin */
+.nc { color: #445588; font-weight: bold } /* Name.Class */
+.no { color: #008080 } /* Name.Constant */
+.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.ni { color: #800080 } /* Name.Entity */
+.ne { color: #990000; font-weight: bold } /* Name.Exception */
+.nf { color: #990000; font-weight: bold } /* Name.Function */
+.nl { color: #990000; font-weight: bold } /* Name.Label */
+.nn { color: #555555 } /* Name.Namespace */
+.nt { color: #000080 } /* Name.Tag */
+.nv { color: #008080 } /* Name.Variable */
+.ow { color: #000000; font-weight: bold } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mf { color: #009999 } /* Literal.Number.Float */
+.mh { color: #009999 } /* Literal.Number.Hex */
+.mi { color: #009999 } /* Literal.Number.Integer */
+.mo { color: #009999 } /* Literal.Number.Oct */
+.sb { color: #d01040 } /* Literal.String.Backtick */
+.sc { color: #d01040 } /* Literal.String.Char */
+.sd { color: #d01040 } /* Literal.String.Doc */
+.s2 { color: #d01040 } /* Literal.String.Double */
+.se { color: #d01040 } /* Literal.String.Escape */
+.sh { color: #d01040 } /* Literal.String.Heredoc */
+.si { color: #d01040 } /* Literal.String.Interpol */
+.sx { color: #d01040 } /* Literal.String.Other */
+.sr { color: #009926 } /* Literal.String.Regex */
+.s1 { color: #d01040 } /* Literal.String.Single */
+.ss { color: #990073 } /* Literal.String.Symbol */
+.bp { color: #999999 } /* Name.Builtin.Pseudo */
+.vc { color: #008080 } /* Name.Variable.Class */
+.vg { color: #008080 } /* Name.Variable.Global */
+.vi { color: #008080 } /* Name.Variable.Instance */
+.il { color: #009999 } /* Literal.Number.Integer.Long */
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/base.html
b/pgaweb/templates/pgaweb/base.html
index bece71f..34ee846 100755
--- a/pgaweb/templates/pgaweb/base.html
+++ b/pgaweb/templates/pgaweb/base.html
@@ -64,6 +64,7 @@
<ul class="dropdown-menu">
<li><a href="{% url 'development_index'
%}">Introduction</a></li>
<li><a href="{% url 'development_resources'
%}">Resources</a></li>
+ <li><a href="{% url 'styleguide_index' %}">Style Guide</a></li>
<li role="separator" class="divider"></li>
<li><a href="{% url 'development_team' %}">Team</a></li>
</ul>
@@ -100,9 +101,10 @@
</div>
</nav>
+ <script src="{% static 'node_modules/jquery/dist/jquery.min.js'
%}"></script>
+
{% block body %}{% endblock %}
- <script src="{% static 'node_modules/jquery/dist/jquery.min.js'
%}"></script>
<script src="{% static 'node_modules/bootstrap/dist/js/bootstrap.min.js'
%}"></script>
{% block scripts %}{% endblock %}
diff --git a/pgaweb/templates/pgaweb/page.html
b/pgaweb/templates/pgaweb/page.html
index 88057cd..00c08d3 100644
--- a/pgaweb/templates/pgaweb/page.html
+++ b/pgaweb/templates/pgaweb/page.html
@@ -11,7 +11,7 @@
</div>
<!-- News -->
- <div class="col-sm-8">
+ <div class="col-sm-8 page-container">
{% block content %}{% endblock %}
</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/alerts.html
b/pgaweb/templates/pgaweb/styleguide/alerts.html
new file mode 100644
index 0000000..db1903d
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/alerts.html
@@ -0,0 +1,241 @@
+{% extends "pgaweb/styleguide/base.html" %}
+
+{% block styleguide-page %}
+ <h1 class="styleguide-title">Alerts</h1>
+ <p>
+ Use alerts to provide feedback to the user or call
+ attention to important information the user should know
+ </p>
+
+ <h2>Success alert</h2>
+ <div class="alert-row">
+ <div class="alert alert-success border-green-2 font-green-3 text-14
alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon success-icon"><i class="fa fa-check"
aria-hidden="true"></i></div>
+ <div class="alert-text"> Successfully run. Total query runtime: 32
msec. 1 row retrieved</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p>Use this to provide feedback on an event happened correctly</p>
+
+ <div class="codeBlock">
+ <div class="highlight">
+ <pre>
+<span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-row"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert alert-success border-green-2 font-green-3 text-14
alert-box"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"media"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"media-body media-middle"</span><span
class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"alert-icon success-icon"</span><span
class="nt">></span>
+ <span class="nt"><i</span> <span class="na">class=</span><span
class="s">"fa fa-check"</span> <span
+ class="na">aria-hidden=</span><span class="s">"true"</span><span
class="nt">></i></span>
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-text"</span><span
+ class="nt">></span>
+ Successfully run. Total query runtime: 32 msec. 1 row retrieved
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+<span class="nt"></div></span></pre>
+ </div>
+ </div>
+
+ <h2>Error alert</h2>
+ <div class="alert-row">
+ <div class="alert alert-danger border-red-2 font-red-3 text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon error-icon"><i class="fa
fa-exclamation-triangle" aria-hidden="true"></i></div>
+ <div class="alert-text">
+ Error retrieving properties - INTERNAL SERVER ERROR
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p>Use this to provide feedback that something went wrong</p>
+
+ <div class="codeBlock">
+ <div class="highlight">
+ <pre>
+<span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-row"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert alert-danger border-red-2 font-red-3 text-14
alert-box"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"media"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"media-body media-middle"</span><span
class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"alert-icon error-icon"</span><span class="nt">></span>
+ <span class="nt"><i</span> <span class="na">class=</span><span
+ class="s">"fa fa-exclamation-triangle"</span> <span
class="na">aria-hidden=</span><span
+ class="s">"true"</span><span class="nt">></i></span>
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-text"</span><span
+ class="nt">></span>
+ Error retrieving properties - INTERNAL SERVER ERROR
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+<span class="nt"></div></span></pre>
+ </div>
+ </div>
+
+ <h2>Info alert</h2>
+ <div class="alert-row">
+ <div class="alert alert-info border-blue-2 font-primary-blue text-14
alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-text">
+ This is a neutral message
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p>
+ Use this for non urgent info that users should know.
+ Links can also be placed within the banner if needed.
+ </p>
+
+ <div class="codeBlock">
+ <div class="highlight">
+ <pre>
+<span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-row"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert alert-info border-blue-2 font-primary-blue text-14
alert-box"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"media"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"media-body media-middle"</span><span
class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-text"</span><span
+ class="nt">></span>
+ This is a neutral message
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+<span class="nt"></div></span></pre>
+ </div>
+ </div>
+
+ <h2>Small alerts</h2>
+ <div class="pg-prop-status-bar">
+ <div class="success-in-footer alert-success border-green-2 font-green-3
text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon success-icon">
+ <i class="fa fa-check" aria-hidden="true"></i>
+ </div>
+ <div class="alert-text">
+ Successfully run. Total query runtime: 32 msec. 1 row retrieved
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="pg-prop-status-bar">
+ <div class="error-in-footer alert-danger border-red-2 font-red-3 text-14
alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon error-icon">
+ <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+ </div>
+ <div class="alert-text">
+ Error retrieving properties - INTERNAL SERVER ERROR
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="pg-prop-status-bar">
+ <div class="info-in-footer alert-info border-blue-2 font-primary-blue
text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-text">
+ This is a neutral message
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p></p>
+
+ <div class="codeBlock">
+ <div class="highlight">
+ <pre><span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"pg-prop-status-bar"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"success-in-footer alert-success border-green-2 font-green-3 text-14
alert-box"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"media"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"media-body media-middle"</span><span
class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"alert-icon success-icon"</span><span
class="nt">></span>
+ <span class="nt"><i</span> <span class="na">class=</span><span
class="s">"fa fa-check"</span> <span
+ class="na">aria-hidden=</span><span class="s">"true"</span><span
class="nt">></i></span>
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-text"</span><span
+ class="nt">></span>
+ Successfully run. Total query runtime: 32 msec. 1 row retrieved
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+<span class="nt"></div></span>
+
+<span class="nt"><div</span> <span class="na">class=</span><span
class="s">"pg-prop-status-bar"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"error-in-footer alert-danger border-red-2 font-red-3 text-14
alert-box"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"media"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"media-body media-middle"</span><span
class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"alert-icon error-icon"</span><span
class="nt">></span>
+ <span class="nt"><i</span> <span class="na">class=</span><span
+ class="s">"fa fa-exclamation-triangle"</span> <span
class="na">aria-hidden=</span><span
+ class="s">"true"</span><span class="nt">></i></span>
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-text"</span><span
+ class="nt">></span>
+ Error retrieving properties - INTERNAL SERVER ERROR
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+<span class="nt"></div></span>
+
+<span class="nt"><div</span> <span class="na">class=</span><span
class="s">"pg-prop-status-bar"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"info-in-footer alert-info border-blue-2 font-primary-blue text-14
alert-box"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"media"</span><span
+ class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
+ class="s">"media-body media-middle"</span><span
class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span
class="s">"alert-text"</span><span
+ class="nt">></span>
+ This is a neutral message
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span>
+<span class="nt"></div></span></pre>
+ </div>
+ </div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/base.html
b/pgaweb/templates/pgaweb/styleguide/base.html
new file mode 100644
index 0000000..3dfe884
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/base.html
@@ -0,0 +1,36 @@
+{% extends "pgaweb/page.html" %}
+
+{% load compile_static %}
+{% load static %}
+
+{% block title %}Style Guide{% endblock %}
+
+{% block content %}
+ <link rel="stylesheet" href="{% static "css/styleguide.scss"|compile %}" />
+
+ <nav class="navbar">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="/styleguide/">Styleguide Home</a>
+ </li>
+ <li>
+ <a href="/styleguide/colors">Colors</a>
+ </li>
+ <li>
+ <a href="/styleguide/alerts">Alerts</a>
+ </li>
+ </ul>
+ </nav>
+
+ <div class="styleguide">
+ {% block styleguide-page %}{% endblock %}
+ </div>
+
+ <script language="JavaScript">
+
+ $item = $('.page-container li a').filter(function () {
+ return $(this).prop('href') == location.href;
+ });
+ $item.parent().addClass('current-page');
+ </script>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/colors.html
b/pgaweb/templates/pgaweb/styleguide/colors.html
new file mode 100644
index 0000000..b13415b
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/colors.html
@@ -0,0 +1,169 @@
+{% extends "pgaweb/styleguide/base.html" %}
+
+{% block styleguide-page %}
+ <h1 class="styleguide-title">Colors</h1>
+ <div class="styleguide-inner">
+ <p class="styleguide">Below are the colors for pgadmin4. To use, copy and
paste the hex codes into the CSS.</p>
+ <p class="styleguide">The current app may have more colors than what is
included here. When a color is encountered
+ in the app that is not documented here, default to replacing that color
with one that is documented here.</p>
+ <p class="styleguide">Each color listed on this page can be used for
Background, Font, and Border. Pre-pend each
+ class name with <strong>.bg-</strong> or <strong>.font-</strong> or
<strong>.border-</strong> to use as background
+ or border.</p>
+ <h5>
+ <i>Example:</i>
+ </h5>
+
+ <div>
+ To use a background color use the class:
+ </div>
+ <div class="codeBlock">
+ <div class="highlight">
+ <pre>bg-color-yellow</pre>
+ </div>
+ </div>
+
+ <div>
+ To use a border color use the class:
+ </div>
+ <div class="codeBlock">
+ <div class="highlight">
+ <pre>border-color-yellow</pre>
+ </div>
+ </div>
+
+ <div>
+ To use a font color use the class:
+ </div>
+ <div class="codeBlock">
+ <div class="highlight">
+ <pre>font-color-yellow</pre>
+ </div>
+ </div>
+
+ <h2 id="colors-primaryblue" class="styleguide">Primary blue</h2>
+ <p class="styleguide">This color should be used to call attention to the
main part of the app. Use sparingly.</p>
+
+ <div class="row">
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-primary-blue font-white">
+ primary-blue
+ </div>
+ $primary-blue<br/>
+ #2c76b4
+ </div>
+ </div>
+
+ <h2 id="Grays" class="styleguide">Grays</h2>
+ <p class="styleguide">For text, avoid using black or #000 to lower the
contrast between the background and text.</p>
+ <div class="row">
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-gray-1">
+ gray-1
+ </div>
+ $color-gray-1<br/>
+ #f9f9f9
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-gray-2">
+ gray-2
+ </div>
+ $color-gray-2<br/>
+ #e8e8e8
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-gray-3">
+ gray-3
+ </div>
+ $color-gray-3<br/>
+ #cccccc
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-gray-4 font-white">
+ gray-4
+ </div>
+ $color-gray-4<br/>
+ #888888
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-gray-5 font-white">
+ gray-5
+ </div>
+ $color-gray-5<br/>
+ #555555
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-gray-6 font-white">
+ gray-6
+ </div>
+ $color-gray-6<br/>
+ #333333
+ </div>
+ </div>
+
+ <h2 id="z-othercolors" class="styleguide">Others</h2>
+ <p class="styleguide">These colors should be used to highlight hover
options in dropdown menus and catalog browser
+ or to tell the user when something is right or wrong.</p>
+ <div class="row">
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-blue-1">
+ blue-1
+ </div>
+ $color-blue-1<br/>
+ #e7f2ff
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-blue-2">
+ blue-2
+ </div>
+ $color-blue-2<br/>
+ #84acdd
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-red-1">
+ red-1
+ </div>
+ $color-red-1<br/>
+ #f2dede
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-red-2 font-white">
+ red-2
+ </div>
+ $color-red-2<br/>
+ #de8585
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-red-3 font-white">
+ red-3
+ </div>
+ $color-red-3<br/>
+ #d0021b
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-green-1">
+ green-1
+ </div>
+ $color-green-1<br/>
+ #dff0d7
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-green-2">
+ green-2
+ </div>
+ $color-green-2<br/>
+ #a2c189
+ </div>
+ <div class="col-xs-6 col-md-2 chip-container">
+ <div class="color-chip bg-green-3 font-white">
+ green-3
+ </div>
+ $color-green-3<br/>
+ #3a773a
+ </div>
+ </div>
+ </div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/index.html
b/pgaweb/templates/pgaweb/styleguide/index.html
new file mode 100644
index 0000000..c77a99e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/index.html
@@ -0,0 +1,12 @@
+{% extends "pgaweb/styleguide/base.html" %}
+
+{% block styleguide-page %}
+ <h1 class="styleguide-title">Style Guide</h1>
+ <p>
+ Welcome to the style guide for UI elements in pgAdmin4 to help the product
stay consistent as it grows.
+ </p>
+
+ <p>
+ The style guide is intended for developers and designers to leverage when
implementing features in pgAdmin UI.
+ </p>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/urls.py b/pgaweb/urls.py
index 859b735..b8ce505 100644
--- a/pgaweb/urls.py
+++ b/pgaweb/urls.py
@@ -32,6 +32,10 @@ urlpatterns = [
url(r'^development/resources/$', 'pgaweb.views.development_resources',
name='development_resources'),
url(r'^development/team/$', 'pgaweb.views.development_team',
name='development_team'),
+ url(r'^styleguide/$', 'pgaweb.views.styleguide_index',
name='styleguide_index'),
+ url(r'^styleguide/colors$', 'pgaweb.views.styleguide_colors',
name='styleguide_colors'),
+ url(r'^styleguide/alerts', 'pgaweb.views.styleguide_alerts',
name='styleguide_alerts'),
+
url(r'^support/$', 'pgaweb.views.support_index', name='support_index'),
url(r'^support/issues/$', 'pgaweb.views.support_issues',
name='support_issues'),
url(r'^support/list/$', 'pgaweb.views.support_list', name='support_list'),
diff --git a/pgaweb/views.py b/pgaweb/views.py
index 95300b2..32cca72 100644
--- a/pgaweb/views.py
+++ b/pgaweb/views.py
@@ -56,6 +56,19 @@ def development_team(request):
return render_to_response('pgaweb/development/team.html', {})
+# Handle the Styleguide level pages
+def styleguide_index(request):
+ return render_to_response('pgaweb/styleguide/index.html', {})
+
+
+def styleguide_colors(request):
+ return render_to_response('pgaweb/styleguide/colors.html', {})
+
+
+def styleguide_alerts(request):
+ return render_to_response('pgaweb/styleguide/alerts.html', {})
+
+
# Handle the Support level pages
def support_index(request):
return render_to_response('pgaweb/support/index.html', {})
diff --git a/static/yarn.lock b/static/yarn.lock
new file mode 100644
index 0000000..18a2e2a
--- /dev/null
+++ b/static/yarn.lock
@@ -0,0 +1,25 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+bootstrap@^3.3.7:
+ version "3.3.7"
+ resolved
"https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71";
+
+font-awesome@^4.7.0:
+ version "4.7.0"
+ resolved
"https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133";
+
+font-mfizz@^2.3.0:
+ version "2.3.0"
+ resolved
"https://registry.yarnpkg.com/font-mfizz/-/font-mfizz-2.3.0.tgz#f12582680d2f3d1fc111e94a44c0b57b3b5d5c05";
+
+fotorama@^4.6.4:
+ version "4.6.4"
+ resolved
"https://registry.yarnpkg.com/fotorama/-/fotorama-4.6.4.tgz#7376961b6c7eeccb6c76411aceba7795ffe22eae";
+ dependencies:
+ jquery ">=1.8"
+
+jquery@>=1.8, jquery@^3.2.0:
+ version "3.2.1"
+ resolved
"https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787";
