Skip to content

Commit 398ae11

Browse files
awwal-badruawwal-badru
committed
Fix mobile nav hamburger, overflow, and make architecture diagram display on all screen sizes
1 parent 3d1cf58 commit 398ae11

7 files changed

Lines changed: 173 additions & 51 deletions

File tree

‎_site/assets/css/modern-theme.css‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,19 @@
4141
}
4242

4343
/* ── Base ─────────────────────────────────────── */
44-
html { scroll-behavior: smooth; }
44+
html {
45+
scroll-behavior: smooth;
46+
overflow-x: hidden; /* prevent horizontal scroll on narrow screens */
47+
}
4548

4649
body {
4750
font-family: 'Inter', 'Lato', sans-serif !important;
4851
background: var(--body-bg) !important;
4952
color: var(--body-text) !important;
5053
-webkit-font-smoothing: antialiased;
5154
-moz-osx-font-smoothing: grayscale;
55+
overflow-x: hidden; /* belt-and-suspenders on mobile */
56+
max-width: 100vw;
5257
}
5358

5459
/* Push page content below fixed nav */
@@ -399,10 +404,47 @@ a:hover { color: var(--easi-cyan); }
399404

400405
/* ── Responsive nav ────────────────────────────── */
401406
@media (max-width: 767px) {
402-
/* Hide desktop links and GitHub pill — keep .easi-nav-cta so hamburger stays visible */
403-
.easi-nav-links { display: none; }
404-
.easi-nav-btn { display: none; } /* hide GitHub button on mobile */
405-
.easi-hamburger { display: flex; } /* show hamburger */
407+
/* Hide desktop nav links and GitHub pill */
408+
.easi-nav-links { display: none !important; }
409+
.easi-nav-btn { display: none !important; }
410+
411+
/* Always show hamburger, never let it be pushed off-screen */
412+
.easi-hamburger {
413+
display: flex !important;
414+
flex-shrink: 0 !important;
415+
}
416+
417+
/* Let the logo area compress so hamburger always has room */
418+
.easi-nav-logo {
419+
flex: 1 1 0;
420+
min-width: 0;
421+
overflow: hidden;
422+
}
423+
.easi-nav-logo-text {
424+
min-width: 0;
425+
overflow: hidden;
426+
}
427+
.easi-nav-logo-badge {
428+
width: 32px !important;
429+
height: 32px !important;
430+
font-size: 15px !important;
431+
flex-shrink: 0;
432+
}
433+
.easi-nav-logo-title {
434+
font-size: 0.72rem !important;
435+
overflow: hidden;
436+
text-overflow: ellipsis;
437+
white-space: nowrap;
438+
max-width: calc(100vw - 130px); /* leave room for badge + hamburger */
439+
}
440+
.easi-nav-logo-sub {
441+
display: none; /* hide subtitle on mobile — too long */
442+
}
443+
444+
/* Ensure CTA wrapper doesn't get hidden */
445+
.easi-nav-cta {
446+
flex-shrink: 0;
447+
}
406448
}
407449

408450
/* ── ═══════════════════════════════════════════

‎_site/atom.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<feed xmlns="http://www.w3.org/2005/Atom">
55
<id>http://localhost:4000/ADAPTIVEEXPERIMENTS/</id>
66
<title>EASI</title>
7-
<updated>2026-04-06T23:57:36-05:00</updated>
7+
<updated>2026-04-07T15:41:48-05:00</updated>
88

99
<subtitle>EASI is an NSF funded project entitled &quot;Experiments-As-a-Service-Infrastructure (EASI) to enable a collaborative ecosystem of experimentation in real-world educational settings&quot;</subtitle>
1010

‎_site/humans.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Theme: http://phlow.github.io/feeling-responsive/
1616

1717
/* SITE */
1818

