Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6955542

Browse files
Dan leftnav width (#1079)
1 parente92d94e commit6955542

File tree

5 files changed

+88
-92
lines changed

5 files changed

+88
-92
lines changed
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-
<navclass="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-
<divclass="d-flex flex-column justify-content-between h-100 w-100">
4-
<divclass="d-flex flex-column">
5-
<buttonclass="btn-left-nav-toggle mb-5"type="button"data-bs-toggle="collapse"data-bs-target=".leftnav-collapse"aria-expanded="true">
6-
<spanclass="collapse collapse-horizontal leftnav-collapse show"data-extend-bs-collapse-target="stateReference">
7-
Menu
8-
</span>
9-
<spanclass="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
10-
keyboard_double_arrow_left
11-
</span>
12-
</button>
3+
<divclass="leftnav-container py-3"data-controller="navigation-left-nav-web-app">
4+
<navclass="leftnav nav-pills h-100"data-controller="extend-bs-collapse"data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
5+
<divclass="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
6+
<divclass="d-flex flex-column">
7+
<buttonclass="btn btn-left-nav-toggle mb-4"type="button"data-bs-toggle="collapse"data-bs-target=".leftnav-collapse"aria-expanded="true">
8+
<spanclass="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
9+
keyboard_double_arrow_left
10+
</span>
11+
<spanclass="collapse collapse-horizontal leftnav-collapse show"data-extend-bs-collapse-target="stateReference"></span>
12+
</button>
1313

14-
<divclass="mb-4">
15-
<%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
14+
<divclass="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+
@keyframescollapse-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+
@keyframesexpand-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:width0.35sease;
250+
$transition-collapse-width:width.35sease;

‎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:1pxsolid#{$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-
@keyframescollapse-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-
@keyframesexpand-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
<divclass="d-flex">
30-
<divclass="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
<divclass="clear-from-under-navbar flex-grow-1 min-vw-0">
3533
<divclass="px-5 py-3"style="position: absolute">

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp