From 7770a7484a9732572d7196488c4b938a565d362e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 29 Jul 2022 03:22:47 +0530 Subject: [PATCH] Changed side nav bar's style and fixed its position for quick navigation | Used accordion for general info | Changed table's design (added search and pagination) | Added hover effect for links --- .../mailarchives/templates/index.html | 165 +++++++++++------- .../archives/mailarchives/templates/page.html | 20 +-- django/media/css/main.css | 147 +++++++++++++--- 3 files changed, 231 insertions(+), 101 deletions(-) diff --git a/django/archives/mailarchives/templates/index.html b/django/archives/mailarchives/templates/index.html index 5352f36..ba8bc4e 100644 --- a/django/archives/mailarchives/templates/index.html +++ b/django/archives/mailarchives/templates/index.html @@ -4,53 +4,85 @@ {%block contents%}

PostgreSQL Mailing Lists

-

What are the PostgreSQL Mailing Lists?

- -The PostgreSQL mailing lists are one of the primary ways to interact with the PostgreSQL community. The mailing lists are an effective way to communicate and contribute to PostgreSQL and there are lists that cover a variety of topics, including: - - - -and many more. - -

Tips For Using the PostgreSQL Mailing Lists

- -

To help ensure you have a productive experience on the PostgreSQL experience, we have a few tips to get you started on your journey:

- -

Tip #1: Read The Archives Policy

- -

The PostgreSQL mailing lists are available in a public archive and are independently syndicated across the web. We want you to feel comfortable posting to our public mailing lists, so please ensure you read our Archive Policy prior to your initial post.

- -

Tip #2: Avoid Mail-Back Anti-Spam Systems

- -

If your email address is protected by a mail-back anti-spam system, this could cause some issues with our mailing list system. If it is discovered that your email address has implemented one of these systems, we may have to automatically unsubscribe your account. -

- -

Tip #3: Choose The Most Appropriate List

- -

Choose the most appropriate individual list for your question. Please do not cross-post (have multiple mailing lists in one email) unless there is a specific reason (such as a confirmed bug report being cross-posted to the hackers mailing list). Instead, choose the most appropriate list for your email and send it there. Cross-posted emails will be moderated and therefore will also take longer to reach the subscribers if approved. -

- -

How to Subscribe or Unsubscribe

- -

Subscribing to a PostgreSQL Mailing List

- -

-Ready to join the PostgreSQL community? You can subscribe to one of our mailing lists at lists.postgresql.org. -

- -

Unsubscribing from a PostgreSQL Mailing List

- -

-You can manage your subscriptions and unsubscribe from our mailing lists at lists.postgresql.org. -

- -

Mailing List Archives

+
+
+
+ +
+
+ The PostgreSQL mailing lists are one of the primary ways to interact with the PostgreSQL community. The mailing lists are an effective way to communicate and contribute to PostgreSQL and there are lists that cover a variety of topics, including: + +
    +
  • Ongoing PostgreSQL development
    • +
  • General support
    • +
  • Product release & event announcements
    • +
  • Coordinate community outreach
    • +
+ + and many more. +
+
+
+
+ +
+
+

To help ensure you have a productive experience on the PostgreSQL experience, we have a few tips to get you started on your journey:

+ +

Tip #1: Read The Archives Policy

+ +

The PostgreSQL mailing lists are available in a public archive and are independently syndicated across the web. We want you to feel comfortable posting to our public mailing lists, so please ensure you read our Archive Policy prior to your initial post.

+ +

Tip #2: Avoid Mail-Back Anti-Spam Systems

+ +

If your email address is protected by a mail-back anti-spam system, this could cause some issues with our mailing list system. If it is discovered that your email address has implemented one of these systems, we may have to automatically unsubscribe your account. +

+ +

Tip #3: Choose The Most Appropriate List

+ +

