Author: Matti Picus <[email protected]>
Branch: nikola
Changeset: r973:4426e5769672
Date: 2020-02-09 17:11 +0200
http://bitbucket.org/pypy/pypy.org/changeset/4426e5769672/
Log: rework navbar
diff --git a/conf.py b/conf.py
--- a/conf.py
+++ b/conf.py
@@ -167,6 +167,8 @@
# Alternative navigation links. Works the same way NAVIGATION_LINKS does,
# although themes may not always support them. (translatable)
# (Bootstrap 4: right-side of navbar, Bootblog 4: right side of title)
+#
+# Not supported in the PyPy theme
NAVIGATION_ALT_LINKS = {
DEFAULT_LANG: ()
}
diff --git a/themes/pypy/assets/css/styles.css
b/themes/pypy/assets/css/styles.css
--- a/themes/pypy/assets/css/styles.css
+++ b/themes/pypy/assets/css/styles.css
@@ -1,3 +1,12 @@
+:root {
+ --content-width: 1000px;
+ --breakpoint: 799px;
+ --nav-height: 70px;
+ --nav-background: #d0dad5;
+ --nav-font-color: darkolivgreen;
+ --link-hover-color: #e0dad5;
+}
+
body {
color: #383939;
}
@@ -11,201 +20,6 @@
background-color: #d0dad5;
}
-.myTopNav {
- /* background-color: #333; */
- display: flex;
- flex-direction: row;
- margin-bottom: 5px;
- height: 47px;
-}
-
-/* Style the links inside the navigation bar */
-.myTopNav a {
- float: left;
- display: block;
- text-decoration: none;
- font-size: 17px;
-}
-
-.topnav {
- height: 32px;
-}
-
-.topnav a {
- float: left;
- display: block;
- color: #383939;
- text-align: center;
- padding-top: 8px;
- padding-left: 16px;
- padding-right: 16px;
- padding-bottom: 12px;
- text-decoration: none;
- font-size: 17px;
-}
-
-/* Add an active class to highlight the current page */
-.active {
- background-color: #4CAF50;
- color: white;
-}
-
-/* Hide the link that should open and close the topnav on small screens */
-.myTopNav .icon {
- display: none;
-}
-
-/* Dropdown container - needed to position the dropdown content */
-.dropdown {
- float: left;
- overflow: hidden;
-}
-
-/* Style the dropdown button to fit inside the topnav */
-.dropdown .dropbtn {
- font-size: 17px;
- border: none;
- outline: none;
- color: #383939;
- padding-top: 10px;
- padding-left: 16px;
- padding-right: 16px;
- padding-bottom: 12px;
- background-color: inherit;
- font-family: inherit;
- margin: 0;
-}
-
-/* Style the dropdown content (hidden by default) */
-.dropdown-content {
- display: none;
- position: absolute;
- background-color: #f9f9f9;
- min-width: 160px;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
- z-index: 1;
-}
-
-/* Style the links inside the dropdown */
-.dropdown-content a {
- float: none;
- color: black;
- padding: 12px 16px;
- text-decoration: none;
- display: block;
- text-align: left;
-}
-
-/* Add a dark background on topnav links and the dropdown button on hover */
-.myTopNav a:hover, .dropdown:hover .dropbtn {
- background-color: #555;
- color: white;
-}
-
-/* Add a grey background to dropdown links on hover */
-.dropdown-content a:hover {
- background-color: #ddd;
- color: black;
-}
-
-/* Show the dropdown menu when the user moves the mouse over the dropdown
button */
-.dropdown:hover .dropdown-content {
- display: block;
-}
-
-/* When the screen is less than 600 pixels wide, hide all links, except for
the first one ("Home"). Show the link that contains should open and close the
topnav (.icon) */
-@media screen and (max-width: 600px) {
- .myTopNav a:not(:first-child), .dropdown .dropbtn {
- display: none;
- }
- .myTopNav a.icon {
- float: right;
- display: block;
- }
-}
-
-/* The "responsive" class is added to the topnav with JavaScript when the user
clicks on the icon. This class makes the topnav look good on small screens
(display the links vertically instead of horizontally) */
-@media screen and (max-width: 600px) {
- .myTopNav.responsive {position: relative;}
- .myTopNav.responsive a.icon {
- position: absolute;
- right: 0;
- top: 0;
- }
- .myTopNav.responsive a {
- float: none;
- display: block;
- text-align: left;
- }
- .myTopNav.responsive .dropdown {float: none;}
- .myTopNav.responsive .dropdown-content {position: relative;}
- .myTopNav.responsive .dropdown .dropbtn {
- display: block;
- width: 100%;
- text-align: left;
- }
-
-
-} .row {
- display: flex;
- flex-direction: column;
- padding: 0;
- width: 100%; }
- .row .column {
- display: block;
- flex: 1 1 auto;
- margin-left: 0;
- max-width: 100%;
- width: 100%; }
-
-@media (min-width: 40rem) {
- .row {
- flex-direction: row;
- margin-left: -1.0rem;
- width: calc(100% + 2.0rem); }
- .row .column {
- margin-bottom: inherit;
- padding: 0 1.0rem; } }
-
-@media screen and (max-width: 40rem) {
- .row .column {
- text-align: center; } }
-
-.pb-4 {
- padding-bottom: 6rem; }
-
-.text-sm {
- font-size: 1rem; }
-
-.text-lg {
- font-size: 2rem; }
-
-/*.button, button {
- background-color: transparent;
- border: 0.1rem solid #1890ff;
- border-radius: .4rem;
- cursor: pointer;
- display: inline-block;
- font-weight: 700;
- height: 2rem;
- letter-spacing: .1rem;
- line-height: 2rem;
- padding: 0 2.0rem;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- white-space: nowrap;
-}
-
-.button:focus, .button:hover,
-button:focus,
-button:hover
- {
- background-color: lightblue;
- border-color: #4B545C;
- color: white;
-}
-*/
pre.literal-block {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
@@ -229,3 +43,167 @@
.logotext {
padding-top: 4px;
+}
+
+#toplogo {
+ padding-top: 18px;
+}
+
+/* For the responsive navbar, adapted from
https://www.taniarascia.com/responsive-dropdown-navigation-bar */
+
+@charset "UTF-8";
+.navigation {
+ height: 70px;
+ background: var(--nav-background);
+}
+
+.brand {
+ position: absolute;
+ padding-left: 20px;
+ float: left;
+ line-height: 70px;
+ text-transform: uppercase;
+ font-size: 1.4em;
+}
+.brand a,
+.brand a:visited {
+ color: var(--nav-font-color);
+ text-decoration: none;
+}
+
+.nav-container {
+ max-width: content-width;
+ margin: 0 auto;
+}
+
+nav {
+ float: right;
+}
+nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+nav ul li {
+ float: left;
+ position: relative;
+}
+nav ul li a:link,
+nav ul li a,
+nav ul li a:visited {
+ display: block;
+ padding: 0 20px;
+ line-height: 70px;
+ background: var(--nav-background);
+ color: var(--nav-font-color);
+ text-decoration: none;
+}
+nav ul li a:hover,
+nav ul li a:link:hover,
+nav ul li a:visited:hover {
+ background: var(--link-hover-color);
+ color: var(--nav-font-color);
+}
+nav ul li a:not(:only-child):after,
+nav ul li a:visited:not(:only-child):after {
+ padding-left: 4px;
+ content: ' ▾';
+}
+nav ul li ul li {
+ min-width: 190px;
+}
+nav ul li ul li a {
+ padding: 15px;
+ line-height: 20px;
+}
+
+.nav-dropdown {
+ position: absolute;
+ display: none;
+ z-index: 1;
+ box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Mobile navigation */
+.nav-mobile {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ background: var(--nav-background);
+ height: 70px;
+ width: 70px;
+}
+
+@media only screen and (max-width: 798px) {
+ .nav-mobile {
+ display: block;
+ }
+
+ nav {
+ width: 100%;
+ padding: 70px 0 15px;
+ }
+ nav ul {
+ display: none;
+ }
+ nav ul li {
+ float: none;
+ }
+ nav ul li a {
+ padding: 15px;
+ line-height: 20px;
+ }
+ nav ul li ul li a {
+ padding-left: 30px;
+ }
+
+ .nav-dropdown {
+ position: static;
+ }
+}
+
+@media screen and (min-width: 799px) {
+ .nav-list {
+ display: block !important;
+ }
+}
+#nav-toggle {
+ position: absolute;
+ left: 18px;
+ top: 22px;
+ cursor: pointer;
+ padding: 10px 35px 16px 0px;
+}
+#nav-toggle span,
+#nav-toggle span:before,
+#nav-toggle span:after {
+ cursor: pointer;
+ border-radius: 1px;
+ height: 5px;
+ width: 35px;
+ background: black;
+ position: absolute;
+ display: block;
+ content: '';
+ transition: all 300ms ease-in-out;
+}
+#nav-toggle span:before {
+ top: -10px;
+}
+#nav-toggle span:after {
+ bottom: -10px;
+}
+#nav-toggle.active span {
+ background-color: transparent;
+}
+#nav-toggle.active span:before, #nav-toggle.active span:after {
+ top: 0;
+}
+#nav-toggle.active span:before {
+ transform: rotate(45deg);
+}
+#nav-toggle.active span:after {
+ transform: rotate(-45deg);
+}
+
diff --git a/themes/pypy/assets/js/styles.js b/themes/pypy/assets/js/styles.js
--- a/themes/pypy/assets/js/styles.js
+++ b/themes/pypy/assets/js/styles.js
@@ -1,12 +1,25 @@
'use strict';
-// Navbar
-/* Toggle between adding and removing the "responsive" class to topnav when
the user clicks on the icon */
-function make_responsive() {
- var x = document.getElementById("myTopNav");
- if (x.className === "topnav") {
- x.className += " responsive";
- } else {
- x.className = "topnav";
- }
-}
+(function($) { // Begin jQuery
+ $(function() { // DOM ready
+ // If a link has a dropdown, add sub menu toggle.
+ $('nav ul li a:not(:only-child)').click(function(eee) {
+ $(this).siblings('.nav-dropdown').toggle();
+ // Close one dropdown when selecting another
+ $('.nav-dropdown').not($(this).siblings()).hide();
+ eee.stopPropagation();
+ });
+ // Clicking away from dropdown will remove the dropdown class
+ $('html').click(function() {
+ $('.nav-dropdown').hide();
+ });
+ // Toggle open and close nav styles on click
+ $('#nav-toggle').click(function() {
+ $('nav ul').slideToggle();
+ });
+ // Hamburger to X toggle
+ $('#nav-toggle').on('click', function() {
+ this.classList.toggle('active');
+ });
+ }); // end DOM ready
+})(jQuery); // end jQuery
diff --git a/themes/pypy/templates/base_header.tmpl
b/themes/pypy/templates/base_header.tmpl
--- a/themes/pypy/templates/base_header.tmpl
+++ b/themes/pypy/templates/base_header.tmpl
@@ -29,43 +29,39 @@
{% endmacro %}
{% macro html_navigation_links() %}
- <div class="myTopNav">
- <div>
- <a href="index.html" height=40px;>
- <image src="images/pypy-logo.svg" width=75px; alt=PyPy/>
- </a>
- </div>
- <div class="topnav">
- {{ html_navigation_links_entries(navigation_links) }}
- {{ html_navigation_links_entries(navigation_alt_links) }}
- {{ template_hooks['menu']() }}
- {{ template_hooks['menu_alt']() }}
- </div>
- <a href="javascript:void(0);" class="icon"
onclick="make_responsive()">☰</a>
- </div>
+ <!-- Adapted from
https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
+ <section class="navigation">
+ <div class="nav-container">
+ <div class="brand">
+ <a href="index.html">
+ <image id="toplogo" src="images/pypy-logo.svg" width=75px;
alt=PyPy/>
+ </a>
+ </div>
+ <nav>
+ <div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ <ul class="nav-list">
+ {{ html_navigation_links_entries(navigation_links) }}
+ </ul>
+ </nav>
+ </div>
+ </section>
{% endmacro %}
{% macro html_navigation_links_entries(navigation_links_source) %}
{% for url, text in navigation_links_source[lang] %}
{% if isinstance(url, tuple) %}
- <div class="dropdown"> <button class="dropbtn">{{ text }}
- <i class="fa fa-caret-down"></i>
- </button>
- <div class="dropdown-content">
- {% for suburl, text in url %}
- {% if rel_link(permalink, suburl) == "#" %}
- <a class="active" href="{{ permalink }}">{{ text }}{{
messages("(active)", lang) }}</a>
- {% else %}
- <a href="{{ suburl }}">{{ text }}</a>
- {% endif %}
- {% endfor %}
- </div></div>
+ <li>
+ <a href="#!">{{ text}}</a>
+ <ul class="nav-dropdown">
+ {% for url2, text2 in url %}
+ <li> <a href="{{ url2 }}">{{ text2}}</a> </li>
+ {% endfor %}
+ </ul>
+ </li>
{% else %}
- {% if rel_link(permalink, url) == "#" %}
- <a class="active" href="{{ permalink }}">{{ text }}<span
class="sr-only"> {{ messages("(active)", lang) }}</span></a>
- {% else %}
- <a href="{{ url }}">{{ text }}</a>
- {% endif %}
+ <li> <a href="{{ url }}">{{ text}}</a> </li>
{% endif %}
{% endfor %}
{% endmacro %}
diff --git a/themes/pypy/templates/base_helper.tmpl
b/themes/pypy/templates/base_helper.tmpl
--- a/themes/pypy/templates/base_helper.tmpl
+++ b/themes/pypy/templates/base_helper.tmpl
@@ -71,6 +71,7 @@
<script src="/assets/js/all-nocdn.js"></script>
{% endif %}
{% else %}
+ <script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js";
crossorigin="anonymous"></script>
<script src="/assets/js/styles.js"></script>
{% endif %}
{% if date_fanciness != 0 %}
_______________________________________________
pypy-commit mailing list
[email protected]
https://mail.python.org/mailman/listinfo/pypy-commit
