Merge pull request dipy#4 from skoudoro/update-menu

Menu update 5ce7f48

.buildinfo

@@ -1,4 +1,4 @@
 # Sphinx build info version 1
 # This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done.
-config: 4f4926e84c5e9b7b19185b2601b9c80c
+config: 7f0696966261c11bdd0c3656aa633dcc
 tags: 645f666f9bcd5a90fca523b33c5a78b7

_static/macros.html

@@ -0,0 +1,7 @@
+{% macro head_assets() %}
+<link rel="stylesheet" href="{{ pathto('_static/styles/grg-sphinx-theme.css', 1) }}"/>
+{% endmacro %}
+
+{% macro body_scripts() %}
+<script type="module" src="{{ pathto('_static/scripts/grg-sphinx-theme.js', 1) }}"></script>
+{% endmacro %}

_static/scripts/components/toctree.js

@@ -0,0 +1,64 @@
+/**
+ * This method introduces a click function to click the
+ * underlying "a" tag for "li" element with toctree-l2 of the design.
+ */
+export const toctreeClick = () => {
+  const toctreeSubtopics = document.querySelectorAll(
+    ".toctree-wrapper li.toctree-l2"
+  );
+
+  toctreeSubtopics.forEach((toctreel2) => {
+    const link = toctreel2.querySelector("a");
+    toctreel2.addEventListener("click", () => {
+      link.click();
+    });
+  });
+};
+
+/**
+ * This method introduces calculations for grid for toc tree
+ * not letting the grid to overflow the space provided by
+ * sphinx on different platforms
+ */
+export const gridCalculation = () => {
+  const toctrees = document.querySelectorAll(".toctree-wrapper li.toctree-l1");
+
+  toctrees.forEach((toctree) => {
+    const containerWidth = toctree.clientWidth;
+    const subtrees = toctree.querySelectorAll("li.toctree-l2 a");
+    const subtreeContainer = toctree.querySelector("ul");
+
+    let width = 0;
+    let noOfElements = 0;
+    const MAX_ELEMENTS = 3;
+    const UNIT_SPACE = 16;
+
+    // handling the empty case
+    if (subtrees.length === 0) {
+      return;
+    }
+
+    // handling the single element case
+    if (subtrees.length === 1) {
+      subtreeContainer.classList.add("grid-3");
+      return;
+    }
+
+    for (let i = 0; i < Math.min(MAX_ELEMENTS, subtrees.length); i++) {
+      // Getting the size of text in the list
+      // considering the padding applied on right and left side
+      width += subtrees[i].offsetWidth + 2 * UNIT_SPACE;
+
+      if (width > containerWidth) {
+        break;
+      } else {
+        noOfElements++;
+      }
+
+      // considering the gap applied
+      width += UNIT_SPACE;
+    }
+
+    subtreeContainer.classList.add(`grid-${noOfElements}`);
+  });
+};

_static/scripts/grg-sphinx-theme.js

@@ -0,0 +1,6 @@
+import { toctreeClick, gridCalculation } from "./components/toctree.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  toctreeClick();
+  gridCalculation();
+});

_static/styles/animations.css

@@ -0,0 +1,21 @@
+@keyframes slideUp {
+  from {
+    transform: translateY(5%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-5%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}

_static/styles/components/navbar.css

@@ -0,0 +1,50 @@
+/* Customizing the navbar dropdown */
+.bd-header .navbar-nav .dropdown .dropdown-menu {
+  box-shadow: var(--pst-shadow);
+  border: 0;
+  animation: 0.1s slideDown;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+}
+
+/* Overriding the CSS for section title in drop down */
+ol li>p:first-child, ul li>p:first-child {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Making sure font behavior is same across the pages for navbar */
+.nav-link,
+.bd-header .navbar-nav li a.nav-link,
+.bd-header .navbar-nav .dropdown button,
+.bd-sidebar-primary,
+.bd-sidebar-primary .nav-link {
+  color: var(--pst-color-text-base);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.nav-section-title.nav-link,
+.bd-sidebar-primary .nav-section-title.nav-link {
+  color: var(--pst-color-text-muted);
+  font-weight: bold;
+}
+
+.nav-section-title:not(:first-of-type) {
+  border-top: 1px solid var(--pst-color-border);
+}
+
+.nav-link.nav-external:after {
+  transform: rotate(-45deg);
+  color: var(--pst-color-shadow);
+}
+
+.dropdown-toggle:after {
+  position: absolute;
+  border: 0;
+  content: "\f078";
+  font: var(--fa-font-solid);
+  font-size: .75em;
+  margin-top: 0.4rem;
+  margin-left: 0.5em;
+}

_static/styles/components/toctree.css

@@ -0,0 +1,48 @@
+.toctree-wrapper li.toctree-l1 {
+  margin-bottom: 2em;
+}
+
+.toctree-wrapper li.toctree-l1 a {
+  font-size: 1.8em;
+  font-weight: 600;
+  color: var(--pst-color-text-base);
+}
+
+.toctree-wrapper li.toctree-l2 {
+  border: 1px solid var(--pst-color-border);
+  border-radius: 4px;
+  padding: 1em;
+}
+
+.toctree-wrapper li.toctree-l2 a {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--pst-color-primary);
+  text-decoration: none;
+}
+
+.toctree-wrapper li.toctree-l2:hover {
+  border: 1px solid var(--pst-color-secondary);
+  cursor: pointer;
+}
+
+.toctree-wrapper li.toctree-l2:hover a {
+  color: var(--pst-color-secondary);
+}
+
+.toctree-wrapper li.toctree-l1 ul {
+  display: grid;
+  gap: 1em;
+  padding-inline-start: 0;
+  padding: 1em 0;
+}
+
+.toctree-wrapper li.toctree-l2 ul {
+  display: none;
+}
+
+@media only screen and (max-width: 767px) {
+  .toctree-wrapper li.toctree-l1 ul {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

_static/styles/grg-sphinx-theme.css

@@ -0,0 +1,5 @@
+@import "./animations.css";
+@import "./variables.css";
+@import "./components/toctree.css";
+@import "./components/navbar.css";
+@import url("https://cdn.jsdelivr.net/gh/GRG-projects/CDN@latest/util.min.css");

_static/styles/variables.css

@@ -0,0 +1,4 @@
+html {
+  --pst-icon-external-link: "\f178";
+  --pst-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
+}