19-
Last Updated: 2026/04/06
19+
Last Updated: 2026/04/07
2020
Standards: HTML5, CSS3
2121
Software: Sublime Text, Chrome, Jekyll, Git, Imageoptim, JPEGMini, Gulp.js, Sass
2222
Components: Foundation Framework, Modernizr, jQuery, Backstretch.js, Reveal

‎_site/sitemap.xml‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<url>
88
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/404.html</loc>
99

10-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
10+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
1111

1212

1313
<changefreq>monthly</changefreq>
@@ -22,7 +22,7 @@
2222
<url>
2323
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/about/</loc>
2424

25-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
25+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
2626

2727

2828
<changefreq>monthly</changefreq>
@@ -37,7 +37,7 @@
3737
<url>
3838
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/adaptive/</loc>
3939

40-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
40+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
4141

4242

4343
<changefreq>monthly</changefreq>
@@ -52,7 +52,7 @@
5252
<url>
5353
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/agenda/</loc>
5454

55-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
55+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
5656

5757

5858
<changefreq>monthly</changefreq>
@@ -67,7 +67,7 @@
6767
<url>
6868
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/blog/archive/</loc>
6969

70-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
70+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
7171

7272

7373
<changefreq>monthly</changefreq>
@@ -84,7 +84,7 @@
8484
<url>
8585
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/atom.xml</loc>
8686

87-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
87+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
8888

8989

9090
<changefreq>monthly</changefreq>
@@ -101,7 +101,7 @@
101101
<url>
102102
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/contact/</loc>
103103

104-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
104+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
105105

106106

107107
<changefreq>monthly</changefreq>
@@ -116,7 +116,7 @@
116116
<url>
117117
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/easi/</loc>
118118

119-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
119+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
120120

121121

122122
<changefreq>monthly</changefreq>
@@ -131,7 +131,7 @@
131131
<url>
132132
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/feed.xml</loc>
133133

134-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
134+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
135135

136136

137137
<changefreq>monthly</changefreq>
@@ -146,7 +146,7 @@
146146
<url>
147147
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/humans.txt</loc>
148148

149-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
149+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
150150

151151

152152
<changefreq>monthly</changefreq>
@@ -161,7 +161,7 @@
161161
<url>
162162
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/blog/</loc>
163163

164-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
164+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
165165

166166

167167
<changefreq>monthly</changefreq>
@@ -176,7 +176,7 @@
176176
<url>
177177
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/</loc>
178178

179-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
179+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
180180

181181

182182
<changefreq>monthly</changefreq>
@@ -191,7 +191,7 @@
191191
<url>
192192
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/mooclet/</loc>
193193

194-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
194+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
195195

196196

197197
<changefreq>monthly</changefreq>
@@ -206,7 +206,7 @@
206206
<url>
207207
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/oli/</loc>
208208

209-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
209+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
210210

211211

212212
<changefreq>monthly</changefreq>
@@ -221,7 +221,7 @@
221221
<url>
222222
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/overview/</loc>
223223

224-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
224+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
225225

226226

227227
<changefreq>monthly</changefreq>
@@ -236,7 +236,7 @@
236236
<url>
237237
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/robots.txt</loc>
238238

239-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
239+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
240240

241241

242242
<changefreq>monthly</changefreq>
@@ -255,7 +255,7 @@
255255
<url>
256256
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/search/</loc>
257257

258-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
258+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
259259

260260

261261
<changefreq>monthly</changefreq>
@@ -270,7 +270,7 @@
270270
<url>
271271
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/sitemap.xml</loc>
272272

273-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
273+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
274274

275275

276276
<changefreq>monthly</changefreq>
@@ -287,7 +287,7 @@
287287
<url>
288288
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/support/</loc>
289289

290-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
290+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
291291

292292

293293
<changefreq>monthly</changefreq>
@@ -302,7 +302,7 @@
302302
<url>
303303
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/team/</loc>
304304

305-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
305+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
306306

307307

308308
<changefreq>monthly</changefreq>
@@ -317,7 +317,7 @@
317317
<url>
318318
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/training_material/</loc>
319319

