Skip to content

Commit 493015a

Browse files
bendichterbendichter
committed
Redesign assistant UI with accordion-style sliding panel
Replace basic toggle button with accordion-style tab that slides assistant panel from right edge. Add smooth transitions, improved responsiveness, and better visual feedback for enhanced UX.
1 parent 6533468 commit 493015a

File tree

1 file changed

+149
-67
lines changed

1 file changed

+149
-67
lines changed

‎docs/source/_static/css/nwb_assistant.css‎

Lines changed: 149 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,192 @@
1+
/* Accordion-style assistant toggle tab */
12
.assistant-toggle {
2-
display: none;
33
position: fixed;
4-
right: 20px;
5-
top: 20px;
4+
right: 0;
5+
top: 50%;
6+
transform: translateY(-50%);
67
z-index: 1001;
7-
padding: 8px 16px;
8+
padding: 12px 8px;
89
background-color: #2980b9;
910
color: white;
1011
border: none;
11-
border-radius: 4px;
12+
border-radius: 8px 0 0 8px;
1213
cursor: pointer;
1314
font-size: 14px;
15+
font-weight: bold;
16+
writing-mode: vertical-rl;
17+
text-orientation: mixed;
18+
box-shadow: -2px 0 5px rgba(0,0,0,0.2);
19+
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, right 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
20+
min-height: 80px;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
1424
}
1525

16-
/* Hide button when assistant is open */
26+
.assistant-toggle:hover {
27+
background-color: #3498db;
28+
transform: translateY(-50%) translateX(-2px);
29+
box-shadow: -4px 0 8px rgba(0,0,0,0.3);
30+
}
31+
32+
/* Change tab appearance when assistant is open */
1733
.assistant-container.show ~ .assistant-toggle {
18-
display: none !important;
34+
background-color: #e74c3c;
35+
right: 400px;
1936
}
2037

21-
.assistant-toggle:hover {
22-
background-color: #3498db;
38+
.assistant-container.show ~ .assistant-toggle {
39+
font-size: 0; /* Hide original text */
40+
}
41+
42+
.assistant-container.show ~ .assistant-toggle::before {
43+
content: "Close Assistant";
44+
font-size: 14px; /* Restore font size for the pseudo-element */
45+
}
46+
47+
.assistant-container.show ~ .assistant-toggle:hover {
48+
background-color: #c0392b;
2349
}
2450

2551
.assistant-container {
26-
display: none;
52+
position: fixed;
53+
right: 0;
54+
top: 0;
55+
width: 0;
56+
height: 100vh;
57+
z-index: 1000;
58+
background: white;
59+
border-left: 1px solid #ddd;
60+
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
61+
transition: width 0.3s ease-in-out;
62+
overflow: hidden;
2763
}
2864

29-
/* Show assistant on screens 768px and wider */
30-
@media (min-width: 768px) {
31-
.assistant-toggle {
32-
display: block;
33-
}
65+
.assistant-container.show {
66+
width: 400px;
67+
}
3468

35-
.assistant-container {
36-
display: block;
37-
visibility: hidden;
38-
position: fixed;
39-
right: 0;
40-
top: 0;
41-
width: 400px;
42-
height: 100vh;
43-
z-index: 1000;
44-
transform: translateX(100%);
45-
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
46-
}
69+
.assistant-iframe {
70+
width: 400px;
71+
height: 100%;
72+
border: none;
73+
background: white;
74+
}
4775

48-
.assistant-container.show {
49-
visibility: visible;
50-
transform: translateX(0);
51-
}
76+
/* Add close button inside the assistant */
77+
.assistant-close {
78+
position: absolute;
79+
top: 10px;
80+
right: 10px;
81+
background: #e74c3c;
82+
color: white;
83+
border: none;
84+
border-radius: 50%;
85+
width: 30px;
86+
height: 30px;
87+
cursor: pointer;
88+
font-size: 18px;
89+
line-height: 1;
90+
z-index: 1002;
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
}
5295

53-
.assistant-iframe {
54-
width: 100%;
55-
height: 100%;
56-
border: none;
57-
background: white;
58-
}
96+
.assistant-close:hover {
97+
background: #c0392b;
98+
}
5999

60-
.wy-nav-content {
61-
transition: margin-right 0.3s ease-in-out;
62-
}
100+
/* Adjust main content when assistant is open */
101+
.wy-nav-content {
102+
transition: margin-right 0.3s ease-in-out;
103+
}
63104

64-
.assistant-container.show ~ .wy-nav-content {
65-
margin-right: 400px;
66-
}
105+
.assistant-container.show ~ .wy-nav-content {
106+
margin-right: 400px;
67107
}
68108

69-
/* For larger screens, use more available space */
70-
@media (min-width: 1300px) {
71-
.assistant-container {
72-
width: calc(100vw - 1140px);
109+
/* Tablet and medium screens */
110+
@media (max-width: 1200px) and (min-width: 768px) {
111+
.assistant-container.show {
112+
width: 350px;
73113
}
74-
114+
115+
.assistant-iframe {
116+
width: 350px;
117+
}
118+
75119
.assistant-container.show ~ .wy-nav-content {
76-
margin-right: calc(100vw - 1140px);
120+
margin-right: 350px;
121+
}
122+
123+
.assistant-container.show ~ .assistant-toggle {
124+
right: 350px;
77125
}
78126
}
79127

80-
/* For mobile devices, make assistant full-screen overlay */
128+
/* Mobile devices - full overlay */
81129
@media (max-width: 767px) {
82130
.assistant-toggle {
83-
display: block;
131+
right: 10px;
132+
top: 20px;
133+
transform: none;
134+
writing-mode: horizontal-tb;
135+
text-orientation: unset;
136+
border-radius: 4px;
137+
padding: 8px 12px;
138+
min-height: auto;
84139
}
85140

86-
.assistant-container {
87-
display: block;
88-
visibility: hidden;
141+
.assistant-toggle:hover {
142+
transform: translateX(-2px);
143+
}
144+
145+
.assistant-container.show ~ .assistant-toggle {
89146
position: fixed;
90-
right: 0;
91-
top: 0;
92-
width: 100vw;
93-
height: 100vh;
94-
z-index: 1000;
95-
transform: translateX(100%);
96-
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
147+
right: 10px;
148+
top: 20px;
149+
transform: none;
150+
z-index: 1003;
151+
}
152+
153+
.assistant-container {
154+
width: 0;
155+
border-left: none;
97156
}
98157

99158
.assistant-container.show {
100-
visibility: visible;
101-
transform: translateX(0);
159+
width: 100vw;
102160
}
103161

104162
.assistant-iframe {
105-
width: 100%;
106-
height: 100%;
107-
border: none;
108-
background: white;
163+
width: 100vw;
164+
}
165+
166+
.assistant-container.show ~ .wy-nav-content {
167+
margin-right: 0;
168+
}
169+
}
170+
171+
/* For very large screens, use more space */
172+
@media (min-width: 1400px) {
173+
.assistant-container.show {
174+
width: calc(100vw - 1140px);
175+
max-width: 600px;
176+
}
177+
178+
.assistant-iframe {
179+
width: calc(100vw - 1140px);
180+
max-width: 600px;
181+
}
182+
183+
.assistant-container.show ~ .wy-nav-content {
184+
margin-right: calc(100vw - 1140px);
185+
max-margin-right: 600px;
186+
}
187+
188+
.assistant-container.show ~ .assistant-toggle {
189+
right: calc(100vw - 1140px);
190+
max-right: 600px;
109191
}
110192
}

0 commit comments

Comments
 (0)