Skip to content

Commit e9b155e

Browse files
ThisIs-DeveloperThisIs-Developer
committed
fix(mobile): hide dock toggle and remove language selector flags on mobile viewports
1 parent 81584fa commit e9b155e

6 files changed

Lines changed: 124 additions & 16 deletions

File tree

‎desktop-app/resources/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -297,10 +297,10 @@ <h5>Menu</h5>
297297
<i class="bi bi-translate me-2"></i> Language: <span id="mobile-current-lang-label">English</span>
298298
</button>
299299
<ul class="dropdown-menu w-100" aria-labelledby="mobileLanguageDropdown">
300-
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">🇺🇸 English</a></li>
301-
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">🇨🇳 简体中文</a></li>
302-
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">🇯🇵 日本語</a></li>
303-
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">🇰🇷 한국어</a></li>
300+
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
301+
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
302+
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
303+
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">한국어</a></li>
304304
</ul>
305305
</div>
306306
<button id="mobile-theme-toggle" class="mobile-menu-item" title="Toggle Dark Mode">

‎desktop-app/resources/js/script.js‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3953,12 +3953,33 @@ This is a fully client-side application. Your content never leaves your browser
39533953

39543954
let frPreferredDocked = false;
39553955

3956-
function toggleFrDockMode() {
3956+
function toggleFrDockMode(forceFloat = false) {
39573957
const panel = document.getElementById('find-replace-modal');
39583958
const dockBtn = document.getElementById('find-replace-dock');
39593959
const contentCont = document.querySelector('.content-container');
39603960
if (!panel || !dockBtn || !contentCont) return;
39613961

3962+
if (window.innerWidth <= 768 || forceFloat) {
3963+
isFrDocked = false;
3964+
panel.classList.remove('docked');
3965+
if (panel.parentElement !== document.body) {
3966+
document.body.appendChild(panel);
3967+
}
3968+
contentCont.classList.remove('fr-docked');
3969+
contentCont.style.setProperty('--dock-width', '0px');
3970+
3971+
panel.style.top = '';
3972+
panel.style.left = '';
3973+
panel.style.right = '';
3974+
3975+
dockBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i>';
3976+
dockBtn.title = "Toggle Dock Mode";
3977+
3978+
panel.style.display = 'flex';
3979+
applyPaneWidths();
3980+
return;
3981+
}
3982+
39623983
isFrDocked = !isFrDocked;
39633984

39643985
// Save preference to localStorage
@@ -4119,7 +4140,12 @@ This is a fully client-side application. Your content never leaves your browser
41194140
}
41204141

41214142
// Restore docked/floating mode preference
4122-
const wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
4143+
let wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
4144+
4145+
// Force floating-only mode on mobile/tablet viewports
4146+
if (window.innerWidth <= 768) {
4147+
wasDockedPref = false;
4148+
}
41234149

41244150
if (wasDockedPref) {
41254151
isFrDocked = false; // Set false so toggleFrDockMode() turns it to true
@@ -4571,6 +4597,7 @@ This is a fully client-side application. Your content never leaves your browser
45714597
}
45724598

45734599
function startResize(e) {
4600+
if (window.innerWidth <= 768) return;
45744601
if (currentViewMode !== 'split') return;
45754602
e.preventDefault();
45764603
isResizing = true;
@@ -4579,6 +4606,7 @@ This is a fully client-side application. Your content never leaves your browser
45794606
}
45804607

45814608
function startResizeTouch(e) {
4609+
if (window.innerWidth <= 768) return;
45824610
if (currentViewMode !== 'split') return;
45834611
e.preventDefault();
45844612
isResizing = true;
@@ -4625,6 +4653,10 @@ This is a fully client-side application. Your content never leaves your browser
46254653
}
46264654

46274655
function applyPaneWidths() {
4656+
if (window.innerWidth <= 768) {
4657+
resetPaneWidths();
4658+
return;
4659+
}
46284660
if (currentViewMode !== 'split') return;
46294661

46304662
const previewPercent = 100 - editorWidthPercent;
@@ -4733,7 +4765,12 @@ This is a fully client-side application. Your content never leaves your browser
47334765

47344766
// Initialize resizer - Story 1.3
47354767
initResizer();
4736-
window.addEventListener('resize', scheduleLineNumberUpdate);
4768+
window.addEventListener('resize', () => {
4769+
scheduleLineNumberUpdate();
4770+
if (window.innerWidth <= 768 && isFrDocked && isFindModalOpen) {
4771+
toggleFrDockMode(true);
4772+
}
4773+
});
47374774

47384775
// View Mode Button Event Listeners - Story 1.1
47394776
viewModeButtons.forEach(btn => {
@@ -6648,7 +6685,7 @@ This is a fully client-side application. Your content never leaves your browser
66486685
}
66496686
const mobileLabelEl = document.getElementById('mobile-current-lang-label');
66506687
if (mobileLabelEl) {
6651-
const flags = { en: "🇺🇸 English", zh: "🇨🇳 简体中文", ja: "🇯🇵 日本語", ko: "🇰🇷 한국어" };
6688+
const flags = { en: "English", zh: "简体中文", ja: "日本語", ko: "한국어" };
66526689
mobileLabelEl.textContent = flags[lang];
66536690
}
66546691

‎desktop-app/resources/styles.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3376,4 +3376,21 @@ html[lang="ko"] .markdown-body h1, html[lang="ko"] .markdown-body h2, html[lang=
33763376
flex: 1;
33773377
position: relative;
33783378
overflow: hidden;
3379+
}
3380+
3381+
/* ========================================
3382+
MOBILE FIND PANEL RESPONSIVE FIXES
3383+
======================================== */
3384+
@media (max-width: 768px) {
3385+
#find-replace-dock {
3386+
display: none !important;
3387+
}
3388+
3389+
/* Prevent full screen expansion of floating panel on small mobile viewports */
3390+
.find-replace-panel {
3391+
width: calc(100% - 24px) !important;
3392+
right: 12px !important;
3393+
left: 12px !important;
3394+
top: 80px !important;
3395+
}
33793396
}

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -294,10 +294,10 @@ <h5>Menu</h5>
294294
<i class="bi bi-translate me-2"></i> Language: <span id="mobile-current-lang-label">English</span>
295295
</button>
296296
<ul class="dropdown-menu w-100" aria-labelledby="mobileLanguageDropdown">
297-
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">🇺🇸 English</a></li>
298-
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">🇨🇳 简体中文</a></li>
299-
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">🇯🇵 日本語</a></li>
300-
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">🇰🇷 한국어</a></li>
297+
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
298+
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
299+
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
300+
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">한국어</a></li>
301301
</ul>
302302
</div>
303303
<button id="mobile-theme-toggle" class="mobile-menu-item" title="Toggle Dark Mode">

‎script.js‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3953,12 +3953,33 @@ This is a fully client-side application. Your content never leaves your browser
39533953

39543954
let frPreferredDocked = false;
39553955

3956-
function toggleFrDockMode() {
3956+
function toggleFrDockMode(forceFloat = false) {
39573957
const panel = document.getElementById('find-replace-modal');
39583958
const dockBtn = document.getElementById('find-replace-dock');
39593959
const contentCont = document.querySelector('.content-container');
39603960
if (!panel || !dockBtn || !contentCont) return;
39613961

3962+
if (window.innerWidth <= 768 || forceFloat) {
3963+
isFrDocked = false;
3964+
panel.classList.remove('docked');
3965+
if (panel.parentElement !== document.body) {
3966+
document.body.appendChild(panel);
3967+
}
3968+
contentCont.classList.remove('fr-docked');
3969+
contentCont.style.setProperty('--dock-width', '0px');
3970+
3971+
panel.style.top = '';
3972+
panel.style.left = '';
3973+
panel.style.right = '';
3974+
3975+
dockBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i>';
3976+
dockBtn.title = "Toggle Dock Mode";
3977+
3978+
panel.style.display = 'flex';
3979+
applyPaneWidths();
3980+
return;
3981+
}
3982+
39623983
isFrDocked = !isFrDocked;
39633984

39643985
// Save preference to localStorage
@@ -4119,7 +4140,12 @@ This is a fully client-side application. Your content never leaves your browser
41194140
}
41204141

41214142
// Restore docked/floating mode preference
4122-
const wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
4143+
let wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
4144+
4145+
// Force floating-only mode on mobile/tablet viewports
4146+
if (window.innerWidth <= 768) {
4147+
wasDockedPref = false;
4148+
}
41234149

41244150
if (wasDockedPref) {
41254151
isFrDocked = false; // Set false so toggleFrDockMode() turns it to true
@@ -4571,6 +4597,7 @@ This is a fully client-side application. Your content never leaves your browser
45714597
}
45724598

45734599
function startResize(e) {
4600+
if (window.innerWidth <= 768) return;
45744601
if (currentViewMode !== 'split') return;
45754602
e.preventDefault();
45764603
isResizing = true;
@@ -4579,6 +4606,7 @@ This is a fully client-side application. Your content never leaves your browser
45794606
}
45804607

45814608
function startResizeTouch(e) {
4609+
if (window.innerWidth <= 768) return;
45824610
if (currentViewMode !== 'split') return;
45834611
e.preventDefault();
45844612
isResizing = true;
@@ -4625,6 +4653,10 @@ This is a fully client-side application. Your content never leaves your browser
46254653
}
46264654

46274655
function applyPaneWidths() {
4656+
if (window.innerWidth <= 768) {
4657+
resetPaneWidths();
4658+
return;
4659+
}
46284660
if (currentViewMode !== 'split') return;
46294661

46304662
const previewPercent = 100 - editorWidthPercent;
@@ -4733,7 +4765,12 @@ This is a fully client-side application. Your content never leaves your browser
47334765

47344766
// Initialize resizer - Story 1.3
47354767
initResizer();
4736-
window.addEventListener('resize', scheduleLineNumberUpdate);
4768+
window.addEventListener('resize', () => {
4769+
scheduleLineNumberUpdate();
4770+
if (window.innerWidth <= 768 && isFrDocked && isFindModalOpen) {
4771+
toggleFrDockMode(true);
4772+
}
4773+
});
47374774

47384775
// View Mode Button Event Listeners - Story 1.1
47394776
viewModeButtons.forEach(btn => {
@@ -6648,7 +6685,7 @@ This is a fully client-side application. Your content never leaves your browser
66486685
}
66496686
const mobileLabelEl = document.getElementById('mobile-current-lang-label');
66506687
if (mobileLabelEl) {
6651-
const flags = { en: "🇺🇸 English", zh: "🇨🇳 简体中文", ja: "🇯🇵 日本語", ko: "🇰🇷 한국어" };
6688+
const flags = { en: "English", zh: "简体中文", ja: "日本語", ko: "한국어" };
66526689
mobileLabelEl.textContent = flags[lang];
66536690
}
66546691

‎styles.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3376,4 +3376,21 @@ html[lang="ko"] .markdown-body h1, html[lang="ko"] .markdown-body h2, html[lang=
33763376
flex: 1;
33773377
position: relative;
33783378
overflow: hidden;
3379+
}
3380+
3381+
/* ========================================
3382+
MOBILE FIND PANEL RESPONSIVE FIXES
3383+
======================================== */
3384+
@media (max-width: 768px) {
3385+
#find-replace-dock {
3386+
display: none !important;
3387+
}
3388+
3389+
/* Prevent full screen expansion of floating panel on small mobile viewports */
3390+
.find-replace-panel {
3391+
width: calc(100% - 24px) !important;
3392+
right: 12px !important;
3393+
left: 12px !important;
3394+
top: 80px !important;
3395+
}
33793396
}

0 commit comments

Comments
 (0)