Skip to content

Commit 5970a95

Browse files
0xtbarkan0xtbarkan
committed
edit the web viewr for the computer networking
1 parent ba3066c commit 5970a95

3 files changed

Lines changed: 120 additions & 50 deletions

File tree

‎cn_webviewer/app.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,7 @@ function setActive(id) {
250250
function go(id) {
251251
setActive(id);
252252
window.scrollTo(0, 0);
253+
closeSidebar(); // close drawer on mobile after navigation
253254
if (id === 'readme') { loadReadme(); return; }
254255
var entry = FLAT[id];
255256
if (!entry) return;
@@ -375,11 +376,35 @@ function loading() { doc().innerHTML = '<p class="spin">&gt;&gt; loading...</p>'
375376
function error(msg) { doc().innerHTML = '<div class="err">' + msg + '</div>'; }
376377
function e(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
377378

379+
// ── MOBILE SIDEBAR TOGGLE ──
380+
function openSidebar() {
381+
document.body.classList.add('sidebar-open');
382+
}
383+
function closeSidebar() {
384+
document.body.classList.remove('sidebar-open');
385+
}
386+
function toggleSidebar() {
387+
document.body.classList.toggle('sidebar-open');
388+
}
389+
378390
// ── EXPOSE ──
379391
window.go = go;
380392

381393
// ── INIT ──
382394
document.addEventListener('DOMContentLoaded', function() {
383395
buildSidebar();
384396
loadReadme();
397+
398+
// hamburger button
399+
var btnMenu = document.getElementById('btn-menu');
400+
if (btnMenu) btnMenu.addEventListener('click', toggleSidebar);
401+
402+
// backdrop closes sidebar
403+
var backdrop = document.getElementById('sidebar-backdrop');
404+
if (backdrop) backdrop.addEventListener('click', closeSidebar);
405+
406+
// close sidebar on Escape key (mobile)
407+
document.addEventListener('keydown', function(e) {
408+
if (e.key === 'Escape') closeSidebar();
409+
});
385410
});

‎cn_webviewer/index.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,14 @@
88
</head>
99
<body>
1010

11-
<!-- PHONE BLOCK -->
12-
<div id="phone">
13-
<div id="phone-inner">
14-
<p>!! ERROR : DISPLAY_SIZE !!</p>
15-
<h2>[ SCREEN TOO SMALL ]</h2>
16-
<p>this guide needs space.<br>open on a <b>laptop or desktop.</b></p>
17-
</div>
18-
</div>
11+
<!-- SIDEBAR BACKDROP (mobile only) -->
12+
<div id="sidebar-backdrop"></div>
1913

2014
<!-- TOP BAR -->
2115
<div id="bar">
22-
<!-- LEFT: icon + title -->
16+
<!-- LEFT: hamburger (mobile) + icon + title -->
2317
<div id="bar-left">
18+
<button id="btn-menu" aria-label="Toggle menu">&#9776;</button>
2419
<span id="bar-icon">
2520
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
2621
<rect x="2" y="3" width="20" height="14" rx="2"/>

‎cn_webviewer/styles.css‎

Lines changed: 91 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
:root {
32
--bg: #0a0a0a;
43
--bg2: #111111;
@@ -105,6 +104,25 @@ body {
105104
flex-shrink: 0;
106105
}
107106

107+
/* hamburger — hidden on desktop */
108+
#btn-menu {
109+
display: none;
110+
background: none;
111+
border: 1px solid var(--b1);
112+
color: var(--tx3);
113+
font-family: inherit;
114+
font-size: 16px;
115+
padding: 3px 9px;
116+
cursor: pointer;
117+
line-height: 1;
118+
transition: color .15s, border-color .15s;
119+
flex-shrink: 0;
120+
}
121+
#btn-menu:hover {
122+
color: var(--g);
123+
border-color: var(--g);
124+
}
125+
108126
/* stats badges (stars / forks) */
109127
.bar-stat {
110128
font-size: 11px;
@@ -448,6 +466,7 @@ body.light #doc table td:first-child {
448466
margin: 8px 0;
449467
}
450468

469+
/* ── SEARCH OVERLAY ── */
451470
#search-overlay {
452471
display: none;
453472
position: fixed;
@@ -606,50 +625,81 @@ body.light #doc table td:first-child {
606625
padding: 1px 4px;
607626
}
608627

609-
#phone {
628+
/* ── SIDEBAR BACKDROP (mobile) ── */
629+
#sidebar-backdrop {
610630
display: none;
611631
position: fixed;
612632
inset: 0;
613-
z-index: 9999;
614-
background: var(--bg);
615-
justify-content: center;
616-
align-items: center;
617-
flex-direction: column;
618-
text-align: center;
619-
padding: 24px;
620-
}
621-
#phone-inner {
622-
border: 2px solid #550000;
623-
border-left: 6px solid #cc3333;
624-
background: #0c0000;
625-
padding: 28px;
626-
max-width: 300px;
627-
}
628-
#phone-inner p:first-child {
629-
color: #cc3333;
630-
font-size: 9px;
631-
letter-spacing: 4px;
632-
margin: 0 0 10px;
633-
}
634-
#phone-inner h2 {
635-
color: #cc3333;
636-
font-size: 16px;
637-
letter-spacing: 2px;
638-
margin: 0 0 12px;
639-
}
640-
#phone-inner p {
641-
color: var(--tx3);
642-
font-size: 12px;
643-
line-height: 1.9;
644-
margin: 0;
645-
}
646-
#phone-inner b {
647-
color: #cc3333;
648-
display: block;
649-
margin-top: 8px;
633+
top: 48px;
634+
background: rgba(0, 0, 0, .65);
635+
z-index: 499;
636+
cursor: pointer;
650637
}
651638

