Skip to content

Commit 9796bbf

Browse files
jotheprojothepro
committed
improved page navigation buttons
next & previous buttons are now represented as table in markdown.
1 parent fa53db2 commit 9796bbf

File tree

6 files changed

+171
-122
lines changed

6 files changed

+171
-122
lines changed

‎README.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ This theme is an attempt to update the visuals of Doxygen without changing its o
2525
- 🧩 No changes to the HTML structure of Doxygen required
2626
- 📱 Improved mobile usability
2727
- 🌘 Dark mode support!
28-
- 🥇 Works best with **doxygen 1.9.1** - **1.9.4** and **1.9.6** - **1.9.7**
28+
- 🥇 Works best with **doxygen 1.9.1** - **1.9.4** and **1.9.6** - **1.9.8**
2929

3030
## Examples
3131

@@ -141,10 +141,10 @@ There is two layout options. Choose one of them and configure Doxygen accordingl
141141
142142
Tested with
143143
144-
- Chrome 110, Chrome 109 for Android, Chrome 110 for iOS
145-
- Safari 16, Safari for iOS 16
146-
- Firefox 110, Firefox 110 for Android, Firefox 109 for iOS
147-
- Edge 110
144+
- Chrome 119, Chrome 119 for Android, Chrome 119 for iOS
145+
- Safari 17, Safari for iOS 16
146+
- Firefox 118, Firefox 120 for Android, Firefox 119 for iOS
147+
- Edge 119
148148
149149
150150
The theme does not strive to be backwards compatible to (significantly) older browser versions.
@@ -160,7 +160,11 @@ Special thanks to all the contributors:
160160
<img src="https://contrib.rocks/image?repo=jothepro/doxygen-awesome-css" />
161161
</a>
162162
163-
<span class="next_section_button">
164163
165-
Read Next: [Extensions](docs/extensions.md)
166-
</span>
164+
<div class="section_buttons">
165+
166+
| Next |
167+
|---------------------------------:|
168+
| [Extensions](docs/extensions.md) |
169+
170+
</div>

‎docs/customization.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,9 @@ I am always curious to learn about how you made the theme look even better!
111111

112112

113113
<div class="section_buttons">
114-
<span class="previous_section_button">
115-
Read Previous: [Extensions](extensions.md)
116-
</span>
117-
<span class="next_section_button">
118-
Read Next: [Tips & Tricks](tricks.md)
119-
</span>
114+
115+
| Previous | Next |
116+
|:----------------------------|---------------------------:|
117+
| [Extensions](extensions.md) | [Tips & Tricks](tricks.md) |
118+
120119
</div>

‎docs/extensions.md‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -186,8 +186,7 @@ DoxygenAwesomeInteractiveToc.hideMobileMenu = false
186186

187187
## Tabs {#extension-tabs}
188188

