Skip to content

Commit 6955542

Browse files
chillenbergerchillenberger
authored
Dan leftnav width (#1079)
1 parent e92d94e commit 6955542

File tree

5 files changed

+88
-92
lines changed

5 files changed

+88
-92
lines changed

‎pgml-dashboard/src/components/navigation/left_nav/web_app/template.html

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1+
12
<% use crate::components::{LeftNavMenu, Dropdown}; %>
2-
<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse navigation-left-nav-web-app" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
3-
<div class="d-flex flex-column justify-content-between h-100 w-100">
4-
<div class="d-flex flex-column">
5-
<button class="btn-left-nav-toggle mb-5" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
6-
<span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference">
7-
Menu
8-
</span>
9-
<span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
10-
keyboard_double_arrow_left
11-
</span>
12-
</button>
3+
<div class="leftnav-container py-3" data-controller="navigation-left-nav-web-app">
4+
<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
5+
<div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
6+
<div class="d-flex flex-column">
7+
<button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
8+
<span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
9+
keyboard_double_arrow_left
10+
</span>
11+
<span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference"></span>
12+
</button>
1313

14-
<div class="mb-4">
15-
<%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
14+
<div class="mb-4">
15+
<%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
16+
</div>
17+
<%+ LeftNavMenu { nav: upper_nav } %>
1618
</div>
17-
<%+ LeftNavMenu { nav: upper_nav } %>
19+
<%+ LeftNavMenu { nav: lower_nav} %>
1820
</div>
19-
<%+ LeftNavMenu { nav: lower_nav} %>
20-
</div>
21-
</nav>
21+
</nav>
22+
</div>

‎pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,71 @@
2525
background-color: #{$gray-900}
2626
}
2727
}
28+
29+
div[data-controller="navigation-left-nav-web-app"] {
30+
.menu-container {
31+
transition: width $animation-timer;
32+
&.expanding, &.expanded {
33+
width: 220px;
34+
}
35+
&.collapsing, &.collapsed {
36+
width: 48px;
37+
}
38+
}
39+
40+
.btn-left-nav-toggle {
41+
--bs-btn-padding-x: 0px;
42+
display: flex;
43+
justify-content: start;
44+
font-weight: $font-weight-bold;
45+
46+
color: #{$gray-100};
47+
48+
border-radius: 0px;
49+
--bs-btn-border-color: transparent;
50+
border: 0px;
51+
52+
--bs-btn-active-color: #{$gray-100};
53+
--bs-btn-hover-color: #{$gray-100};
54+
}
55+
56+
.left-nav-toggle-icon {
57+
margin-left: 12px;
58+
margin-right: 0px;
59+
60+
transition: all $animation-timer;
61+
&.collapsing {
62+
transform: rotate(-180deg);
63+
}
64+
65+
&.collapsed {
66+
transform: rotate(-180deg);
67+
}
68+
69+
&.collapsing {
70+
height: auto !important;
71+
}
72+
}
73+
}
74+
75+
76+
@keyframes collapse-margin {
77+
from {
78+
margin-left: calc($left-nav-w - 9rem);
79+
margin-right: 0px;
80+
}
81+
to {
82+
margin-left: calc($left-nav-w-collapsed/2 - 32px);
83+
margin-right: calc($left-nav-w-collapsed/2 - 32px);
84+
}
85+
}
86+
@keyframes expand-margin {
87+
from {
88+
margin-left: calc($left-nav-w-collapsed/2 - 32px);
89+
margin-right: calc($left-nav-w-collapsed/2 - 32px);
90+
}
91+
to {
92+
margin-left: calc($left-nav-w - 9rem);
93+
margin-right: 0px;
94+
}
95+
}

‎pgml-dashboard/static/css/scss/abstracts/variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,4 +247,4 @@ $breadcrumb-height: 57px;
247247

248248
// animations
249249
$animation-timer: 0.35s;
250-
$transition-collapse-width: width 0.35s ease;
250+
$transition-collapse-width: width .35s ease;

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

Lines changed: 0 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -251,74 +251,3 @@
251251
border-right: none;
252252
font-weight: $font-weight-medium;
253253
}
254-
255-
.btn-left-nav-toggle {
256-
@extend .btn;
257-
--bs-btn-padding-x: 0px;
258-
display: flex;
259-
font-weight: $font-weight-bold;
260-
261-
color: #{$gray-100};
262-
263-
border-radius: 0px;
264-
--bs-btn-border-color: transparent;
265-
border-top: 0px;
266-
border-left: 0px;
267-
border-right: 0px;
268-
border-bottom: 1px solid #{$gray-100} !important;
269-
270-
--bs-btn-active-color: #{$gray-100};
271-
--bs-btn-hover-color: #{$gray-100};
272-
}
273-
274-
.left-nav-toggle-icon {
275-
margin-left: calc($left-nav-w - 9rem);
276-
margin-right: 0px;
277-
278-
&.expanding {
279-
animation-name: expand-margin;
280-
animation-duration: $animation-timer;
281-
}
282-
283-
&.collapsing {
284-
animation-name: collapse-margin;
285-
animation-duration: $animation-timer;
286-
transform: rotate(-180deg);
287-
}
288-
289-
&.expanded {
290-
margin-left: calc($left-nav-w - 9rem);
291-
margin-right: 0px;
292-
}
293-
294-
&.collapsed {
295-
margin-left: calc($left-nav-w-collapsed/2 - 32px);
296-
margin-right: calc($left-nav-w-collapsed/2 - 32px);
297-
transform: rotate(-180deg);
298-
}
299-
300-
&.collapsing {
301-
height: auto !important;
302-
}
303-
}
304-
305-
@keyframes collapse-margin {
306-
from {
307-
margin-left: calc($left-nav-w - 9rem);
308-
margin-right: 0px;
309-
}
310-
to {
311-
margin-left: calc($left-nav-w-collapsed/2 - 32px);
312-
margin-right: calc($left-nav-w-collapsed/2 - 32px);
313-
}
314-
}
315-
@keyframes expand-margin {
316-
from {
317-
margin-left: calc($left-nav-w-collapsed/2 - 32px);
318-
margin-right: calc($left-nav-w-collapsed/2 - 32px);
319-
}
320-
to {
321-
margin-left: calc($left-nav-w - 9rem);
322-
margin-right: 0px;
323-
}
324-
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@
2727
<%+ WebAppNavbar::new(left_nav_links, account_management_nav) %>
2828

2929
<div class="d-flex">
30-
<div class="leftnav-container py-3" >
31-
<%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
32-
</div>
30+
<%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
3331

3432
<div class="clear-from-under-navbar flex-grow-1 min-vw-0">
3533
<div class="px-5 py-3" style="position: absolute">

0 commit comments

Comments
 (0)