639+
/* ── MOBILE RESPONSIVE ── */
652640
@media (max-width: 860px) {
653-
#phone { display: flex; }
654-
#bar, #layout { display: none; }
641+
642+
/* show hamburger */
643+
#btn-menu { display: flex; }
644+
645+
/* hide heavy bar items */
646+
.bar-stat { display: none; }
647+
.bar-social { display: none; }
648+
649+
/* hide Ctrl+K hint from search button — just show icon */
650+
#btn-search kbd { display: none; }
651+
652+
/* sidebar becomes a fixed drawer */
653+
#sidebar {
654+
position: fixed;
655+
top: 48px;
656+
left: -270px;
657+
height: calc(100vh - 48px);
658+
z-index: 500;
659+
transition: left .22s ease;
660+
/* keep same look — bg3, border — already set above */
661+
}
662+
663+
/* open state */
664+
body.sidebar-open #sidebar {
665+
left: 0;
666+
box-shadow: 4px 0 30px rgba(0, 0, 0, .6);
667+
}
668+
body.sidebar-open #sidebar-backdrop {
669+
display: block;
670+
}
671+
672+
/* main takes full width */
673+
#main {
674+
padding: 20px 16px;
675+
max-width: 100%;
676+
width: 100%;
677+
}
678+
679+
/* tables scroll horizontally on small screens */
680+
#doc table {
681+
display: block;
682+
overflow-x: auto;
683+
-webkit-overflow-scrolling: touch;
684+
}
685+
686+
/* slightly smaller h1 */
687+
#doc h1 {
688+
font-size: 17px;
689+
letter-spacing: 1px;
690+
}
691+
692+
/* code blocks don't overflow */
693+
#doc pre {
694+
font-size: 11.5px;
695+
}
696+
}
697+
698+
/* ── VERY SMALL (< 380px) ── */
699+
@media (max-width: 380px) {
700+
#bar-title {
701+
font-size: 11px;
702+
letter-spacing: 1px;
703+
}
704+
#bar-icon { display: none; }
655705
}

0 commit comments

Comments
 (0)