Skip to content

Commit 53c4198

Browse files
author
kqlio67
committed
Remove redundant collapsible logic and unify responsive styling
• Remove extra DOM event handlers • Simplify media queries • Update sidebar expansion logic • Clean up stop generating style • Trim duplicate provider sections
1 parent 0637df2 commit 53c4198

File tree

2 files changed

+20
-139
lines changed

2 files changed

+20
-139
lines changed

‎g4f/gui/client/index.html

Lines changed: 0 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -66,121 +66,6 @@
6666
window.share_id = "{{share_id}}";
6767
window.share_url = "{{share_url}}";
6868
window.start_id = "{{conversation_id}}";
69-
70-
// Initialize collapsible sections when the page loads
71-
document.addEventListener('DOMContentLoaded', function() {
72-
const collapsibleHeaders = document.querySelectorAll('.collapsible-header');
73-
collapsibleHeaders.forEach(header => {
74-
// Ensure sections are collapsed by default
75-
const content = header.nextElementSibling;
76-
content.classList.add('hidden');
77-
content.style.display = "none";
78-
content.style.maxHeight = "0";
79-
80-
// Update arrow direction
81-
const arrow = header.querySelector('i.fa-solid');
82-
arrow.classList.remove('fa-chevron-down');
83-
arrow.classList.add('fa-chevron-right');
84-
85-
header.addEventListener('click', function() {
86-
this.classList.toggle('active');
87-
const content = this.nextElementSibling;
88-
const arrow = this.querySelector('i.fa-solid');
89-
90-
if (this.classList.contains('active')) {
91-
content.classList.remove('hidden');
92-
content.style.display = "block";
93-
setTimeout(() => {
94-
content.style.maxHeight = content.scrollHeight + "px";
95-
}, 10);
96-
arrow.classList.remove('fa-chevron-right');
97-
arrow.classList.add('fa-chevron-down');
98-
} else {
99-
content.style.maxHeight = "0";
100-
setTimeout(() => {
101-
content.classList.add('hidden');
102-
content.style.display = "none";
103-
}, 300);
104-
arrow.classList.remove('fa-chevron-down');
105-
arrow.classList.add('fa-chevron-right');
106-
}
107-
});
108-
});
109-
110-
// Override functions to prevent duplicate provider sections
111-
window.setupCollapsibleFields = function() {
112-
// Only initialize the collapsible headers that don't already have event listeners
113-
const collapsibleHeaders = document.querySelectorAll('.collapsible-header:not([data-initialized])');
114-
collapsibleHeaders.forEach(header => {
115-
// Mark as initialized to prevent duplicate event listeners
116-
header.setAttribute('data-initialized', 'true');
117-
118-
// Remove existing event listeners by cloning and replacing
119-
const newHeader = header.cloneNode(true);
120-
header.parentNode.replaceChild(newHeader, header);
121-
122-
newHeader.addEventListener('click', function() {
123-
this.classList.toggle('active');
124-
const content = this.nextElementSibling;
125-
126-
if (content.classList.contains('hidden')) {
127-
content.classList.remove('hidden');
128-
content.style.display = "block";
129-
setTimeout(() => {
130-
content.style.maxHeight = (content.scrollHeight + 100) + "px";
131-
}, 10);
132-
} else {
133-
content.style.maxHeight = "0";
134-
setTimeout(() => {
135-
content.classList.add('hidden');
136-
content.style.display = "none";
137-
}, 300);
138-
}
139-
});
140-
});
141-
};
142-
143-
// Initialize our provider sections
144-
const initializeProviderSections = function() {
145-
// Get our provider sections
146-
const providerSections = document.querySelectorAll('.provider-section');
147-
148-
// Initialize each section
149-
providerSections.forEach(section => {
150-
const header = section.querySelector('.collapsible-header');
151-
const content = section.querySelector('.collapsible-content');
152-
153-
if (header && content) {
154-
// Add click event to header
155-
header.addEventListener('click', function() {
156-
this.classList.toggle('active');
157-
158-
if (this.classList.contains('active')) {
159-
content.classList.remove('hidden');
160-
content.style.display = "block";
161-
setTimeout(() => {
162-
content.style.maxHeight = content.scrollHeight + "px";
163-
}, 10);
164-
} else {
165-
content.style.maxHeight = "0";
166-
setTimeout(() => {
167-
content.classList.add('hidden');
168-
content.style.display = "none";
169-
}, 300);
170-
}
171-
});
172-
}
173-
});
174-
};
175-
176-
// Call the initialization function when the page loads
177-
document.addEventListener('DOMContentLoaded', initializeProviderSections);
178-
179-
// Also call it when the settings panel is opened
180-
document.querySelector('.settings_icon').addEventListener('click', function() {
181-
setTimeout(initializeProviderSections, 100);
182-
});
183-
});
18469
</script>
18570
<title>G4F Chat</title>
18671
</head>

‎g4f/gui/client/static/css/style.css

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -611,15 +611,6 @@ input-count .text {
611611
transition: all 0.3s;
612612
}
613613

614-
@media only screen and (min-width: 40em) {
615-
.stop_generating {
616-
right: 4px;
617-
}
618-
.chat-toolbar .regenerate span {
619-
display: block;
620-
}
621-
}
622-
623614
.chat-toolbar .hide-input {
624615
background: transparent;
625616
border: none;
@@ -966,6 +957,22 @@ input.model:hover
966957
}
967958

968959
@media only screen and (min-width: 40em) {
960+
.sidebar.expanded {
961+
width: 400px;
962+
}
963+
964+
.sidebar.expanded + .chat-container {
965+
margin-left: 400px;
966+
width: calc(100% - 400px);
967+
}
968+
969+
.stop_generating {
970+
right: 4px;
971+
}
972+
.chat-toolbar .regenerate span {
973+
display: block;
974+
}
975+
969976
select, input.model {
970977
width: 200px;
971978
}
@@ -984,7 +991,8 @@ input.model:hover
984991
body:not(.white) .gradient{
985992
display: block;
986993
}
987-
.settings .label:not([for="systemPrompt"]), form .label {
994+
.settings .label:not([for="systemPrompt"]),
995+
form .label {
988996
min-width: 200px;
989997
}
990998
}
@@ -1197,12 +1205,6 @@ ul {
11971205
border-left: 3px solid var(--accent);
11981206
}
11991207

1200-
@media screen and (min-width: 991px) {
1201-
.sidebar.expanded {
1202-
width: 400px;
1203-
}
1204-
}
1205-
12061208
/* Hide duplicate provider sections at the bottom */
12071209
.settings > .paper > .field.collapsible:not(.provider-section) {
12081210
display: none !important;
@@ -1893,18 +1895,12 @@ form textarea {
18931895
.chat-top-panel .new_convo_icon {
18941896
display: none !important;
18951897
}
1896-
}
1897-
1898-
@media only screen and (min-width: 40em) {
1898+
18991899
.sidebar.expanded {
19001900
width: 400px;
19011901
}
1902-
1903-
.sidebar.expanded + .chat-container {
1904-
margin-left: 400px;
1905-
width: calc(100% - 400px);
1906-
}
19071902
}
1903+
19081904
.chat-body {
19091905
flex: 1;
19101906
padding: 10px;

0 commit comments

Comments
 (0)