Skip to content

Commit 8eed3cc

Browse files
bendichterrly
bendichter
and
rly
authored
Refactor CSS for assistant component: adjust media queries and container widths for better responsiveness (#2124)
Co-authored-by: Ryan Ly <[email protected]>
1 parent 07495a8 commit 8eed3cc

File tree

2 files changed

+161
-30
lines changed

2 files changed

+161
-30
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# PyNWB Changelog
22

3+
## PyNWB 3.1.3 (Unreleased)
4+
5+
### Documentation and tutorial enhancements
6+
- Change UI of assistant to be an accordion that is always visible. [#2124](https://github.com/NeurodataWithoutBorders/pynwb/pull/2124)
7+
38
## PyNWB 3.1.2 (August 13, 2025)
49

510
### Fixed

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

Lines changed: 156 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +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;
63+
}
64+
65+
.assistant-container.show {
66+
width: 400px;
2767
}
2868

29-
@media (min-width: 1300px) {
69+
.assistant-iframe {
70+
width: 400px;
71+
height: 100%;
72+
border: none;
73+
background: white;
74+
}
75+
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+
}
95+
96+
.assistant-close:hover {
97+
background: #c0392b;
98+
}
99+
100+
/* Adjust main content when assistant is open */
101+
.wy-nav-content {
102+
transition: margin-right 0.3s ease-in-out;
103+
}
104+
105+
.assistant-container.show ~ .wy-nav-content {
106+
margin-right: 400px;
107+
}
108+
109+
/* Tablet and medium screens */
110+
@media (max-width: 1200px) and (min-width: 768px) {
111+
.assistant-container.show {
112+
width: 350px;
113+
}
114+
115+
.assistant-iframe {
116+
width: 350px;
117+
}
118+
119+
.assistant-container.show ~ .wy-nav-content {
120+
margin-right: 350px;
121+
}
122+
123+
.assistant-container.show ~ .assistant-toggle {
124+
right: 350px;
125+
}
126+
}
127+
128+
/* Mobile devices - full overlay */
129+
@media (max-width: 767px) {
30130
.assistant-toggle {
31-
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;
32139
}
33140

34-
.assistant-container {
35-
display: block;
36-
visibility: hidden;
141+
.assistant-toggle:hover {
142+
transform: translateX(-2px);
143+
}
144+
145+
.assistant-container.show ~ .assistant-toggle {
37146
position: fixed;
38-
right: 0;
39-
top: 0;
40-
width: calc(100vw - 1140px);
41-
height: 100vh;
42-
z-index: 1000;
43-
transform: translateX(100%);
44-
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;
45156
}
46157

47158
.assistant-container.show {
48-
visibility: visible;
49-
transform: translateX(0);
159+
width: 100vw;
50160
}
51161

52162
.assistant-iframe {
53-
width: 100%;
54-
height: 100%;
55-
border: none;
56-
background: white;
163+
width: 100vw;
57164
}
58165

59-
.wy-nav-content {
60-
transition: margin-right 0.3s ease-in-out;
166+
.assistant-container.show ~ .wy-nav-content {
167+
margin-right: 0;
61168
}
169+
}
62170

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+
63183
.assistant-container.show ~ .wy-nav-content {
64184
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;
65191
}
66192
}

0 commit comments

Comments
 (0)