Skip to content

Commit 33776c9

Browse files
CannonLockCannonLock
authored
Merge pull request #903 from CHTC/xalim-sidebar
Update sidebar to match main navigation pages
2 parents ee7fec2 + 2eead7d commit 33776c9

File tree

5 files changed

+82
-131
lines changed

5 files changed

+82
-131
lines changed

‎_includes/components/sidebar-guide-links.liquid‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% if link.url %}
2+
<div class="document-link-wrapper bg-light">
3+
<a class="{% if active == link.url %}fw-bolder{% endif %}" href="{{ link.url | relative_url }}#main">{{ link.text }}</a>
4+
</div>
5+
{% elsif link.links %}
6+
<div class="document-link-wrapper" style="background-color: #d3d3d3;">
7+
<span style="font-size: .8rem;">
8+
<i class="bi bi-folder me-2"></i>
9+
{{ link.text }}
10+
</span>
11+
</div>
12+
<div class="list-group ps-4 border-start bg-light">
13+
{% for link in link.links %}
14+
{% assign pad = pad | plus: 1.5 %}
15+
{% include components/sidebar-guide-links.liquid %}
16+
{% endfor %}
17+
</div>
18+
{% endif %}

‎_includes/guide-sidebar.liquid‎

Lines changed: 54 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,59 @@
1-
{% assign page_tag = page.tag[0] %}
2-
{% assign data = site.uw-research-computing | where_exp: "x", "x.tag contains page.tag" | sort: "category" %}
3-
{% assign category_order = "Get started,Submit jobs,Manage data,Software,Workflows,Special use cases,Troubleshooting,External Resources" | split: "," %}
4-
5-
<div id="guide-sidebar">
6-
{% if page.guide.tag contains 'htc' and page.guide.tag contains 'hpc' %}
7-
{% assign general_pages = site.uw-research-computing | where_exp: "x", "x.guide.tag contains 'htc'" | where_exp: "x", "x.guide.tag contains 'hpc'" | sort: "category" %}
8-
9-
{% assign categories = "" | split: "" %}
10-
{% for page in general_pages %}
11-
{% unless categories contains page.guide.category %}
12-
{% assign categories = categories | push: page.guide.category %}
13-
{% endunless %}
14-
{% endfor %}
15-
16-
<h6 class="mt-5">General Guides</h6>
17-
<div class="accordion accordion-flush">
18-
{% for category in category_order %}
19-
{% if categories contains category %}
20-
{% assign pages_in_category = general_pages | where_exp: "x", "x.guide.category == category" | sort: "guide.order" %}
21-
22-
{% assign active = pages_in_category | where_exp: "x", "x.url == page.url" %}
23-
24-
<div class="accordion-item">
25-
<span class="accordion-header mt-0" id="{{ category | slugify }}">
26-
<button class="accordion-button {% unless active.size == 1 %}collapsed {% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ category | slugify }}-collapse" aria-expanded="false" aria-controls="{{ category | slugify }}">
27-
{{ category }}
28-
</button>
29-
</span>
30-
<div id="{{ category | slugify }}-collapse" class="accordion-collapse collapse {% if active.size == 1 %}show {% endif %}" aria-labelledby="{{ category | slugify }}" data-bs-parent="#guide-sidebar">
31-
{% for page in pages_in_category %}
32-
33-
<div class="document-link-wrapper bg-light">
34-
<a class="{% if active[0].url == page.url %}fw-bolder{% endif %}" href="{{ page.url | relative_url }}">{{ page.title }}</a>
35-
</div>
36-
{% endfor %}
37-
</div>
38-
</div>
39-
{% endif %}
40-
{% endfor %}
41-
</div>
1+
{% assign htc_menu = site.data.htc-guide-menu %}
2+
{% assign hpc_menu = site.data.hpc-guide-menu %}
3+
{% assign active = page.url %}
4+
5+
{% if page.guide.tag contains "htc" and page.guide.tag contains "hpc" %}
6+
{% assign show_guide = "HTC guides,HPC guides" | split: ',' %}
7+
{% assign collapse_guides = "accordion-header" %}
8+
{% elsif page.guide.tag contains "htc" %}
9+
{% assign show_guide = "HTC guides" %}
10+
{% elsif page.guide.tag contains "hpc" %}
11+
{% assign show_guide = "HPC guides" %}
12+
{% endif %}
13+
<div id="guide-sidebar">
14+
{% for item in show_guide %}
15+
{% if show_guide.first %}
16+
<h6 class="mt-5">{{ item }}</h6>
17+
{% else %}
18+
<h6 class="mt-5">{{ item }}</h6>
4219
{% endif %}
43-
{% if page.guide.tag contains 'htc' %}
44-
{% assign htc_pages = site.uw-research-computing | where_exp: "x", "x.guide.tag contains 'htc'" | sort: "category" %}
45-
46-
{% assign categories = "" | split: "" %}
47-
{% for page in htc_pages %}
48-
{% unless categories contains page.guide.category %}
49-
{% assign categories = categories | push: page.guide.category %}
50-
{% endunless %}
51-
{% endfor %}
52-
53-
<h6 class="mt-5">HTC Guides</h6>
54-
<div class="accordion accordion-flush">
55-
{% for category in category_order %}
56-
{% if categories contains category %}
57-
58-
{% assign pages_in_category = htc_pages | where_exp: "x", "x.guide.category == category" | sort: "guide.order" %}
59-
60-
{% assign active = pages_in_category | where_exp: "x", "x.url == page.url" %}
61-
{% if page.guide.tag contains 'htc' and page.guide.tag contains 'hpc' %}
62-
{% assign active = "" | split: "" %}
63-
{% endif %}
64-
65-
<div class="accordion-item">
66-
<span class="accordion-header mt-0" id="{{ category | slugify }}-htc">
67-
<button class="accordion-button {% unless active.size == 1 %}collapsed {% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ category | slugify }}-htc-collapse" aria-expanded="false" aria-controls="{{ category | slugify }}-htc">
68-
{{ category }}
69-
</button>
70-
</span>
71-
<div id="{{ category | slugify }}-htc-collapse" class="accordion-collapse collapse {% if active.size == 1 %}show {% endif %}" aria-labelledby="{{ category | slugify }}-htc" data-bs-parent="#guide-sidebar">
72-
{% for page in pages_in_category %}
73-
74-
<div class="document-link-wrapper bg-light">
75-
<a class="{% if active[0].url == page.url %}fw-bolder{% endif %}" href="{{ page.url | relative_url }}">{{ page.title }}</a>
76-
</div>
77-
{% endfor %}
78-
</div>
79-
</div>
80-
{% endif %}
81-
{% endfor %}
82-
</div>
20+
{% if item == "HTC guides" %}
21+
{% assign menu = htc_menu %}
22+
{% elsif item == "HPC guides" %}
23+
{% assign menu = hpc_menu %}
8324
{% endif %}
84-
{% if page.guide.tag contains 'hpc' %}
85-
{% assign hpc_pages = site.uw-research-computing | where_exp: "x", "x.guide.tag contains 'hpc'" | sort: "category" %}
86-
87-
{% assign categories = "" | split: "" %}
88-
{% for page in hpc_pages %}
89-
{% unless categories contains page.guide.category %}
90-
{% assign categories = categories | push: page.guide.category %}
91-
{% endunless %}
92-
{% endfor %}
93-
94-
<h6 class="mt-5">HPC Guides</h6>
95-
<div class="accordion accordion-flush">
96-
{% for category in category_order %}
97-
{% if categories contains category %}
98-
99-
{% assign pages_in_category = hpc_pages | where_exp: "x", "x.guide.category == category" | sort: "guide.order" %}
100-
101-
{% assign active = pages_in_category | where_exp: "x", "x.url == page.url" %}
102-
{% if page.guide.tag contains 'htc' and page.guide.tag contains 'hpc' %}
103-
{% assign active = "" | split: "" %}
104-
{% endif %}
105-
106-
<div class="accordion-item">
107-
<span class="accordion-header mt-0" id="{{ category | slugify }}-hpc">
108-
<button class="accordion-button {% unless active.size == 1 %}collapsed {% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ category | slugify }}-hpc-collapse" aria-expanded="false" aria-controls="{{ category | slugify }}-hpc">
109-
{{ category }}
110-
</button>
111-
</span>
112-
<div id="{{ category | slugify }}-hpc-collapse" class="accordion-collapse collapse {% if active.size == 1 %}show {% endif %}" aria-labelledby="{{ category | slugify }}-hpc" data-bs-parent="#guide-sidebar">
113-
{% for page in pages_in_category %}
114-
115-
<div class="document-link-wrapper bg-light">
116-
<a class="{% if active[0].url == page.url %}fw-bolder{% endif %}" href="{{ page.url | relative_url }}">{{ page.title }}</a>
117-
</div>
118-
{% endfor %}
119-
</div>
25+
<div class="accordion accordion-flush">
26+
{% for categories in menu %}
27+
{% assign category = categories.text %}
28+
<div class="accordion-item">
29+
{% assign id = category | append: item %}
30+
<span class="accordion-header mt-0" id="{{ id | slugify }}">
31+
<button class="accordion-button {% unless active.size == 1 %}collapsed {% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ id | slugify }}-collapse" aria-expanded="false" aria-controls="{{ id | slugify }}">
32+
{{ category }}
33+
</button>
34+
</span>
35+
<div id="{{ id | slugify }}-collapse" class="accordion-collapse collapse" aria-labelledby="{{ id | slugify }}" data-bs-parent="#guide-sidebar">
36+
{% for link in categories.links %}
37+
{% include components/sidebar-guide-links.liquid %}
38+
{% endfor %}
12039
</div>
121-
{% endif %}
122-
{% endfor %}
123-
</div>
124-
{% endif %}
125-
</div>
40+
</div>
41+
{% endfor %}
42+
</div>
43+
{% endfor %}
44+
</div>
45+
<script>
46+
// Set the height of the sidebar to fill the viewport minus the height of the main content area
47+
const updateSidebarHeight = () => {
48+
const navHeight = document.getElementById("navbar").clientHeight;
49+
console.log(navHeight, window.innerHeight - navHeight);
50+
document.getElementById("guide-sidebar").style.height = `${window.innerHeight - navHeight}px`;
51+
};
52+
53+
// Initial call to set the sidebar height
54+
updateSidebarHeight();
55+
// Add event listener to update the sidebar height on window resize
56+
window.addEventListener("resize", updateSidebarHeight);
57+
</script>
12658

12759

‎_layouts/default.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
{% include head.html js=page.js_extension css=page.css_extension head=head %}
66
</head>
77
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
8-
9-
{% include global_bar.html %}
10-
{% include header.html %}
11-
{% include navbar/main-navbar.html %}
12-
{% include navbar/uw-research-computing-navbar.html %}
8+
<div id="navbar">
9+
{% include global_bar.html %}
10+
{% include header.html %}
11+
{% include navbar/main-navbar.html %}
12+
{% include navbar/uw-research-computing-navbar.html %}
13+
</div>
1314
<main id="main" style="min-height: 60vh;">
1415
{{ content }}
1516
</main>

‎_layouts/main.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@
22
layout: default
33
---
44

5-
<main id="main" style="min-height: 60vh;">
6-
{{ content }}
7-
</main>
5+
{{ content }}

‎assets/css/style-v12.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,9 @@ html {
180180

181181
#guide-sidebar {
182182

183-
top: 1rem;
183+
height: 100vh;
184+
overflow-y: scroll;
185+
top: 0;
184186
position: sticky;
185187
line-height: 1rem;
186188

0 commit comments

Comments
 (0)