320-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
320+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
321321

322322

323323
<changefreq>monthly</changefreq>
@@ -332,7 +332,7 @@
332332
<url>
333333
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/upgrade/</loc>
334334

335-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
335+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
336336

337337

338338
<changefreq>monthly</changefreq>
@@ -347,7 +347,7 @@
347347
<url>
348348
<loc>http://localhost:4000/ADAPTIVEEXPERIMENTS/workshops/</loc>
349349

350-
<lastmod>2026-04-06T23:57:36-05:00</lastmod>
350+
<lastmod>2026-04-07T15:41:48-05:00</lastmod>
351351

352352

353353
<changefreq>monthly</changefreq>

‎_site/upgrade/index.html‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -533,7 +533,7 @@ <h1>UpGrade</h1>
533533
}
534534

535535
/* node hover/active */
536-
.d-node { cursor: pointer; transition: filter .22s ease; }
536+
.d-node { cursor: pointer; transition: filter .22s ease; touch-action: manipulation; }
537537
.d-node:hover { filter: brightness(1.2) drop-shadow(0 0 10px rgba(120,200,255,.5)); }
538538
.d-node.active { filter: brightness(1.28) drop-shadow(0 0 18px rgba(120,200,255,.8)); }
539539
.d-node rect, .d-node ellipse { transition: stroke-width .2s; }
@@ -589,7 +589,7 @@ <h1>UpGrade</h1>
589589
MOBILE CARD FLOW (< 768px)
590590
════════════════════════════════════════════════ */
591591
.arch-flow {
592-
display: none; /* hidden on desktop */
592+
display: none; /* disabled — SVG is shown on all screen sizes */
593593
flex-direction: column;
594594
gap: 0;
595595
}
@@ -698,16 +698,35 @@ <h1>UpGrade</h1>
698698
}
699699
.how-table tr:hover td { background: rgba(122,184,245,.04); }
700700

701-
/* ── Responsive breakpoints ─────────────────── */
701+
/* ── Responsive breakpoints ───────────────── */
702+
/* SVG diagram is shown on ALL screen sizes.
703+
On small phones it becomes horizontally scrollable so
704+
the interactive diagram stays fully functional. */
702705
@media (max-width: 767px) {
703-
.diag-shell { display: none; } /* hide SVG on mobile */
704-
.arch-flow { display: flex; } /* show card flow */
706+
.diag-shell {
707+
overflow-x: auto;
708+
-webkit-overflow-scrolling: touch;
709+
}
710+
#diagSvg {
711+
min-width: 680px; /* keep diagram readable; user can scroll */
712+
height: auto;
713+
}
705714
.arch-intro { font-size: .95rem; }
706715
.how-table th, .how-table td { padding: 9px 10px; font-size: .82rem; }
707716
}
708717

709-
@media (min-width: 768px) and (max-width: 1024px) {
710-
#diagSvg { min-height: 280px; }
718+
/* Tablets + iPads (640px–1024px): scale SVG to fit */
719+
@media (min-width: 640px) and (max-width: 1024px) {
720+
#diagSvg {
721+
min-height: 240px;
722+
height: auto;
723+
}
724+
.diag-toolbar {
725+
padding: 10px 14px;
726+
}
727+
.diag-hint {
728+
font-size: .7rem;
729+
}
711730
}
712731
</style>
713732

@@ -729,7 +748,7 @@ <h1>UpGrade</h1>
729748

730749
<div class="diag-toolbar">
731750
<span class="diag-toolbar-label">System Architecture Overview</span>
732-
<span class="diag-hint">Click a node · hover to highlight</span>
751+
<span class="diag-hint">Click / tap a node · hover to highlight</span>
733752
</div>
734753

735754
<svg id="diagSvg" viewBox="-10 0 1160 490" preserveAspectRatio="xMidYMid meet" aria-label="EASI Architecture Diagram">

0 commit comments

Comments
 (0)