Skip to content

Commit e435ceb

Browse files
indrarajwso2indrarajwso2
authored
Merge pull request #31 from madhuramendis/main
Update docs layout
2 parents 2f1b590 + 1322d7c commit e435ceb

File tree

7 files changed

+150
-167
lines changed

7 files changed

+150
-167
lines changed

‎_includes/nav-recursive.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,5 @@ <h2 class="accordion-header" id="heading-{{ collapse_id }}">
2828
<a href="{{ item.url }}" class="d-block ps-{{ next_level }} py-1 nav-link">{{ item.title }}</a>
2929
{% endif %}
3030
{% endfor %}
31+
32+

‎_layouts/docs.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@
1212
<link rel="stylesheet" href="{{ '/css/openchoreo.css' | relative_url }}">
1313
<link rel="stylesheet" href="{{ '/css/openchoreo-docs.css' | relative_url }}">
1414

15+
<script src="/js/prism.js"></script>
16+
<link href="/css/prism.css" rel="stylesheet" />
17+
1518

19+
20+
1621
</head>
1722
<body>
1823
{% include nav.html %}
@@ -111,6 +116,21 @@ <h6 class="text-muted">On this page</h6>
111116
});
112117

113118

119+
$(document).ready(function () {
120+
const currentPath = window.location.pathname;
121+
122+
// Highlight the current link
123+
const $activeLink = $('a.nav-link').filter(function () {
124+
return this.pathname === currentPath || this.pathname + '/' === currentPath;
125+
}).addClass('active');
126+
127+
// Expand parent accordion(s)
128+
$activeLink.closest('.accordion-collapse').addClass('show');
129+
$activeLink.closest('.accordion-item').find('.accordion-button')
130+
.removeClass('collapsed')
131+
.attr('aria-expanded', 'true');
132+
});
133+
114134
</script>
115135
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> -->
116136

‎css/openchoreo-docs.css‎

Lines changed: 103 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
.sidebar {
22
position: sticky;
3-
top: 0;
3+
top: 67px;
44
height: 100vh;
55
overflow-y: auto;
66
}
77
.toc {
88
position: sticky;
99
height: 100vh;
10-
top: 0;
10+
top: 60px;
11+
padding: 30px;
1112

1213
}
1314
.toc a {
1415
font-size: 0.875rem;
1516
display: block;
1617
margin-bottom: 0.5rem;
18+
color: #3a3a3a;
19+
20+
}
21+
#toc-list li {
22+
margin-left: 0 !important;
1723
}
1824

25+
.highlight {
26+
border-radius: 10px;
27+
margin-bottom: 30px;
28+
}
1929

2030
main.py-4 {
2131
padding: 60px !important;
@@ -28,24 +38,110 @@ button[aria-expanded="true"] .collapse-arrow {
2838
transform: rotate(180deg);
2939
}
3040

41+
.accordion-body {
42+
background-color: transparent !important;
43+
border: none !important;
44+
padding-top: 10px !important;
45+
}
46+
47+
.accordion-body a {
48+
margin-bottom: 5px;
49+
padding-left: 10px !important;
50+
border: none !important;
51+
background-color: transparent !important;
52+
}
53+
54+
.accordion-body a.active {
55+
color: #36a1ff !important;
56+
font-weight: 500;
57+
}
58+
59+
.accordion-button:not(.collapsed) {
60+
61+
box-shadow: none !important;
62+
}
63+
64+
.accordion-item {
65+
margin-bottom: 20px;
66+
}
67+
.accordion-item button {
68+
border: none !important;
69+
font-weight: 600;
70+
border-radius: 0 !important;
71+
}
72+
.accordion-item button:hover {
73+
color: #36a1ff !important;
74+
}
75+
.accordion-item button:focus {
76+
border: none !important;
77+
}
78+
79+
.accordion-button:focus {
80+
z-index: 3;
81+
outline: 0;
82+
box-shadow: none !important
83+
}
84+
85+
.accordion-button , .accordion , .accordion-body {
86+
background-color: #f8f9fa !important;
87+
}
88+
89+
.accordion-button::after {
90+
/* flex-shrink: 0; */
91+
width: var(--bs-accordion-btn-icon-width);
92+
height: var(--bs-accordion-btn-icon-width);
93+
margin-left: auto;
94+
content: "";
95+
background-image: var(--bs-accordion-btn-icon);
96+
background-repeat: no-repeat;
97+
background-size: var(--bs-accordion-btn-icon-width);
98+
transition: var(--bs-accordion-btn-icon-transition);
99+
}
100+
31101

32102

33-
body.cDarkMode .toc , body.cDarkMode .sidebar {
103+
body.cDarkMode main {
34104
background-color: #121212 !important;
35105
}
36106

107+
body.cDarkMode .toc , body.cDarkMode .sidebar {
108+
background-color: #000 !important;
109+
}
110+
37111
body.cDarkMode .border-start {
38112
border-left: 1px solid #262626 !important;
39113
}
40114

41-
#mainAccordion a {
42-
color: #B7B7B7;
115+
body.cDarkMode p , body.cDarkMode li {
116+
color: #B7B7B7;
43117
}
44118

45-
.accordion-button {
46-
background-color: transparent !important;
119+
body.cDarkMode .accordion-button ,body.cDarkMode .accordion , body.cDarkMode .accordion-body {
120+
background-color: #000 !important;
121+
}
122+
123+
body.cDarkMode .accordion-item button {
124+
color: #B7B7B7 !important;
125+
}
126+
127+
body.cDarkMode .accordion-button::after {
128+
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
47129
}
48130

131+
body.cDarkMode .accordion-button:not(.collapsed)::after {
132+
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
133+
}
134+
135+
136+
137+
/* #mainAccordion a {
138+
color: #B7B7B7;
139+
} */
140+
141+
142+
143+
144+
49145

50146
@media (max-width: 991.98px) {
51147
.sidebar { position: relative; height: auto; }

‎css/openchoreo.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,13 @@ color: #36A1FF !important;
2323
margin-left: 10px;
2424
}
2525

26+
27+
28+
2629
.cOcNav {
2730
padding-right: 20px;
31+
box-shadow: 1px 3px 4px 0 #adadad33;
32+
2833
}
2934
.cColourMode.cLightModeOn {
3035
background-image: url(../img/dark-mode.webp);

‎css/prism.css‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/indexxx.md‎

Lines changed: 0 additions & 160 deletions
This file was deleted.

0 commit comments

Comments
 (0)