Choose the most appropriate individual list for your question. Please do not cross-post (have multiple mailing lists in one email) unless there is a specific reason (such as a confirmed bug report being cross-posted to the hackers mailing list). Instead, choose the most appropriate list for your email and send it there. Cross-posted emails will be moderated and therefore will also take longer to reach the subscribers if approved. +

+
+
+
+
+ +
+
+

Subscribing to a PostgreSQL Mailing List

+

+ Ready to join the PostgreSQL community? You can subscribe to one of our mailing lists at lists.postgresql.org. +

+

Unsubscribing from a PostgreSQL Mailing List

+

+ You can manage your subscriptions and unsubscribe from our mailing lists at lists.postgresql.org. +

+
+
+
+
+
+ +

Mailing List Archives

The PostgreSQL Mailing list public archives provide a rich history of the PostgreSQL project, all the way back to 1997! We keep a public record of the mailing list to help provide a searchable resource to help answer your questions, as well as in the spirit of building an open community.

@@ -61,25 +93,28 @@ You can manage your subscriptions and unsubscribe from our mailing lists at View All Archives {%for g in groups%} - {%if not forloop.first%} - - - {%endif%} -
{{g.groupname}}
- - +

{{g.groupname}}

+
+ - - + + - - {%for l in g.lists%} - - - - - {%endfor%} + + + {%for l in g.lists%} + + + + + {%endfor%} + +
ListDescriptionListDescription
{{l.maybe_shortdesc}}{{l.description|safe}}
{{l.maybe_shortdesc}}{{l.description|safe}}
{%endfor%} - - {%endblock%} diff --git a/django/archives/mailarchives/templates/page.html b/django/archives/mailarchives/templates/page.html index fed0163..6e33dce 100644 --- a/django/archives/mailarchives/templates/page.html +++ b/django/archives/mailarchives/templates/page.html @@ -2,24 +2,24 @@ {%block layoutblock%}
-
+
-
+
{%block contents%}{%endblock%}
diff --git a/django/media/css/main.css b/django/media/css/main.css index f7d6646..ff1c2a9 100644 --- a/django/media/css/main.css +++ b/django/media/css/main.css @@ -17,12 +17,11 @@ /** CUSTOM FONTS */ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); @import url('https://fonts.googleapis.com/css?family=Maven+Pro'); - /** GLOBAL CONFIGURATION */ body { font-family: 'Open Sans', sans-serif; font-weight: 400; - color: #515151; + color: #0D0A0B; font-size: 11.5pt; } @@ -39,10 +38,9 @@ dl, ol, ul { } h1, h2, h3, h4, h5, h6 { - font-family: 'Maven Pro', sans-serif; - font-weight: 700; - text-transform: uppercase; - color: #515151; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + color: #336791; /*margin: 0 0 0.5em 0;*/ } @@ -56,7 +54,16 @@ h3 { font-weight: initial; } -#pgContentWrap h2:after, #pgSideNav h2:after { +.h4, h4 { + font-size: 1.1rem; + text-transform: capitalize !important; +} + +.h5, h5 { + font-size: 0.98rem; +} + +#pgContentWrap h2:after { background-color: #e7eae8; content: '\a0'; flex-grow: 1; @@ -65,6 +72,15 @@ h3 { margin: .5em 0 .5em .75em; } +#pgSideNav h2:after { + background-color: #336797; + content: '\a0'; + flex-grow: 1; + height: 2px; + position: relative; + margin: .5em 0 .5em .75em; +} + #pgContentWrap h2, #pgSideNav h2 { display: flex; flex-direction: row; @@ -114,9 +130,9 @@ a:hover, a:active { text-decoration: none; } -b, strong { - font-weight: 700; - color: #383838; +b, strong, th { + font-weight: 600; + color: #474747 !important; } i, em { @@ -190,17 +206,23 @@ p, ul, ol, dl, table { padding: 1em 2em; } +/* Utility */ +.ws-pre { + white-space: pre; +} + /* #BLOCKQUOTE */ blockquote { - border-left: solid 5px #E7EAE8; - padding: 1em 4em 3em .5em; - font-style: italic; + border-left: solid 5px #E7EAE8; + padding: 0em 4em 0em .5em; + margin: 1em 0em 1em 0em; + font-style: italic; } .item blockquote { - border-left: none; - margin: 0; + border-left: none; + margin: 0; } .item blockquote img { @@ -209,8 +231,8 @@ blockquote { .item blockquote p:before { content: "\f10d"; - font-family: 'Fontawesome'; - float: left; + font-family: 'Fontawesome'; + float: left; margin-right: 10px; } @@ -537,7 +559,7 @@ ul.bold { } #footer a { - color: inherit; + color: #336791; } /* #LIST DESKTOP */ @@ -563,6 +585,10 @@ ul.actions { margin-bottom: 0; } +.nav-item > a { + font-weight: 400; +} + .logo { height: 2rem; margin-left: 5px; @@ -578,21 +604,57 @@ ul.actions { #pgSideNav { padding: 1em; + background: #f8f9fa; + border-radius: 7px; + box-shadow: 0px 5px 15px rgb(0 0 0 / 20%); +} + +#pgSideNav a { + color: #336791; + font-weight: normal; + padding-left: 1em; + padding-top: 0.5em; + padding-bottom: 0.5em; + display: block; } #pgSideNav ul { - list-style-type: circle; - padding-left: 1.3em; + list-style-type: none; + padding-left: 0em; +} + +#pgSideNav a i { + font-size: 1em; + width: 1.8em; +} + +#pgSideNav ul li:hover { + background: #336791; + border-radius: 5px !important; +} + +#pgSideNav ul li:hover a { + color: #ffffff; } /* #PGCONTENTWRAP */ -#pgContentWrap { - padding: 1em 2em; +#pgContentWrap a, #docContent a { + color: #840032; +} + +#pgContentWrap a:hover, #docContent a:hover{ + color: #cf2263; } -#pgContentWrap h3 { - margin: 1em 0; +#pgContentWrap { + padding: 1em 2em; + margin: 0 auto; + width: 100%; + } + +#pgContentWrap h3, #pgContentWrap h4 { + margin: 1em 0; } #pgContentWrap .fa, #pgContentWrap .far, #pgContentWrap .fas, #pgContentWrap .fab { @@ -639,6 +701,10 @@ pre.code { margin: 1em auto; } +.btn-double-width { + width: 28em; +} + .btn-center { text-align: center; display: block; @@ -647,7 +713,7 @@ pre.code { .btn-primary { background-color: #336791; border-color: #336791; - color: #fff; + color: #fff !important; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn:active:focus, .btn.active:focus { @@ -656,6 +722,10 @@ pre.code { cursor: pointer; } +.btn-inline-block { + display: inline-block; +} + .form-row .btn-primary { margin: 0.5em 0; } @@ -817,7 +887,7 @@ h1.subject { .navbar { padding: 5px 10px; } - + .navbar-toggler-icon { width: 1rem; height: 1.5rem; @@ -863,6 +933,10 @@ h1.subject { padding: 1em 0; } + #pgSideNav h2 { + padding-left: 1em; + } + #pgSideNav ul { padding: 0; margin: 1em 0 0 1em; @@ -882,6 +956,18 @@ h1.subject { } +@media (min-width: 768px) { + /** SIDE NAVBAR */ + #pgSideNav { + position: fixed; + z-index: 1; + } + + #pgSideNav a { + padding-right: 1em; + } +} + @media (min-width: 576px) { /** NAVBAR */ .nav-item > a { @@ -894,4 +980,13 @@ h1.subject { .pg-jumbotron-header { font-size: 1.5rem; } + + .btn-double-width { + width: 18em; + } + + /** HOMEPAGE ACCORDION */ + .panel-default>.panel-heading a:after { + display: none; + } } -- 2.26.2.windows.1