improved page navigation buttons

next & previous buttons are now represented as table in markdown.
jothepro · Nov 29, 2023 · 9796bbf · 9796bbf
1 parent fa53db2
commit 9796bbf
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 122 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ This theme is an attempt to update the visuals of Doxygen without changing its o
 - 🧩 No changes to the HTML structure of Doxygen required
 - 📱 Improved mobile usability
 - 🌘 Dark mode support!
-- 🥇 Works best with **doxygen 1.9.1** - **1.9.4** and **1.9.6** - **1.9.7**
+- 🥇 Works best with **doxygen 1.9.1** - **1.9.4** and **1.9.6** - **1.9.8**
 
 ## Examples
 
@@ -141,10 +141,10 @@ There is two layout options. Choose one of them and configure Doxygen accordingl
 
 Tested with
 
-- Chrome 110, Chrome 109 for Android, Chrome 110 for iOS
-- Safari 16, Safari for iOS 16
-- Firefox 110, Firefox 110 for Android, Firefox 109 for iOS
-- Edge 110
+- Chrome 119, Chrome 119 for Android, Chrome 119 for iOS
+- Safari 17, Safari for iOS 16
+- Firefox 118, Firefox 120 for Android, Firefox 119 for iOS
+- Edge 119
 
 
 The theme does not strive to be backwards compatible to (significantly) older browser versions.
@@ -160,7 +160,11 @@ Special thanks to all the contributors:
     <img src="https://contrib.rocks/image?repo=jothepro/doxygen-awesome-css" />
 </a>
 
-<span class="next_section_button">
 
-Read Next: [Extensions](docs/extensions.md)
-</span>
+<div class="section_buttons">
+
+|                             Next |
+|---------------------------------:|
+| [Extensions](docs/extensions.md) |
+
+</div>
diff --git a/docs/customization.md b/docs/customization.md
@@ -111,10 +111,9 @@ I am always curious to learn about how you made the theme look even better!
 
 
 <div class="section_buttons">
-<span class="previous_section_button">
-Read Previous: [Extensions](extensions.md)
-</span>
-<span class="next_section_button">
-Read Next: [Tips & Tricks](tricks.md)
-</span>
+
+| Previous                    |                       Next |
+|:----------------------------|---------------------------:|
+| [Extensions](extensions.md) | [Tips & Tricks](tricks.md) |
+
 </div>
diff --git a/docs/extensions.md b/docs/extensions.md
@@ -186,8 +186,7 @@ DoxygenAwesomeInteractiveToc.hideMobileMenu = false
 
 ## Tabs {#extension-tabs}
 
