Skip to content

fix: show .stats-container across all viewport widths ≥768px #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 2 commits into from
May 5, 2026
Merged

fix: show .stats-container across all viewport widths ≥768px #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77abb99
fix: show stats-container in 768px–991px viewport range
Copilot May 4, 2026
63a053e
fix: consolidate navbar media queries to fix Bootstrap breakpoint con…
Copilot May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion desktop-app/resources/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
<a href="https://github.com/ThisIs-Developer/Markdown-Viewer/" class="github-link" title="View on GitHub" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<div id="stats-container" class="stats-container d-flex align-items-center d-none d-lg-flex">
<div id="stats-container" class="stats-container d-flex align-items-center d-none d-md-flex">
<div class="stat-item me-3">
<i class="bi bi-clock me-1"></i> <span id="reading-time">0</span> Min Read
</div>
Expand Down
107 changes: 53 additions & 54 deletions desktop-app/resources/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,28 +354,7 @@ body {
color: var(--text-color);
}

/* Responsive design for mobile */
@media (max-width: 1080px) {
.content-container {
flex-direction: column;
}

.editor-pane, .preview-pane {
flex: none;
height: 50%;
border-right: none;
}

.editor-pane {
border-bottom: 1px solid var(--border-color);
}

.toolbar {
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
}


/* Loading indicators */
.loading {
Expand Down Expand Up @@ -678,11 +657,7 @@ a:focus {
z-index: 1001;
}

@media (max-width: 1080px) {
.mobile-menu {
display: block;
}
}


/* slide‑in panel */
.mobile-menu-panel {
Expand Down Expand Up @@ -899,12 +874,56 @@ a:focus {
font-size: 0.9rem;
}

/* hide desktop-only stats and toolbar on mobile */
@media (max-width: 767px) {
.stats-container.d-none.d-md-flex,
.toolbar.d-none.d-md-flex {
/* ==========================================
NAVBAR RESPONSIVE BREAKPOINTS
>= 1080px : full desktop navbar
< 1080px : mobile hamburger + stacked panes
========================================== */

/* Mobile / tablet (< 1080px): switch to hamburger, stack panes */
@media (max-width: 1079px) {
/* Override Bootstrap d-md-flex / d-md-none so the breakpoint is 1080px */
.stats-container,
.view-mode-group,
.toolbar {
display: none !important;
}
Comment on lines +884 to 890

.mobile-menu {
display: block !important;
}

/* Stack editor and preview vertically */
.content-container {
flex-direction: column;
}

.editor-pane,
.preview-pane {
flex: none;
height: 50%;
border-right: none;
}

.editor-pane {
border-bottom: 1px solid var(--border-color);
}

/* Hide drag-resize divider (touch devices don't use it) */
.resize-divider {
display: none;
}

/* Single-pane view modes: occupy full height */
.content-container.view-editor-only .editor-pane,
.content-container.view-preview-only .preview-pane {
height: 100%;
}

.content-container.view-split .editor-pane,
.content-container.view-split .preview-pane {
height: 50%;
}
}

.github-link {
Expand Down Expand Up @@ -1023,7 +1042,7 @@ a:focus {
flex: 1;
}

/* Responsive adjustments for view mode buttons and toolbar */
/* Compact desktop (< 1280px): icon-only view mode buttons, compact toolbar */
@media (max-width: 1280px) {
/* Icon-only view mode buttons at medium widths */
.view-mode-btn span {
Expand All @@ -1044,11 +1063,7 @@ a:focus {
}
}

@media (max-width: 767px) {
.view-mode-group {
display: none;
}
}


/* ========================================
RESIZE DIVIDER - Story 1.3
Expand Down Expand Up @@ -1095,12 +1110,7 @@ a:focus {
display: none;
}

/* Hide divider on tablet and mobile (no drag resize) */
@media (max-width: 1079px) {
.resize-divider {
display: none;
}
}


/* Prevent text selection during drag */
.resizing {
Expand Down Expand Up @@ -1180,18 +1190,7 @@ a:focus {
RESPONSIVE VIEW MODE FIXES - Story 1.5
======================================== */

/* On tablet/mobile, ensure single-pane modes take full height */
@media (max-width: 1079px) {
.content-container.view-editor-only .editor-pane,
.content-container.view-preview-only .preview-pane {
height: 100%;
}

.content-container.view-split .editor-pane,
.content-container.view-split .preview-pane {
height: 50%;
}
}

/* ========================================
PDF EXPORT TABLE FIX - Rowspan/Colspan
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
<a href="https://github.com/ThisIs-Developer/Markdown-Viewer/" class="github-link" title="View on GitHub" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<div id="stats-container" class="stats-container d-flex align-items-center d-none d-lg-flex">
<div id="stats-container" class="stats-container d-flex align-items-center d-none d-md-flex">
<div class="stat-item me-3">
<i class="bi bi-clock me-1"></i> <span id="reading-time">0</span> Min Read
</div>
Expand Down
107 changes: 53 additions & 54 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,28 +354,7 @@ body {
color: var(--text-color);
}

/* Responsive design for mobile */
@media (max-width: 1080px) {
.content-container {
flex-direction: column;
}

.editor-pane, .preview-pane {
flex: none;
height: 50%;
border-right: none;
}

.editor-pane {
border-bottom: 1px solid var(--border-color);
}

.toolbar {
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
}


/* Loading indicators */
.loading {
Expand Down Expand Up @@ -678,11 +657,7 @@ a:focus {
z-index: 1001;
}

@media (max-width: 1080px) {
.mobile-menu {
display: block;
}
}


/* slide‑in panel */
.mobile-menu-panel {
Expand Down Expand Up @@ -899,12 +874,56 @@ a:focus {
font-size: 0.9rem;
}

/* hide desktop-only stats and toolbar on mobile */
@media (max-width: 767px) {
.stats-container.d-none.d-md-flex,
.toolbar.d-none.d-md-flex {
/* ==========================================
NAVBAR RESPONSIVE BREAKPOINTS
>= 1080px : full desktop navbar
< 1080px : mobile hamburger + stacked panes
========================================== */

/* Mobile / tablet (< 1080px): switch to hamburger, stack panes */
@media (max-width: 1079px) {
/* Override Bootstrap d-md-flex / d-md-none so the breakpoint is 1080px */
.stats-container,
.view-mode-group,
.toolbar {
display: none !important;
}
Comment on lines +884 to 890

.mobile-menu {
display: block !important;
}

/* Stack editor and preview vertically */
.content-container {
flex-direction: column;
}

.editor-pane,
.preview-pane {
flex: none;
height: 50%;
border-right: none;
}

.editor-pane {
border-bottom: 1px solid var(--border-color);
}

/* Hide drag-resize divider (touch devices don't use it) */
.resize-divider {
display: none;
}

/* Single-pane view modes: occupy full height */
.content-container.view-editor-only .editor-pane,
.content-container.view-preview-only .preview-pane {
height: 100%;
}

.content-container.view-split .editor-pane,
.content-container.view-split .preview-pane {
height: 50%;
}
}

.github-link {
Expand Down Expand Up @@ -1023,7 +1042,7 @@ a:focus {
flex: 1;
}

/* Responsive adjustments for view mode buttons and toolbar */
/* Compact desktop (< 1280px): icon-only view mode buttons, compact toolbar */
@media (max-width: 1280px) {
/* Icon-only view mode buttons at medium widths */
.view-mode-btn span {
Expand All @@ -1044,11 +1063,7 @@ a:focus {
}
}

@media (max-width: 767px) {
.view-mode-group {
display: none;
}
}


/* ========================================
RESIZE DIVIDER - Story 1.3
Expand Down Expand Up @@ -1095,12 +1110,7 @@ a:focus {
display: none;
}

/* Hide divider on tablet and mobile (no drag resize) */
@media (max-width: 1079px) {
.resize-divider {
display: none;
}
}


/* Prevent text selection during drag */
.resizing {
Expand Down Expand Up @@ -1180,18 +1190,7 @@ a:focus {
RESPONSIVE VIEW MODE FIXES - Story 1.5
======================================== */

/* On tablet/mobile, ensure single-pane modes take full height */
@media (max-width: 1079px) {
.content-container.view-editor-only .editor-pane,
.content-container.view-preview-only .preview-pane {
height: 100%;
}

.content-container.view-split .editor-pane,
.content-container.view-split .preview-pane {
height: 50%;
}
}

/* ========================================
PDF EXPORT TABLE FIX - Rowspan/Colspan
Expand Down
Loading