189-
@note Experimental feature! Please report bugs [here](https://github.com/jothepro/doxygen-awesome-css/issues).
190-
189+
@warning Experimental feature! Please report bugs [here](https://github.com/jothepro/doxygen-awesome-css/issues).
191190

192191
This extension allows to arrange list content in tabs:
193192

@@ -230,11 +229,47 @@ Each item in the list must start with an element that has the class `tab-title`.
230229
</div>
231230
```
232231

232+
## Page Navigation
233+
234+
@warning Experimental feature! Please report bugs [here](https://github.com/jothepro/doxygen-awesome-css/issues).
235+
236+
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.
237+
238+
### Installation
239+
240+
The feature is shipped inside the default `doxygen-awesome.css`. No additional stylesheets or scripts need to be added.
241+
242+
### Usage
243+
244+
The following conditions must be met for the feature to work properly:
245+
- The navigation must be inside a Markdown table with 1-2 columns.
246+
- The alignment of the column defines the alignment of the arrow on the navigation button.
247+
- the table must be wrapped inside a `<div>` with the class `section_buttons`.
248+
249+
<div class="tabbed">
250+
251+
- <span class="tab-title">Code</span>
252+
```md
253+
<div class="section_buttons">
254+
255+
| Previous | Next |
256+
|:------------------|----------------------------------:|
257+
| [Home](README.md) | [Customization](customization.md) |
258+
259+
</div>
260+
```
261+
- <span class="tab-title">Result</span>
262+
<div class="section_buttons">
263+
| Previous | Next |
264+
|:------------------|----------------------------------:|
265+
| [Home](README.md) | [Customization](customization.md) |
266+
</div>
267+
268+
</div>
269+
233270
<div class="section_buttons">
234-
<span class="previous_section_button">
235-
Read Previous: [Home](README.md)
236-
</span>
237-
<span class="next_section_button">
238-
Read Next: [Customization](customization.md)
239-
</span>
271+
272+
| Previous | Next |
273+
|:------------------|----------------------------------:|
274+
| [Home](README.md) | [Customization](customization.md) |
240275
</div>

‎docs/tricks.md‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,10 @@ To make tables span the full width of the page, no matter how wide the content i
118118

119119
</div>
120120

121-
122121
<div class="section_buttons">
123-
<span class="previous_section_button">
124-
Read Previous: [Customization](customization.md)
125-
</span>
126-
<span class="next_section_button">
127-
Read Next: [Example](https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html)
128-
</span>
122+
123+
| Previous | Next |
124+
|:----------------------------------|---------------------------------------:|
125+
| [Customization](customization.md) | [Example](https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html) |
126+
129127
</div>

‎doxygen-awesome.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2561,3 +2561,109 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
25612561
box-sizing: border-box;
25622562
height: 3px;
25632563
}
2564+
2565+
2566+
/*
2567+
Navigation Buttons
2568+
*/
2569+
2570+
.section_buttons:not(:empty) {
2571+
margin-top: calc(var(--spacing-large) * 3);
2572+
}
2573+
2574+
.section_buttons table.markdownTable {
2575+
display: block;
2576+
width: 100%;
2577+
}
2578+
2579+
.section_buttons table.markdownTable tbody {
2580+
display: table !important;
2581+
width: 100%;
2582+
box-shadow: none;
2583+
border-spacing: 10px;
2584+
}
2585+
2586+
.section_buttons table.markdownTable td {
2587+
padding: 0;
2588+
}
2589+
2590+
.section_buttons table.markdownTable th {
2591+
display: none;
2592+
}
2593+
2594+
.section_buttons table.markdownTable tr.markdownTableHead {
2595+
border: none;
2596+
}
2597+
2598+
.section_buttons tr th, .section_buttons tr td {
2599+
background: none;
2600+
border: none;
2601+
padding: var(--spacing-large) 0 var(--spacing-small);
2602+
}
2603+
2604+
.section_buttons a {
2605+
display: inline-block;
2606+
border: 1px solid var(--separator-color);
2607+
border-radius: var(--border-radius-medium);
2608+
color: var(--page-secondary-foreground-color) !important;
2609+
text-decoration: none;
2610+
transition: color var(--animation-duration) ease-in-out, background-color var(--animation-duration) ease-in-out;
2611+
}
2612+
2613+
.section_buttons a:hover {
2614+
color: var(--page-foreground-color) !important;
2615+
background-color: var(--odd-color);
2616+
}
2617+
2618+
.section_buttons tr td.markdownTableBodyLeft a {
2619+
padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) calc(var(--spacing-large) / 2);
2620+
}
2621+
2622+
.section_buttons tr td.markdownTableBodyRight a {
2623+
padding: var(--spacing-medium) calc(var(--spacing-large) / 2) var(--spacing-medium) var(--spacing-large);
2624+
}
2625+
2626+
.section_buttons tr td.markdownTableBodyLeft a::before,
2627+
.section_buttons tr td.markdownTableBodyRight a::after {
2628+
color: var(--page-secondary-foreground-color) !important;
2629+
display: inline-block;
2630+
transition: color .08s ease-in-out, transform .09s ease-in-out;
2631+
}
2632+
2633+
.section_buttons tr td.markdownTableBodyLeft a::before {
2634+
content: '〈';
2635+
padding-right: var(--spacing-large);
2636+
}
2637+
2638+
2639+
.section_buttons tr td.markdownTableBodyRight a::after {
2640+
content: '〉';
2641+
padding-left: var(--spacing-large);
2642+
}
2643+
2644+
2645+
.section_buttons tr td.markdownTableBodyLeft a:hover::before {
2646+
color: var(--page-foreground-color) !important;
2647+
transform: translateX(-3px);
2648+
}
2649+
2650+
.section_buttons tr td.markdownTableBodyRight a:hover::after {
2651+
color: var(--page-foreground-color) !important;
2652+
transform: translateX(3px);
2653+
}
2654+
2655+
@media screen and (max-width: 450px) {
2656+
.section_buttons a {
2657+
width: 100%;
2658+
box-sizing: border-box;
2659+
}
2660+
2661+
.section_buttons tr td:nth-of-type(1).markdownTableBodyLeft a {
2662+
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
2663+
border-right: none;
2664+
}
2665+
2666+
.section_buttons tr td:nth-of-type(2).markdownTableBodyRight a {
2667+
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
2668+
}
2669+
}

‎doxygen-custom/custom.css‎

Lines changed: 0 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -25,99 +25,6 @@
2525
text-decoration: none;
2626
}
2727

28-
.section_buttons {
29-
display: flex;
30-
justify-content: space-between;
31-
}
32-
33-
.next_section_button,
34-
.previous_section_button {
35-
display: block;
36-
padding: calc(var(--spacing-large) * 2) 0 var(--spacing-small) 0;
37-
color: var(--page-background-color);
38-
user-select: none;
39-
}
40-
41-
.next_section_button::after,
42-
.previous_section_button::after {
43-
/* clearfix */
44-
content: "";
45-
clear: both;
46-
display: table;
47-
}
48-
49-
.next_section_button a,
50-
.previous_section_button a {
51-
overflow: hidden;
52-
float: right;
53-
border: 1px solid var(--separator-color);
54-
padding: var(--spacing-medium) calc(var(--spacing-large) / 2) var(--spacing-medium) var(--spacing-large);
55-
border-radius: var(--border-radius-medium);
56-
color: var(--page-secondary-foreground-color) !important;
57-
text-decoration: none;
58-
background-color: var(--page-background-color);
59-
transition: color .08s ease-in-out, background-color .1s ease-in-out;
60-
}
61-
62-
.previous_section_button a {
63-
float: left;
64-
padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) calc(var(--spacing-large) / 2);
65-
}
66-
67-
@media screen and (max-width: 500px) {
68-
.section_buttons .next_section_button, .section_buttons .next_section_button a,
69-
.section_buttons .previous_section_button, .section_buttons .previous_section_button a {
70-
width: 100%;
71-
box-sizing: border-box;
72-
white-space: nowrap;
73-
overflow: hidden;
74-
text-overflow: ellipsis;
75-
}
76-
77-
.section_buttons .next_section_button a {
78-
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
79-
text-align: right;
80-
}
81-
82-
.section_buttons .previous_section_button a {
83-
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
84-
border-right: none;
85-
}
86-
}
87-
88-
.next_section_button a:hover,
89-
.previous_section_button a:hover {
90-
color: var(--page-foreground-color) !important;
91-
background-color: var(--odd-color);
92-
}
93-
94-
.next_section_button a::after,
95-
.previous_section_button a::before {
96-
color: var(--page-secondary-foreground-color) !important;
97-
display: inline-block;
98-
transition: color .08s ease-in-out, transform .09s ease-in-out;
99-
}
100-
101-
.next_section_button a::after {
102-
content: '〉';
103-
padding-left: var(--spacing-large);
104-
}
105-
106-
.previous_section_button a::before {
107-
content: '〈';
108-
padding-right: var(--spacing-large);
109-
}
110-
111-
.next_section_button a:hover::after {
112-
color: var(--page-foreground-color) !important;
113-
transform: translateX(3px);
114-
}
115-
116-
.previous_section_button a:hover::before {
117-
color: var(--page-foreground-color) !important;
118-
transform: translateX(-3px);
119-
}
120-
12128
.alter-theme-button:hover {
12229
background: var(--primary-dark-color);
12330
}

0 commit comments

Comments
 (0)