-@note Experimental feature! Please report bugs [here](https://github.com/jothepro/doxygen-awesome-css/issues).
-
+@warning Experimental feature! Please report bugs [here](https://github.com/jothepro/doxygen-awesome-css/issues).
 
 This extension allows to arrange list content in tabs:
 
@@ -230,11 +229,47 @@ Each item in the list must start with an element that has the class `tab-title`.
 </div>
 ```
 
+## Page Navigation
+
+@warning Experimental feature! Please report bugs [here](https://github.com/jothepro/doxygen-awesome-css/issues).
+
+To allow the user to easily navigate from one document to another, "Next" and "Previous" buttons can be added at the end of a Markdown document.
+
+### Installation
+
+The feature is shipped inside the default `doxygen-awesome.css`. No additional stylesheets or scripts need to be added.
+
+### Usage
+
+The following conditions must be met for the feature to work properly:
+- The navigation must be inside a Markdown table with 1-2 columns.
+- The alignment of the column defines the alignment of the arrow on the navigation button.
+- the table must be wrapped inside a `<div>` with the class `section_buttons`.
+
+<div class="tabbed">
+
+- <span class="tab-title">Code</span>
+    ```md
+    <div class="section_buttons">
+
+    | Previous          |                              Next |
+    |:------------------|----------------------------------:|
+    | [Home](README.md) | [Customization](customization.md) |
+
+    </div>
+    ```
+- <span class="tab-title">Result</span>
+    <div class="section_buttons">
+    | Previous          |                              Next |
+    |:------------------|----------------------------------:|
+    | [Home](README.md) | [Customization](customization.md) |
+    </div>
+
+</div>
+
 <div class="section_buttons">
-<span class="previous_section_button">
-Read Previous: [Home](README.md)
-</span>
-<span class="next_section_button">
-Read Next: [Customization](customization.md)
-</span>
+
+| Previous          |                              Next |
+|:------------------|----------------------------------:|
+| [Home](README.md) | [Customization](customization.md) |
 </div>
diff --git a/docs/tricks.md b/docs/tricks.md
@@ -118,12 +118,10 @@ To make tables span the full width of the page, no matter how wide the content i
 
 </div>
 
-
 <div class="section_buttons">
-<span class="previous_section_button">
-Read Previous: [Customization](customization.md)
-</span>
-<span class="next_section_button">
-Read Next: [Example](https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html)
-</span>
+
+| Previous                          |                                   Next |
+|:----------------------------------|---------------------------------------:|
+| [Customization](customization.md) | [Example](https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html) |
+
 </div>
diff --git a/doxygen-awesome.css b/doxygen-awesome.css
@@ -2561,3 +2561,109 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
     box-sizing: border-box;
     height: 3px;
 }
+
+
+/*
+ Navigation Buttons
+*/
+
+.section_buttons:not(:empty) {
+    margin-top: calc(var(--spacing-large) * 3);
+}
+
+.section_buttons table.markdownTable {
+    display: block;
+    width: 100%;
+}
+
+.section_buttons table.markdownTable tbody {
+    display: table !important;
+    width: 100%;
+    box-shadow: none;
+    border-spacing: 10px;
+}
+
+.section_buttons table.markdownTable td {
+    padding: 0;
+}
+
+.section_buttons table.markdownTable th {
+    display: none;
+}
+
+.section_buttons table.markdownTable tr.markdownTableHead {
+    border: none;
+}
+
+.section_buttons tr th, .section_buttons tr td {
+    background: none;
+    border: none;
+    padding: var(--spacing-large) 0 var(--spacing-small);
+}
+
+.section_buttons a {
+    display: inline-block;
+    border: 1px solid var(--separator-color);
+    border-radius: var(--border-radius-medium);
+    color: var(--page-secondary-foreground-color) !important;
+    text-decoration: none;
+    transition: color var(--animation-duration) ease-in-out, background-color var(--animation-duration) ease-in-out;
+}
+
+.section_buttons a:hover {
+    color: var(--page-foreground-color) !important;
+    background-color: var(--odd-color);
+}
+
+.section_buttons tr td.markdownTableBodyLeft a {
+    padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) calc(var(--spacing-large) / 2);
+}
+
+.section_buttons tr td.markdownTableBodyRight a {
+    padding: var(--spacing-medium) calc(var(--spacing-large) / 2) var(--spacing-medium) var(--spacing-large);
+}
+
+.section_buttons tr td.markdownTableBodyLeft a::before,
+.section_buttons tr td.markdownTableBodyRight a::after {
+    color: var(--page-secondary-foreground-color) !important;
+    display: inline-block;
+    transition: color .08s ease-in-out, transform .09s ease-in-out;
+}
+
+.section_buttons tr td.markdownTableBodyLeft a::before {
+    content: '〈';
+    padding-right: var(--spacing-large);
+}
+
+
+.section_buttons tr td.markdownTableBodyRight a::after {
+    content: '〉';
+    padding-left: var(--spacing-large);
+}
+
+
+.section_buttons tr td.markdownTableBodyLeft a:hover::before {
+    color: var(--page-foreground-color) !important;
+    transform: translateX(-3px);
+}
+
+.section_buttons tr td.markdownTableBodyRight a:hover::after {
+    color: var(--page-foreground-color) !important;
+    transform: translateX(3px);
+}
+
+@media screen and (max-width: 450px) {
+    .section_buttons a {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .section_buttons tr td:nth-of-type(1).markdownTableBodyLeft a {
+        border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+        border-right: none;
+    }
+
+    .section_buttons tr td:nth-of-type(2).markdownTableBodyRight a {
+        border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+    }
+}
diff --git a/doxygen-custom/custom.css b/doxygen-custom/custom.css
@@ -25,99 +25,6 @@
     text-decoration: none;
 }
 
-.section_buttons {
-    display: flex;
-    justify-content: space-between;
-}
-
-.next_section_button, 
-.previous_section_button {
-    display: block;
-    padding: calc(var(--spacing-large) * 2) 0 var(--spacing-small) 0;
-    color: var(--page-background-color);
-    user-select: none;
-}
-
-.next_section_button::after,
-.previous_section_button::after {
-    /* clearfix */
-    content: "";
-    clear: both;
-    display: table;
-}
-
-.next_section_button a,
-.previous_section_button a {
-    overflow: hidden;
-    float: right;
-    border: 1px solid var(--separator-color);
-    padding: var(--spacing-medium) calc(var(--spacing-large) / 2) var(--spacing-medium) var(--spacing-large);
-    border-radius: var(--border-radius-medium);
-    color: var(--page-secondary-foreground-color) !important;
-    text-decoration: none;
-    background-color: var(--page-background-color);
-    transition: color .08s ease-in-out, background-color .1s ease-in-out;
-}
-
-.previous_section_button a {
-    float: left;
-    padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) calc(var(--spacing-large) / 2);
-}
-
-@media screen and (max-width: 500px) {
-    .section_buttons .next_section_button, .section_buttons .next_section_button a,
-    .section_buttons .previous_section_button, .section_buttons .previous_section_button a {
-        width: 100%;
-        box-sizing: border-box;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .section_buttons .next_section_button a {
-        border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
-        text-align: right;
-    }
-
-    .section_buttons .previous_section_button a {
-        border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
-        border-right: none;
-    }
-}
-
-.next_section_button a:hover,
-.previous_section_button a:hover {
-    color: var(--page-foreground-color) !important;
-    background-color: var(--odd-color);
-}
-
-.next_section_button a::after,
-.previous_section_button a::before {
-    color: var(--page-secondary-foreground-color) !important;
-    display: inline-block;
-    transition: color .08s ease-in-out, transform .09s ease-in-out;
-}
-
-.next_section_button a::after {
-    content: '〉';
-    padding-left: var(--spacing-large);
-}
-
-.previous_section_button a::before {
-    content: '〈';
-    padding-right: var(--spacing-large);
-}
-
-.next_section_button a:hover::after {
-    color: var(--page-foreground-color) !important;
-    transform: translateX(3px);
-}
-
-.previous_section_button a:hover::before {
-    color: var(--page-foreground-color) !important;
-    transform: translateX(-3px);
-}
-
 .alter-theme-button:hover {
     background: var(--primary-dark-color);
 }