Skip to content

Commit ffe4bfe

Browse files
chillenbergerchillenberger
authored
fix breadcrumb, nav, bug (#1209)
1 parent 76f1935 commit ffe4bfe

File tree

14 files changed

+126
-90
lines changed

14 files changed

+126
-90
lines changed

‎pgml-dashboard/src/components/breadcrumbs/breadcrumbs.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
.breadcrumb {
3+
.breadcrumb-item {
4+
display: flex;
5+
align-items: center;
6+
text-align: center;
7+
border: none;
8+
9+
&:not(.active) a {
10+
@extend .btn-tertiary-web-app;
11+
padding: 0px;
12+
}
13+
14+
&.active {
15+
a {
16+
color: #{$gray-100};
17+
border-bottom: none;
18+
19+
&:hover {
20+
@include semibold_by_shadow(#{$gray-100});
21+
}
22+
23+
&:active {
24+
@include bold_by_shadow(#{$gray-100});
25+
}
26+
27+
}
28+
}
29+
}
30+
31+
.vr {
32+
opacity: 1;
33+
color: #{$gray-600};
34+
width: 2px;
35+
}
36+
}

‎pgml-dashboard/src/components/breadcrumbs/template.html

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
<nav>
22
<nav aria-label="breadcrumb z-1">
33
<ol class="breadcrumb">
4+
<!-- not quite ready for this yet -->
5+
<!-- <li class="breadcrumb-item body-regular-text <% if links.is_empty() {%>active<% } %>">
6+
<a class="d-flex" href="/deployments">
7+
<span class="material-symbols-outlined">
8+
roofing
9+
</span>
10+
</a>
11+
</li> -->
412
<% for link in links {
513
let active = if link.active {
614
"active"
@@ -15,14 +23,14 @@
1523
};
1624

1725
%>
18-
<li class="breadcrumb-item <%= active %> fs-6" <%- area %>>
19-
<a class="" href="<%= link.href %>">
20-
<%= link.name %>
21-
</a>
22-
<% if active.is_empty() { %>
23-
<div class="vr my-1 ms-2 opacity-100" style="width: 2px"></div>
24-
<% } %>
25-
</li>
26+
<li class="breadcrumb-item body-regular-text <%= active %>" <%- area %>>
27+
<a href="<%= link.href %>">
28+
<%= link.name %>
29+
</a>
30+
<% if active.is_empty() { %>
31+
<div class="vr my-1 ms-2"></div>
32+
<% } %>
33+
</li>
2634
<% } %>
2735
</ol>
2836
</nav>

‎pgml-dashboard/src/components/navigation/navbar/marketing/template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757

5858
<div class="collapse navbar-collapse drawer-submenu-container navbarSupportedContent" id="navbarSupportedContent">
5959
<!-- Main Menu -->
60-
<div class="nav-item w-100 d-xl-flex flex-column flex-xl-row align-items-xl-center collapse collapse-horizontal show drawer-submenu <% for item in &mobile_nav_items {%> <%- item.collapse %><% } %>">
60+
<div class="nav-item w-100 d-xl-flex flex-column flex-xl-row align-items-xl-center collapse collapse-horizontal drawer-submenu <% for item in &mobile_nav_items {%> <%- item.collapse %><% } %> show">
6161
<ul class="navbar-nav flex-grow-1 gap-4 me-auto my-4 my-xl-0">
6262

6363
<% if !standalone_dashboard { %>

‎pgml-dashboard/static/css/bootstrap-theme.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@
8080
// Components
8181
@import 'scss/components/icon';
8282
@import 'scss/components/admonitions';
83-
@import 'scss/components/breadcrumb';
8483
@import 'scss/components/navs';
8584
@import 'scss/components/tables';
8685
@import 'scss/components/badges';

‎pgml-dashboard/static/css/modules.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// There is no need to edit it manually.
33

44
@import "../../src/components/accordian/accordian.scss";
5+
@import "../../src/components/breadcrumbs/breadcrumbs.scss";
56
@import "../../src/components/chatbot/chatbot.scss";
67
@import "../../src/components/dropdown/dropdown.scss";
78
@import "../../src/components/github_icon/github_icon.scss";

‎pgml-dashboard/static/css/scss/base/_typography.scss

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ h6, .h6 {
4848
}
4949
}
5050

51-
.eyebrow {
51+
.eyebrow-text {
5252
font-weight: $font-weight-bold; font-size: var(--eyebrow-font-size); line-height: var(--eyebrow-line-height);
5353
@include media-breakpoint-down(md) {
5454
font-size: 16px; line-height: 22px;
@@ -60,14 +60,35 @@ h6, .h6 {
6060
font-size: 18px;
6161
line-height: 22px;
6262
}
63-
.body-text {
64-
font-size: 16px;
65-
line-height: 20px;
63+
64+
.body-large-text {
65+
font-size: var(--body-large-font-size); line-height: var(--body-large-line-height);
66+
@include media-breakpoint-down(md) {
67+
font-size: 18px; line-height: 24px;
68+
}
69+
}
70+
71+
.body-regular-text {
72+
font-size: var(--body-regular-font-size); line-height: var(--body-regular-line-height);
73+
@include media-breakpoint-down(md) {
74+
font-size: 16px; line-height: 20px;
75+
}
76+
}
77+
78+
.body-small-text {
79+
font-size: var(--body-small-font-size); line-height: var(--body-small-line-height);
80+
@include media-breakpoint-down(md) {
81+
font-size: 14px; line-height: 18px;
82+
}
6683
}
84+
6785
.legal-text {
6886
font-family: Inter;
69-
font-size: 12px;
70-
line-height: 16px;
87+
font-size: var(--legal-font-size);
88+
line-height: var(--legal-line-height);
89+
@include media-breakpoint-down(md) {
90+
font-size: 12px; line-height: 16px;
91+
}
7192
}
7293

7394
.text-error {
@@ -108,23 +129,3 @@ h6, .h6 {
108129
.text-gradient-party, .party-time {
109130
@include text-gradient($gradient-text);
110131
}
111-
112-
.marketing-body-large {
113-
font-size: 20px;
114-
line-height: 26px;
115-
color: #{$gray-200};
116-
@include media-breakpoint-down(md) {
117-
font-size: 18px;
118-
line-height: 24px;
119-
}
120-
}
121-
122-
.marketing-body {
123-
font-size: 18px;
124-
line-height: 22px;
125-
color: #{$gray-200};
126-
@include media-breakpoint-down(md) {
127-
font-size: 16px;
128-
line-height: 20px;
129-
}
130-
}

‎pgml-dashboard/static/css/scss/components/_breadcrumb.scss

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

‎pgml-dashboard/static/css/scss/components/_buttons.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,6 @@
177177
width: fit-content;
178178
padding: 0px;
179179

180-
span {
181-
font-size: 2rem;
182-
}
183-
184180
&:hover {
185181
color: #{$slate-tint-400};
186182
border-bottom-color: #{$slate-tint-400};

‎pgml-dashboard/static/css/scss/themes/docs.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
--h5-font-size: 24px;
88
--h6-font-size: 20px;
99
--eyebrow-font-size: 18px;
10+
--legal-font-size: 12px;
11+
--body-large-font-size: 20px;
12+
--body-regulare-font-size: 18px;
13+
--body-small-font-size: 16px;
1014

1115
--h1-big-line-height: 84px;
1216
--h1-line-height: 72px;
@@ -16,4 +20,8 @@
1620
--h5-line-height: 30px;
1721
--h6-line-height: 24px;
1822
--eyebrow-line-height: 24px;
23+
--legal-line-height: 16px;
24+
--body-large-line-height: 26px;
25+
--body-regular-line-height: 22px;
26+
--body-small-line-height: 20px;
1927
}

‎pgml-dashboard/static/css/scss/themes/marketing.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
--h5-font-size: 28px;
99
--h6-font-size: 24px;
1010
--eyebrow-font-size: 18px;
11+
--legal-font-size: 10px;
12+
--body-large-font-size: 20px;
13+
--body-regulare-font-size: 18px;
14+
--body-small-font-size: 16px;
1115

1216
--h1-big-line-height: 84px;
1317
--h1-line-height: 72px;
@@ -17,4 +21,8 @@
1721
--h5-line-height: 34px;
1822
--h6-line-height: 30px;
1923
--eyebrow-line-height: 24px;
24+
--legal-line-height: 14px;
25+
--body-large-line-height: 26px;
26+
--body-regular-line-height: 22px;
27+
--body-small-line-height: 20px;
2028
}

‎pgml-dashboard/static/css/scss/themes/product.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
--h5-font-size: 24px;
88
--h6-font-size: 20px;
99
--eyebrow-font-size: 14px;
10+
--legal-font-size: 12px;
11+
--body-large-font-size: 18px;
12+
--body-regular-font-size: 16px;
13+
--body-small-font-size: 14px;
1014

1115
--h1-big-line-height: 84px;
1216
--h1-line-height: 72px;
@@ -16,4 +20,8 @@
1620
--h5-line-height: 30px;
1721
--h6-line-height: 24px;
1822
--eyebrow-line-height: normal;
23+
--legal-line-height: 16px;
24+
--body-large-line-height: 24px;
25+
--body-regular-line-height: 20px;
26+
--body-small-line-height: 18px;
1927
}

‎pgml-dashboard/static/js/topnav-web-app.js

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,25 @@ import {
33
} from '@hotwired/stimulus'
44

55
export default class extends Controller {
6-
76
connect() {
8-
let navbarMenues = document.querySelectorAll('.navbar-collapse');
9-
10-
document.addEventListener('show.bs.collapse', e => {
11-
this.closeOtherMenues(navbarMenues, e.target)
12-
})
7+
document.addEventListener('show.bs.collapse', this.closeOtherMenus)
8+
document.addEventListener('hidden.bs.collapse', this.closeSubmenus, false)
9+
}
1310

14-
document.addEventListener('hidden.bs.collapse', e => {
15-
this.closeSubmenus(e.target.querySelectorAll('.drawer-submenu'))
11+
closeSubmenus(e) {
12+
let submenus = e.target.querySelectorAll('.drawer-submenu')
13+
submenus.forEach(submenu => {
14+
const bsInstance = bootstrap.Collapse.getInstance(submenu)
15+
if ( bsInstance ) {
16+
bsInstance.hide()
17+
}
1618
})
1719
}
1820

19-
closeOtherMenues(menus, current) {
21+
closeOtherMenus(e) {
22+
let menus = document.querySelectorAll('.navbar-collapse')
23+
let current = e.target
24+
2025
menus.forEach( menu => {
2126
const bsInstance = bootstrap.Collapse.getInstance(menu)
2227
if ( bsInstance && menu != current && menu != current.parentElement ) {
@@ -25,12 +30,8 @@ export default class extends Controller {
2530
})
2631
}
2732

28-
closeSubmenus(submenues) {
29-
submenues.forEach(submenu => {
30-
const bsInstance = bootstrap.Collapse.getInstance(submenu)
31-
if ( bsInstance ) {
32-
bsInstance.hide()
33-
}
34-
})
33+
disconnect() {
34+
document.removeEventListener('show.bs.collapse', this.closeOtherMenus)
35+
document.removeEventListener('hidden.bs.collapse', this.closeSubmenus)
3536
}
3637
}

‎pgml-dashboard/templates/layout/base.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
use crate::components::navigation::navbar::marketing::Marketing as MarketingNavbar;
33
%>
44
<!DOCTYPE html>
5-
<html lang="en-US" data-bs-theme="dark" data-theme="docs">
5+
<html lang="en-US">
66

77
<% include!("head.html"); %>
88

9-
<body>
9+
<body data-bs-theme="dark" data-theme="docs">
1010
<main>
1111
<div class="container-fluid bg-primary pb-4 min-vh-100">
1212
<div class="ellipse-container position-absolute" style="margin: -2rem; height: 100vh; width: 100vw;">

‎pgml-dashboard/templates/layout/web_app_base.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515
%>
1616

1717
<!DOCTYPE html>
18-
<html lang="en-US" data-bs-theme="dark" data-theme="product">
18+
<html lang="en-US">
1919
<%- head %>
20-
<body>
20+
<body data-bs-theme="dark" data-theme="product">
2121
<% for component in body_components { %>
2222
<%+ component %>
2323
<% } %>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy