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

Commitdbbd81a

Browse files
authored
Move menu from top to side (#1593)
* Move menu from top to sideSigned-off-by: Mihai Criveti <crivetimihai@gmail.com>* lintSigned-off-by: Mihai Criveti <crivetimihai@gmail.com>* lintSigned-off-by: Mihai Criveti <crivetimihai@gmail.com>---------Signed-off-by: Mihai Criveti <crivetimihai@gmail.com>
1 parent6841562 commitdbbd81a

File tree

4 files changed

+498
-566
lines changed

4 files changed

+498
-566
lines changed

‎mcpgateway/static/admin.css‎

Lines changed: 60 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,89 @@
1-
/* CSS for Header Bar */
2-
#sticky-header {
3-
transform:translateZ(0);
4-
will-change: height, margin-bottom, background-color, box-shadow, transform;
5-
height:96px;/* initial full height */
6-
margin-bottom:16px;/* space under header in initial state */
7-
background: transparent;
8-
transition:
9-
height0.28scubic-bezier(0.2,0.9,0.3,1),
10-
margin-bottom0.28scubic-bezier(0.2,0.9,0.3,1),
11-
background-color0.28scubic-bezier(0.2,0.9,0.3,1),
12-
box-shadow0.28scubic-bezier(0.2,0.9,0.3,1);
13-
}
14-
15-
/* preserve original header-inner layout initially (items-start) */
16-
#sticky-header.compact .header-inner {
17-
padding:016px;
18-
align-items: center;/* ensure header rows center vertically */
19-
height:64px;/* enforce exact height match to header */
20-
}
21-
22-
/* Make sure header-right stays vertically centered always */
23-
#sticky-header .header-right {
24-
display: flex;
25-
align-items: center;
26-
}
27-
28-
/* Title: use transform for smoothness */
29-
#sticky-header .header-lefth1 {
30-
transform-origin: left center;
31-
transition:
32-
transform0.28scubic-bezier(0.2,0.9,0.3,1),
33-
font-size0.28scubic-bezier(0.2,0.9,0.3,1);
34-
transform:scale(1);
35-
margin:0;/* avoid unexpected top/bottom margin */
36-
}
37-
38-
#sticky-header .header-left .header-subtitle {
39-
transition:
40-
opacity0.18s ease,
41-
transform0.18s ease;
42-
opacity:1;
43-
margin-top:0.25rem;
44-
font-size:0.95rem;
45-
}
46-
47-
/* right side controls smoothing */
48-
#sticky-header .header-right>* {
49-
transition:
50-
transform0.28scubic-bezier(0.2,0.9,0.3,1),
51-
opacity0.28s ease,
52-
padding0.28scubic-bezier(0.2,0.9,0.3,1);
1+
/* Tab panel base styles */
2+
.tab-panel {
3+
/* Panels handle their own internal padding */
534
}
545

55-
/* COMPACT state after scrolling: reduce height, hide subtitle, apply glass */
56-
#sticky-header.compact {
57-
height:64px;
58-
margin-bottom:0;
59-
background-color:rgb(
60-
255255255/80%
61-
);/* slightly more opaque for contrast */
62-
63-
backdrop-filter:blur(8px);
64-
box-shadow:06px20pxrgb(2623/12%);/* slightly stronger shadow for depth */
6+
/* Sidebar navigation */
7+
.sidebar-nav {
8+
position: relative;
9+
z-index:50;
10+
flex-shrink:0;
6511
}
6612

67-
.dark#sticky-header.compact {
68-
background-color:rgb(172439/88%);/* a bit darker in dark mode */
69-
backdrop-filter:blur(8px);
70-
box-shadow:06px20pxrgb(2623/25%);
13+
/* Sidebar scrollbar */
14+
.sidebar-scroll {
15+
scrollbar-width: thin;
16+
scrollbar-color:rgb(156163175/40%) transparent;
7117
}
7218

73-
/* Make header-left a vertical flex that centers its children when compact */
74-
#sticky-header .header-left {
75-
display: block;
19+
/* Sidebar link styling */
20+
.sidebar-link {
21+
color:rgb(107114128);
22+
text-decoration: none;
23+
margin-left:0.25rem;
24+
margin-right:0.25rem;
7625
}
7726

78-
#sticky-header.compact .header-left {
79-
display: flex;
80-
flex-direction: column;
81-
justify-content: center;
82-
height:100%;/* ensure it fills header-inner for perfect centering */
83-
padding:0;/* avoid extra internal spacing */
27+
.sidebar-link:hover {
28+
background-color:rgb(243244246);
29+
color:rgb(172439);
8430
}
8531

86-
/* shrink title using scale for smooth transition (value approximates earlier font-size) */
87-
#sticky-header.compact .header-lefth1 {
88-
transform:scale(0.53)translateY(-1px);
32+
.dark .sidebar-link {
33+
color:rgb(156163175);
8934
}
9035

91-
/* hide subtitle smoothly */
92-
#sticky-header.compact .header-left .header-subtitle {
93-
opacity:0;
94-
transform:translateY(-6px);
95-
pointer-events: none;
96-
height:0;
97-
margin:0;
36+
.dark .sidebar-link:hover {
37+
background-color:rgb(556581);
38+
color:rgb(243244246);
9839
}
9940

100-
/*compact right-side controls: slightly smaller */
101-
#sticky-header .header-team-btn,
102-
#sticky-header .header-admin-btn {
103-
padding:0.25rem0.5rem;
104-
font-size:0.82rem;
41+
/*Active sidebar link */
42+
.sidebar-link.active {
43+
background-color:rgb(238242255);
44+
color:rgb(7970229);
45+
font-weight:600;
10546
}
10647

107-
#sticky-header.compact .header-team-btn,
108-
#sticky-header.compact .header-admin-btn {
109-
padding:0.2rem0.45rem;
110-
font-size:0.78rem;
48+
.dark .sidebar-link.active {
49+
background-color:rgb(4946129/40%);
50+
color:rgb(165180252);
11151
}
11252

113-
#sticky-header .header-user {
114-
padding-left:0;
115-
padding-right:0;
53+
/* Sidebar section headers */
54+
.sidebar-section {
55+
padding-top:0.5rem;
56+
padding-bottom:0.25rem;
11657
}
11758

118-
#sticky-header.compact .header-user {
119-
font-size:0.78rem;
120-
}
121-
122-
#sticky-header .header-logout-btn {
123-
transition:
124-
background-color0.16s ease,
125-
color0.16s ease,
126-
padding0.16s ease;
59+
/* Mobile sidebar overlay */
60+
@media (width <= 1023px) {
61+
.sidebar-nav {
62+
position: fixed;
63+
top:0;
64+
left:0;
65+
height:100vh;
66+
z-index:60;
67+
box-shadow:4px06px-1pxrgb(000/10%);
68+
}
12769
}
12870

129-
#sticky-header.compact .header-logout-btn {
130-
padding:0.25rem0.6rem;
131-
font-size:0.78rem;
71+
/* CodeMirror code example styling (for LLM API Info) */
72+
.code-example {
73+
display: none;
13274
}
13375

134-
/* subtle child pop for nicer visual */
135-
#sticky-header.compact .header-right>* {
136-
transform:translateY(-2px)scale(0.97);
137-
filter:saturate(1.02);
76+
/* stylelint-disable-next-line selector-class-pattern -- third-party library class */
77+
.code-example+ .CodeMirror {
78+
border-radius:0.5rem;
79+
font-size:0.8125rem;
80+
line-height:1.5;
81+
position: relative;
13882
}
13983

140-
/*ensure dropdowns appear above header */
141-
#sticky-header .z-50 {
142-
z-index:99999;
84+
/*stylelint-disable-next-line selector-class-pattern -- third-party library class */
85+
.code-example+ .CodeMirror.cm-s-monokai {
86+
background:#272822;
14387
}
14488

14589
.error-status {

‎mcpgateway/static/admin.js‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6618,19 +6618,9 @@ function showTab(tabName) {
66186618
}
66196619
});
66206620

6621-
document.querySelectorAll(".tab-link").forEach((l) => {
6621+
document.querySelectorAll(".sidebar-link").forEach((l) => {
66226622
if (l) {
6623-
l.classList.remove(
6624-
"border-indigo-500",
6625-
"text-indigo-600",
6626-
"dark:text-indigo-500",
6627-
"dark:border-indigo-400",
6628-
);
6629-
l.classList.add(
6630-
"border-transparent",
6631-
"text-gray-500",
6632-
"dark:text-gray-400",
6633-
);
6623+
l.classList.remove("active");
66346624
}
66356625
});
66366626

@@ -6643,19 +6633,9 @@ function showTab(tabName) {
66436633
return;
66446634
}
66456635

6646-
const nav = document.querySelector(`[href="#${tabName}"]`);
6636+
const nav = document.querySelector(`.sidebar-link[href="#${tabName}"]`);
66476637
if (nav) {
6648-
nav.classList.add(
6649-
"border-indigo-500",
6650-
"text-indigo-600",
6651-
"dark:text-indigo-500",
6652-
"dark:border-indigo-400",
6653-
);
6654-
nav.classList.remove(
6655-
"border-transparent",
6656-
"text-gray-500",
6657-
"dark:text-gray-400",
6658-
);
6638+
nav.classList.add("active");
66596639
}
66606640

66616641
// Debounced content loading
@@ -16468,7 +16448,7 @@ function initializeTabState() {
1646816448
if (hash) {
1646916449
showTab(hash.slice(1));
1647016450
} else {
16471-
showTab("catalog");
16451+
showTab("gateways");
1647216452
}
1647316453

1647416454
// Pre-load version info if that's the initial tab

0 commit comments

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